Fill out getColor tests

Author: jzempel

.github/CONTRIBUTING.md

@@ -48,7 +48,9 @@ on your system. After you clone this repo, run `npm install` to install
 dependencies needed for development. After installation, the following
 commands are available:
 
-- `npm start` to launch Storybook with live reload.
+- `npm start` to launch Storybook with live reload. Use `PACKAGE=dirname npm start`
+  (where `dirname` is a package directory name) to limit Storybook launch to the
+  given Garden package.
 - `npm test` to run Jest testing.
 - `npm run lint` to enforce consistent JavaScript, CSS, and
   markdown code conventions across all component packages. Note this is

packages/theming/src/utils/getColor.spec.ts

@@ -0,0 +1,349 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import { getColor } from './getColor';
+import DEFAULT_THEME from '../elements/theme';
+import PALETTE from '../elements/palette';
+import { IGardenTheme } from '../types';
+import { darken, lighten, rgba } from 'polished';
+import { valid } from 'chroma-js';
+
+const DARK_THEME: IGardenTheme = {
+  ...DEFAULT_THEME,
+  colors: { ...DEFAULT_THEME.colors, base: 'dark' }
+};
+
+describe('getColor', () => {
+  describe('by variable', () => {
+    it.each([['light'], ['dark']])('gets the %s mode color specified by string', mode => {
+      const color = getColor({
+        theme: mode === 'dark' ? DARK_THEME : DEFAULT_THEME,
+        variable: 'background.default'
+      });
+      const expected = mode === 'dark' ? PALETTE.grey[1100] : PALETTE.white;
+
+      expect(color).toBe(expected);
+    });
+
+    it('uses `DEFAULT_THEME` fallback for malformed variables', () => {
+      const theme: IGardenTheme = {
+        ...DEFAULT_THEME,
+        colors: { ...DEFAULT_THEME.colors, variables: {} }
+      } as IGardenTheme;
+      const color = getColor({ theme, variable: 'background.default' });
+
+      expect(color).toBe(PALETTE.white);
+    });
+  });
+
+  describe('by hue', () => {
+    it.each([['light'], ['dark']])('gets the %s mode color specified by string', mode => {
+      const color = getColor({ theme: mode === 'dark' ? DARK_THEME : DEFAULT_THEME, hue: 'red' });
+      const expected = mode === 'dark' ? PALETTE.red[500] : PALETTE.red[700];
+
+      expect(color).toBe(expected);
+    });
+
+    it('applies mode hue as expected', () => {
+      const color = getColor({ theme: DARK_THEME, hue: 'red', dark: { hue: 'green' } });
+      const expected = PALETTE.green[500];
+
+      expect(color).toBe(expected);
+    });
+
+    it.each([['white'], ['black']])('handles %s theme palette value', hue => {
+      const color = getColor({ theme: DEFAULT_THEME, hue });
+      const expected = (PALETTE as any)[hue];
+
+      expect(color).toBe(expected);
+    });
+
+    describe('by `theme.color` key', () => {
+      it.each([
+        ['primaryHue', 'light'],
+        ['primaryHue', 'dark'],
+        ['successHue', 'light'],
+        ['successHue', 'dark'],
+        ['dangerHue', 'light'],
+        ['dangerHue', 'dark'],
+        ['warningHue', 'light'],
+        ['warningHue', 'dark'],
+        ['neutralHue', 'light'],
+        ['neutralHue', 'dark'],
+        ['chromeHue', 'light'],
+        ['chromeHue', 'dark']
+      ])('gets the default %s for %s mode', (hue, mode) => {
+        const color = getColor({ theme: mode === 'dark' ? DARK_THEME : DEFAULT_THEME, hue });
+        const shade = mode === 'dark' ? 500 : 700;
+        const expected = (PALETTE as any)[(DEFAULT_THEME as any).colors[hue]][shade];
+
+        expect(color).toBe(expected);
+      });
+    });
+
+    it('uses `DEFAULT_THEME` fallback for malformed palette', () => {
+      const theme: IGardenTheme = {
+        ...DEFAULT_THEME,
+        palette: {}
+      } as IGardenTheme;
+      const color = getColor({ theme, hue: 'fuschia' });
+      const expected = PALETTE.fuschia[700];
+
+      expect(color).toBe(expected);
+    });
+
+    it('uses `DEFAULT_THEME` fallback for malformed colors', () => {
+      const theme: IGardenTheme = {
+        ...DEFAULT_THEME,
+        colors: {}
+      } as IGardenTheme;
+      const hue = 'successHue';
+      const color = getColor({ theme, hue });
+      const expected = (PALETTE as any)[(DEFAULT_THEME as any).colors[hue]][700];
+
+      expect(color).toBe(expected);
+    });
+  });
+
+  describe('by shade', () => {
+    it('gets the specified shade of hue', () => {
+      const color = getColor({ theme: DEFAULT_THEME, hue: 'red', shade: 100 });
+      const expected = PALETTE.red[100];
+
+      expect(color).toBe(expected);
+    });
+
+    it('applies mode shade as expected', () => {
+      const color = getColor({ theme: DARK_THEME, hue: 'red', shade: 100, dark: { shade: 200 } });
+      const expected = PALETTE.red[200];
+
+      expect(color).toBe(expected);
+    });
+
+    it('handles inbetween shades as expected', () => {
+      const color = getColor({ theme: DEFAULT_THEME, hue: 'red', shade: 150 });
+      const expected = darken(0.025, PALETTE.red[100]);
+
+      expect(color).toBe(expected);
+    });
+
+    it('darkens the color if shade is greater than what exists within the hue', () => {
+      const color = getColor({ theme: DEFAULT_THEME, hue: 'blue', shade: 1300 });
+      const expected = darken(0.05, PALETTE.blue[1200]);
+
+      expect(color).toBe(expected);
+    });
+
+    it('lightens the color if shade is lesser than what what exists within the hue', () => {
+      const color = getColor({ theme: DEFAULT_THEME, hue: 'blue', shade: 0 });
+      const expected = lighten(0.05, PALETTE.blue[100]);
+
+      expect(color).toBe(expected);
+    });
+
+    it('generates color for a custom hex palette hue with unspecified shade', () => {
+      const theme = { ...DEFAULT_THEME, palette: { custom: '#fd5a1e' } };
+      const adjustedColor = getColor({ theme, hue: 'custom', shade: 600 });
+
+      expect(valid(adjustedColor)).toBe(true);
+
+      theme.palette.custom = adjustedColor;
+
+      const unadjustedColor = getColor({ theme, hue: 'custom' });
+
+      expect(unadjustedColor).toBe(adjustedColor);
+    });
+  });
+
+  describe('by offset', () => {
+    it('applies offset as expected', () => {
+      const color = getColor({ theme: DEFAULT_THEME, hue: 'blue', offset: 100 });
+      const expected = PALETTE.blue[800];
+
+      expect(color).toBe(expected);
+    });
+
+    it('applies mode offset as expected', () => {
+      const color = getColor({
+        theme: DARK_THEME,
+        hue: 'blue',
+        offset: 100,
+        dark: { offset: -100 }
+      });
+      const expected = PALETTE.blue[400];
+
+      expect(color).toBe(expected);
+    });
+
+    it('handles inbetween offset as expected', () => {
+      const color = getColor({ theme: DEFAULT_THEME, hue: 'blue', offset: 150 });
+      const expected = darken(0.025, PALETTE.blue[800]);
+
+      expect(color).toBe(expected);
+    });
+  });
+
+  describe('by transparency', () => {
+    it('applies transparency as expected', () => {
+      const hue = 'blue';
+      const transparency = 0.5;
+      const color = getColor({ theme: DEFAULT_THEME, hue, transparency });
+      const expected = rgba(PALETTE[hue][700], transparency);
+
+      expect(color).toBe(expected);
+    });
+
+    it('applies mode transparency as expected', () => {
+      const hue = 'blue';
+      const transparency = 0.5;
+      const color = getColor({
+        theme: DARK_THEME,
+        hue,
+        transparency,
+        dark: { transparency: 0.25 }
+      });
+      const expected = rgba(PALETTE[hue][500], 0.25);
+
+      expect(color).toBe(expected);
+    });
+  });
+
+  describe('by theme', () => {
+    let theme: IGardenTheme;
+
+    beforeEach(() => {
+      theme = {
+        ...DEFAULT_THEME,
+        colors: {
+          ...DEFAULT_THEME.colors,
+          primaryHue: 'test'
+        },
+        palette: {
+          test: {
+            400: '#400',
+            600: '#600'
+          }
+        }
+      };
+    });
+
+    it('gets the specified color from the theme', () => {
+      const color = getColor({ theme, hue: 'test', shade: 400 });
+      const expected = theme.palette.test[400];
+
+      expect(color).toBe(expected);
+    });
+  });
+
+  describe('precedence', () => {
+    const ARGUMENTS = {
+      hue: 'blue',
+      shade: 600,
+      offset: 100,
+      transparency: 0.5
+    };
+
+    it('overrides arguments based on mode', () => {
+      const color = getColor({
+        theme: DEFAULT_THEME,
+        ...ARGUMENTS,
+        light: { hue: 'red', shade: 500, offset: -100, transparency: 0.25 }
+      });
+      const expected = rgba(PALETTE.red[400], 0.25);
+
+      expect(color).toBe(expected);
+    });
+
+    it('falls back to default arguments if not provided by mode', () => {
+      const color = getColor({
+        theme: DARK_THEME,
+        ...ARGUMENTS,
+        dark: { hue: 'kale', offset: -100 }
+      });
+      const expected = rgba(PALETTE.kale[500], ARGUMENTS.transparency);
+
+      expect(color).toBe(expected);
+    });
+
+    it.each([['light'], ['dark']])(
+      'ensures %s mode variable lookup takes precedence over other arguments',
+      mode => {
+        const theme = mode === 'dark' ? DARK_THEME : DEFAULT_THEME;
+        const { hue, shade } = ARGUMENTS;
+        const color = getColor({ theme, hue, shade, variable: 'foreground.default' });
+        const expected = mode === 'dark' ? PALETTE.grey[300] : PALETTE.grey[900];
+
+        expect(color).toBe(expected);
+      }
+    );
+
+    it.each([['light'], ['dark']])(
+      'ensures variable lookup uses `offset` and `transparency` arguments in %s mode',
+      mode => {
+        const theme = mode === 'dark' ? DARK_THEME : DEFAULT_THEME;
+        const color = getColor({ theme, ...ARGUMENTS, variable: 'foreground.default' });
+        const expected = rgba(
+          mode === 'dark' ? PALETTE.grey[400] : PALETTE.grey[1000],
+          ARGUMENTS.transparency
+        );
+
+        expect(color).toBe(expected);
+      }
+    );
+
+    it.each([['light'], ['dark']])(
+      'ensures variable lookup prefers mode fallback arguments in %s mode',
+      mode => {
+        const theme = mode === 'dark' ? DARK_THEME : DEFAULT_THEME;
+        const color = getColor({
+          theme,
+          ...ARGUMENTS,
+          variable: 'border.default',
+          light: { offset: 0, transparency: 0 },
+          dark: { offset: -100, transparency: 0 }
+        });
+        const expected = mode === 'dark' ? PALETTE.grey[600] : PALETTE.grey[400];
+
+        expect(color).toBe(expected);
+      }
+    );
+  });
+
+  describe('errors', () => {
+    const consoleError = console.error;
+
+    beforeEach(() => {
+      console.error = jest.fn();
+    });
+
+    afterEach(() => {
+      console.error = consoleError;
+    });
+
+    it('throws an error if color arguments are missing', () => {
+      expect(() => getColor({ theme: DEFAULT_THEME })).toThrow(Error);
+    });
+
+    it('throws an error when variable reference is invalid', () => {
+      expect(() => getColor({ theme: DEFAULT_THEME, variable: 'invalid.key' })).toThrow(
+        ReferenceError
+      );
+    });
+
+    it('throws an error when variable reference does not resolve to a string', () => {
+      expect(() => getColor({ theme: DEFAULT_THEME, variable: 'background' })).toThrow(Error);
+    });
+
+    it('throws an error when hue is off palette', () => {
+      expect(() => getColor({ theme: DEFAULT_THEME, hue: 'missing' })).toThrow(Error);
+    });
+
+    it('throws an error if shade is invalid', () => {
+      expect(() => getColor({ theme: DEFAULT_THEME, hue: 'blue', shade: NaN })).toThrow(TypeError);
+    });
+  });
+});