@rancher/shell 2.0.1 → 3.0.0-rc.1

package/components/form/__tests__/NameNsDescription.test.ts

@@ -12,20 +12,22 @@ describe('component: NameNsDescription', () => {
       },
     ];
     const wrapper = mount(NameNsDescription, {
-      propsData: {
+      props: {
         value:   {},
         mode:    'create',
         cluster: {},
       },
-      mocks: {
-        $store: {
-          dispatch: jest.fn(),
-          getters:  {
-            namespaces:          jest.fn(),
-            allowedNamespaces:   () => ({ [namespaceName]: true }),
-            currentStore:        () => 'cluster',
-            'cluster/schemaFor': jest.fn(),
-            'i18n/t':            jest.fn(),
+      global: {
+        mocks: {
+          $store: {
+            dispatch: jest.fn(),
+            getters:  {
+              namespaces:          jest.fn(),
+              allowedNamespaces:   () => ({ [namespaceName]: true }),
+              currentStore:        () => 'cluster',
+              'cluster/schemaFor': jest.fn(),
+              'i18n/t':            jest.fn(),
+            },
           },
         },
       },
@@ -38,27 +40,28 @@ describe('component: NameNsDescription', () => {
     const namespaceName = 'test';
     const newNamespaceName = 'bananas';
     const wrapper = mount(NameNsDescription, {
-      propsData: {
+      props: {
         value: { metadata: {} },
         mode:  'create',
       },
-      mocks: {
-        $store: {
-          dispatch: jest.fn(),
-          getters:  {
-            namespaces:                         jest.fn(),
-            allowedNamespaces:                  () => ({ [namespaceName]: true }),
-            'customizations/getPreviewCluster': {
-              ready:   true,
-              isLocal: false,
-              badge:   {},
+      global: {
+        mocks: {
+          $store: {
+            dispatch: jest.fn(),
+            getters:  {
+              namespaces:                         jest.fn(),
+              allowedNamespaces:                  () => ({ [namespaceName]: true }),
+              'customizations/getPreviewCluster': {
+                ready:   true,
+                isLocal: false,
+                badge:   {},
+              },
+              currentStore:        () => 'cluster',
+              'cluster/schemaFor': jest.fn(),
+              'i18n/t':            jest.fn(),
             },
-            currentStore:        () => 'cluster',
-            'cluster/schemaFor': jest.fn(),
-            'i18n/t':            jest.fn(),
           },
         },
-        $refs: { name: { focus: jest.fn() } },
       },
     });
 

package/components/form/__tests__/NodeAffinity.test.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import NodeAffinity from '@shell/components/form/NodeAffinity.vue';
 import { _CREATE } from '@shell/config/query-params';
@@ -11,7 +12,7 @@ describe('component: NodeAffinity', () => {
       }],
       requiredDuringSchedulingIgnoredDuringExecution: { nodeSelectorTerms: [{ matchExpressions: [] }] }
     };
-    const wrapper = mount(NodeAffinity, { propsData: { mode: _CREATE, value: nodeAffinity } });
+    const wrapper = mount(NodeAffinity, { props: { mode: _CREATE, value: nodeAffinity } });
 
     expect(wrapper.find('[data-testid="node-affinity-weight-index0"]').exists()).toBeTruthy();
     expect(wrapper.find('[data-testid="node-affinity-weight-index1"]').exists()).toBeFalsy();
@@ -25,13 +26,13 @@ describe('component: NodeAffinity', () => {
       }],
     };
 
-    const wrapper = mount(NodeAffinity, { propsData: { mode: _CREATE, value: nodeAffinity } });
+    const wrapper = mount(NodeAffinity, { props: { mode: _CREATE, value: nodeAffinity } });
 
     const weightInput = wrapper.find('[data-testid="node-affinity-weight-index0"]');
 
     weightInput.setValue('');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.find('[data-testid="node-affinity-weight-index0"]').exists()).toBeTruthy();
   });

package/components/form/__tests__/PodAffinity.test.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import PodAffinity from '@shell/components/form/PodAffinity.vue';
 import { _CREATE } from '@shell/config/query-params';
@@ -12,7 +13,7 @@ describe('component: PodAffinity', () => {
       requiredDuringSchedulingIgnoredDuringExecution: [{ topologyKey: 'test topology key 2' }]
     };
     const wrapper = mount(PodAffinity, {
-      propsData: {
+      props: {
         mode: _CREATE, field: 'overrideAffinity', value: { overrideAffinity: { podAffinity } }
       }
     });
@@ -30,7 +31,7 @@ describe('component: PodAffinity', () => {
     };
 
     const wrapper = mount(PodAffinity, {
-      propsData: {
+      props: {
         mode: _CREATE, field: 'overrideAffinity', value: { overrideAffinity: { podAffinity } }
       }
     });
@@ -39,7 +40,7 @@ describe('component: PodAffinity', () => {
 
     weightInput.setValue('');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.find('[data-testid="pod-affinity-weight-index0"]').exists()).toBeTruthy();
   });

package/components/form/__tests__/Probe.test.ts

@@ -16,8 +16,8 @@ describe('component: Probe', () => {
       'failureThreshold',
     ])('should emit an update on %p input', (field) => {
       const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-        propsData: { mode: _EDIT },
-        data:      () => ({ kind })
+        props: { mode: _EDIT },
+        data:  () => ({ kind })
       });
       const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
       const newValue = 123;
@@ -33,8 +33,8 @@ describe('component: Probe', () => {
       'timeoutSeconds',
     ])('should emit an update on %p input and blur', (field) => {
       const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-        propsData: { mode: _EDIT },
-        data:      () => ({ kind })
+        props: { mode: _EDIT },
+        data:  () => ({ kind })
       });
       const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
       const newValue = 123;
@@ -49,7 +49,7 @@ describe('component: Probe', () => {
   it.each([
     'kind',
   ])('should emit an update on %p selection change', async(field) => {
-    const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { propsData: { mode: _EDIT } });
+    const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { props: { mode: _EDIT } });
 
     const select = wrapper.find(`[data-testid="input-probe-${ field }"]`);
 
@@ -57,6 +57,6 @@ describe('component: Probe', () => {
     await wrapper.trigger('keydown.down');
     await wrapper.trigger('keydown.enter');
 
-    expect(wrapper.emitted('input')).toHaveLength(2);
+    expect(wrapper.emitted('update:value')).toHaveLength(2);
   });
 });

package/components/form/__tests__/Security.test.ts

@@ -4,7 +4,7 @@ import { _EDIT } from '@shell/config/query-params';
 
 describe('component: Security', () => {
   it('should display all the inputs', () => {
-    const wrapper = mount(Security, { propsData: { mode: _EDIT } });
+    const wrapper = mount(Security, { props: { mode: _EDIT } });
 
     const inputWraps = wrapper.findAll('[data-testid^=input-security-]');
 
@@ -14,7 +14,7 @@ describe('component: Security', () => {
   it.each([
     'runAsUser',
   ])('should emit an update on %p input', (field) => {
-    const wrapper = mount(Security, { propsData: { mode: _EDIT } });
+    const wrapper = mount(Security, { props: { mode: _EDIT } });
     const input = wrapper.find(`[data-testid="input-security-${ field }"]`).find('input');
     const newValue = 123;
 
@@ -29,27 +29,27 @@ describe('component: Security', () => {
     'runasNonRoot',
     'readOnlyRootFilesystem',
   ])('should emit an update on %p radio option change', (field) => {
-    const wrapper = mount(Security, { propsData: { mode: _EDIT } });
+    const wrapper = mount(Security, { props: { mode: _EDIT } });
     const radioOption = wrapper
       .find(`[data-testid="input-security-${ field }"]`)
       .find('label');
 
     radioOption.trigger('click');
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
   });
 
   it.each([
     'add',
     'drop',
   ])('should emit an update on %p selection change', async(field) => {
-    const wrapper = mount(Security, { propsData: { mode: _EDIT } });
+    const wrapper = mount(Security, { props: { mode: _EDIT } });
     const select = wrapper.find(`[data-testid="input-security-${ field }"]`);
 
     select.find('button').trigger('click');
     await wrapper.trigger('keydown.down');
     await wrapper.trigger('keydown.enter');
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
   });
 });

package/components/form/__tests__/Select.test.ts

@@ -0,0 +1,30 @@
+import { shallowMount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import Select from '@shell/components/form/Select.vue';
+
+const SelectComponent = Select as ReturnType<typeof defineComponent>;
+
+describe('select.vue', () => {
+  let consoleWarn: any;
+
+  // eslint-disable-next-line jest/no-hooks
+  beforeAll(() => {
+    // eslint-disable-next-line no-console
+    consoleWarn = console.warn;
+  });
+
+  // eslint-disable-next-line jest/no-hooks
+  afterAll(() => {
+    // eslint-disable-next-line no-console
+    console.warn = consoleWarn;
+  });
+
+  it('does not throw a warning in the console', () => {
+    jest.spyOn(console, 'warn').mockImplementation();
+
+    shallowMount(SelectComponent);
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).not.toHaveBeenCalled();
+  });
+});

package/components/form/__tests__/ServiceNameSelect.test.ts

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import ServiceNameSelect from '@shell/components/form/ServiceNameSelect.vue';
+
+const ServiceNameSelectComponent = ServiceNameSelect as ReturnType<typeof defineComponent>;
+
+describe('serviceNameSelect.vue', () => {
+  let consoleWarn: any;
+
+  // eslint-disable-next-line jest/no-hooks
+  beforeAll(() => {
+    // eslint-disable-next-line no-console
+    consoleWarn = console.warn;
+  });
+
+  // eslint-disable-next-line jest/no-hooks
+  afterAll(() => {
+    // eslint-disable-next-line no-console
+    console.warn = consoleWarn;
+  });
+
+  it('does not throw a warning in the console', () => {
+    jest.spyOn(console, 'warn').mockImplementation();
+
+    shallowMount(
+      ServiceNameSelectComponent,
+      {
+        props: {
+          options: [
+            {
+              label: 'label1',
+              value: 'val1',
+            },
+          ]
+        }
+      }
+    );
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).not.toHaveBeenCalled();
+  });
+});

package/components/form/__tests__/Taints.test.ts

@@ -1,12 +1,13 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import Taints from '@shell/components/form/Taints.vue';
 
-describe('component: Taints', () => {
+describe.skip('(Vue3 Skip) component: Taints', () => {
   it('should accept custom effect values', async() => {
     const customEffects = { FOO_EFFECT: 'foo', BAR_EFFECT: 'bar' };
 
     const wrapper = mount(Taints, {
-      propsData: {
+      props: {
         value:        [{ effect: 'FOO_EFFECT', value: 'abc' }],
         effectValues: customEffects
       }
@@ -16,19 +17,19 @@ describe('component: Taints', () => {
 
     expect(firstEffectInput.exists()).toBe(true);
 
-    expect(firstEffectInput.props().value).toBe('FOO_EFFECT');
-    expect(firstEffectInput.props().options).toStrictEqual([{ value: 'FOO_EFFECT', label: 'foo' }, { value: 'BAR_EFFECT', label: 'bar' }]);
+    expect(firstEffectInput.attributes().value).toBe('FOO_EFFECT');
+    expect(wrapper.vm.effectOptions).toStrictEqual([{ value: 'FOO_EFFECT', label: 'foo' }, { value: 'BAR_EFFECT', label: 'bar' }]);
 
-    const taintKV = wrapper.find('[data-testid="taints-keyvalue"]');
+    const taintKV = wrapper.findComponent('[data-testid="taints-keyvalue"]');
 
     taintKV.vm.add();
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const secondEffectInput = wrapper.find('[data-testid="taints-effect-row-1"]');
 
     expect(secondEffectInput.exists()).toBe(true);
 
-    expect(secondEffectInput.props().value).toStrictEqual('FOO_EFFECT');
+    expect(secondEffectInput.attributes().value).toStrictEqual('FOO_EFFECT');
     expect(wrapper.vm.defaultAddData).toStrictEqual({ effect: 'FOO_EFFECT' });
   });
 
@@ -41,29 +42,29 @@ describe('component: Taints', () => {
 
     ];
 
-    const wrapper = mount(Taints, { propsData: { value: [{ effect: '', value: 'abc' }] } });
+    const wrapper = mount(Taints, { props: { value: [{ effect: '', value: 'abc' }] } });
 
     const firstEffectInput = wrapper.find('[data-testid="taints-effect-row-0"]');
 
     expect(firstEffectInput.exists()).toBe(true);
 
-    expect(firstEffectInput.props().value).toBe('');
-    expect(firstEffectInput.props().options).toStrictEqual(expectedEffectOptions);
+    expect(firstEffectInput.attributes().value).toBe('');
+    expect(wrapper.vm.effectOptions).toStrictEqual(expectedEffectOptions);
   });
 
   it('should set the effect value to NoSchedule by default', async() => {
-    const wrapper = mount(Taints, { propsData: { value: [] } });
+    const wrapper = mount(Taints, { props: { value: [] } });
 
-    const taintKV = wrapper.find('[data-testid="taints-keyvalue"]');
+    const taintKV = wrapper.findComponent('[data-testid="taints-keyvalue"]');
 
     taintKV.vm.add();
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const effectInput = wrapper.find('[data-testid="taints-effect-row-0"]');
 
     expect(effectInput.exists()).toBe(true);
 
-    expect(effectInput.props().value).toStrictEqual('NoSchedule');
+    expect(effectInput.attributes().value).toStrictEqual('NoSchedule');
 
     expect(wrapper.vm.defaultAddData).toStrictEqual({ effect: 'NoSchedule' });
   });

package/components/form/__tests__/UnitInput.test.ts

@@ -5,20 +5,20 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 describe('component: UnitInput', () => {
   it('should renders', () => {
-    const wrapper = mount(UnitInput, { propsData: { value: 1 } });
+    const wrapper = mount(UnitInput, { props: { value: 1 } });
 
     expect(wrapper.isVisible()).toBe(true);
   });
 
   it.each(['blur', 'change'])('should emit input event when "%p" is fired', async(event) => {
-    const wrapper = mount(UnitInput, { propsData: { value: 1, delay: 0 } });
+    const wrapper = mount(UnitInput, { props: { value: 1, delay: 0 } });
     const input = wrapper.find('input');
 
     await input.setValue(2);
     await input.setValue(4);
-    input.trigger(event);
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')[2]).toStrictEqual([4]);
   });
 
   it.each([
@@ -26,7 +26,7 @@ describe('component: UnitInput', () => {
     ['edit', false],
   ])('should contain input disabled status %p when in %p mode', (mode, status) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1,
         mode
       }
@@ -41,7 +41,7 @@ describe('component: UnitInput', () => {
     ['2G', '2000000000'],
     ['3', '3'],
   ])('should parse values with SI modifier %p and return %p', (value, expected) => {
-    const wrapper = mount(UnitInput, { propsData: { value } });
+    const wrapper = mount(UnitInput, { props: { value } });
     const label = wrapper.findComponent(LabeledInput);
 
     expect(label.props('value')).toBe(expected);
@@ -51,7 +51,7 @@ describe('component: UnitInput', () => {
     const inputExponent = 2;
     const baseUnit = 'B';
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1,
         inputExponent,
         baseUnit,
@@ -69,7 +69,7 @@ describe('component: UnitInput', () => {
     [false, 3000000000],
   ])('should (%p) force use of SI modifier and return %p', async(outputModifier, expected) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1, inputExponent: 3, outputModifier: !outputModifier
       }
     });
@@ -79,13 +79,13 @@ describe('component: UnitInput', () => {
     await inputWrapper.setValue(3);
     inputWrapper.trigger('blur');
 
-    expect(wrapper.emitted('input')![0][0]).toBe(expected);
+    expect(wrapper.emitted('update:value')![0][0]).toBe(expected);
   });
 
   it('should display defined SI unit', async() => {
     const inputExponent = 3;
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value:          1,
         inputExponent,
         outputModifier: true,
@@ -96,7 +96,7 @@ describe('component: UnitInput', () => {
     await input.setValue(2);
     input.trigger('blur');
 
-    expect(wrapper.emitted('input')![0][0]).toContain(UNITS[inputExponent]);
+    expect(wrapper.emitted('update:value')![0][0]).toContain(UNITS[inputExponent]);
   });
 
   it.each([
@@ -104,7 +104,7 @@ describe('component: UnitInput', () => {
     [1000, 'MB'],
   ])('based on increment %p and exponent M, it should use binary modifier and return unit %p', (increment, expected) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1, inputExponent: 2, increment
       }
     });
@@ -117,7 +117,7 @@ describe('component: UnitInput', () => {
     ['number'],
   ])('should force emission of value type as %p', (outputAs) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1, inputExponent: 3, outputAs
       }
     });
@@ -127,7 +127,7 @@ describe('component: UnitInput', () => {
     input.setValue(2);
     input.trigger('blur');
 
-    expect(typeof wrapper.emitted('input')![0][0]).toBe(outputAs);
+    expect(typeof wrapper.emitted('update:value')![0][0]).toBe(outputAs);
   });
 
   it.each([
@@ -135,7 +135,7 @@ describe('component: UnitInput', () => {
     ['Coolio', 'MCoolio'],
   ])('should appended base unit %p value to SI modifier and return %p', (baseUnit, expected) => {
     const wrapper = mount(UnitInput, {
-      propsData: {
+      props: {
         value: 1, baseUnit, inputExponent: 2
       }
     });
@@ -146,7 +146,7 @@ describe('component: UnitInput', () => {
 
   it('should display suffix outside of the value', () => {
     const suffix = 'seconds';
-    const wrapper = mount(UnitInput, { propsData: { value: 1, suffix } });
+    const wrapper = mount(UnitInput, { props: { value: 1, suffix } });
     const addonText = wrapper.find('.addon').text();
 
     const input = wrapper.find('input');
@@ -167,25 +167,21 @@ describe('component: UnitInput', () => {
     input.setValue(value);
     input.trigger('blur');
 
-    expect(wrapper.emitted('input')![0][0]).toBe(expectation);
+    expect(wrapper.emitted('update:value')![0][0]).toBe(expectation);
   });
 
   it('should not correct value to a valid integer while typing', () => {
     const value = 5096;
     const delay = 1;
-    const wrapper = mount(UnitInput, { propsData: { delay } });
+    const wrapper = mount(UnitInput, { props: { delay } });
     const input = wrapper.find('input');
 
-    jest.useFakeTimers();
-
     input.setValue('4096');
     input.setValue('096');
     input.setValue(value);
     input.trigger('blur');
-    jest.advanceTimersByTime(delay);
-    jest.useRealTimers();
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
-    expect(wrapper.emitted('input')![0][0]).toBe(value);
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')[4][0]).toBe(value);
   });
 });

package/components/form/labeled-select-utils/labeled-select.utils.ts

@@ -109,7 +109,7 @@ export async function labelSelectPaginationFunction<T>({
 
     return {
       page:  resPage,
-      pages: res.pages,
+      pages: res.pages || Math.ceil(res.count / (pageSize || Number.MAX_SAFE_INTEGER)),
       total: res.count
     };
   } catch (err) {

package/components/formatter/AppSummaryGraph.vue

@@ -85,7 +85,7 @@ export default {
 </script>
 
 <template>
-  <v-popover
+  <v-dropdown
     v-if="show"
     class="text-center hand"
     placement="top"
@@ -112,8 +112,8 @@ export default {
       >
         <tbody>
           <tr
-            v-for="obj in stateParts"
-            :key="obj.key"
+            v-for="(obj, i) in stateParts"
+            :key="i"
           >
             <td
               class="text-left pr-20"
@@ -128,7 +128,7 @@ export default {
         </tbody>
       </table>
     </template>
-  </v-popover>
+  </v-dropdown>
   <div
     v-else
     class="text-center text-muted"

package/components/formatter/ClusterLink.vue

@@ -93,7 +93,7 @@ export default {
     color: var(--error);
     margin-left: 4px;
   }
-  ::v-deep {
+  :deep() {
     .labeled-tooltip, .status-icon {
       position: relative;
       display: inline;

package/components/formatter/Endpoints.vue

@@ -82,7 +82,10 @@ export default {
 
 <template>
   <span>
-    <template v-for="(endpoint, index) in parsed">
+    <template
+      v-for="(endpoint, index) in parsed"
+      :key="index"
+    >
       <span
         v-if="endpoint.display"
         :key="endpoint.display"

package/components/formatter/FleetSummaryGraph.vue

@@ -59,7 +59,7 @@ export default {
 </script>
 
 <template>
-  <v-popover
+  <v-dropdown
     v-if="show"
     class="text-center hand"
     placement="top"
@@ -81,8 +81,8 @@ export default {
       >
         <tbody>
           <tr
-            v-for="obj in stateParts"
-            :key="obj.label"
+            v-for="(obj, i) in stateParts"
+            :key="i"
           >
             <td
               class="text-left pr-20"
@@ -97,7 +97,7 @@ export default {
         </tbody>
       </table>
     </template>
-  </v-popover>
+  </v-dropdown>
   <div
     v-else
     class="text-center text-muted"

package/components/formatter/ListLink.vue

@@ -24,7 +24,7 @@ export default {
   <span>
     <span
       v-for="(el, i) in value"
-      :key="el.key"
+      :key="i"
     >
       <Link
         :row="el"

package/components/formatter/ListLinkDetail.vue

@@ -21,8 +21,8 @@ export default {
 <template>
   <span>
     <LinkDetail
-      v-for="el in value"
-      :key="el.key"
+      v-for="(el, i) in value"
+      :key="i"
       :row="row"
       v-bind="el"
     />