@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/Tabbed/index.vue

@@ -170,10 +170,8 @@ export default {
        * Exclude logic with URL anchor (hash) for projects without routing logic (vue-router)
        */
       if ( this.useHash ) {
-        const {
-          $route: { hash: routeHash },
-          $router: { currentRoute },
-        } = this;
+        const currentRoute = this.$router.currentRoute._value;
+        const routeHash = currentRoute.hash;
 
         if (this.useHash && routeHash !== hashName) {
           const kurrentRoute = { ...currentRoute };

package/components/Wizard.vue

@@ -333,11 +333,13 @@ export default {
               @keyup.right.stop="selectNext(1)"
               @keyup.left.stop="selectNext(-1)"
             >
-              <template v-for="(step, idx ) in visibleSteps">
+              <template
+                v-for="(step, idx ) in visibleSteps"
+                :key="idx"
+              >
                 <li
 
                   :id="step.name"
-                  :key="step.name+'li'"
                   :class="{step: true, active: step.name === activeStep.name, disabled: !isAvailable(step)}"
                   role="presentation"
                 >
@@ -372,7 +374,10 @@ export default {
         name="stepContainer"
         :activeStep="activeStep"
       >
-        <template v-for="step in steps">
+        <template
+          v-for="(step, i) in steps"
+          :key="i"
+        >
           <div
             v-if="step.name === activeStep.name || step.hidden"
             :key="step.name"

package/components/YamlEditor.vue

@@ -169,14 +169,14 @@ export default {
 
     onInput(value) {
       if ( !this.asObject ) {
-        this.$emit('input', ...arguments);
+        this.$emit('update:value', ...arguments);
       }
 
       try {
         const parsed = jsyaml.load(value);
 
         if ( this.asObject ) {
-          this.$emit('input', parsed);
+          this.$emit('update:value', parsed);
         } else {
           this.$emit('newObject', parsed);
         }
@@ -247,7 +247,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .yaml-editor {
   display: flex;
   flex-direction: column;
@@ -256,7 +256,7 @@ export default {
     flex: 1;
   }
 
-  ::v-deep .code-mirror  {
+  .codemirror-container  {
     position: relative;
 
     .CodeMirror {

package/components/__tests__/AppModal.test.ts

@@ -1,13 +1,15 @@
 /* eslint-disable jest/no-hooks */
-import { shallowMount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import AppModal from '@shell/components/AppModal.vue';
 
-let wrapper: Wrapper<InstanceType<typeof AppModal>>;
+let wrapper: VueWrapper<InstanceType<typeof AppModal>>;
 
 describe('appModal', () => {
   beforeEach(() => {
-    wrapper = shallowMount(AppModal, {
-      propsData: {
+    document.body.innerHTML = '<div id="modals"></div>';
+    wrapper = mount(AppModal, {
+      attachTo: document.body,
+      props:    {
         clickToClose: true,
         width:        600,
       },
@@ -16,17 +18,23 @@ describe('appModal', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
+    document.body.innerHTML = '';
   });
 
-  it('renders modal content', () => {
-    expect(wrapper.find('.content').exists()).toBeTruthy();
+  it('renders modal content', async() => {
+    const modalContainer = document.querySelector('#modals .modal-container');
+
+    expect(modalContainer).toBeTruthy();
+    expect(modalContainer?.textContent).toContain('Modal content');
   });
 
   it('emits close event when clicked outside', async() => {
-    const overlay = wrapper.find('.modal-overlay');
+    const overlay = document.querySelector('.modal-overlay');
+
+    expect(overlay).toBeTruthy();
 
-    await overlay.trigger('click');
+    await overlay?.dispatchEvent(new Event('click'));
     expect(wrapper.emitted('close')).toBeTruthy();
   });
 
@@ -40,9 +48,9 @@ describe('appModal', () => {
 
   it('does not emit close event when clickToClose is false', async() => {
     await wrapper.setProps({ clickToClose: false });
-    const overlay = wrapper.find('.modal-overlay');
+    const overlay = document.querySelector('.modal-overlay');
 
-    await overlay.trigger('click');
+    await overlay?.dispatchEvent(new Event('click'));
     expect(wrapper.emitted('close')).toBeFalsy();
 
     document.dispatchEvent(new KeyboardEvent('keydown', {
@@ -54,44 +62,44 @@ describe('appModal', () => {
   });
 
   it('sets a width for the modal container', async() => {
-    const container = wrapper.find('.modal-container');
+    const container = document.querySelector('.modal-container');
 
-    expect(container.exists()).toBeTruthy();
-    expect(wrapper.find('.modal-container').element.style.width).toBe('600px');
+    expect(container).toBeTruthy();
+    expect(container?.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');
+    const container = document.querySelector('.modal-container');
 
-    expect(container.exists()).toBeTruthy();
-    expect(wrapper.find('.modal-container').element.style.width).toBe('50%');
+    expect(container).toBeTruthy();
+    expect(container?.style.width).toBe('50%');
   });
 
   it('does not generate validation errors when setting a pixel width', async() => {
-    const consoleErrorSpy = jest.spyOn(console, 'error');
+    const consoleErrorSpy = jest.spyOn(console, 'warn');
 
     consoleErrorSpy.mockImplementation(() => {});
 
     await wrapper.setProps({ width: '200px' });
-    const container = wrapper.find('.modal-container');
+    const container = document.querySelector('.modal-container');
 
-    expect(container.exists()).toBeTruthy();
-    expect(wrapper.find('.modal-container').element.style.width).toBe('200px');
+    expect(container).toBeTruthy();
+    expect(container?.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');
+    const consoleErrorSpy = jest.spyOn(console, 'warn');
 
     consoleErrorSpy.mockImplementation(() => {});
 
     await wrapper.setProps({ width: 'FAIL' });
-    const container = wrapper.find('.modal-container');
+    const container = document.querySelector('.modal-container');
 
-    expect(container.exists()).toBeTruthy();
-    expect(wrapper.find('.modal-container').element.style.width).toBe('600px');
+    expect(container).toBeTruthy();
+    expect(container?.style.width).toBe('600px');
 
     expect(consoleErrorSpy).toHaveBeenCalledTimes(1);
   });

package/components/__tests__/ApplicationCard.test.ts

@@ -18,7 +18,7 @@ describe('component: ApplicationCard', () => {
     const content = '<div>text</div>';
     const ele = mount(ApplicationCard, { slots: { [slot]: content } });
 
-    expect(ele.find(`[data-testid="${ slot }-section`).find('div').html()).toContain(content);
+    expect(ele.find(`[data-testid="${ slot }-section"`).find('div').html()).toContain(content);
   });
 
   it('should have card-icon slot with an icon', () => {

package/components/__tests__/AsyncButton.test.ts

@@ -1,4 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton.vue';
 
 describe('component: AsyncButton', () => {
@@ -6,15 +6,17 @@ describe('component: AsyncButton', () => {
     const mockExists = jest.fn().mockReturnValue(true);
     const mockT = jest.fn().mockReturnValue('some-string');
 
-    const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
-      mocks: {
-        $store: {
-          getters: {
-            'i18n/exists': mockExists,
-            'i18n/t':      mockT
-          }
+    const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/exists': mockExists,
+              'i18n/t':      mockT
+            }
+          },
         }
-      }
+      },
     });
 
     const button = wrapper.find('button');
@@ -26,10 +28,10 @@ describe('component: AsyncButton', () => {
     expect(button.exists()).toBe(true);
     expect(button.classes()).toContain('btn');
     expect(button.classes()).toContain('role-primary');
-    expect(button.props().name).toBeNull();
-    expect(button.props().type).toBe('button');
-    expect(button.props().disabled).toBe(false);
-    expect(button.props().tabIndex).toBeNull();
+    expect(button.element.name).toBe('');
+    expect(button.element.tagName.toLowerCase()).toBe('button');
+    expect(button.element.getAttribute('disabled')).toBeNull();
+    expect(button.element.getAttribute('tabindex')).toBeNull();
     // we are mocking the getters, so it's to expect to find an icon
     expect(icon.exists()).toBe(true);
     expect(icon.classes()).toContain('icon');
@@ -43,14 +45,16 @@ describe('component: AsyncButton', () => {
   it('click on async button should emit click with a proper state of waiting, disabled and spinning ::: CB true', () => {
     jest.useFakeTimers();
 
-    const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
-      mocks: {
-        $store: {
-          getters: {
-            'i18n/exists': jest.fn(),
-            'i18n/t':      jest.fn()
+    const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/exists': jest.fn(),
+              'i18n/t':      jest.fn()
+            }
           }
-        }
+        },
       }
     });
 
@@ -80,14 +84,16 @@ describe('component: AsyncButton', () => {
   it('click on async button should emit click and update state properly ::: CB false', () => {
     jest.useFakeTimers();
 
-    const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
-      mocks: {
-        $store: {
-          getters: {
-            'i18n/exists': jest.fn(),
-            'i18n/t':      jest.fn()
+    const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/exists': jest.fn(),
+              'i18n/t':      jest.fn()
+            }
           }
-        }
+        },
       }
     });
 
@@ -112,14 +118,16 @@ describe('component: AsyncButton', () => {
   });
 
   it('click on async button should emit click and update state properly ::: CB "cancelled"', () => {
-    const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
-      mocks: {
-        $store: {
-          getters: {
-            'i18n/exists': jest.fn(),
-            'i18n/t':      jest.fn()
+    const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/exists': jest.fn(),
+              'i18n/t':      jest.fn()
+            }
           }
-        }
+        },
       }
     });
 

package/components/__tests__/BackLink.test.ts

@@ -13,8 +13,8 @@ describe('component: BackLink', () => {
     };
 
     const wrapper = shallowMount(BackLink, {
-      propsData: { link: linkRoute },
-      stubs:     { 'router-link': RouterLinkStub }
+      props:  { link: linkRoute },
+      global: { stubs: { 'router-link': RouterLinkStub } }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);
@@ -24,7 +24,7 @@ describe('component: BackLink', () => {
     // assertion regarding the text will have to be pointed to whatever t() returns on the test
     expect(link.text()).toBe('%generic.back%');
     expect(link.classes()).toContain('back-link');
-    expect(link.props().to).toBe(linkRoute);
+    expect(link.props().to).toStrictEqual(linkRoute);
 
     expect(icon.exists()).toBe(true);
     expect(icon.classes()).toContain('icon');

package/components/__tests__/ButtonGroup.test.ts

@@ -19,7 +19,7 @@ describe('component: ButtonGroup', () => {
     ];
 
     const wrapper = shallowMount(ButtonGroup, {
-      propsData: {
+      props: {
         options,
         value: 'val1'
       }
@@ -61,7 +61,7 @@ describe('component: ButtonGroup', () => {
     ];
 
     const wrapper = shallowMount(ButtonGroup, {
-      propsData: {
+      props: {
         options,
         activeClass:   'bg-another-active-class',
         inactiveClass: 'bg-some-inactive-class',
@@ -105,7 +105,7 @@ describe('component: ButtonGroup', () => {
     ];
 
     const wrapper = shallowMount(ButtonGroup, {
-      propsData: {
+      props: {
         options,
         value: 'val1'
       }
@@ -115,7 +115,7 @@ describe('component: ButtonGroup', () => {
 
     firstBtn.trigger('click');
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
-    expect(wrapper.emitted('input')![0][0]).toBe('val1');
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')![0][0]).toBe('val1');
   });
 });

package/components/__tests__/Carousel.test.ts

@@ -31,8 +31,8 @@ describe('component: Carousel', () => {
     ];
 
     const wrapper = mount(Carousel, {
-      propsData: { sliders },
-      mocks:     { $store: { getters: { clusterId: () => 'some-cluster-id' } } }
+      props:  { sliders },
+      global: { mocks: { $store: { getters: { clusterId: () => 'some-cluster-id' } } } }
     });
 
     // testing https://github.com/rancher/dashboard/issues/9975

package/components/__tests__/Certificates.test.ts

@@ -3,7 +3,7 @@ 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() => {
+  it('show correct \'expiring\' banner', async() => {
     const wrapper = shallowMount(Certificates, {
       data() {
         return {
@@ -11,14 +11,16 @@ describe('component: Certificates', () => {
           certs:  [{ certState: STATES_ENUM.EXPIRING }]
         };
       },
-      mocks: {
-        $fetchState: { pending: false },
-        $store:      {
-          getters: {
-            'i18n/t':            (l: string) => { },
-            'cluster/schemaFor': () => ({ })
+      global: {
+        mocks: {
+          $fetchState: { pending: false },
+          $store:      {
+            getters: {
+              'i18n/t':            (l: string) => { },
+              'cluster/schemaFor': () => ({ })
+            }
           }
-        }
+        },
       },
     });
 

package/components/__tests__/ClusterBadge.test.ts

@@ -11,7 +11,7 @@ describe('component: ClusterBadge', () => {
       }
     };
 
-    const wrapper = shallowMount(ClusterBadge, { propsData: { cluster: clusterProp } });
+    const wrapper = shallowMount(ClusterBadge, { props: { cluster: clusterProp } });
 
     const elem = wrapper.find('div');
 
@@ -23,7 +23,7 @@ describe('component: ClusterBadge', () => {
   it('should NOT render component if there is no badge property in object', () => {
     const clusterProp = {};
 
-    const wrapper = shallowMount(ClusterBadge, { propsData: { cluster: clusterProp } });
+    const wrapper = shallowMount(ClusterBadge, { props: { cluster: clusterProp } });
 
     const elem = wrapper.find('div');
 

package/components/__tests__/CodeMirror.test.ts

@@ -1,7 +1,9 @@
+import { nextTick } from 'vue';
 import { shallowMount, Wrapper } from '@vue/test-utils';
 import CodeMirror from '@shell/components/CodeMirror.vue';
 import { _EDIT, _YAML } from '@shell/config/query-params';
 
+// eslint-disable-next-line jest/no-disabled-tests
 describe('component: CodeMirror.vue', () => {
   let wrapper: Wrapper<InstanceType<typeof CodeMirror>>;
 
@@ -29,22 +31,26 @@ describe('component: CodeMirror.vue', () => {
       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(),
-        }
+    global: {
+      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() },
       },
-      $route:  { query: { AS: _YAML } },
-      $router: { applyQuery: jest.fn() },
-    },
+    }
+
   };
 
+  // eslint-disable-next-line jest/no-disabled-tests
   describe('keyMap info', () => {
     (window as any).__codeMirrorLoader = () => new Promise((resolve) => {
       resolve(true);
@@ -56,32 +62,32 @@ describe('component: CodeMirror.vue', () => {
     );
 
     it(`should show keyMap preference`, async() => {
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
-      const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
-      const keyboardIcon = keyMapBox.find('.keymap-indicator');
-      const closeIcon = keyMapBox.find('.icon-close');
+      const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"] .keymap-indicator');
+
+      const closeIcon = wrapper.find('[data-testid="code-mirror-keymap"] .icon-close');
 
-      expect(keyboardIcon.element).toBeDefined();
-      expect(closeIcon.element).toBeDefined();
+      expect(keyMapBox).toBeDefined();
+      expect(closeIcon).toBeDefined();
     });
 
     it(`should remove keyMap box`, async() => {
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       let keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
 
       keyMapBox.trigger('mouseenter');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const closeIcon = keyMapBox.find('.icon-close');
 
       closeIcon.element.click();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
 
-      expect(keyMapBox.element).toBeUndefined();
+      expect(keyMapBox.exists()).toBe(false);
     });
   });
 });

package/components/__tests__/Collapse.test.ts

@@ -3,12 +3,12 @@ import { mount } from '@vue/test-utils';
 
 describe('component: Collapse.vue', () => {
   describe('closed', () => {
-    const wrapper = mount(Collapse, { propsData: { open: false } });
+    const wrapper = mount(Collapse, { props: { open: false } });
 
     it('is closed', () => {
       const content = wrapper.find(`[data-testid="collapse-content"]`);
 
-      expect(content.element).toBeUndefined();
+      expect(content.exists()).toBe(false);
     });
 
     it('icon is chevron right', () => {
@@ -19,7 +19,7 @@ describe('component: Collapse.vue', () => {
   });
 
   describe('collapsed', () => {
-    const wrapper = mount(Collapse, { propsData: { open: true } });
+    const wrapper = mount(Collapse, { props: { open: true } });
 
     it('is collapse', () => {
       const content = wrapper.find(`[data-testid="collapse-content"]`);

package/components/__tests__/CollapsibleCard.test.ts

@@ -4,8 +4,8 @@ import CollapsibleCard from '@shell/components/CollapsibleCard.vue';
 describe('component: CollapsibleCard', () => {
   it('should render component with the correct data applied', () => {
     const wrapper = shallowMount(CollapsibleCard, {
-      propsData: { title: 'some-card-title' },
-      slots:     {
+      props: { title: 'some-card-title' },
+      slots: {
         'header-right': '<p>some stuff for header</p>',
         content:        '<p>some content</p>'
       }
@@ -31,8 +31,8 @@ describe('component: CollapsibleCard', () => {
 
   it('clicking on card header should emit event', () => {
     const wrapper = shallowMount(CollapsibleCard, {
-      propsData: { title: 'some-card-title' },
-      slots:     {
+      props: { title: 'some-card-title' },
+      slots: {
         'header-right': '<p>some stuff for header</p>',
         content:        '<p>some content</p>'
       }
@@ -48,8 +48,8 @@ describe('component: CollapsibleCard', () => {
 
   it('clicking on card title should emit event', () => {
     const wrapper = shallowMount(CollapsibleCard, {
-      propsData: { title: 'some-card-title', isTitleClickable: true },
-      slots:     {
+      props: { title: 'some-card-title', isTitleClickable: true },
+      slots: {
         'header-right': '<p>some stuff for header</p>',
         content:        '<p>some content</p>'
       }

package/components/__tests__/ConsumptionGauge.test.ts

@@ -9,7 +9,7 @@ describe('component: ConsumptionGauge', () => {
     };
 
     const wrapper = mount(ConsumptionGauge, {
-      propsData: {
+      props: {
         resourceName: 'some-resource-name',
         capacity:     1000,
         used:         200,
@@ -36,8 +36,8 @@ describe('component: ConsumptionGauge', () => {
 
     // checking PercentageBar component render
     expect(percentageBar.exists()).toBe(true);
-    expect(percentageBar.props().value).toBe(20);
-    expect(percentageBar.props().colorStops).toBe(colorStops);
+    expect(percentageBar.props().modelValue).toBe(20);
+    expect(percentageBar.props().colorStops).toStrictEqual(colorStops);
   });
 
   it('usedAsResourceName should render secondary title instead of main h3 title', () => {
@@ -46,7 +46,7 @@ describe('component: ConsumptionGauge', () => {
     };
 
     const wrapper = mount(ConsumptionGauge, {
-      propsData: {
+      props: {
         resourceName:       'some-resource-name',
         capacity:           1000,
         used:               200,
@@ -70,7 +70,7 @@ describe('component: ConsumptionGauge', () => {
     };
 
     const wrapper = mount(ConsumptionGauge, {
-      propsData: {
+      props: {
         resourceName: 'some-resource-name',
         capacity:     1000,
         used:         200,