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

package/utils/__tests__/release-notes.test.ts

@@ -0,0 +1,221 @@
+import { NotificationLevel } from '@shell/types/notifications';
+
+const MOCK_VERSION = '2.9.0';
+const MOCK_VERSION_WITH_SUFFIX = `${ MOCK_VERSION }-rc1`;
+const READ_WHATS_NEW_KEY = 'read-whatsnew';
+const PREFIX = 'release-notes-';
+const CURRENT_ID = `${ PREFIX }${ MOCK_VERSION }`;
+const RELEASE_NOTES_URL = 'https://example.com/release-notes';
+
+function makeGetters(overrides: {
+  all?: any[];
+  lastReadVersion?: string;
+  t?: (key: string, args?: any) => string;
+  releaseNotesUrl?: string;
+} = {}) {
+  const {
+    all = [],
+    lastReadVersion = '',
+    t = (key: string) => key,
+    releaseNotesUrl = RELEASE_NOTES_URL,
+  } = overrides;
+
+  return {
+    'notifications/all': all,
+    'prefs/get':         (key: string) => (key === READ_WHATS_NEW_KEY ? lastReadVersion : ''),
+    'i18n/t':            t,
+    releaseNotesUrl,
+  };
+}
+
+describe('addReleaseNotesNotification', () => {
+  let addReleaseNotesNotification: any;
+  let mockGetVersionData: jest.Mock;
+
+  beforeEach(() => {
+    jest.resetModules();
+    mockGetVersionData = jest.fn(() => ({ Version: MOCK_VERSION_WITH_SUFFIX }));
+    jest.mock('@shell/config/version', () => ({ getVersionData: mockGetVersionData }));
+    addReleaseNotesNotification = require('@shell/utils/release-notes').addReleaseNotesNotification;
+  });
+
+  describe('version parsing', () => {
+    it('strips the pre-release suffix from the version', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters();
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/add', expect.objectContaining({ id: CURRENT_ID }));
+    });
+
+    it('uses the version as-is when there is no suffix', async() => {
+      mockGetVersionData.mockReturnValue({ Version: MOCK_VERSION });
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters();
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/add', expect.objectContaining({ id: CURRENT_ID }));
+    });
+  });
+
+  describe('existing notification for the current version', () => {
+    it('does not add a notification when the current version notification already exists', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ all: [{ id: CURRENT_ID }] });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).not.toHaveBeenCalledWith('notifications/add', expect.anything());
+    });
+
+    it('does not remove the current version notification when it already exists', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ all: [{ id: CURRENT_ID }] });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).not.toHaveBeenCalledWith('notifications/remove', CURRENT_ID);
+    });
+  });
+
+  describe('old release-notes notifications', () => {
+    it('removes a notification for an older version', async() => {
+      const oldId = `${ PREFIX }2.8.0`;
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ all: [{ id: oldId }] });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/remove', oldId);
+    });
+
+    it('removes multiple notifications for older versions', async() => {
+      const oldId1 = `${ PREFIX }2.7.0`;
+      const oldId2 = `${ PREFIX }2.8.0`;
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ all: [{ id: oldId1 }, { id: oldId2 }] });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/remove', oldId1);
+      expect(dispatch).toHaveBeenCalledWith('notifications/remove', oldId2);
+    });
+
+    it('still adds a new notification after removing old ones', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ all: [{ id: `${ PREFIX }2.8.0` }] });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/add', expect.objectContaining({ id: CURRENT_ID }));
+    });
+  });
+
+  describe('non-release-notes notifications', () => {
+    it('ignores notifications with a different id prefix', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ all: [{ id: 'cluster-upgrade-1.0.0' }, { id: 'some-other-notification' }] });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).not.toHaveBeenCalledWith('notifications/remove', expect.anything());
+    });
+  });
+
+  describe('version preference guard', () => {
+    it('does not add notification when the version has already been read', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ lastReadVersion: MOCK_VERSION });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).not.toHaveBeenCalledWith('notifications/add', expect.anything());
+    });
+
+    it('adds notification when the read version pref is for an older version', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ lastReadVersion: '2.8.0' });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/add', expect.objectContaining({ id: CURRENT_ID }));
+    });
+
+    it('adds notification when the read version pref is empty', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ lastReadVersion: '' });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/add', expect.objectContaining({ id: CURRENT_ID }));
+    });
+  });
+
+  describe('notification shape', () => {
+    it('adds a notification with the correct id, level and preference', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const t = jest.fn((key: string) => key);
+      const getters = makeGetters({ t });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/add', {
+        id:         CURRENT_ID,
+        level:      NotificationLevel.Info,
+        title:      'landing.whatsNew.title',
+        message:    'landing.whatsNew.message',
+        preference: {
+          key:   READ_WHATS_NEW_KEY,
+          value: MOCK_VERSION,
+        },
+        primaryAction: {
+          label:  'landing.whatsNew.link',
+          target: RELEASE_NOTES_URL,
+        },
+      });
+    });
+
+    it('passes version to the title translation function', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const t = jest.fn((key: string) => key);
+      const getters = makeGetters({ t });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(t).toHaveBeenCalledWith('landing.whatsNew.title', { version: MOCK_VERSION });
+    });
+
+    it('uses the releaseNotesUrl getter for the primaryAction target', async() => {
+      const customUrl = 'https://custom.example.com/notes';
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ releaseNotesUrl: customUrl });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/add', expect.objectContaining({ primaryAction: expect.objectContaining({ target: customUrl }) }));
+    });
+  });
+
+  describe('empty state', () => {
+    it('adds a notification when there are no existing notifications', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ all: [] });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledWith('notifications/add', expect.objectContaining({ id: CURRENT_ID }));
+    });
+
+    it('dispatches nothing beyond add when there are no existing notifications', async() => {
+      const dispatch = jest.fn(() => Promise.resolve());
+      const getters = makeGetters({ all: [] });
+
+      await addReleaseNotesNotification(dispatch, getters);
+
+      expect(dispatch).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledWith('notifications/add', expect.anything());
+    });
+  });
+});

package/utils/__tests__/router.test.js

@@ -1,4 +1,15 @@
-import { findRouteDefinitionByName, filterLocationValidParams } from '@shell/utils/router';
+import {
+  findRouteDefinitionByName,
+  filterLocationValidParams,
+  queryParamsFor,
+  findMeta,
+  getClusterFromRoute,
+  getProductFromRoute,
+  getPackageFromRoute,
+  routeMatched,
+  routeRequiresAuthentication,
+  routeRequiresInstallRedirect,
+} from '@shell/utils/router';
 
 describe('findRouteDefinitionByName', () => {
   const createMockRouter = (routes) => ({ getRoutes: () => routes });
@@ -236,3 +247,245 @@ describe('filterLocationValidParams', () => {
     expect(result.params.extra).toBeUndefined();
   });
 });
+
+describe('queryParamsFor', () => {
+  it.each([
+    {
+      desc:     'includes key when no default is defined',
+      current:  {},
+      qp:       { page: 2 },
+      defaults: {},
+      expected: { page: 2 },
+    },
+    {
+      desc:     'sets key to null when default is false and val is truthy',
+      current:  {},
+      qp:       { verbose: true },
+      defaults: { verbose: false },
+      expected: { verbose: null },
+    },
+    {
+      desc:     'deletes key when default is false and val is falsy',
+      current:  { verbose: null },
+      qp:       { verbose: false },
+      defaults: { verbose: false },
+      expected: {},
+    },
+    {
+      desc:     'deletes key when value matches non-false default',
+      current:  {},
+      qp:       { sort: 'name' },
+      defaults: { sort: 'name' },
+      expected: {},
+    },
+    {
+      desc:     'sets key when value differs from non-false default',
+      current:  {},
+      qp:       { sort: 'age' },
+      defaults: { sort: 'name' },
+      expected: { sort: 'age' },
+    },
+    {
+      desc:     'preserves unrelated keys from current',
+      current:  { filter: 'active' },
+      qp:       { page: 2 },
+      defaults: {},
+      expected: { filter: 'active', page: 2 },
+    },
+    {
+      desc:     'treats null current as empty object',
+      current:  null,
+      qp:       { page: 1 },
+      defaults: {},
+      expected: { page: 1 },
+    },
+  ])('$desc', ({
+    current, qp, defaults, expected
+  }) => {
+    expect(queryParamsFor(current, qp, defaults)).toStrictEqual(expected);
+  });
+});
+
+describe('findMeta', () => {
+  it.each([
+    {
+      desc:     'returns undefined when route has no meta',
+      route:    { params: {} },
+      key:      'product',
+      expected: undefined,
+    },
+    {
+      desc:     'returns undefined when route is null',
+      route:    null,
+      key:      'product',
+      expected: undefined,
+    },
+    {
+      desc:     'returns value from a plain meta object',
+      route:    { meta: { product: 'explorer' } },
+      key:      'product',
+      expected: 'explorer',
+    },
+    {
+      desc:     'returns value from a matching item in array meta',
+      route:    { meta: [{ cluster: 'local' }, { product: 'explorer' }] },
+      key:      'product',
+      expected: 'explorer',
+    },
+    {
+      desc:     'returns undefined when key is absent from all meta items',
+      route:    { meta: [{ cluster: 'local' }] },
+      key:      'product',
+      expected: undefined,
+    },
+  ])('$desc', ({ route, key, expected }) => {
+    expect(findMeta(route, key)).toStrictEqual(expected);
+  });
+});
+
+describe('getClusterFromRoute', () => {
+  it.each([
+    {
+      desc:     'returns cluster from route params',
+      to:       { params: { cluster: 'local' } },
+      expected: 'local',
+    },
+    {
+      desc:     'returns cluster from route meta when not in params',
+      to:       { params: {}, meta: { cluster: 'remote' } },
+      expected: 'remote',
+    },
+    {
+      desc:     'returns undefined when cluster is not in params or meta',
+      to:       { params: {} },
+      expected: undefined,
+    },
+  ])('$desc', ({ to, expected }) => {
+    expect(getClusterFromRoute(to)).toStrictEqual(expected);
+  });
+});
+
+describe('getProductFromRoute', () => {
+  it.each([
+    {
+      desc:     'returns product from route params',
+      to:       { params: { product: 'explorer' } },
+      expected: 'explorer',
+    },
+    {
+      desc:     'infers product segment from c-cluster-<product>-* route name',
+      to:       { name: 'c-cluster-explorer-workloads', params: {} },
+      expected: 'explorer',
+    },
+    {
+      desc: 'returns product from route meta when params and name do not have it',
+      to:   {
+        name: 'some-route', params: {}, meta: { product: 'manager' }
+      },
+      expected: 'manager',
+    },
+    {
+      desc:     'returns undefined when product is not found anywhere',
+      to:       { params: {} },
+      expected: undefined,
+    },
+  ])('$desc', ({ to, expected }) => {
+    expect(getProductFromRoute(to)).toStrictEqual(expected);
+  });
+});
+
+describe('getPackageFromRoute', () => {
+  it.each([
+    {
+      desc:     'returns undefined when route has no meta',
+      route:    {},
+      expected: undefined,
+    },
+    {
+      desc:     'returns pkg from array meta',
+      route:    { meta: [{ pkg: 'my-package' }] },
+      expected: 'my-package',
+    },
+    {
+      desc:     'returns pkg from plain object meta',
+      route:    { meta: { pkg: 'my-package' } },
+      expected: 'my-package',
+    },
+    {
+      desc:     'returns undefined when no meta item defines pkg',
+      route:    { meta: [{ product: 'explorer' }] },
+      expected: undefined,
+    },
+  ])('$desc', ({ route, expected }) => {
+    expect(getPackageFromRoute(route)).toStrictEqual(expected);
+  });
+});
+
+describe('routeMatched', () => {
+  it.each([
+    {
+      desc:     'returns false when route has no matched array',
+      to:       {},
+      fn:       (m) => !!m.meta?.test,
+      expected: false,
+    },
+    {
+      desc:     'returns true when predicate matches a route entry',
+      to:       { matched: [{ meta: { test: true } }] },
+      fn:       (m) => !!m.meta?.test,
+      expected: true,
+    },
+    {
+      desc:     'returns false when predicate matches no route entry',
+      to:       { matched: [{ meta: { other: true } }] },
+      fn:       (m) => !!m.meta?.test,
+      expected: false,
+    },
+  ])('$desc', ({ to, fn, expected }) => {
+    expect(routeMatched(to, fn)).toStrictEqual(expected);
+  });
+});
+
+describe('routeRequiresAuthentication', () => {
+  it.each([
+    {
+      desc:     'returns true when a matched route requires authentication',
+      to:       { matched: [{ meta: { requiresAuthentication: true } }] },
+      expected: true,
+    },
+    {
+      desc:     'returns false when no matched route requires authentication',
+      to:       { matched: [{ meta: {} }] },
+      expected: false,
+    },
+    {
+      desc:     'returns false when route has no matched array',
+      to:       {},
+      expected: false,
+    },
+  ])('$desc', ({ to, expected }) => {
+    expect(routeRequiresAuthentication(to)).toStrictEqual(expected);
+  });
+});
+
+describe('routeRequiresInstallRedirect', () => {
+  it.each([
+    {
+      desc:     'returns true when a matched route meta contains installRedirect',
+      to:       { matched: [{ meta: { installRedirect: 'some-product' } }] },
+      expected: true,
+    },
+    {
+      desc:     'returns false when no matched route has installRedirect',
+      to:       { matched: [{ meta: {} }] },
+      expected: false,
+    },
+    {
+      desc:     'returns false when route has no matched array',
+      to:       {},
+      expected: false,
+    },
+  ])('$desc', ({ to, expected }) => {
+    expect(routeRequiresInstallRedirect(to)).toStrictEqual(expected);
+  });
+});

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);
+      });
+    });
+  });
+});