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

package/utils/__tests__/select.test.ts

@@ -0,0 +1,208 @@
+import { calculatePosition } from '@shell/utils/select';
+
+function makeSelectEl(rect: { x: number; y: number; width: number; height: number }): HTMLElement {
+  const el = document.createElement('div');
+
+  el.getBoundingClientRect = jest.fn().mockReturnValue({
+    x:      rect.x,
+    y:      rect.y,
+    width:  rect.width,
+    height: rect.height,
+    top:    rect.y,
+    bottom: rect.y + rect.height,
+    left:   rect.x,
+    right:  rect.x + rect.width,
+  });
+
+  return el;
+}
+
+function makeDropdownList(offsetHeight: number): HTMLElement {
+  const el = document.createElement('div');
+
+  Object.defineProperty(el, 'offsetHeight', {
+    configurable: true,
+    value:        offsetHeight,
+  });
+
+  return el;
+}
+
+function makeComponent(selectEl: HTMLElement): { $parent: { $el: HTMLElement } } {
+  return { $parent: { $el: selectEl } };
+}
+
+function setWindowEnv(opts: { scrollY?: number; innerHeight?: number }): void {
+  if (opts.scrollY !== undefined) {
+    Object.defineProperty(window, 'scrollY', { configurable: true, value: opts.scrollY });
+  }
+  if (opts.innerHeight !== undefined) {
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: opts.innerHeight });
+  }
+}
+
+function setDocHeight(height: number): void {
+  Object.defineProperty(document.body, 'offsetHeight', { configurable: true, value: height });
+}
+
+describe('select.js', () => {
+  describe('calculatePosition', () => {
+    const rect = {
+      x:      50,
+      y:      200,
+      width:  300,
+      height: 40,
+    };
+
+    beforeEach(() => {
+      setWindowEnv({ scrollY: 0, innerHeight: 800 });
+      setDocHeight(1000);
+    });
+
+    describe('placement direction', () => {
+      it('uses bottom positioning when placement is "top"', () => {
+        const selectEl = makeSelectEl(rect);
+        const dropdownList = makeDropdownList(100);
+        const component = makeComponent(selectEl);
+
+        calculatePosition(dropdownList, component, undefined, 'top');
+
+        // bottom = docHeight - scrollY - r.y - 1 = 1000 - 0 - 200 - 1 = 799
+        expect(dropdownList.style.bottom).toStrictEqual('799px');
+        expect(dropdownList.style.top).toStrictEqual('');
+        expect(dropdownList.classList.contains('vs__dropdown-up')).toStrictEqual(true);
+        expect(selectEl.classList.contains('vs__dropdown-up')).toStrictEqual(true);
+      });
+
+      it('uses bottom positioning when placement is "top-start"', () => {
+        const selectEl = makeSelectEl(rect);
+        const dropdownList = makeDropdownList(100);
+        const component = makeComponent(selectEl);
+
+        calculatePosition(dropdownList, component, undefined, 'top-start');
+
+        expect(dropdownList.style.bottom).toStrictEqual('799px');
+        expect(dropdownList.style.top).toStrictEqual('');
+        expect(dropdownList.classList.contains('vs__dropdown-up')).toStrictEqual(true);
+        expect(selectEl.classList.contains('vs__dropdown-up')).toStrictEqual(true);
+      });
+
+      it('uses top positioning when placement is "bottom-start" and dropdown fits below', () => {
+        const selectEl = makeSelectEl(rect);
+        const dropdownList = makeDropdownList(100);
+        const component = makeComponent(selectEl);
+
+        calculatePosition(dropdownList, component, undefined, 'bottom-start');
+
+        // top = r.y + r.height - 1 + scrollY = 200 + 40 - 1 + 0 = 239
+        expect(dropdownList.style.top).toStrictEqual('239px');
+        expect(dropdownList.style.bottom).toStrictEqual('');
+        expect(dropdownList.classList.contains('vs__dropdown-up')).toStrictEqual(false);
+        expect(selectEl.classList.contains('vs__dropdown-up')).toStrictEqual(false);
+      });
+
+      it('falls back to bottom positioning when dropdown overflows the viewport', () => {
+        const selectEl = makeSelectEl(rect);
+        // offsetHeight=600: end = 239 + 600 = 839 > 800 (innerHeight) → overflow
+        const dropdownList = makeDropdownList(600);
+        const component = makeComponent(selectEl);
+
+        calculatePosition(dropdownList, component, undefined, 'bottom-start');
+
+        // bottom = 1000 - 0 - 200 - 1 = 799
+        expect(dropdownList.style.bottom).toStrictEqual('799px');
+        expect(dropdownList.style.top).toStrictEqual('');
+        expect(dropdownList.classList.contains('vs__dropdown-up')).toStrictEqual(true);
+        expect(selectEl.classList.contains('vs__dropdown-up')).toStrictEqual(true);
+      });
+
+      it('defaults to bottom-start behaviour when no placement is provided', () => {
+        const selectEl = makeSelectEl(rect);
+        const dropdownList = makeDropdownList(100);
+        const component = makeComponent(selectEl);
+
+        // no placement argument → defaults to 'bottom-start'
+        calculatePosition(dropdownList, component, undefined, undefined);
+
+        expect(dropdownList.style.top).toStrictEqual('239px');
+        expect(dropdownList.classList.contains('vs__dropdown-up')).toStrictEqual(false);
+      });
+    });
+
+    describe('scroll offset', () => {
+      it('adds window.scrollY to the top position when the dropdown fits', () => {
+        setWindowEnv({ scrollY: 100, innerHeight: 800 });
+        const selectEl = makeSelectEl(rect);
+        const dropdownList = makeDropdownList(100);
+        const component = makeComponent(selectEl);
+
+        calculatePosition(dropdownList, component, undefined, 'bottom-start');
+
+        // top = 200 + 40 - 1 + 100 = 339
+        expect(dropdownList.style.top).toStrictEqual('339px');
+      });
+
+      it('subtracts window.scrollY from the bottom position', () => {
+        setWindowEnv({ scrollY: 50, innerHeight: 800 });
+        const selectEl = makeSelectEl(rect);
+        const dropdownList = makeDropdownList(100);
+        const component = makeComponent(selectEl);
+
+        calculatePosition(dropdownList, component, undefined, 'top');
+
+        // bottom = 1000 - 50 - 200 - 1 = 749
+        expect(dropdownList.style.bottom).toStrictEqual('749px');
+      });
+    });
+
+    describe('always-set style properties', () => {
+      // Note: dropdownList.style.width = 'min-content' is always set by calculatePosition
+      // but jsdom does not support the min-content keyword so that property is not asserted here.
+      it.each([
+        {
+          desc:      'top-positioned dropdown',
+          placement: 'bottom-start',
+        },
+        {
+          desc:      'bottom-positioned dropdown',
+          placement: 'top',
+        },
+      ])('sets left and minWidth for $desc', ({ placement }) => {
+        const selectEl = makeSelectEl(rect);
+        const dropdownList = makeDropdownList(100);
+        const component = makeComponent(selectEl);
+
+        calculatePosition(dropdownList, component, undefined, placement);
+
+        expect(dropdownList.style.left).toStrictEqual('50px');
+        expect(dropdownList.style.minWidth).toStrictEqual('300px');
+      });
+    });
+
+    describe('vs__dropdown-up class management', () => {
+      it('removes vs__dropdown-up from both elements when switching to top positioning', () => {
+        const selectEl = makeSelectEl(rect);
+        const dropdownList = makeDropdownList(100);
+
+        // pre-add the class to simulate a previous bottom-positioned state
+        dropdownList.classList.add('vs__dropdown-up');
+        selectEl.classList.add('vs__dropdown-up');
+
+        calculatePosition(dropdownList, makeComponent(selectEl), undefined, 'bottom-start');
+
+        expect(dropdownList.classList.contains('vs__dropdown-up')).toStrictEqual(false);
+        expect(selectEl.classList.contains('vs__dropdown-up')).toStrictEqual(false);
+      });
+
+      it('adds vs__dropdown-up to both elements when switching to bottom positioning', () => {
+        const selectEl = makeSelectEl(rect);
+        const dropdownList = makeDropdownList(600);
+
+        calculatePosition(dropdownList, makeComponent(selectEl), undefined, 'bottom-start');
+
+        expect(dropdownList.classList.contains('vs__dropdown-up')).toStrictEqual(true);
+        expect(selectEl.classList.contains('vs__dropdown-up')).toStrictEqual(true);
+      });
+    });
+  });
+});

package/utils/__tests__/settings.test.ts

@@ -0,0 +1,140 @@
+import { getPerformanceSetting, isProviderEnabled } from '../settings';
+import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
+import { MANAGEMENT } from '@shell/config/types';
+import { ClusterProvisionerContext } from '@shell/core/types';
+
+const makeMockRootGetters = (settingValue?: string) => {
+  return {
+    'management/byId': (type: string, id: string) => {
+      if (type === MANAGEMENT.SETTING && id === SETTING.UI_PERFORMANCE) {
+        return settingValue !== undefined ? { value: settingValue } : undefined;
+      }
+
+      return undefined;
+    },
+  };
+};
+
+const makeMockContext = (settingValue?: string): ClusterProvisionerContext => {
+  return {
+    getters: {
+      'management/byId': (type: string, id: string) => {
+        if (type === MANAGEMENT.SETTING && id === SETTING.KEV2_OPERATORS) {
+          return settingValue !== undefined ? { value: settingValue } : undefined;
+        }
+
+        return undefined;
+      },
+    },
+    dispatch:   {},
+    axios:      {},
+    $plugin:    {},
+    $extension: {},
+  } as unknown as ClusterProvisionerContext;
+};
+
+describe('getPerformanceSetting', () => {
+  it('returns DEFAULT_PERF_SETTING when no setting resource exists', () => {
+    const rootGetters = makeMockRootGetters();
+
+    const result = getPerformanceSetting(rootGetters);
+
+    expect(result).toStrictEqual(DEFAULT_PERF_SETTING);
+  });
+
+  it('returns DEFAULT_PERF_SETTING when setting value is empty string', () => {
+    const rootGetters = makeMockRootGetters('');
+
+    const result = getPerformanceSetting(rootGetters);
+
+    expect(result).toStrictEqual(DEFAULT_PERF_SETTING);
+  });
+
+  it('merges valid JSON setting value with defaults', () => {
+    const customSetting = { inactivity: { enabled: true, threshold: 300 } };
+    const rootGetters = makeMockRootGetters(JSON.stringify(customSetting));
+
+    const result = getPerformanceSetting(rootGetters);
+
+    expect(result.inactivity).toStrictEqual({ enabled: true, threshold: 300 });
+    // Other defaults are preserved
+    expect(result.incrementalLoading).toStrictEqual(DEFAULT_PERF_SETTING.incrementalLoading);
+  });
+
+  it('returns DEFAULT_PERF_SETTING when setting value is invalid JSON', () => {
+    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const rootGetters = makeMockRootGetters('not-valid-json{{{');
+
+    const result = getPerformanceSetting(rootGetters);
+
+    expect(result).toStrictEqual(DEFAULT_PERF_SETTING);
+    consoleSpy.mockRestore();
+  });
+
+  it('warns when setting value is invalid JSON', () => {
+    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const rootGetters = makeMockRootGetters('bad json');
+
+    getPerformanceSetting(rootGetters);
+
+    expect(consoleSpy).toHaveBeenCalledWith('ui-performance setting contains invalid data');
+    consoleSpy.mockRestore();
+  });
+
+  it('applies partial overrides without losing other defaults', () => {
+    const customSetting = { manualRefresh: { enabled: true, threshold: 999 } };
+    const rootGetters = makeMockRootGetters(JSON.stringify(customSetting));
+
+    const result = getPerformanceSetting(rootGetters);
+
+    expect(result.manualRefresh).toStrictEqual({ enabled: true, threshold: 999 });
+    expect(result.inactivity).toStrictEqual(DEFAULT_PERF_SETTING.inactivity);
+    expect(result.disableWebsocketNotification).toStrictEqual(DEFAULT_PERF_SETTING.disableWebsocketNotification);
+  });
+});
+
+describe('isProviderEnabled', () => {
+  it('returns true when no providers setting exists (default enabled)', () => {
+    const context = makeMockContext();
+
+    expect(isProviderEnabled(context, 'someProvider')).toBe(true);
+  });
+
+  it('returns true when providers list is empty', () => {
+    const context = makeMockContext(JSON.stringify([]));
+
+    expect(isProviderEnabled(context, 'someProvider')).toBe(true);
+  });
+
+  it('returns true when provider is not in the list', () => {
+    const providers = [{ name: 'otherProvider', active: false }];
+    const context = makeMockContext(JSON.stringify(providers));
+
+    expect(isProviderEnabled(context, 'someProvider')).toBe(true);
+  });
+
+  it.each([
+    {
+      provider: 'eks', providers: [{ name: 'eks', active: true }], expected: true
+    },
+    {
+      provider: 'eks', providers: [{ name: 'eks', active: false }], expected: false
+    },
+    {
+      provider: 'gke', providers: [{ name: 'eks', active: true }, { name: 'gke', active: false }, { name: 'aks', active: true }], expected: false
+    },
+    {
+      provider: 'aks', providers: [{ name: 'eks', active: true }, { name: 'gke', active: false }, { name: 'aks', active: true }], expected: true
+    },
+  ])('returns $expected for provider "$provider"', ({ provider, providers, expected }) => {
+    const context = makeMockContext(JSON.stringify(providers));
+
+    expect(isProviderEnabled(context, provider)).toBe(expected);
+  });
+
+  it('throws when setting value is invalid JSON', () => {
+    const context = makeMockContext('not-valid-json{{{');
+
+    expect(() => isProviderEnabled(context, 'eks')).toThrow('Unexpected token');
+  });
+});

package/utils/__tests__/sort-utils.test.ts

@@ -0,0 +1,301 @@
+import {
+  typeOf,
+  spaceship,
+  compare,
+  parseField,
+  sortableNumericSuffix,
+  isNumeric,
+} from '@shell/utils/sort';
+
+describe('sort utils', () => {
+  describe('typeOf', () => {
+    it.each([
+      {
+        desc:     'null',
+        input:    null,
+        expected: 'null',
+      },
+      {
+        desc:     'undefined',
+        input:    undefined,
+        expected: 'undefined',
+      },
+      {
+        desc:     'boolean true',
+        input:    true,
+        expected: 'boolean',
+      },
+      {
+        desc:     'boolean false',
+        input:    false,
+        expected: 'boolean',
+      },
+      {
+        desc:     'number 0',
+        input:    0,
+        expected: 'number',
+      },
+      {
+        desc:     'number 42',
+        input:    42,
+        expected: 'number',
+      },
+      {
+        desc:     'string',
+        input:    'hello',
+        expected: 'string',
+      },
+      {
+        desc:     'array',
+        input:    [1, 2, 3],
+        expected: 'array',
+      },
+      {
+        desc:     'plain object',
+        input:    { a: 1 },
+        expected: 'object',
+      },
+      {
+        desc:     'function',
+        input:    () => {},
+        expected: 'function',
+      },
+      {
+        desc:     'regexp',
+        input:    /abc/,
+        expected: 'regexp',
+      },
+      {
+        desc:     'error instance',
+        input:    new Error('test'),
+        expected: 'error',
+      },
+      {
+        desc:     'date instance',
+        input:    new Date('2024-01-01'),
+        expected: 'date',
+      },
+    ])('returns "$expected" for $desc', ({ input, expected }) => {
+      expect(typeOf(input)).toStrictEqual(expected);
+    });
+  });
+
+  describe('spaceship', () => {
+    it.each([
+      {
+        desc:     'a greater than b',
+        a:        5,
+        b:        3,
+        expected: 1,
+      },
+      {
+        desc:     'a less than b',
+        a:        2,
+        b:        7,
+        expected: -1,
+      },
+      {
+        desc:     'a equals b',
+        a:        4,
+        b:        4,
+        expected: 0,
+      },
+    ])('returns $expected when $desc', ({ a, b, expected }) => {
+      expect(spaceship(a, b)).toStrictEqual(expected);
+    });
+  });
+
+  describe('compare', () => {
+    describe('same-type comparisons', () => {
+      it.each([
+        {
+          desc:     'numbers ascending',
+          a:        1,
+          b:        2,
+          expected: -1,
+        },
+        {
+          desc:     'numbers descending',
+          a:        9,
+          b:        3,
+          expected: 1,
+        },
+        {
+          desc:     'numbers equal',
+          a:        5,
+          b:        5,
+          expected: 0,
+        },
+        {
+          desc:     'booleans false before true',
+          a:        false,
+          b:        true,
+          expected: -1,
+        },
+        {
+          desc:     'booleans equal',
+          a:        true,
+          b:        true,
+          expected: 0,
+        },
+        {
+          desc:     'strings alphabetical',
+          a:        'apple',
+          b:        'banana',
+          expected: -1,
+        },
+        {
+          desc:     'strings equal',
+          a:        'foo',
+          b:        'foo',
+          expected: 0,
+        },
+      ])('$desc', ({ a, b, expected }) => {
+        expect(compare(a, b)).toStrictEqual(expected);
+      });
+    });
+
+    describe('cross-type ordering', () => {
+      it('sorts null before boolean', () => {
+        expect(compare(null, true)).toStrictEqual(-1);
+      });
+
+      it('sorts undefined before null', () => {
+        expect(compare(undefined, null)).toStrictEqual(-1);
+      });
+
+      it('sorts number before string', () => {
+        expect(compare(1, 'a')).toStrictEqual(-1);
+      });
+
+      it('sorts string before array', () => {
+        expect(compare('z', [1])).toStrictEqual(-1);
+      });
+    });
+
+    describe('array comparison', () => {
+      it('compares arrays element by element', () => {
+        expect(compare([1, 2], [1, 3])).toStrictEqual(-1);
+      });
+
+      it('returns 0 for equal arrays', () => {
+        expect(compare([1, 2], [1, 2])).toStrictEqual(0);
+      });
+
+      it('shorter array sorts before longer equal-prefix array', () => {
+        expect(compare([1], [1, 2])).toStrictEqual(-1);
+      });
+
+      it('longer array sorts after shorter equal-prefix array', () => {
+        expect(compare([1, 2], [1])).toStrictEqual(1);
+      });
+    });
+
+    describe('date comparison', () => {
+      it('earlier date sorts before later date', () => {
+        const earlier = new Date('2020-01-01');
+        const later = new Date('2023-01-01');
+
+        expect(compare(earlier, later)).toStrictEqual(-1);
+      });
+
+      it('same dates compare as equal', () => {
+        const d1 = new Date('2022-06-15');
+        const d2 = new Date('2022-06-15');
+
+        expect(compare(d1, d2)).toStrictEqual(0);
+      });
+    });
+  });
+
+  describe('parseField', () => {
+    it.each([
+      {
+        desc:     'plain field name',
+        input:    'name',
+        expected: { field: 'name', reverse: false },
+      },
+      {
+        desc:     'field with desc suffix',
+        input:    'name:desc',
+        expected: { field: 'name', reverse: true },
+      },
+      {
+        desc:     'nested field path',
+        input:    'metadata.name',
+        expected: { field: 'metadata.name', reverse: false },
+      },
+      {
+        desc:     'nested field with desc suffix',
+        input:    'metadata.name:desc',
+        expected: { field: 'metadata.name', reverse: true },
+      },
+    ])('$desc', ({ input, expected }) => {
+      expect(parseField(input)).toStrictEqual(expected);
+    });
+  });
+
+  describe('sortableNumericSuffix', () => {
+    it.each([
+      {
+        desc:     'string with numeric suffix',
+        input:    'foo1',
+        expected: 'foo0000000001',
+      },
+      {
+        desc:     'string with multi-digit numeric part',
+        input:    'pod42',
+        expected: 'pod0000000042',
+      },
+      {
+        desc:     'string with mixed numbers',
+        input:    'foo1-bar2',
+        expected: 'foo0000000001-bar0000000002',
+      },
+      {
+        desc:     'string with no numbers',
+        input:    'foobar',
+        expected: 'foobar',
+      },
+      {
+        desc:     'non-string passthrough (number)',
+        input:    42 as any,
+        expected: 42,
+      },
+    ])('$desc', ({ input, expected }) => {
+      expect(sortableNumericSuffix(input)).toStrictEqual(expected);
+    });
+  });
+
+  describe('isNumeric', () => {
+    it.each([
+      {
+        desc:     'numeric string',
+        input:    '123',
+        expected: true,
+      },
+      {
+        desc:     'zero string',
+        input:    '0',
+        expected: true,
+      },
+      {
+        desc:     'non-numeric string',
+        input:    'abc',
+        expected: false,
+      },
+      {
+        desc:     'mixed alphanumeric string',
+        input:    'foo1',
+        expected: false,
+      },
+      {
+        desc:     'numeric number',
+        input:    42,
+        expected: true,
+      },
+    ])('$desc', ({ input, expected }) => {
+      expect(isNumeric(input)).toStrictEqual(expected);
+    });
+  });
+});