@rancher/shell 1.2.3 → 2.0.1

package/components/__tests__/AppModal.test.ts

@@ -0,0 +1,98 @@
+/* eslint-disable jest/no-hooks */
+import { shallowMount, Wrapper } from '@vue/test-utils';
+import AppModal from '@shell/components/AppModal.vue';
+
+let wrapper: Wrapper<InstanceType<typeof AppModal>>;
+
+describe('appModal', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(AppModal, {
+      propsData: {
+        clickToClose: true,
+        width:        600,
+      },
+      slots: { default: '<div class="content">Modal content</div>' }
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders modal content', () => {
+    expect(wrapper.find('.content').exists()).toBeTruthy();
+  });
+
+  it('emits close event when clicked outside', async() => {
+    const overlay = wrapper.find('.modal-overlay');
+
+    await overlay.trigger('click');
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('emits close event when escape key is pressed', async() => {
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key:     'Escape',
+      keyCode: 27,
+    }));
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('does not emit close event when clickToClose is false', async() => {
+    await wrapper.setProps({ clickToClose: false });
+    const overlay = wrapper.find('.modal-overlay');
+
+    await overlay.trigger('click');
+    expect(wrapper.emitted('close')).toBeFalsy();
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key:     'Escape',
+      keyCode: 27,
+    }));
+
+    expect(wrapper.emitted('close')).toBeFalsy();
+  });
+
+  it('sets a width for the modal container', async() => {
+    const container = wrapper.find('.modal-container');
+
+    expect(container.exists()).toBeTruthy();
+    expect(wrapper.find('.modal-container').element.style.width).toBe('600px');
+  });
+
+  it('sets a percentage width for the modal container', async() => {
+    await wrapper.setProps({ width: '50%' });
+    const container = wrapper.find('.modal-container');
+
+    expect(container.exists()).toBeTruthy();
+    expect(wrapper.find('.modal-container').element.style.width).toBe('50%');
+  });
+
+  it('does not generate validation errors when setting a pixel width', async() => {
+    const consoleErrorSpy = jest.spyOn(console, 'error');
+
+    consoleErrorSpy.mockImplementation(() => {});
+
+    await wrapper.setProps({ width: '200px' });
+    const container = wrapper.find('.modal-container');
+
+    expect(container.exists()).toBeTruthy();
+    expect(wrapper.find('.modal-container').element.style.width).toBe('200px');
+
+    expect(consoleErrorSpy).not.toHaveBeenCalled();
+  });
+
+  it('generates validation errors with an invalid string for width', async() => {
+    const consoleErrorSpy = jest.spyOn(console, 'error');
+
+    consoleErrorSpy.mockImplementation(() => {});
+
+    await wrapper.setProps({ width: 'FAIL' });
+    const container = wrapper.find('.modal-container');
+
+    expect(container.exists()).toBeTruthy();
+    expect(wrapper.find('.modal-container').element.style.width).toBe('600px');
+
+    expect(consoleErrorSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/components/__tests__/AsyncButton.test.ts

@@ -1,6 +1,5 @@
 import { mount, Wrapper } from '@vue/test-utils';
 import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton.vue';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: AsyncButton', () => {
   it('should render appropriately with default config', () => {
@@ -8,8 +7,7 @@ describe('component: AsyncButton', () => {
     const mockT = jest.fn().mockReturnValue('some-string');
 
     const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
-      directives: { cleanHtmlDirective },
-      mocks:      {
+      mocks: {
         $store: {
           getters: {
             'i18n/exists': mockExists,

package/components/__tests__/BackLink.test.ts

@@ -14,7 +14,7 @@ describe('component: BackLink', () => {
 
     const wrapper = shallowMount(BackLink, {
       propsData: { link: linkRoute },
-      stubs:     { NuxtLink: RouterLinkStub }
+      stubs:     { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);

package/components/__tests__/ButtonGroup.test.ts

@@ -22,8 +22,7 @@ describe('component: ButtonGroup', () => {
       propsData: {
         options,
         value: 'val1'
-      },
-      directives: { 'trim-whitespace': jest.fn() },
+      }
     });
 
     const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
@@ -68,8 +67,7 @@ describe('component: ButtonGroup', () => {
         inactiveClass: 'bg-some-inactive-class',
         iconSize:      'xxxxl',
         value:         'val1'
-      },
-      directives: { 'trim-whitespace': jest.fn() },
+      }
     });
 
     const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
@@ -110,8 +108,7 @@ describe('component: ButtonGroup', () => {
       propsData: {
         options,
         value: 'val1'
-      },
-      directives: { 'trim-whitespace': jest.fn() },
+      }
     });
 
     const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');

package/components/__tests__/Carousel.test.ts

@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils';
+import Carousel from '@shell/components/Carousel.vue';
+
+describe('component: Carousel', () => {
+  it('should render component with the correct data applied', async() => {
+    const sliders = [
+      {
+        key:              'key-0',
+        repoName:         'some-repo-name-0',
+        chartNameDisplay: 'chart-name-display-0',
+        chartDescription: 'chart-description-0'
+      },
+      {
+        key:              'key-1',
+        repoName:         'some-repo-name-1',
+        chartNameDisplay: 'chart-name-display-1',
+        chartDescription: 'chart-description-1'
+      },
+      {
+        key:              'key-2',
+        repoName:         'some-repo-name-2',
+        chartNameDisplay: 'chart-name-display-2',
+        chartDescription: 'chart-description-2'
+      },
+      {
+        key:              'key-3',
+        repoName:         'some-repo-name-3',
+        chartNameDisplay: 'chart-name-display-3',
+        chartDescription: 'chart-description-3'
+      }
+    ];
+
+    const wrapper = mount(Carousel, {
+      propsData: { sliders },
+      mocks:     { $store: { getters: { clusterId: () => 'some-cluster-id' } } }
+    });
+
+    // testing https://github.com/rancher/dashboard/issues/9975
+    sliders.forEach((slider, index) => {
+      expect(wrapper.find(`#slide${ index } h1`).text()).toContain(slider.chartNameDisplay);
+    });
+  });
+});

package/components/__tests__/Certificates.test.ts

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import Certificates from '@shell/components/Certificates.vue';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+
+describe('component: Certificates', () => {
+  it("show correct 'expiring' banner", async() => {
+    const wrapper = shallowMount(Certificates, {
+      data() {
+        return {
+          schema: {},
+          certs:  [{ certState: STATES_ENUM.EXPIRING }]
+        };
+      },
+      mocks: {
+        $fetchState: { pending: false },
+        $store:      {
+          getters: {
+            'i18n/t':            (l: string) => { },
+            'cluster/schemaFor': () => ({ })
+          }
+        }
+      },
+    });
+
+    const expiringBanner = wrapper.find('[data-testid="cert-expiring-banner"]');
+
+    expect(expiringBanner.exists()).toBe(true);
+  });
+});

package/components/__tests__/CodeMirror.test.ts

@@ -0,0 +1,87 @@
+import { shallowMount, Wrapper } from '@vue/test-utils';
+import CodeMirror from '@shell/components/CodeMirror.vue';
+import { _EDIT, _YAML } from '@shell/config/query-params';
+
+describe('component: CodeMirror.vue', () => {
+  let wrapper: Wrapper<InstanceType<typeof CodeMirror>>;
+
+  const options = {
+    readOnly: false,
+    gutters:  [
+      'CodeMirror-lint-markers',
+      'CodeMirror-foldgutter'
+    ],
+    mode:            'yaml',
+    lint:            true,
+    lineNumbers:     true,
+    styleActiveLine: true,
+    tabSize:         2,
+    indentWithTabs:  false,
+    cursorBlinkRate: 530,
+    extraKeys:       { 'Ctrl-Space': 'autocomplete' }
+  };
+
+  const mountOptions = {
+    propsData: {
+      value:         '',
+      mode:          _EDIT,
+      options,
+      asTextArea:    false,
+      showKeyMapBox: true,
+    },
+    mocks: {
+      $store: {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  () => 'Vim',
+          'prefs/get':               () => 'Vim',
+          'prefs/theme':             jest.fn(),
+        }
+      },
+      $route:  { query: { AS: _YAML } },
+      $router: { applyQuery: jest.fn() },
+    },
+  };
+
+  describe('keyMap info', () => {
+    (window as any).__codeMirrorLoader = () => new Promise((resolve) => {
+      resolve(true);
+    });
+
+    wrapper = shallowMount(
+      CodeMirror,
+      mountOptions,
+    );
+
+    it(`should show keyMap preference`, async() => {
+      await wrapper.vm.$nextTick();
+
+      const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+      const keyboardIcon = keyMapBox.find('.keymap-indicator');
+      const closeIcon = keyMapBox.find('.icon-close');
+
+      expect(keyboardIcon.element).toBeDefined();
+      expect(closeIcon.element).toBeDefined();
+    });
+
+    it(`should remove keyMap box`, async() => {
+      await wrapper.vm.$nextTick();
+
+      let keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+
+      keyMapBox.trigger('mouseenter');
+      await wrapper.vm.$nextTick();
+
+      const closeIcon = keyMapBox.find('.icon-close');
+
+      closeIcon.element.click();
+      await wrapper.vm.$nextTick();
+
+      keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+
+      expect(keyMapBox.element).toBeUndefined();
+    });
+  });
+});

package/components/__tests__/CopyCode.test.ts

@@ -1,12 +1,13 @@
 import { mount } from '@vue/test-utils';
 import CopyCode from '@shell/components/CopyCode.vue';
 
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
 describe('component: CopyCode', () => {
   it('should emit copied after click', async() => {
-    const wrapper = mount(CopyCode, {
-      mocks: { $copyText: () => new Promise(() => undefined) },
-      slots: { default: '<div></div>' }
-    });
+    const wrapper = mount(CopyCode, { slots: { default: '<div></div>' } });
 
     await wrapper.find('code').trigger('click');
 

package/components/__tests__/CruResource.test.ts

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils';
 import CruResource from '@shell/components/CruResource.vue';
 import { _EDIT, _YAML } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 
 describe('component: CruResource', () => {
@@ -20,7 +19,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },
@@ -35,8 +35,7 @@ describe('component: CruResource', () => {
   it('should display multiple errors', () => {
     const errors = ['mistake!', 'BiG MiStAke11'];
     const wrapper = mount(CruResource, {
-      directives: { cleanHtmlDirective },
-      propsData:  {
+      propsData: {
         canYaml:  false,
         mode:     _EDIT,
         resource: {},
@@ -54,7 +53,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },
@@ -87,7 +87,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },
@@ -105,8 +106,7 @@ describe('component: CruResource', () => {
   it('should not prevent default events on keypress Enter', async() => {
     const event = { preventDefault: jest.fn() };
     const wrapper = mount(CruResource, {
-      directives: { cleanHtmlDirective },
-      propsData:  {
+      propsData: {
         canYaml:            false,
         mode:               _EDIT,
         resource:           {},
@@ -126,7 +126,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },

package/components/__tests__/EtcdInfoBanner.test.ts

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import EtcdInfoBanner from '../EtcdInfoBanner.vue';
+import { CATALOG } from '@shell/config/types';
+
+describe('component: EtcdInfoBanner', () => {
+  it('should perform fetch correctly', async() => {
+    const mockCanList = jest.fn((resource: string) => true);
+    const mockDispatch = jest.fn((resource: string, param: any) => ({ data: { result: [] } }));
+
+    const wrapper = mount(
+      EtcdInfoBanner,
+      {
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/t':          () => 'Test',
+              currentProduct:    { inStore: 'cluster' },
+              'cluster/canList': mockCanList,
+              currentCluster:    { id: 'local' },
+            },
+            dispatch: mockDispatch,
+          },
+          $fetchState: { pending: false }
+        }
+      });
+
+    await (EtcdInfoBanner as any).fetch.call(wrapper.vm);
+
+    // canList should have been called once
+    expect(mockCanList.mock.calls).toHaveLength(1);
+    expect(mockCanList.mock.calls[0][0]).toBe(CATALOG.APP);
+
+    // check that the if in the find method worked correctly
+    expect(mockDispatch.mock.calls).toHaveLength(4);
+    expect(mockDispatch.mock.calls[0][0]).toBe('cluster/find');
+  });
+});

package/components/__tests__/FixedBanner.test.ts

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import FixedBanner from '@shell/components/FixedBanner.vue';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 import { DefaultProps } from 'vue/types/options';
+import { SETTING } from '@shell/config/settings';
 
 const SETTING_NO_CONSENT = { value: '{"loginError":{"message":"","showMessage":"false"},"bannerHeader":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME HEADER TEXT"},"bannerFooter":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME FOOTER TEXT"},"bannerConsent":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":null,"button":null},"showHeader":"true","showFooter":"true","showConsent":"false"}' };
 const SETTING_WITH_CONSENT = { value: '{"loginError":{"message":"","showMessage":"false"},"bannerHeader":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME HEADER TEXT"},"bannerFooter":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME FOOTER TEXT"},"bannerConsent":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME CONSENT TEXT" ,"button": "some-button-label"},"showHeader":"true","showFooter":"true","showConsent":"true"}' };
@@ -30,13 +31,9 @@ describe('component: FixedBanner', () => {
   it('should render HEADER fixed banner correctly', async() => {
     const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       propsData: { header: true },
-      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+      mocks:     { $store: { getters: { 'management/byId': jest.fn(), 'management/all': () => [{ id: SETTING.BANNERS, ...SETTING_NO_CONSENT }] } } }
     });
 
-    wrapper.setData({ bannerSetting: SETTING_NO_CONSENT });
-
-    await wrapper.vm.$nextTick();
-
     expect(wrapper.vm.bannerStyle).toStrictEqual(parsedBannerStyle);
 
     expect(wrapper.vm.banner).toStrictEqual(expect.objectContaining(parsedBannerContent));
@@ -54,13 +51,9 @@ describe('component: FixedBanner', () => {
   it('should render FOOTER fixed banner, as text array (newline char), correctly', async() => {
     const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       propsData: { footer: true },
-      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+      mocks:     { $store: { getters: { 'management/byId': jest.fn(), 'management/all': () => [{ id: SETTING.BANNERS, ...SETTING_NO_CONSENT }] } } }
     });
 
-    wrapper.setData({ bannerSetting: SETTING_NO_CONSENT });
-
-    await wrapper.vm.$nextTick();
-
     expect(wrapper.vm.bannerStyle).toStrictEqual(parsedBannerStyle);
 
     expect(wrapper.vm.banner).toStrictEqual(expect.objectContaining(parsedBannerContent));
@@ -78,13 +71,9 @@ describe('component: FixedBanner', () => {
   it('should render CONSENT as a DIALOG correctly', async() => {
     const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       propsData: { consent: true },
-      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+      mocks:     { $store: { getters: { 'management/byId': jest.fn(), 'management/all': () => [{ id: SETTING.BANNERS, ...SETTING_WITH_CONSENT }] } } }
     });
 
-    wrapper.setData({ bannerSetting: SETTING_WITH_CONSENT });
-
-    await wrapper.vm.$nextTick();
-
     expect(wrapper.vm.bannerStyle).toStrictEqual(parsedBannerStyle);
 
     expect(wrapper.vm.banner).toStrictEqual(expect.objectContaining(parsedBannerContent));
@@ -109,13 +98,9 @@ describe('component: FixedBanner', () => {
   it('clicking dialog button should hide dialog', async() => {
     const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       propsData: { consent: true },
-      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+      mocks:     { $store: { getters: { 'management/byId': jest.fn(), 'management/all': () => [{ id: SETTING.BANNERS, ...SETTING_WITH_CONSENT }] } } }
     });
 
-    wrapper.setData({ bannerSetting: SETTING_WITH_CONSENT });
-
-    await wrapper.vm.$nextTick();
-
     const buttonDialog = wrapper.find('.banner-dialog button');
     const spy = jest.spyOn(wrapper.vm, 'hideDialog');
 

package/components/__tests__/NamespaceFilter.test.ts

@@ -10,8 +10,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $fetchState: { pending: false } },
-        directives: { shortkey: () => jest.fn() }
+        mocks: { $fetchState: { pending: false } }
       });
       const filter = wrapper.find(`[data-testid="namespaces-filter"]`);
 
@@ -29,8 +28,7 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
       const element = wrapper.find(`[data-testid="namespaces-values-none"]`).element.textContent;
 
@@ -48,8 +46,7 @@ describe('component: NamespaceFilter', () => {
             kind:  'special',
           }]),
         },
-        mocks:      { $fetchState: { pending: false } },
-        directives: { shortkey: () => jest.fn() }
+        mocks: { $fetchState: { pending: false } }
       });
 
       const element = wrapper.find(`[data-testid="namespaces-values-label"]`).element.textContent;
@@ -65,8 +62,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [{ label: text }],
         },
-        directives: { shortkey: () => jest.fn() },
-        mocks:      {
+        mocks: {
           $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
         },
@@ -107,8 +103,7 @@ describe('component: NamespaceFilter', () => {
             },
           },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
 
       const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
@@ -128,8 +123,7 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store:      { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
 
@@ -150,8 +144,7 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
 
@@ -171,8 +164,7 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
 
       (wrapper.vm as any).cachedFiltered = [
@@ -213,8 +205,7 @@ describe('component: NamespaceFilter', () => {
             dispatch: action
           },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
 
       (wrapper.vm as any).cachedFiltered = [