@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

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__/computed.test.ts

@@ -0,0 +1,193 @@
+import { integerString, keyValueStrings } from '@shell/utils/computed';
+
+describe('integerString', () => {
+  describe('get', () => {
+    it.each([
+      {
+        desc:     'integer string',
+        initial:  '42',
+        expected: 42,
+      },
+      {
+        desc:     'float string',
+        initial:  '3.14',
+        expected: 3.14,
+      },
+      {
+        desc:     'zero string',
+        initial:  '0',
+        expected: 0,
+      },
+      {
+        desc:     'negative integer string',
+        initial:  '-7',
+        expected: -7,
+      },
+      {
+        desc:     'undefined value',
+        initial:  undefined as unknown as string,
+        expected: NaN,
+      },
+    ])('returns a number for $desc', ({ initial, expected }) => {
+      const computed = integerString('value');
+      const ctx = { value: initial };
+
+      expect(computed.get.call(ctx)).toStrictEqual(expected);
+    });
+
+    it('reads from a nested dot-notation path', () => {
+      const computed = integerString('a.b');
+      const ctx = { a: { b: '99' } };
+
+      expect(computed.get.call(ctx)).toStrictEqual(99);
+    });
+  });
+
+  describe('set', () => {
+    it.each([
+      {
+        desc:     'positive integer',
+        input:    42,
+        expected: '42',
+      },
+      {
+        desc:     'float',
+        input:    3.14,
+        expected: '3.14',
+      },
+      {
+        desc:     'zero',
+        input:    0,
+        expected: '0',
+      },
+      {
+        desc:     'negative integer',
+        input:    -7,
+        expected: '-7',
+      },
+    ])('stores a string representation for $desc', ({ input, expected }) => {
+      const computed = integerString('value');
+      const ctx = { value: '' };
+
+      computed.set.call(ctx, input);
+
+      expect(ctx.value).toStrictEqual(expected);
+    });
+
+    it('writes to a nested dot-notation path', () => {
+      const computed = integerString('a.b');
+      const ctx = { a: { b: '' } };
+
+      computed.set.call(ctx, 5);
+
+      expect((ctx.a as { b: string }).b).toStrictEqual('5');
+    });
+  });
+});
+
+describe('keyValueStrings', () => {
+  describe('get', () => {
+    it('returns an empty object for an empty array', () => {
+      const computed = keyValueStrings('items');
+      const ctx = { items: [] as string[] };
+
+      expect(computed.get.call(ctx)).toStrictEqual({});
+    });
+
+    it('returns an empty object when path value is undefined', () => {
+      const computed = keyValueStrings('items');
+      const ctx = { items: undefined as unknown as string[] };
+
+      expect(computed.get.call(ctx)).toStrictEqual({});
+    });
+
+    it.each([
+      {
+        desc:      'single entry with default delimiter',
+        entries:   ['key=value'],
+        delimiter: '=',
+        expected:  { key: 'value' },
+      },
+      {
+        desc:      'multiple entries with default delimiter',
+        entries:   ['foo=bar', 'baz=qux'],
+        delimiter: '=',
+        expected:  {
+          foo: 'bar',
+          baz: 'qux',
+        },
+      },
+      {
+        desc:      'single entry with custom colon delimiter',
+        entries:   ['key:value'],
+        delimiter: ':',
+        expected:  { key: 'value' },
+      },
+      {
+        desc:      'multiple entries with custom colon delimiter',
+        entries:   ['a:1', 'b:2'],
+        delimiter: ':',
+        expected:  {
+          a: '1',
+          b: '2',
+        },
+      },
+    ])('returns an object for $desc', ({ entries, delimiter, expected }) => {
+      const computed = keyValueStrings('items', delimiter);
+      const ctx = { items: entries };
+
+      expect(computed.get.call(ctx)).toStrictEqual(expected);
+    });
+  });
+
+  describe('set', () => {
+    it('stores an empty array for an empty object', () => {
+      const computed = keyValueStrings('items');
+      const ctx = { items: ['existing=val'] };
+
+      computed.set.call(ctx, {});
+
+      expect(ctx.items).toStrictEqual([]);
+    });
+
+    it.each([
+      {
+        desc:      'single key-value pair with default delimiter',
+        input:     { key: 'value' },
+        delimiter: '=',
+        expected:  ['key=value'],
+      },
+      {
+        desc:  'multiple key-value pairs with default delimiter',
+        input: {
+          foo: 'bar',
+          baz: 'qux',
+        },
+        delimiter: '=',
+        expected:  ['foo=bar', 'baz=qux'],
+      },
+      {
+        desc:      'single pair with custom colon delimiter',
+        input:     { key: 'value' },
+        delimiter: ':',
+        expected:  ['key:value'],
+      },
+      {
+        desc:  'multiple pairs with custom colon delimiter',
+        input: {
+          a: '1',
+          b: '2',
+        },
+        delimiter: ':',
+        expected:  ['a:1', 'b:2'],
+      },
+    ])('stores delimited strings for $desc', ({ input, delimiter, expected }) => {
+      const computed = keyValueStrings('items', delimiter);
+      const ctx = { items: [] as string[] };
+
+      computed.set.call(ctx, input);
+
+      expect(ctx.items).toStrictEqual(expected);
+    });
+  });
+});

package/utils/__tests__/cspAdaptor.test.ts

@@ -0,0 +1,163 @@
+import CspAdapterUtils from '@shell/utils/cspAdaptor';
+import { CATALOG } from '@shell/config/types';
+
+type App = { metadata?: { name?: string } };
+
+function makeStore({
+  canList = true,
+  paginationEnabled = false,
+  findAllResult = [] as App[],
+  findPageData = [] as App[],
+} = {}) {
+  return {
+    getters: {
+      'management/canList':           jest.fn().mockReturnValue(canList),
+      'management/paginationEnabled': jest.fn().mockReturnValue(paginationEnabled),
+    },
+    dispatch: jest.fn((action: string) => {
+      if (action === 'management/findAll') {
+        return Promise.resolve(findAllResult);
+      }
+      if (action === 'management/findPage') {
+        return Promise.resolve({ data: findPageData });
+      }
+
+      return Promise.resolve(null);
+    }),
+  };
+}
+
+describe('cspAdaptor', () => {
+  describe('hasCspAdapter', () => {
+    it.each([
+      {
+        desc:     'returns the matching app for rancher-csp-adapter',
+        apps:     [{ metadata: { name: 'rancher-csp-adapter' } }, { metadata: { name: 'other-app' } }],
+        expected: { metadata: { name: 'rancher-csp-adapter' } },
+      },
+      {
+        desc:     'returns the matching app for rancher-csp-billing-adapter',
+        apps:     [{ metadata: { name: 'rancher-csp-billing-adapter' } }],
+        expected: { metadata: { name: 'rancher-csp-billing-adapter' } },
+      },
+      {
+        desc:     'returns first match when multiple csp apps are present',
+        apps:     [{ metadata: { name: 'rancher-csp-billing-adapter' } }, { metadata: { name: 'rancher-csp-adapter' } }],
+        expected: { metadata: { name: 'rancher-csp-billing-adapter' } },
+      },
+      {
+        desc:     'returns undefined when no app name matches',
+        apps:     [{ metadata: { name: 'unrelated-app' } }],
+        expected: undefined,
+      },
+      {
+        desc:     'returns undefined for apps without metadata',
+        apps:     [{}],
+        expected: undefined,
+      },
+      {
+        desc:     'returns undefined when apps is an empty array',
+        apps:     [],
+        expected: undefined,
+      },
+      {
+        desc:     'returns undefined when apps is null',
+        apps:     null as unknown as App[],
+        expected: undefined,
+      },
+      {
+        desc:     'returns undefined when apps is undefined',
+        apps:     undefined as unknown as App[],
+        expected: undefined,
+      },
+    ])('$desc', ({ apps, expected }) => {
+      const result = CspAdapterUtils.hasCspAdapter({ $store: {} as any, apps });
+
+      expect(result).toStrictEqual(expected);
+    });
+  });
+
+  describe('fetchCspAdaptorApp', () => {
+    beforeEach(() => {
+      CspAdapterUtils.resetState();
+    });
+
+    it('returns empty array when canList returns false', async() => {
+      const store = makeStore({ canList: false });
+      const result = await CspAdapterUtils.fetchCspAdaptorApp(store as any);
+
+      expect(result).toStrictEqual([]);
+      expect(store.dispatch).not.toHaveBeenCalled();
+    });
+
+    it('uses findAll when canList is true and pagination is disabled', async() => {
+      const findAllResult: App[] = [{ metadata: { name: 'rancher-csp-adapter' } }];
+      const store = makeStore({
+        canList: true, paginationEnabled: false, findAllResult
+      });
+
+      const result = await CspAdapterUtils.fetchCspAdaptorApp(store as any);
+
+      expect(result).toStrictEqual(findAllResult);
+      expect(store.dispatch).toHaveBeenCalledWith('management/findAll', { type: CATALOG.APP });
+    });
+
+    it('uses findPage when canList is true and pagination is enabled', async() => {
+      const findPageData: App[] = [{ metadata: { name: 'rancher-csp-billing-adapter' } }];
+      const store = makeStore({
+        canList: true, paginationEnabled: true, findPageData
+      });
+
+      const result = await CspAdapterUtils.fetchCspAdaptorApp(store as any);
+
+      expect(result).toStrictEqual(findPageData);
+      expect(store.dispatch).toHaveBeenCalledWith('management/findPage', expect.objectContaining({ type: CATALOG.APP }));
+    });
+
+    it('caches the result and does not dispatch again on a second call', async() => {
+      const findAllResult: App[] = [{ metadata: { name: 'rancher-csp-adapter' } }];
+      const store = makeStore({
+        canList: true, paginationEnabled: false, findAllResult
+      });
+
+      await CspAdapterUtils.fetchCspAdaptorApp(store as any);
+      const result = await CspAdapterUtils.fetchCspAdaptorApp(store as any);
+
+      expect(result).toStrictEqual(findAllResult);
+      expect(store.dispatch).toHaveBeenCalledTimes(1);
+    });
+
+    it('fetches fresh data after resetState clears the cache', async() => {
+      const findAllResult: App[] = [{ metadata: { name: 'rancher-csp-adapter' } }];
+      const store = makeStore({
+        canList: true, paginationEnabled: false, findAllResult
+      });
+
+      await CspAdapterUtils.fetchCspAdaptorApp(store as any);
+
+      CspAdapterUtils.resetState();
+
+      const freshStore = makeStore({
+        canList: true, paginationEnabled: false, findAllResult: []
+      });
+      const result = await CspAdapterUtils.fetchCspAdaptorApp(freshStore as any);
+
+      expect(result).toStrictEqual([]);
+      expect(freshStore.dispatch).toHaveBeenCalledTimes(1);
+    });
+
+    it('passes pagination filters for known csp adapter app names when using findPage', async() => {
+      const store = makeStore({
+        canList: true, paginationEnabled: true, findPageData: []
+      });
+
+      await CspAdapterUtils.fetchCspAdaptorApp(store as any);
+
+      const [, args] = store.dispatch.mock.calls[0];
+
+      expect(args.type).toStrictEqual(CATALOG.APP);
+      expect(args.opt.watch).toStrictEqual(false);
+      expect(args.opt.transient).toStrictEqual(true);
+    });
+  });
+});

package/utils/__tests__/dom.test.ts

@@ -0,0 +1,81 @@
+import { getParent } from '@shell/utils/dom';
+
+describe('getParent', () => {
+  it('returns null when element has no parent', () => {
+    const el = document.createElement('div');
+
+    expect(getParent(el, 'div')).toBeNull();
+  });
+
+  it('returns null when el is null', () => {
+    expect(getParent(null, 'div')).toBeNull();
+  });
+
+  it('returns null when el is undefined', () => {
+    expect(getParent(undefined, 'div')).toBeNull();
+  });
+
+  it('returns the direct parent matching the selector', () => {
+    const parent = document.createElement('section');
+    const child = document.createElement('div');
+
+    parent.appendChild(child);
+
+    expect(getParent(child, 'section')).toBe(parent);
+  });
+
+  it('returns an ancestor matching the selector when direct parent does not match', () => {
+    const grandparent = document.createElement('article');
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+
+    grandparent.appendChild(parent);
+    parent.appendChild(child);
+
+    expect(getParent(child, 'article')).toBe(grandparent);
+  });
+
+  it('returns null when no ancestor matches the selector', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+
+    parent.appendChild(child);
+
+    expect(getParent(child, 'article')).toBeNull();
+  });
+
+  it('matches by class selector', () => {
+    const parent = document.createElement('div');
+
+    parent.className = 'my-container';
+    const child = document.createElement('span');
+
+    parent.appendChild(child);
+
+    expect(getParent(child, '.my-container')).toBe(parent);
+  });
+
+  it('matches by id selector', () => {
+    const parent = document.createElement('div');
+
+    parent.id = 'root';
+    const child = document.createElement('span');
+
+    parent.appendChild(child);
+
+    expect(getParent(child, '#root')).toBe(parent);
+  });
+
+  it('skips intermediate non-matching ancestors and finds the correct one', () => {
+    const great = document.createElement('nav');
+    const grandparent = document.createElement('section');
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+
+    great.appendChild(grandparent);
+    grandparent.appendChild(parent);
+    parent.appendChild(child);
+
+    expect(getParent(child, 'nav')).toBe(great);
+  });
+});