@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.3

package/utils/__tests__/color.test.ts

@@ -0,0 +1,226 @@
+import {
+  contrastColor,
+  parseColor,
+  textColor,
+  hexToRgb,
+  mapStandardColors,
+  rgbToRgb,
+  colorToRgb,
+  normalizeHex,
+  createCssVars,
+} from '@shell/utils/color';
+
+describe('shell/utils/color', () => {
+  describe('hexToRgb', () => {
+    it.each([
+      {
+        desc:     'a lowercase hex color',
+        input:    '#ff0080',
+        expected: {
+          r: 255, g: 0, b: 128
+        },
+      },
+      {
+        desc:     'a hex color without # prefix',
+        input:    'ff0080',
+        expected: {
+          r: 255, g: 0, b: 128
+        },
+      },
+      {
+        desc:     'an uppercase hex color',
+        input:    '#AABBCC',
+        expected: {
+          r: 170, g: 187, b: 204
+        },
+      },
+    ])('parses $desc', ({ input, expected }) => {
+      expect(hexToRgb(input)).toStrictEqual(expected);
+    });
+
+    it.each([
+      { desc: 'an invalid hex string', input: 'not-a-color' },
+      { desc: 'a short 3-character hex (not supported by hexToRgb)', input: '#abc' },
+    ])('returns null for $desc', ({ input }) => {
+      expect(hexToRgb(input)).toBeNull();
+    });
+  });
+
+  describe('rgbToRgb', () => {
+    it.each([
+      {
+        desc:     'a valid rgb() string with spaces',
+        input:    'rgb(10, 20, 30)',
+        expected: {
+          r: 10, g: 20, b: 30
+        },
+      },
+      {
+        desc:     'an rgb() string without spaces',
+        input:    'rgb(0,128,255)',
+        expected: {
+          r: 0, g: 128, b: 255
+        },
+      },
+    ])('parses $desc', ({ input, expected }) => {
+      expect(rgbToRgb(input)).toStrictEqual(expected);
+    });
+
+    it.each([
+      { desc: 'an rgba string', input: 'rgba(10,20,30,0.5)' },
+      { desc: 'a plain color name', input: 'red' },
+    ])('returns null for $desc', ({ input }) => {
+      expect(rgbToRgb(input)).toBeNull();
+    });
+  });
+
+  describe('colorToRgb', () => {
+    it('converts a hex color to rgb object', () => {
+      expect(colorToRgb('#ff0000')).toStrictEqual({
+        r: 255, g: 0, b: 0
+      });
+    });
+
+    it('converts an rgb() string to rgb object', () => {
+      expect(colorToRgb('rgb(0, 0, 255)')).toStrictEqual({
+        r: 0, g: 0, b: 255
+      });
+    });
+
+    it('returns { r:0, g:0, b:0 } for an unrecognized format', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      expect(colorToRgb('hsl(0,100%,50%)')).toStrictEqual({
+        r: 0, g: 0, b: 0
+      });
+      consoleSpy.mockRestore();
+    });
+
+    it('warns for unrecognized color formats', () => {
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      colorToRgb('blue');
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('Unable to parse color: blue'));
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('normalizeHex', () => {
+    it.each([
+      {
+        desc: '3-char hex with # to 6-char', input: '#abc', expected: '#aabbcc'
+      },
+      {
+        desc: '3-char hex without # to 6-char', input: 'abc', expected: 'aabbcc'
+      },
+      {
+        desc: '6-char hex with # unchanged', input: '#aabbcc', expected: '#aabbcc'
+      },
+      {
+        desc: '6-char hex without # unchanged', input: 'aabbcc', expected: 'aabbcc'
+      },
+    ])('handles $desc', ({ input, expected }) => {
+      expect(normalizeHex(input)).toStrictEqual(expected);
+    });
+  });
+
+  describe('mapStandardColors', () => {
+    it.each([
+      {
+        desc: '"black" to its hex value', input: 'black', expected: '#000000'
+      },
+      {
+        desc: '"white" to its hex value', input: 'white', expected: '#ffffff'
+      },
+      {
+        desc: 'an unknown color string unchanged', input: '#123456', expected: '#123456'
+      },
+    ])('maps $desc', ({ input, expected }) => {
+      expect(mapStandardColors(input)).toStrictEqual(expected);
+    });
+  });
+
+  describe('textColor', () => {
+    it.each([
+      {
+        desc: '"black" for a light color (#ffffff)', input: '#ffffff', expected: 'black'
+      },
+      {
+        desc: '"white" for a dark color (#000000)', input: '#000000', expected: 'white'
+      },
+      {
+        desc: '"black" for brightness above threshold (rgb 200,200,200)', input: 'rgb(200, 200, 200)', expected: 'black'
+      },
+      {
+        desc: '"white" for brightness below threshold (rgb 50,50,50)', input: 'rgb(50, 50, 50)', expected: 'white'
+      },
+    ])('returns $desc', ({ input, expected }) => {
+      const color = parseColor(input);
+
+      expect(textColor(color)).toStrictEqual(expected);
+    });
+  });
+
+  describe('contrastColor', () => {
+    it('returns light text on a very dark background (light theme)', () => {
+      expect(contrastColor('#000000')).toStrictEqual('rgb(255, 255, 255)');
+    });
+
+    it('returns dark text on a very light background (light theme)', () => {
+      expect(contrastColor('#ffffff')).toStrictEqual('rgb(20, 20, 25)');
+    });
+
+    it('uses custom contrast options when provided', () => {
+      const opts = { dark: '#000000', light: '#ffffff' };
+
+      // white background → dark text has higher contrast
+      expect(contrastColor('#ffffff', opts)).toStrictEqual('#000000');
+    });
+  });
+
+  describe('createCssVars', () => {
+    it('returns an object with expected CSS variable keys for light theme', () => {
+      const vars = createCssVars('#4a90d9', 'light', 'primary');
+      const expectedKeys = [
+        '--primary',
+        '--primary-text ',
+        '--primary-hover-bg',
+        '--primary-active-bg',
+        '--primary-active-text',
+        '--primary-border',
+        '--primary-banner-bg',
+        '--primary-light-bg',
+        '--primary-keyboard-focus',
+      ];
+
+      expect(Object.keys(vars)).toStrictEqual(expectedKeys);
+    });
+
+    it('sets --primary to the input color', () => {
+      const vars = createCssVars('#4a90d9');
+
+      expect(vars['--primary']).toStrictEqual('#4a90d9');
+    });
+
+    it('sets --primary-border to the input color', () => {
+      const vars = createCssVars('#4a90d9');
+
+      expect(vars['--primary-border']).toStrictEqual('#4a90d9');
+    });
+
+    it('uses a custom name prefix', () => {
+      const vars = createCssVars('#ff0000', 'light', 'accent');
+
+      expect(vars).toHaveProperty('--accent');
+      expect(vars).toHaveProperty('--accent-hover-bg');
+    });
+
+    it('produces opacity-based banner-bg and light-bg values', () => {
+      const vars = createCssVars('#ff0000');
+
+      // opacity(color, 0.15) and opacity(color, 0.05) produce rgba strings
+      expect(vars['--primary-banner-bg']).toContain('rgba');
+      expect(vars['--primary-light-bg']).toContain('rgba');
+    });
+  });
+});

package/utils/__tests__/duration.test.ts

@@ -0,0 +1,140 @@
+import { toMilliseconds, toSeconds } from '@shell/utils/duration';
+
+describe('toMilliseconds', () => {
+  describe('falsy input', () => {
+    it.each([
+      { desc: 'null', input: null },
+      { desc: 'undefined', input: undefined },
+      { desc: 'empty string', input: '' },
+      { desc: 'zero', input: 0 },
+    ])('returns 0 for $desc', ({ input }) => {
+      expect(toMilliseconds(input as any)).toStrictEqual(0);
+    });
+  });
+
+  describe('non-matching input', () => {
+    it.each([
+      { desc: 'a plain word', input: 'invalid' },
+      { desc: 'a number with no unit', input: '42' },
+    ])('returns 0 for $desc', ({ input }) => {
+      expect(toMilliseconds(input)).toStrictEqual(0);
+    });
+  });
+
+  describe('single-unit inputs', () => {
+    it.each([
+      {
+        desc:     '1ms → 1',
+        input:    '1ms',
+        expected: 1,
+      },
+      {
+        desc:     '1s → 1000',
+        input:    '1s',
+        expected: 1_000,
+      },
+      {
+        desc:     '1m → 60000',
+        input:    '1m',
+        expected: 60_000,
+      },
+      {
+        desc:     '1h → 3600000',
+        input:    '1h',
+        expected: 3_600_000,
+      },
+      {
+        desc:     '1d → 86400000',
+        input:    '1d',
+        expected: 86_400_000,
+      },
+      {
+        desc:     '1w → 604800000',
+        input:    '1w',
+        expected: 604_800_000,
+      },
+      {
+        desc:     '1y → 31536000000',
+        input:    '1y',
+        expected: 31_536_000_000,
+      },
+    ])('$desc', ({ input, expected }) => {
+      expect(toMilliseconds(input)).toStrictEqual(expected);
+    });
+  });
+
+  describe('multiple-unit inputs', () => {
+    it.each([
+      {
+        desc:     'combines years and days (1y2d)',
+        input:    '1y2d',
+        expected: 31_536_000_000 + 2 * 86_400_000,
+      },
+      {
+        desc:     'combines hours, minutes and seconds (1h30m15s)',
+        input:    '1h30m15s',
+        expected: 3_600_000 + 30 * 60_000 + 15_000,
+      },
+      {
+        desc:     'combines all units (1y1w1d1h1m1s1ms)',
+        input:    '1y1w1d1h1m1s1ms',
+        expected: 31_536_000_000 + 604_800_000 + 86_400_000 + 3_600_000 + 60_000 + 1_000 + 1,
+      },
+    ])('$desc', ({ input, expected }) => {
+      expect(toMilliseconds(input)).toStrictEqual(expected);
+    });
+  });
+
+  describe('multi-digit numbers', () => {
+    it.each([
+      {
+        desc:     'handles 52 weeks',
+        input:    '52w',
+        expected: 52 * 604_800_000,
+      },
+      {
+        desc:     'handles 500 milliseconds',
+        input:    '500ms',
+        expected: 500,
+      },
+    ])('$desc', ({ input, expected }) => {
+      expect(toMilliseconds(input)).toStrictEqual(expected);
+    });
+  });
+
+  it('returns 0 for numeric string "0"', () => {
+    expect(toMilliseconds('0')).toStrictEqual(0);
+  });
+});
+
+describe('toSeconds', () => {
+  it.each([
+    {
+      desc:     'returns 0 for empty string',
+      input:    '',
+      expected: 0,
+    },
+    {
+      desc:     'converts 30s to 30',
+      input:    '30s',
+      expected: 30,
+    },
+    {
+      desc:     'floors sub-second inputs (500ms → 0)',
+      input:    '500ms',
+      expected: 0,
+    },
+    {
+      desc:     'floors mixed sub-second remainder (1m30s500ms → 90)',
+      input:    '1m30s500ms',
+      expected: 90,
+    },
+    {
+      desc:     'converts 2h to 7200',
+      input:    '2h',
+      expected: 7_200,
+    },
+  ])('$desc', ({ input, expected }) => {
+    expect(toSeconds(input)).toStrictEqual(expected);
+  });
+});