@rancher/shell 2.0.1 → 3.0.0-rc.2

package/directives/focus.js

@@ -1,18 +1,24 @@
-const getElement = (vnode) => {
-  const { componentInstance, componentOptions: { tag } } = vnode;
+const getElement = (el, _binding, vnode) => {
+  const component = vnode.component;
+
+  if (!component) {
+    return el;
+  }
+
+  const tag = component.type.__name;
 
   if (tag === 'LabeledInput') {
-    return componentInstance.$refs.value;
+    return component.$refs.value;
   }
 
   if (tag === 'LabeledSelect') {
-    componentInstance.shouldOpen = false;
+    component.shouldOpen = false;
 
-    return componentInstance.$refs['select-input'].$refs.search;
+    return component.$refs['select-input'].$refs.search;
   }
 
   if (tag === 'SelectPrincipal') {
-    const labeledSelect = componentInstance.$refs['labeled-select'];
+    const labeledSelect = component.$refs['labeled-select'];
 
     labeledSelect.shouldOpen = false;
 
@@ -20,22 +26,22 @@ const getElement = (vnode) => {
   }
 
   if (tag === 'TextAreaAutoGrow') {
-    return componentInstance.$refs.ta;
+    return component.$refs.ta;
   }
 
   if (tag === 'Password') {
-    return componentInstance.$refs.input.$refs.value;
+    return component.$refs.input.$refs.value;
   }
 };
 
-function inserted(_el, _binding, vnode) {
-  const element = getElement(vnode);
+function mounted(el, binding, vnode) {
+  const element = getElement(el, binding, vnode);
 
   if (element) {
     element.focus();
   }
 }
 
-const focusDirective = { inserted };
+const focusDirective = { mounted };
 
 export default focusDirective;

package/directives/int-number.js

@@ -1,4 +1,4 @@
-function inserted(el) {
+function mounted(el) {
   el.addEventListener('keypress', (e) => {
     e = e || window.event;
     const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
@@ -16,6 +16,6 @@ function inserted(el) {
     }
   });
 }
-const intNumberDirective = { inserted };
+const intNumberDirective = { mounted };
 
 export default intNumberDirective;

package/directives/positive-int-number.js

@@ -1,4 +1,4 @@
-function inserted(el) {
+function mounted(el) {
   el.addEventListener('keypress', (e) => {
     e = e || window.event;
     const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
@@ -14,6 +14,6 @@ function inserted(el) {
   });
 }
 
-const positiveIntNumberDirective = { inserted };
+const positiveIntNumberDirective = { mounted };
 
 export default positiveIntNumberDirective;

package/edit/__tests__/fleet.cattle.io.gitrepo.test.ts

@@ -1,10 +1,5 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import GitRepo from '@shell/edit/fleet.cattle.io.gitrepo.vue';
-import Vuex from 'vuex';
-
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
 
 describe('view: fleet.cattle.io.gitrepo should', () => {
   const mockStore = {
@@ -34,9 +29,8 @@ describe('view: fleet.cattle.io.gitrepo should', () => {
     metadata: { namespace: 'test' }, spec: { template: {}, correctDrift: { enabled: false } }, targetInfo: { mode: 'all' },
   };
   const wrapper = mount(GitRepo, {
-    localVue,
-    propsData: { value: values },
-    mocks
+    props:  { value: values },
+    global: { mocks }
   });
 
   it('should have self-healing checkbox and banner', () => {
@@ -45,19 +39,19 @@ describe('view: fleet.cattle.io.gitrepo should', () => {
 
     expect(correctDriftCheckbox.exists()).toBeTruthy();
     expect(correctDriftBanner.exists()).toBeTruthy();
-    expect(correctDriftCheckbox.props().value).toBeFalsy();
+    expect(correctDriftCheckbox.attributes().value).toBeFalsy();
   });
 
   it('should enable drift if self-healing is checked', async() => {
-    const correctDriftCheckbox = wrapper.find('[data-testid="GitRepo-correctDrift-checkbox"]');
+    const correctDriftCheckbox = wrapper.findComponent('[data-testid="GitRepo-correctDrift-checkbox"]');
     const correctDriftContainer = wrapper.find('[data-testid="GitRepo-correctDrift-checkbox"] .checkbox-container');
 
     expect(correctDriftContainer.exists()).toBeTruthy();
 
     await correctDriftContainer.trigger('click');
 
-    expect(correctDriftCheckbox.emitted('input')).toHaveLength(1);
-    expect(correctDriftCheckbox.emitted('input')![0][0]).toBe(true);
+    expect(correctDriftCheckbox.emitted('update:value')).toHaveLength(1);
+    expect(correctDriftCheckbox.emitted('update:value')![0][0]).toBe(true);
     expect(correctDriftCheckbox.props().value).toBeTruthy();
   });
 });

package/edit/__tests__/kontainerDriver.test.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
 import { mount } from '@vue/test-utils';
 import KontainerDriverEdit from '@shell/edit/kontainerDriver.vue';
@@ -7,19 +8,21 @@ describe('view: kontainerdriver should', () => {
   const url = 'http://test.com';
   let wrapper: any;
   const requiredSetup = () => ({
-    mocks: {
-      $store: {
-        getters: {
-          currentStore:              () => 'current_store',
-          'current_store/schemaFor': jest.fn(),
-          'current_store/all':       jest.fn(),
-          'i18n/t':                  (val: string) => val,
-          'i18n/exists':             jest.fn(),
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  (val: string) => val,
+            'i18n/exists':             jest.fn(),
+          },
+          dispatch: jest.fn()
         },
-        dispatch: jest.fn()
+        $route:  { query: { AS: '' } },
+        $router: { applyQuery: jest.fn() },
       },
-      $route:  { query: { AS: '' } },
-      $router: { applyQuery: jest.fn() },
     },
     propsData: {
       value: {
@@ -40,7 +43,7 @@ describe('view: kontainerdriver should', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it('have "Create" button disabled before fields are filled in', () => {
@@ -50,20 +53,20 @@ describe('view: kontainerdriver should', () => {
   });
 
   it('have "Create" button enabled when required fields are filled in', async() => {
-    const urlField = wrapper.find('[data-testid="driver-create-url-field"]').find('input');
+    const urlField = wrapper.find('[data-testid="driver-create-url-field"]');
     const saveButton = wrapper.find('[data-testid="kontainer-driver-edit-save"]').element as HTMLInputElement;
 
     urlField.setValue(url);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(saveButton.disabled).toBe(false);
   });
 
   it('have "Create" button enabled and disabled depending on validation results', async() => {
-    const urlField = wrapper.find('[data-testid="driver-create-url-field"]').find('input');
-    const uiurlField = wrapper.find('[data-testid="driver-create-uiurl-field"]').find('input');
-    const checksumField = wrapper.find('[data-testid="driver-create-checksum-field"]').find('input');
+    const urlField = wrapper.find('[data-testid="driver-create-url-field"]');
+    const uiurlField = wrapper.find('[data-testid="driver-create-uiurl-field"]');
+    const checksumField = wrapper.find('[data-testid="driver-create-checksum-field"]');
     const saveButton = wrapper.find('[data-testid="kontainer-driver-edit-save"]').element as HTMLInputElement;
 
     const testCases = [
@@ -95,11 +98,11 @@ describe('view: kontainerdriver should', () => {
 
     for (const testCase of testCases) {
       urlField.setValue(testCase.url);
-      await wrapper.vm.$nextTick();
+      await nextTick();
       uiurlField.setValue(testCase.uiurl);
-      await wrapper.vm.$nextTick();
+      await nextTick();
       checksumField.setValue(testCase.checksum);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(saveButton.disabled).toBe(testCase.result);
     }

package/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts

@@ -14,43 +14,45 @@ describe('view: management.cattle.io.clusterroletemplatebinding should', () => {
 
   const requiredSetup = () => ({
     // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
-    mocks: {
-      $store: {
-        getters: {
-          currentStore:              () => 'current_store',
-          'current_store/schemaFor': jest.fn(),
-          'current_store/all':       jest.fn(),
-          currentCluster:            { id: 'my-cluster' },
-          currentProduct:            { inStore: 'whatever' },
-          'i18n/t':                  (val) => val,
-          'i18n/exists':             jest.fn(),
-        },
-        dispatch: jest.fn((action, payload) => {
-          const actions = {
-            'management/findAll':              () => [],
-            'cru-resource/setCreateNamespace': jest.fn(),
-          };
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            currentCluster:            { id: 'my-cluster' },
+            currentProduct:            { inStore: 'whatever' },
+            'i18n/t':                  (val) => val,
+            'i18n/exists':             jest.fn(),
+          },
+          dispatch: jest.fn((action, payload) => {
+            const actions = {
+              'management/findAll':              () => [],
+              'cru-resource/setCreateNamespace': jest.fn(),
+            };
 
-          if (actions[action]) {
-            return actions[action](payload);
-          }
+            if (actions[action]) {
+              return actions[action](payload);
+            }
 
-          throw new Error(`Unknown action: ${ action }`);
-        }),
-      },
-      $fetchState: { pending: false },
-      $route:      { query: { AS: '' } },
-      $router:     {
-        applyQuery: jest.fn(),
-        replace:    jest.fn()
+            throw new Error(`Unknown action: ${ action }`);
+          }),
+        },
+        $fetchState: { pending: false },
+        $route:      { query: { AS: '' } },
+        $router:     {
+          applyQuery: jest.fn(),
+          replace:    jest.fn()
+        },
       },
+      stubs,
     },
     propsData: { value: {} },
-    stubs,
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it('should only show one error banner', async() => {

package/edit/__tests__/management.cattle.io.setting.test.ts

@@ -5,26 +5,28 @@ import { SETTING } from '@shell/config/settings';
 describe('view: management.cattle.io.setting should', () => {
   const requiredSetup = () => ({
     // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
-    mocks: {
-      $store: {
-        getters: {
-          currentStore:              () => 'current_store',
-          'current_store/schemaFor': jest.fn(),
-          'current_store/all':       jest.fn(),
-          'i18n/t':                  jest.fn(),
-          'i18n/exists':             jest.fn(),
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  jest.fn(),
+            'i18n/exists':             jest.fn(),
+          },
+          dispatch: jest.fn(),
         },
-        dispatch: jest.fn(),
-      },
-      $route:  { query: { AS: '' } },
-      $router: { applyQuery: jest.fn() },
+        $route:  { query: { AS: '' } },
+        $router: { applyQuery: jest.fn() },
+      }
     }
   });
 
   it('allowing to save if no rules in settings', () => {
     const wrapper = mount(Settings, {
-      propsData: { value: { value: 'anything' } },
-      data:      () => ({ setting: { } }),
+      props: { value: { value: 'anything' } },
+      data:  () => ({ setting: { } }),
       ...requiredSetup()
     });
     const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
@@ -38,7 +40,7 @@ describe('view: management.cattle.io.setting should', () => {
     describe('validate input with provided settings', () => {
       it('allowing to save if pass', () => {
         const wrapper = mount(Settings, {
-          propsData: { value: { id, value: '3' } },
+          props: { value: { id, value: '3' } },
           ...requiredSetup()
         });
         const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
@@ -50,7 +52,7 @@ describe('view: management.cattle.io.setting should', () => {
       // eslint-disable-next-line jest/no-disabled-tests
       it.skip('preventing to save if any error', () => {
         const wrapper = mount(Settings, {
-          propsData: { value: { id, value: '1' } },
+          props: { value: { id, value: '1' } },
           ...requiredSetup()
         });
         const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
@@ -61,7 +63,7 @@ describe('view: management.cattle.io.setting should', () => {
 
     it('retrieve correct rules based on settings', () => {
       const wrapper = mount(Settings, {
-        propsData: { value: { id, value: '' } },
+        props: { value: { id, value: '' } },
         ...requiredSetup()
       });
       const expectation = [{
@@ -74,7 +76,7 @@ describe('view: management.cattle.io.setting should', () => {
 
     it('generate extra rules based on settings', () => {
       const wrapper = mount(Settings, {
-        propsData: { value: { id, value: '' } },
+        props: { value: { id, value: '' } },
         ...requiredSetup()
       });
       const expectation = ['betweenValues', 'isInteger', 'isPositive', 'isOctal'];

package/edit/__tests__/monitoring.coreos.com.prometheusrule.test.ts

@@ -8,20 +8,22 @@ describe('edit: management.cattle.io.setting should', () => {
   const ERROR_BANNER_SELECTOR = '[data-testid="banner-close"]';
   const requiredSetup = () => ({
     // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
-    mocks: {
-      $store: {
-        dispatch: jest.fn(),
-        getters:  {
-          currentStore:              () => 'current_store',
-          'current_store/schemaFor': jest.fn(),
-          'current_store/all':       jest.fn(),
-          'i18n/t':                  jest.fn(),
-          'i18n/exists':             jest.fn(),
-          namespaces:                () => ({})
-        }
-      },
-      $route:  { query: { AS: '' }, name: '' },
-      $router: { applyQuery: jest.fn() }
+    global: {
+      mocks: {
+        $store: {
+          dispatch: jest.fn(),
+          getters:  {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  jest.fn(),
+            'i18n/exists':             jest.fn(),
+            namespaces:                () => ({})
+          }
+        },
+        $route:  { query: { AS: '' }, name: '' },
+        $router: { applyQuery: jest.fn() }
+      }
     }
   });
 
@@ -29,7 +31,7 @@ describe('edit: management.cattle.io.setting should', () => {
     jest.spyOn(FormValidation.computed, 'fvUnreportedValidationErrors').mockReturnValue(MOCKED_ERRORS);
 
     const wrapper = mount(Monitoring, {
-      propsData: {
+      props: {
         canYaml:  false,
         mode:     _EDIT,
         resource: {},

package/edit/__tests__/namespace.test.ts

@@ -1,48 +1,49 @@
 import { mount } from '@vue/test-utils';
 import Namespace from '@shell/edit/namespace.vue';
-import { DefaultProps } from 'vue/types/options';
-import { ExtendedVue, Vue } from 'vue/types/vue';
 
 describe('view Namespace should', () => {
   it('retrieve resource limits from project', () => {
     const name = 'my project name';
     const limits = 'whatever';
     const project = { id: name, spec: { containerDefaultResourceLimit: limits } };
-    const wrapper = mount(Namespace as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-      propsData: {
+    const wrapper = mount(Namespace, {
+      props: {
         value: {
           metadata:     { labels: { 'field.cattle.io/projectId': name } },
           annotations:  { 'field.cattle.io/containerDefaultResourceLimit': undefined },
           listLocation: {},
         }
       },
-      mocks: {
-        $fetchState: {},
-        $route:      {
-          name:  'anything',
-          query: { AS: 'yaml' }
-        },
-        $router: { applyQuery: {} },
-        $store:  {
-          getters: {
-            'i18n/t':              jest.fn(),
-            'management/all':      () => ([project]),
-            currentProduct:        jest.fn(),
-            isStandaloneHarvester: false
+
+      global: {
+        mocks: {
+          $fetchState: {},
+          $route:      {
+            name:  'anything',
+            query: { AS: 'yaml' }
+          },
+          $router: { applyQuery: {} },
+          $store:  {
+            getters: {
+              'i18n/t':              jest.fn(),
+              'management/all':      () => ([project]),
+              currentProduct:        jest.fn(),
+              isStandaloneHarvester: false
+            }
           }
-        }
+        },
+
+        stubs: {
+          CruResource:       { template: '<div><slot></slot></div>' }, // Required to render the slot content
+          NameNsDescription: true,
+          Tab:               { template: '<div><slot></slot></div>' },
+          ResourceTabs:      { template: '<div><slot></slot></div>' },
+        },
       },
-      stubs: {
-        CruResource:            { template: '<div><slot></slot></div>' }, // Required to render the slot content
-        ContainerResourceLimit: { template: '<div data-testid="limits"></div>' }, // Ensure value to be added to component
-        NameNsDescription:      true,
-        Tab:                    true,
-        ResourceTabs:           true
-      }
     });
 
-    const limitsUi = wrapper.find('[data-testid="limits"]');
+    const limitsUi = wrapper.findComponent('[data-testid="namespace-container-resource-limit"]');
 
-    expect(limitsUi.vm.$attrs.value).toStrictEqual(limits);
+    expect(limitsUi.props().value).toStrictEqual(limits);
   });
 });

package/edit/__tests__/nodeDriver.test.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
 import { mount } from '@vue/test-utils';
 import NodeDriverEdit from '@shell/edit/nodeDriver.vue';
@@ -7,19 +8,22 @@ describe('view: nodedriver should', () => {
   const url = 'http://test.com';
   let wrapper: any;
   const requiredSetup = () => ({
-    mocks: {
-      $store: {
-        getters: {
-          currentStore:              () => 'current_store',
-          'current_store/schemaFor': jest.fn(),
-          'current_store/all':       jest.fn(),
-          'i18n/t':                  (val: string) => val,
-          'i18n/exists':             jest.fn(),
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  (val: string) => val,
+            'i18n/exists':             jest.fn(),
+          },
+          dispatch: jest.fn()
         },
-        dispatch: jest.fn()
+        $route:  { query: { AS: '' }, name: 'your_route_name' },
+        $router: { applyQuery: jest.fn() },
       },
-      $route:  { query: { AS: '' } },
-      $router: { applyQuery: jest.fn() },
+
     },
     propsData: {
       value: {
@@ -40,7 +44,7 @@ describe('view: nodedriver should', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it('have "Create" button disabled before fields are filled in', () => {
@@ -50,58 +54,36 @@ describe('view: nodedriver should', () => {
   });
 
   it('have "Create" button enabled when required fields are filled in', async() => {
-    const urlField = wrapper.find('[data-testid="driver-create-url-field"]').find('input');
+    const urlField = wrapper.find('[data-testid="driver-create-url-field"]');
     const saveButton = wrapper.find('[data-testid="node-driver-edit-save"]').element as HTMLInputElement;
 
     urlField.setValue(url);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(saveButton.disabled).toBe(false);
   });
 
-  it('have "Create" button enabled and disabled depending on validation results', async() => {
-    const urlField = wrapper.find('[data-testid="driver-create-url-field"]').find('input');
-    const uiurlField = wrapper.find('[data-testid="driver-create-uiurl-field"]').find('input');
-    const checksumField = wrapper.find('[data-testid="driver-create-checksum-field"]').find('input');
+  it.each`
+    url                    | uiurl                  | checksum             | expected
+    ${ '1111' }            | ${ 'http://test.com' } | ${ 'aaaaaBBBBdddd' } | ${ true }
+    ${ 'http://test.com' } | ${ '1111' }            | ${ 'aaaaaBBBBdddd' } | ${ true }
+    ${ 'http://test.com' } | ${ 'http://test.com' } | ${ '!!!' }           | ${ true }
+    ${ 'http://test.com' } | ${ 'http://test.com' } | ${ 'aaaaaBBBBdddd' } | ${ false }
+  `('have "Create" button enabled and disabled depending on validation results', async({
+    url, uiurl, checksum, expected
+  }) => {
+    const urlField = wrapper.find('[data-testid="driver-create-url-field"]');
+    const uiurlField = wrapper.find('[data-testid="driver-create-uiurl-field"]');
+    const checksumField = wrapper.find('[data-testid="driver-create-checksum-field"]');
     const saveButton = wrapper.find('[data-testid="node-driver-edit-save"]').element as HTMLInputElement;
 
-    const testCases = [
-      {
-        url:      '1111',
-        uiurl:    'http://test.com',
-        checksum: 'aaaaaBBBBdddd',
-        result:   true
-      },
-      {
-        url:      'http://test.com',
-        uiurl:    '1111',
-        checksum: 'aaaaaBBBBdddd',
-        result:   true
-      },
-      {
-        url:      'http://test.com',
-        uiurl:    'http://test.com',
-        checksum: '!!!',
-        result:   true
-      },
-      {
-        url:      'http://test.com',
-        uiurl:    'http://test.com',
-        checksum: 'aaaaaBBBBdddd',
-        result:   false
-      }
-    ];
+    urlField.setValue(url);
+    uiurlField.setValue(uiurl);
+    checksumField.setValue(checksum);
 
-    for (const testCase of testCases) {
-      urlField.setValue(testCase.url);
-      await wrapper.vm.$nextTick();
-      uiurlField.setValue(testCase.uiurl);
-      await wrapper.vm.$nextTick();
-      checksumField.setValue(testCase.checksum);
-      await wrapper.vm.$nextTick();
+    await nextTick();
 
-      expect(saveButton.disabled).toBe(testCase.result);
-    }
+    expect(saveButton.disabled).toBe(expected);
   });
 });