@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.12

package/components/__tests__/AutoscalerCard.test.ts

@@ -0,0 +1,154 @@
+
+import { mount } from '@vue/test-utils';
+import AutoscalerCard from '@shell/components/AutoscalerCard.vue';
+import { ref } from 'vue';
+import { createStore } from 'vuex';
+
+const mockUseFetch = jest.fn();
+
+jest.mock('@shell/components/Resource/Detail/FetchLoader/composables', () => ({ useFetch: (...args: any[]) => mockUseFetch(...args) }));
+
+const mockUseInterval = jest.fn();
+
+jest.mock('@shell/composables/useInterval', () => ({ useInterval: (...args: any[]) => mockUseInterval(...args) }));
+
+describe('component: AutoscalerCard.vue', () => {
+  const mockLoadDetails = jest.fn();
+  const mockRefresh = jest.fn();
+
+  const createWrapper = (props: any, useFetchState: any) => {
+    // Reset and configure the useFetch mock for each test
+    mockUseFetch.mockImplementation(() => {
+      return ref({
+        loading:    false,
+        refreshing: false,
+        data:       null,
+        refresh:    mockRefresh,
+        ...useFetchState,
+      });
+    });
+
+    return mount(AutoscalerCard, {
+      props: {
+        value: { loadAutoscalerDetails: mockLoadDetails },
+        ...props,
+      },
+      global:  { plugins: [createStore({})] },
+      // Shallow mount to avoid rendering child components like the dynamic ones
+      shallow: true,
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call useFetch with the correct loader function', () => {
+    createWrapper({}, {});
+    // The first argument to useFetch is the loader function
+    expect(mockUseFetch).toHaveBeenCalledWith(expect.any(Function));
+    // We can invoke the loader to ensure it calls the prop method
+    const loader = mockUseFetch.mock.calls[0][0];
+
+    loader();
+    expect(mockLoadDetails).toHaveBeenCalledWith();
+  });
+
+  it('should setup a polling interval to refresh data', () => {
+    createWrapper({}, {});
+    expect(mockUseInterval).toHaveBeenCalledWith(expect.any(Function), 10000);
+
+    // Invoke the interval function to ensure it calls refresh
+    const intervalFn = mockUseInterval.mock.calls[0][0];
+
+    intervalFn();
+    expect(mockRefresh).toHaveBeenCalledWith();
+  });
+
+  describe('uI States', () => {
+    it('should display a loading spinner on initial load', () => {
+      const wrapper = createWrapper({}, { loading: true, refreshing: false });
+
+      expect(wrapper.find('.loading').exists()).toBe(true);
+      expect(wrapper.find('.icon-spinner').exists()).toBe(true);
+      expect(wrapper.find('.details').exists()).toBe(false);
+      expect(wrapper.find('.text-warning').exists()).toBe(false);
+    });
+
+    it('should NOT display the main loading spinner during a background refresh', () => {
+      const wrapper = createWrapper({}, {
+        loading: true, refreshing: true, data: []
+      });
+
+      expect(wrapper.find('.loading').exists()).toBe(false);
+      // Data should still be visible
+      expect(wrapper.find('.details').exists()).toBe(true);
+    });
+
+    it('should display an error message if loading fails', () => {
+      const wrapper = createWrapper({}, { loading: false, data: null });
+
+      expect(wrapper.find('.text-warning').exists()).toBe(true);
+      expect(wrapper.find('.text-warning').text()).toBe('autoscaler.card.loadingError');
+      expect(wrapper.find('.loading').exists()).toBe(false);
+      expect(wrapper.find('.details').exists()).toBe(false);
+    });
+
+    it('should display details when data is loaded', () => {
+      const mockData = [
+        { label: 'Status', value: 'Active' },
+        { label: 'Nodes', value: '3' },
+      ];
+      const wrapper = createWrapper({}, { loading: false, data: mockData });
+
+      expect(wrapper.find('.details').exists()).toBe(true);
+      const details = wrapper.findAll('.detail');
+
+      expect(details).toHaveLength(2);
+      expect(details[0].text()).toContain('Status');
+      expect(details[0].text()).toContain('Active');
+      expect(details[1].text()).toContain('Nodes');
+      expect(details[1].text()).toContain('3');
+    });
+  });
+
+  describe('detail Rendering', () => {
+    it('should render a string value', () => {
+      const mockData = [{ label: 'My Label', value: 'My Value' }];
+      const wrapper = createWrapper({}, { data: mockData });
+      const valueDiv = wrapper.find('.value');
+
+      expect(valueDiv.find('span').exists()).toBe(true);
+      expect(valueDiv.text()).toBe('My Value');
+    });
+
+    it('should render a dynamic component value', () => {
+      const DynamicComponent = {
+        name:     'DynamicComponent',
+        props:    ['text'],
+        template: '<div>{{ text }}</div>'
+      };
+      const mockData = [{
+        label: 'My Component',
+        value: { component: DynamicComponent, props: { text: 'Dynamic Text' } }
+      }];
+      const wrapper = createWrapper({}, { data: mockData });
+      const valueDiv = wrapper.find('.value');
+      const renderedComponent = valueDiv.findComponent(DynamicComponent);
+
+      expect(renderedComponent.exists()).toBe(true);
+      expect(renderedComponent.props('text')).toBe('Dynamic Text');
+    });
+
+    it('should render a heading for details without a value', () => {
+      const mockData = [{ label: 'Section Header' }];
+      const wrapper = createWrapper({}, { data: mockData });
+
+      expect(wrapper.find('h5').exists()).toBe(true);
+      expect(wrapper.find('h5').text()).toBe('Section Header');
+      // Label and value should not be rendered
+      expect(wrapper.find('label').exists()).toBe(false);
+      expect(wrapper.find('.value').exists()).toBe(false);
+    });
+  });
+});

package/components/__tests__/AutoscalerTab.test.ts

@@ -0,0 +1,125 @@
+
+import { mount } from '@vue/test-utils';
+import AutoscalerTab from '@shell/components/AutoscalerTab.vue';
+import { ref } from 'vue';
+import { createStore } from 'vuex';
+
+const mockUseFetch = jest.fn();
+
+jest.mock('@shell/components/Resource/Detail/FetchLoader/composables', () => ({ useFetch: (...args: any[]) => mockUseFetch(...args) }));
+
+const mockUseInterval = jest.fn();
+
+jest.mock('@shell/composables/useInterval', () => ({ useInterval: (...args: any[]) => mockUseInterval(...args) }));
+
+describe('component: AutoscalerTab.vue', () => {
+  const mockLoadEvents = jest.fn();
+  const mockRefresh = jest.fn();
+  const mockChangeSort = jest.fn();
+
+  const SortableTableStub = {
+    name:     'SortableTable',
+    template: '<div></div>',
+    setup() {
+      return { changeSort: mockChangeSort };
+    },
+    props: ['namespaced', 'rowActions', 'defaultSortBy', 'headers', 'rows']
+  };
+
+  const createWrapper = (props: any, useFetchState: any) => {
+    mockUseFetch.mockImplementation(() => {
+      return ref({
+        data:    null,
+        refresh: mockRefresh,
+        ...useFetchState,
+      });
+    });
+
+    return mount(AutoscalerTab, {
+      props: {
+        value: { loadAutoscalerEvents: mockLoadEvents },
+        ...props,
+      },
+      global: {
+        plugins: [createStore({})],
+        stubs:   {
+          Tab: {
+            name:     'Tab',
+            template: '<div><slot/></div>',
+            props:    ['label']
+          },
+          SortableTable: SortableTableStub,
+        },
+      }
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('initialization and Data Fetching', () => {
+    it('should call useFetch with the correct loader function', () => {
+      createWrapper({}, {});
+      expect(mockUseFetch).toHaveBeenCalledWith(expect.any(Function));
+
+      const loader = mockUseFetch.mock.calls[0][0];
+
+      loader();
+      expect(mockLoadEvents).toHaveBeenCalledWith();
+    });
+
+    it('should setup a polling interval to refresh data', () => {
+      createWrapper({}, {});
+      expect(mockUseInterval).toHaveBeenCalledWith(expect.any(Function), 20000);
+
+      const intervalFn = mockUseInterval.mock.calls[0][0];
+
+      intervalFn();
+      expect(mockRefresh).toHaveBeenCalledWith();
+    });
+
+    it('should call changeSort on the table on mounted', () => {
+      createWrapper({}, {});
+      expect(mockChangeSort).toHaveBeenCalledWith('date', true);
+    });
+  });
+
+  describe('sortableTable props', () => {
+    it('should pass static props to the table', () => {
+      const wrapper = createWrapper({}, {});
+      const table = wrapper.findComponent(SortableTableStub);
+
+      expect(table.props('namespaced')).toBe(false);
+      expect(table.props('rowActions')).toBe(false);
+      expect(table.props('defaultSortBy')).toBe('date');
+      expect(table.props('headers')).toHaveLength(4);
+      expect(table.props('headers')[0].name).toBe('type');
+    });
+
+    it('should pass an empty array to rows when data is null', () => {
+      const wrapper = createWrapper({}, { data: null });
+      const table = wrapper.findComponent(SortableTableStub);
+
+      expect(table.props('rows')).toStrictEqual([]);
+    });
+
+    it('should pass fetched data to the rows prop', () => {
+      const mockEvents = [
+        { id: 1, message: 'Event 1' },
+        { id: 2, message: 'Event 2' },
+      ];
+      const wrapper = createWrapper({}, { data: mockEvents });
+      const table = wrapper.findComponent(SortableTableStub);
+
+      expect(table.props('rows')).toStrictEqual(mockEvents);
+    });
+  });
+
+  it('should pass correct label to Tab component', () => {
+    const wrapper = createWrapper({}, {});
+    const tab = wrapper.findComponent({ name: 'Tab' });
+
+    expect(tab.props('label')).toBe('autoscaler.tab.title');
+  });
+});

package/components/__tests__/PopoverCard.test.ts

@@ -0,0 +1,204 @@
+
+import { mount } from '@vue/test-utils';
+import PopoverCard from '@shell/components/PopoverCard.vue';
+
+const mockFocusTrap = jest.fn();
+
+jest.mock('@shell/composables/focusTrap', () => ({
+  ...jest.requireActual('@shell/composables/focusTrap'), // Keep DEFAULT_FOCUS_TRAP_OPTS
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded: (...args: any[]) => mockFocusTrap(...args),
+}));
+
+const VDropdownStub = {
+  props:    ['shown'],
+  template: `
+    <div>
+      <slot />
+      <div v-if="shown">
+        <slot name="popper" />
+      </div>
+    </div>
+  `,
+};
+
+describe('component: PopoverCard.vue', () => {
+  const createWrapper = (props = {}, slots = {}) => {
+    return mount(PopoverCard, {
+      props: {
+        cardTitle: 'Test Title',
+        ...props,
+      },
+      slots,
+      global: {
+        stubs: {
+          VDropdown: VDropdownStub,
+          Card:      {
+            template: `
+              <div>
+                <slot name="heading-action" />
+                <slot />
+              </div>
+            `,
+          },
+          RcButton: { template: '<button><slot /></button>' },
+        },
+      }
+    });
+  };
+
+  beforeEach(() => {
+    mockFocusTrap.mockClear();
+  });
+
+  describe('props', () => {
+    it('should use default props', () => {
+      const wrapper = createWrapper();
+      const button = wrapper.find('button');
+
+      expect(button.attributes('aria-label')).toBe('Show more');
+    });
+
+    it('should accept and render custom props', () => {
+      const props = {
+        cardTitle:            'My Custom Title',
+        showPopoverAriaLabel: 'Click for details'
+      };
+      const wrapper = createWrapper(props);
+      const button = wrapper.find('button');
+
+      expect(button.attributes('aria-label')).toBe(props.showPopoverAriaLabel);
+      // Note: cardTitle is passed to the Card component inside the popper,
+      // which is only rendered when the popover is shown.
+    });
+  });
+
+  describe('popover Visibility', () => {
+    it('should not be visible initially', () => {
+      const wrapper = createWrapper();
+
+      expect(wrapper.find('[id="popover-card"]').exists()).toBe(false);
+    });
+
+    it('should show on mouseenter and hide on mouseleave', async() => {
+      const wrapper = createWrapper();
+      const target = wrapper.find('.popover-card-target');
+
+      await target.trigger('mouseenter');
+      expect(wrapper.vm.showPopover).toBe(true);
+
+      const root = wrapper.find('.popover-card-base');
+
+      await root.trigger('mouseleave');
+      expect(wrapper.vm.showPopover).toBe(false);
+    });
+
+    it('should show on button click', async() => {
+      const wrapper = createWrapper();
+      const button = wrapper.find('button');
+
+      await button.trigger('click');
+      expect(wrapper.vm.showPopover).toBe(true);
+      expect(wrapper.vm.focusOpen).toBe(true);
+    });
+
+    it('should hide on Escape keydown', async() => {
+      const wrapper = createWrapper();
+
+      // Open it first
+      await wrapper.find('button').trigger('click');
+      expect(wrapper.vm.showPopover).toBe(true);
+      expect(wrapper.vm.focusOpen).toBe(true);
+
+      // Trigger escape
+      const root = wrapper.find('.popover-card-base');
+
+      await root.trigger('keydown.escape');
+
+      expect(wrapper.vm.showPopover).toBe(false);
+      expect(wrapper.vm.focusOpen).toBe(false);
+    });
+  });
+
+  describe('focus Trap', () => {
+    it('should NOT setup focus trap on mouseenter', async() => {
+      const wrapper = createWrapper();
+      const target = wrapper.find('.popover-card-target');
+
+      await target.trigger('mouseenter');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.focusOpen).toBe(false);
+      expect(mockFocusTrap).not.toHaveBeenCalled();
+    });
+
+    it('should setup focus trap when opened via click', async() => {
+      const wrapper = createWrapper({ fallbackFocus: '#my-fallback' });
+      const button = wrapper.find('button');
+
+      await button.trigger('click');
+      await wrapper.vm.$nextTick(); // Let watcher for `card` run
+
+      expect(wrapper.vm.focusOpen).toBe(true);
+      expect(mockFocusTrap).toHaveBeenCalledTimes(1);
+
+      // Check arguments passed to the composable
+      const focusTrapOptions = mockFocusTrap.mock.calls[0][2];
+
+      expect(focusTrapOptions.fallbackFocus).toBe('#my-fallback');
+      expect(focusTrapOptions.setReturnFocus()).toBe('.focus-button');
+    });
+  });
+
+  describe('slots', () => {
+    it('should render the default slot content', () => {
+      const wrapper = createWrapper({}, { default: '<span class="default-slot-content">Hello</span>' });
+
+      expect(wrapper.find('.default-slot-content').exists()).toBe(true);
+      expect(wrapper.find('.default-slot-content').text()).toBe('Hello');
+    });
+
+    it('should render the card-body slot content', async() => {
+      const wrapper = createWrapper({}, { 'card-body': '<div class="card-body-content">Card Body</div>' });
+
+      // Open popover to render the slot
+      await wrapper.find('button').trigger('click');
+
+      expect(wrapper.find('.card-body-content').exists()).toBe(true);
+      expect(wrapper.find('.card-body-content').text()).toBe('Card Body');
+    });
+
+    it('should pass a close function to the heading-action slot', async() => {
+      const wrapper = createWrapper({}, {
+        'heading-action': `
+          <template #heading-action="{ close }">
+            <button class="close-button" @click="close">Close</button>
+          </template>
+        `
+      });
+
+      // Open popover
+      await wrapper.find('button').trigger('click');
+      expect(wrapper.vm.showPopover).toBe(true);
+      expect(wrapper.vm.focusOpen).toBe(true);
+
+      // Click the button that uses the `close` slot prop
+      await wrapper.find('.close-button').trigger('click');
+
+      // Due to the bug, this should be true, not false
+      expect(wrapper.vm.showPopover).toBe(false);
+      expect(wrapper.vm.focusOpen).toBe(false);
+    });
+
+    it('should allow overriding the entire card via the card slot', async() => {
+      const wrapper = createWrapper({}, { card: '<div class="custom-card">My Custom Card</div>' });
+
+      // Open popover
+      await wrapper.find('button').trigger('click');
+
+      expect(wrapper.find('.custom-card').exists()).toBe(true);
+      expect(wrapper.find('.custom-card').text()).toBe('My Custom Card');
+      // The default Card component should not be rendered
+      expect(wrapper.find('[id="popover-card"]').exists()).toBe(false);
+    });
+  });
+});

package/components/auth/SelectPrincipal.vue

@@ -56,11 +56,13 @@ export default {
 
   data() {
     return {
-      principals:     null,
-      searchStr:      '',
-      options:        [],
-      newValue:       '',
-      tooltipContent: null,
+      principals:        null,
+      searchStr:         '',
+      options:           [],
+      newValue:          '',
+      tooltipContent:    null,
+      hasSearchTooShort: false,
+      minSearchLength:   2,
     };
   },
 
@@ -133,9 +135,20 @@ export default {
       this.searchStr = str;
 
       if ( str ) {
+        // Backend requires minimum 2 characters for search
+        if (str.length < this.minSearchLength) {
+          this.hasSearchTooShort = true;
+          this.options = [];
+          loading(false);
+
+          return;
+        }
+
+        this.hasSearchTooShort = false;
         loading(true);
         this.debouncedSearch(str, loading);
       } else {
+        this.hasSearchTooShort = false;
         this.search(null, loading);
       }
     },
@@ -196,7 +209,12 @@ export default {
     @on-close="setTooltipContent()"
   >
     <template v-slot:no-options="{ searching }">
-      <template v-if="searching">
+      <template v-if="hasSearchTooShort">
+        <span class="search-slot">
+          {{ t('cluster.memberRoles.addClusterMember.minCharacters', { count: minSearchLength }) }}
+        </span>
+      </template>
+      <template v-else-if="searching">
         <span class="search-slot">
           {{ t('cluster.memberRoles.addClusterMember.noResults') }}
         </span>

package/components/auth/__tests__/SelectPrincipal.test.ts

@@ -0,0 +1,119 @@
+import { shallowMount, type VueWrapper } from '@vue/test-utils';
+import SelectPrincipal from '@shell/components/auth/SelectPrincipal.vue';
+
+describe('component: SelectPrincipal', () => {
+  const mockStore = { dispatch: jest.fn().mockResolvedValue([]) };
+
+  const defaultMountOptions = {
+    global: {
+      mocks: {
+        $fetchState: { pending: false },
+        $store:      mockStore,
+        t:           (key: string, opts?: any) => opts?.count ? `${ key } ${ opts.count }` : key,
+      },
+      stubs: {
+        LabeledSelect: {
+          template: '<div class="labeled-select-stub"><slot name="no-options" :searching="searching" /></div>',
+          props:    ['options', 'searchable', 'filterable'],
+          data() {
+            return { searching: false };
+          }
+        },
+        Principal: true,
+      },
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockStore.dispatch.mockResolvedValue([]);
+  });
+
+  describe('onSearch', () => {
+    it('should set hasSearchTooShort to true when search string is less than minSearchLength', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      // Set principals to an empty array to avoid null errors
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('a', loadingFn);
+
+      expect(wrapper.vm.hasSearchTooShort).toBe(true);
+      expect(wrapper.vm.options).toStrictEqual([]);
+      expect(loadingFn).toHaveBeenCalledWith(false);
+    });
+
+    it('should set hasSearchTooShort to false when search string meets minSearchLength', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('ab', loadingFn);
+
+      expect(wrapper.vm.hasSearchTooShort).toBe(false);
+      expect(loadingFn).toHaveBeenCalledWith(true);
+    });
+
+    it('should set hasSearchTooShort to false when search string is empty', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      // First set hasSearchTooShort to true
+      wrapper.vm.hasSearchTooShort = true;
+
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('', loadingFn);
+
+      expect(wrapper.vm.hasSearchTooShort).toBe(false);
+    });
+
+    it('should not call debouncedSearch when search string is too short', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      // Spy on the debounced search
+      const debouncedSearchSpy = jest.spyOn(wrapper.vm, 'debouncedSearch');
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('x', loadingFn);
+
+      expect(debouncedSearchSpy).not.toHaveBeenCalled();
+    });
+
+    it('should call debouncedSearch when search string meets minimum length', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      const debouncedSearchSpy = jest.spyOn(wrapper.vm, 'debouncedSearch');
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('xy', loadingFn);
+
+      expect(debouncedSearchSpy).toHaveBeenCalledWith('xy', loadingFn);
+    });
+  });
+
+  describe('minSearchLength', () => {
+    it('should have a default minSearchLength of 2', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.minSearchLength).toBe(2);
+    });
+  });
+});

package/components/auth/login/ldap.vue

@@ -34,9 +34,9 @@ export default {
         });
 
         await loadPlugins({
-          app:     this.$store.app,
-          store:   this.$store,
-          $plugin: this.$store.$plugin
+          app:        this.$store.app,
+          store:      this.$store,
+          $extension: this.$store.$extension,
         });
 
         buttonCb(true);

package/components/form/NodeScheduling.vue

@@ -181,7 +181,7 @@ export default {
         :options="selectNodeOptions"
         :mode="mode"
         :data-testid="'node-scheduling-selectNode'"
-        @input="update"
+        @update:value="update"
       />
     </div>
     <template v-if="selectNode === 'nodeSelector'">
@@ -205,7 +205,7 @@ export default {
         v-model:value="nodeAffinity"
         :mode="mode"
         :data-testid="'node-scheduling-nodeAffinity'"
-        @input="update"
+        @update:value="update"
       />
     </template>
   </div>