How to use zora - 10 common examples

/* ------------------------------ constructors ------------------------------ */

test('createRegl()', t => {
  const dim = 200;
  const canvas = createCanvas(dim, dim);
  const gl = canvas.getContext('webgl');

  t.equal(gl.drawingBufferWidth, dim, `width should be ${dim}px`);
  t.equal(gl.drawingBufferHeight, dim, `height should be ${dim}px`);

  const regl = createRegl(canvas);

  t.ok(!!regl, 'regl should be instanciated');
});

test('createScatterplot()', t => {
  const canvas = createCanvas();
  const scatterplot = createScatterplot({ canvas });

  t.equal(scatterplot.get('canvas'), canvas, 'canvas object should equal');
  t.equal(
    scatterplot.get('colors'),
    DEFAULT_COLORS,
    'scatterplot should have default colors'
  );
  t.equal(
    scatterplot.get('pointSize'),
    DEFAULT_POINT_SIZE,
    'scatterplot should have default point size'
  );
  t.equal(
    scatterplot.get('pointSizeSelected'),

const { test } = require('zora');

/* This tests based on "The pitfalls of verifying floating-point computations" by David Monniaux  */
/* [PDF] https://hal.archives-ouvertes.fr/hal-00128124/file/floating-point-article.pdf            */

test('Simplified floating point paranoia in javascript', t => {
  expected = Infinity;
  actual = (1e308 + 1e308) / 1e308;
  t.ok(actual == expected, 'Infinity');
  actual = 0/0;
  t.ok(isNaN(actual), 'NaN');
  expected = 1.0000000000000002;
  actual = 1 / (1 - Math.pow(2,-53))
  t.ok(actual == expected, 'double rounding 1');
  expected = Infinity;
  actual = 1e1023 * (2 - Math.pow(2, -52))
  t.ok(actual == expected, 'double rounding 2');
  expected = 9007199254740994;
  actual = 1 - 1/65536 + 9007199254740994;
  t.ok(actual == expected, 'SSE2 rounding 1');
  expected = 1.1125369292536007e-308;
  actual = 1.5 * 2.2250738585072014e-308 - 2.2250738585072014e-308;

import test from 'zora';
import { isShallowEqual, pairify } from '../dist/src/util';
import { traverse } from '../dist/src/traverse';
import { h } from '../dist/src';
test('should traverse a tree (going deep first)', t => {
    const tree = h("ul", { id: "1" },
        h("li", { id: "2" },
            h("span", { id: "3" }),
            h("span", { id: "4" })),
        h("li", { id: "5" },
            h("span", { id: "6" })),
        h("li", { id: "7" }));
    const sequence = [...traverse(tree)].map(n => n.props.id);
    t.deepEqual(sequence, ['1', '2', '3', '4', '5', '6', '7']);
});
test('pair key to value object of an object (aka Object.entries)', t => {
    const holder = { a: 1, b: 2, c: 3, d: 4 };
    const f = pairify(holder);
    const data = Object.keys(holder).map(f);
    t.deepEqual(data, [['a', 1], ['b', 2], ['c', 3], ['d', 4]]);
});

const StaticComponent = (props: ComponentInput, setState): VNode => {
        if (!update) {
            update = setState;
        }
        return <p>{props.foo}</p>;
    };
    const Comp = withIdempotentState(StaticComponent);
    const container = document.createElement('div');
    mount((props: ComponentInput) =&gt; , {foo: 'bar'}, container);
    t.equal(container.innerHTML, '<p>bar</p>');
    await waitNextTick();
    update({foo: 'bis'});
    t.equal(container.innerHTML, '<p>bis</p>');
});
test('withIdempotentState: should create isolated state for each component', async t =&gt; {
    let update1 = null;
    let update2 = null;
    const Comp = withIdempotentState(({foo}: ComponentInput, setState) =&gt; {
        if (!update1) {
            update1 = setState;
        } else if (!update2) {
            update2 = setState;
        }

        return <p>{foo}</p>;
    });
    const container = document.createElement('div');
    mount(({foo1, foo2}) =&gt; <div></div>, {
        foo1: 'bar',
        foo2: 'bar2'
    }, container);

import test from 'zora';
import { mount, h } from '../dist/src';
test('mount a simple component', t => {
    const container = document.createElement('div');
    const Comp = (props) => (h("h1", null,
        h("span", { id: props.id }, props.greeting)));
    mount(Comp, { id: 123, greeting: 'hello world' }, container);
    t.equal(container.innerHTML, '<h1><span id="123">hello world</span></h1>');
});
test('mount composed component', t =&gt; {
    const container = document.createElement('div');
    const Comp = (props) =&gt; (h("h1", null,
        h("span", { id: props.id }, props.greeting)));
    const Container = (props) =&gt; (h("section", null,
        h(Comp, { id: "567", greeting: "hello you" })));
    mount(Container, {}, container);
    t.equal(container.innerHTML, '<section><h1><span id="567">hello you</span></h1></section>');
});
test('mount a component with inner child', t =&gt; {
    const container = document.createElement('div');
    const Comp = (props) =&gt; (h("h1", null,
        h("span", { id: props.id }, props.greeting)));
    const Container = (props) =&gt; (h("section", null, props.children));
    mount(() =&gt; h(Container, null,
        h(Comp, { id: "567", greeting: "hello world" })), {}, container);
    t.equal(container.innerHTML, '<section><h1><span id="567">hello world</span></h1></section>');

t.deepEqual(vnode, {
        nodeType: 'p',
        lifeCycle: 0,
        props: {
            children: [{
                    nodeType: 'Text',
                    lifeCycle: 0,
                    children: [],
                    props: { value: 'hello world' }
                }],
            id: 1
        },
        children: []
    });
});
test('use nested combinator to create vnode', t => {
    const combinator = () => () => () => () => (props) => h('p', { id: 'foo' });
    const vnode = h(combinator, {});
    t.deepEqual(vnode, { nodeType: 'p', lifeCycle: 0, props: { id: 'foo' }, children: [] });
});

t.equal(
    scatterplot.get('lassoColor'),
    lassoColor,
    `lassoColor should be set to ${lassoColor}`
  );

  scatterplot.set({ lassoColor: null });

  t.equal(
    scatterplot.get('lassoColor'),
    lassoColor,
    'lassoColor should not be nullifyable'
  );
});

test('set({ pointOutlineWidth })', async t => {
  const scatterplot = createScatterplot({ canvas: createCanvas() });

  const pointOutlineWidth = 42;

  scatterplot.set({ pointOutlineWidth });

  t.equal(
    scatterplot.get('pointOutlineWidth'),
    pointOutlineWidth,
    `pointOutlineWidth should be set to ${pointOutlineWidth}`
  );

  scatterplot.set({ pointOutlineWidth: 0 });

  t.equal(
    scatterplot.get('pointOutlineWidth'),

t.equal(scatterplot.get('width'), w2, `width should be set to ${w2}px`);
  t.equal(scatterplot.get('height'), h2, `height should be set to ${h2}px`);

  t.equal(
    gl.drawingBufferWidth,
    w2 * window.devicePixelRatio,
    `width should be set to ${w2 * window.devicePixelRatio}px`
  );
  t.equal(
    gl.drawingBufferHeight,
    h2 * window.devicePixelRatio,
    `height should be set to ${h2 * window.devicePixelRatio}px`
  );
});

test('set({ aspectRatio })', t => {
  const canvas = createCanvas(400, 200);
  const scatterplot = createScatterplot({ canvas, width: 400, height: 200 });

  const aspectRatio = 2;
  scatterplot.set({ aspectRatio });

  t.equal(
    scatterplot.get('aspectRatio'),
    aspectRatio,
    `aspectRatio should be set to ${aspectRatio}`
  );
});

test('set({ background })', t => {
  const scatterplot = createScatterplot({ canvas: createCanvas() });

update2 = setState;
        }
        return h("p", null, foo);
    });
    const container = document.createElement('div');
    mount(({ foo1, foo2 }) => h("div", null,
        h(Comp, { foo: foo1 }),
        h(Comp, { foo: foo2 })), { foo1: 'bar', foo2: 'bar2' }, container);
    t.equal(container.innerHTML, '<div><p>bar</p><p>bar2</p></div>');
    await waitNextTick();
    update1({ foo: 'bis' });
    t.equal(container.innerHTML, '<div><p>bis</p><p>bar2</p></div>');
    update2({ foo: 'blah' });
    t.equal(container.innerHTML, '<div><p>bis</p><p>blah</p></div>');
});
test('withIdempotentState: bind an update function to a component', async (t) =&gt; {
    let update = null;
    const StaticComponent = (props, setState) =&gt; {
        if (!update) {
            update = setState;
        }
        return h("p", null, props.foo);
    };
    const Comp = withIdempotentState(StaticComponent);
    const container = document.createElement('div');
    mount((props) =&gt; h(Comp, { key: 1, foo: props.foo }), { foo: 'bar' }, container);
    t.equal(container.innerHTML, '<p>bar</p>');
    await waitNextTick();
    update({ foo: 'bis' });
    t.equal(container.innerHTML, '<p>bis</p>');
});
test('withIdempotentState: should create isolated state for each component', async (t) =&gt; {

t.equal(ownProps(d).length, 1);
    const handlers = ownProps(d.handlers);
    t.equal(handlers.length, 0);
});
test('add event listeners', t => {
    const d = fakeDom();
    const update = addEventListeners([['click', noop
        ], ['input', noop]]);
    const n = update(d);
    t.equal(n, d, 'should have forwarded the node');
    t.equal(ownProps(d).length, 0);
    t.deepEqual(ownProps(d.handlers), ['click', 'input']);
    t.equal(d.handlers.click, noop);
    t.equal(d.handlers.input, noop);
});
test('remove event listeners', t => {
    const d = fakeDom();
    d.handlers.click = noop;
    d.handlers.input = noop;
    const update = removeEventListeners([['click', noop
        ]]);
    const n = update(d);
    t.equal(n, d, 'should have forwarded the node');
    t.deepEqual(ownProps(d.handlers), ['input']);
    t.equal(d.handlers.input, noop);
});
test('set text node value', function* (t) {
    const node = {};
    const update = setTextNode('foo');
    update(node);
    t.equal(node.textContent, 'foo');
});