test: theme api (#242)

apis/theme/src/__tests__/palette-resolver.spec.js

@@ -0,0 +1,133 @@
+import paletteResolverFn from '../palette-resolver';
+
+describe('palette-resolver', () => {
+  it('dataScales()', () => {
+    expect(
+      paletteResolverFn({
+        scales: [
+          {
+            propertyValue: 'p',
+            name: 'name',
+            translation: 't',
+            type: 'type',
+            scale: 'scale',
+          },
+        ],
+      }).dataScales()
+    ).to.eql([
+      {
+        key: 'p',
+        name: 'name',
+        translation: 't',
+        type: 'type',
+        colors: 'scale',
+        scheme: true,
+      },
+    ]);
+  });
+
+  it('dataPalettes()', () => {
+    expect(
+      paletteResolverFn({
+        palettes: {
+          data: [
+            {
+              propertyValue: 'p',
+              name: 'name',
+              translation: 't',
+              type: 'type',
+              scale: 'scale',
+            },
+          ],
+        },
+      }).dataPalettes()
+    ).to.eql([
+      {
+        key: 'p',
+        name: 'name',
+        translation: 't',
+        type: 'type',
+        colors: 'scale',
+      },
+    ]);
+  });
+
+  it('uiPalettes()', () => {
+    expect(
+      paletteResolverFn({
+        palettes: {
+          ui: [
+            {
+              name: 'name',
+              translation: 't',
+              colors: 'colors',
+            },
+          ],
+        },
+      }).uiPalettes()
+    ).to.eql([
+      {
+        key: 'ui',
+        name: 'name',
+        translation: 't',
+        type: 'row',
+        colors: 'colors',
+      },
+    ]);
+  });
+
+  it('dataColors()', () => {
+    expect(
+      paletteResolverFn({
+        dataColors: {
+          primaryColor: 'primary',
+          nullColor: 'null',
+          othersColor: 'others',
+        },
+      }).dataColors()
+    ).to.eql({
+      primary: 'primary',
+      nil: 'null',
+      others: 'others',
+    });
+  });
+
+  describe('uiColor', () => {
+    let p;
+    let uiPalettes;
+    beforeEach(() => {
+      p = paletteResolverFn();
+      uiPalettes = sinon.stub(p, 'uiPalettes');
+    });
+    afterEach(() => {
+      uiPalettes.restore();
+    });
+
+    it('should return color when index < 0 or undefined', () => {
+      expect(p.uiColor({ color: 'red' })).to.equal('red');
+      expect(p.uiColor({ color: 'red', index: -1 })).to.equal('red');
+      expect(uiPalettes.callCount).to.equal(0);
+    });
+
+    it('should return color when ui palette is falsy', () => {
+      uiPalettes.returns([]);
+      expect(p.uiColor({ color: 'red', index: 0 })).to.equal('red');
+      expect(uiPalettes.callCount).to.equal(1);
+    });
+
+    it('should return color when index is out of bounds', () => {
+      uiPalettes.returns([{ colors: ['a', 'b', 'c'] }]);
+      expect(p.uiColor({ color: 'red', index: 3 })).to.equal('red');
+
+      expect(uiPalettes.callCount).to.equal(1);
+      // should keep cached palette
+      p.uiColor({ color: 'red', index: 3 });
+      expect(uiPalettes.callCount).to.equal(1);
+    });
+
+    it('should return index from palette when index is within bounds', () => {
+      uiPalettes.returns([{ colors: ['a', 'b', 'c'] }]);
+      expect(p.uiColor({ color: 'red', index: 1 })).to.equal('b');
+    });
+  });
+});

apis/theme/src/__tests__/set-theme.spec.js

@@ -0,0 +1,82 @@
+describe('set theme', () => {
+  let sandbox;
+  let create;
+  let extend;
+  let base;
+  let light;
+  let dark;
+  let resolve;
+  before(() => {
+    sandbox = sinon.createSandbox();
+    extend = sandbox.stub();
+    resolve = sandbox.stub();
+    base = { font: 'Arial' };
+    light = { background: 'white' };
+    dark = { background: 'black' };
+    [{ default: create }] = aw.mock(
+      [
+        [require.resolve('extend'), () => extend],
+        ['**/base.json', () => base],
+        ['**/light.json', () => light],
+        ['**/dark.json', () => dark],
+      ],
+      ['../set-theme.js']
+    );
+  });
+
+  afterEach(() => {
+    sandbox.reset();
+  });
+
+  it('should extend from light theme by default', () => {
+    extend.returns({
+      palettes: {},
+    });
+    create({}, resolve);
+    expect(extend.firstCall).to.have.been.calledWithExactly(true, {}, base, light);
+  });
+
+  it('should extend from dark theme when type is dark', () => {
+    extend.returns({
+      palettes: {},
+    });
+    create(
+      {
+        type: 'dark',
+      },
+      resolve
+    );
+    expect(extend.firstCall).to.have.been.calledWithExactly(true, {}, base, dark);
+  });
+
+  it('should not extend scales and palette arrays', () => {
+    const root = { color: 'pink', palettes: {} };
+    const merged = { palettes: { data: [], ui: [] }, scales: [] };
+    extend.onFirstCall().returns(root);
+    extend.onSecondCall().returns(merged);
+    const t = { color: 'red' };
+    const prevent = { scales: null, palettes: { data: null, ui: null } };
+    create(t, resolve);
+    expect(extend.secondCall).to.have.been.calledWithExactly(true, {}, root, prevent, t);
+    expect(resolve).to.have.been.calledWithExactly(merged);
+  });
+
+  it('should add defaults if custom scales and palettes are not provided', () => {
+    const root = { color: 'pink', palettes: { data: 'data', ui: 'ui' }, scales: 'scales' };
+    const merged = { palettes: {} };
+    extend.onFirstCall().returns(root);
+    extend.onSecondCall().returns(merged);
+    const custom = { color: 'red' };
+    create(custom, resolve);
+    expect(resolve).to.have.been.calledWithExactly({
+      palettes: { data: 'data', ui: 'ui' },
+      scales: 'scales',
+    });
+  });
+
+  it('should return resolved theme', () => {
+    extend.onSecondCall().returns({ palettes: { data: [], ui: [] }, scales: [] });
+    resolve.returns('resolved');
+    expect(create({}, resolve)).to.equal('resolved');
+  });
+});

apis/theme/src/__tests__/style-resolver.spec.js

@@ -0,0 +1,65 @@
+describe('style-resolver', () => {
+  let sandbox;
+  let create;
+  let extend;
+  before(() => {
+    sandbox = sinon.createSandbox();
+    extend = sandbox.stub();
+    [{ default: create }] = aw.mock([[require.resolve('extend'), () => extend]], ['../style-resolver.js']);
+  });
+
+  afterEach(() => {
+    sandbox.reset();
+  });
+
+  it('getStyle from root', () => {
+    const t = {
+      fontSize: '16px',
+    };
+    const s = create('base.path', t);
+
+    expect(s.getStyle('', 'fontSize')).to.equal('16px');
+  });
+
+  it('getStyle from object', () => {
+    const t = {
+      object: {
+        bar: {
+          legend: {
+            title: {
+              fontSize: '13px',
+            },
+          },
+        },
+      },
+      fontSize: '16px',
+    };
+    const s = create('object.bar', t);
+
+    expect(s.getStyle('legend.title', 'fontSize')).to.equal('13px');
+  });
+
+  it('resolveRawTheme', () => {
+    const variables = {
+      '@text': 'pink',
+      '@size': 'mini',
+    };
+    const raw = {
+      chart: {
+        bg: 'red',
+        color: '@text',
+      },
+      responsive: '@size',
+      _variables: variables,
+    };
+    extend.returns(raw);
+    expect(create.resolveRawTheme(raw)).to.eql({
+      chart: {
+        bg: 'red',
+        color: 'pink',
+      },
+      responsive: 'mini',
+      _variables: variables,
+    });
+  });
+});