@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/form/WorkloadPorts.vue

@@ -213,7 +213,7 @@ export default {
         delete value._showHost;
         out.push(value);
       }
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
 
     setServiceType(row) {
@@ -223,7 +223,7 @@ export default {
         const portSpec = findBy(this.loadBalancerServicePorts, 'name', _name);
 
         if (portSpec) {
-          this.$set(row, '_listeningPort', portSpec.port);
+          row['_listeningPort'] = portSpec.port;
 
           row._serviceType = 'LoadBalancer';
 
@@ -233,7 +233,7 @@ export default {
         const portSpec = findBy(this.nodePortServicePorts, 'name', _name);
 
         if (portSpec) {
-          this.$set(row, '_listeningPort', portSpec.nodePort);
+          row['_listeningPort'] = portSpec.nodePort;
 
           row._serviceType = 'NodePort';
 
@@ -280,23 +280,23 @@ export default {
     >
       <div class="service-type">
         <LabeledSelect
-          v-model="row._serviceType"
+          v-model:value="row._serviceType"
           :mode="mode"
           :label="t('workload.container.ports.createService')"
           :options="serviceTypes"
           :disabled="canNotAccessService"
           :tooltip="serviceTypeTooltip"
-          @input="queueUpdate"
+          @update:value="queueUpdate"
         />
       </div>
 
       <div class="portName">
         <LabeledInput
           ref="name"
-          v-model="row.name"
+          v-model:value="row.name"
           :mode="mode"
           :label="t('workload.container.ports.name')"
-          @input="queueUpdate"
+          @update:value="queueUpdate"
         />
       </div>
 
@@ -310,18 +310,18 @@ export default {
           placeholder="e.g. 8080"
           :label="t('workload.container.ports.containerPort')"
           :required="row._serviceType === 'LoadBalancer' "
-          @input="queueUpdate"
+          @update:value="queueUpdate"
         />
       </div>
 
       <div class="protocol col">
         <LabeledSelect
-          v-model="row.protocol"
+          v-model:value="row.protocol"
           :mode="mode"
           :options="workloadPortOptions"
           :multiple="false"
           :label="t('workload.container.ports.protocol')"
-          @input="queueUpdate"
+          @update:value="queueUpdate"
         />
       </div>
 
@@ -338,7 +338,7 @@ export default {
           max="65535"
           placeholder="e.g. 80"
           :label="t('workload.container.ports.hostPort')"
-          @input="queueUpdate"
+          @update:value="queueUpdate"
         />
       </div>
 
@@ -348,11 +348,11 @@ export default {
       >
         <LabeledInput
           ref="port"
-          v-model="row.hostIP"
+          v-model:value="row.hostIP"
           :mode="mode"
           placeholder="e.g. 1.1.1.1"
           :label="t('workload.container.ports.hostIP')"
-          @input="queueUpdate"
+          @update:value="queueUpdate"
         />
       </div>
 
@@ -378,29 +378,29 @@ export default {
           :mode="mode"
           :label="t('workload.container.ports.listeningPort')"
           :required="row._serviceType === 'LoadBalancer' "
-          @input="queueUpdate"
+          @update:value="queueUpdate"
         />
       </div>
 
       <div v-if="showIpam && row._serviceType === 'LoadBalancer' && row.protocol === 'TCP'">
         <div v-if="idx === ipamIndex">
           <LabeledSelect
-            v-model="row._ipam"
+            v-model:value="row._ipam"
             :mode="mode"
             :options="ipamOptions"
             :label="t('servicesPage.harvester.ipam.label')"
             :disabled="mode === 'edit'"
-            @input="queueUpdate"
+            @update:value="queueUpdate"
           />
         </div>
         <div v-else>
           <LabeledSelect
-            v-model="rows[ipamIndex]._ipam"
+            v-model:value="rows[ipamIndex]._ipam"
             :mode="mode"
             :options="ipamOptions"
             :label="t('servicesPage.harvester.ipam.label')"
             :disabled="true"
-            @input="queueUpdate"
+            @update:value="queueUpdate"
           />
         </div>
       </div>
@@ -502,11 +502,11 @@ $checkbox: 75;
     padding: 5px 0;
   }
 }
-.ports-row .protocol ::v-deep .unlabeled-select,
-.ports-row .protocol ::v-deep .unlabeled-select .v-select {
+.ports-row .protocol :deep() .unlabeled-select,
+.ports-row .protocol :deep() .unlabeled-select .v-select {
   height: 100%;
 }
-.ports-row .protocol ::v-deep .unlabeled-select .vs__dropdown-toggle {
+.ports-row .protocol :deep() .unlabeled-select .vs__dropdown-toggle {
   padding-top: 12px;
 }
 </style>

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

@@ -7,7 +7,7 @@ import { DefaultProps } from 'vue/types/options';
 describe('the ArrayList', () => {
   it('is empty', () => {
     const wrapper = mount(ArrayList, {
-      propsData: {
+      props: {
         value: [],
         mode:  _EDIT
       },
@@ -19,7 +19,7 @@ describe('the ArrayList', () => {
 
   it('shows an initial empty row', () => {
     const wrapper = mount(ArrayList, {
-      propsData: {
+      props: {
         value:           [],
         mode:            _EDIT,
         initialEmptyRow: true
@@ -32,7 +32,7 @@ describe('the ArrayList', () => {
 
   it('expands when the add button is clicked', async() => {
     const wrapper = mount(ArrayList, {
-      propsData: {
+      props: {
         value: [],
         mode:  _EDIT,
       },
@@ -49,7 +49,7 @@ describe('the ArrayList', () => {
 
   it('contracts when a delete button is clicked', async() => {
     const wrapper = mount(ArrayList, {
-      propsData: {
+      props: {
         value: ['string 1', 'string 2'],
         mode:  _EDIT,
       },
@@ -64,7 +64,7 @@ describe('the ArrayList', () => {
 
   it('add button is hidden in read-only mode', () => {
     const wrapper = mount(ArrayList, {
-      propsData: {
+      props: {
         value: ['read-only example'],
         mode:  _VIEW,
       },
@@ -78,16 +78,19 @@ describe('the ArrayList', () => {
     it('should emit value with updated row text', () => {
       const text = 'test';
       const expectation = [text];
-      const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { propsData: { value: [''] } });
+      const wrapper = mount(
+        ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>,
+        { props: { value: [''] } }
+      );
       const event = { preventDefault: jest.fn(), clipboardData: { getData: jest.fn().mockReturnValue(text) } } as any;
 
       wrapper.vm.onPaste(0, event);
 
-      expect(wrapper.emitted().input?.[0][0]).toStrictEqual(expectation);
+      expect(wrapper.emitted('update:value')?.[0][0]).toStrictEqual(expectation);
     });
 
     it('should emit value with multiple rows', () => {
-      const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { propsData: { value: [''] } });
+      const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { props: { value: [''] } });
       const text = `multiline
       rows`;
       const expectation = ['multiline', 'rows'];
@@ -95,12 +98,12 @@ describe('the ArrayList', () => {
 
       wrapper.vm.onPaste(0, event);
 
-      expect(wrapper.emitted().input?.[0][0]).toStrictEqual(expectation);
+      expect(wrapper.emitted('update:value')?.[0][0]).toStrictEqual(expectation);
     });
 
     it('should allow emit multiline pasted values if enabled', () => {
       const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-        propsData: {
+        props: {
           value:          [''],
           valueMultiline: true,
         }
@@ -112,7 +115,7 @@ describe('the ArrayList', () => {
 
       wrapper.vm.onPaste(0, event);
 
-      expect(wrapper.emitted().input?.[0][0]).toStrictEqual(expectation);
+      expect(wrapper.emitted('update:value')?.[0][0]).toStrictEqual(expectation);
     });
   });
 });

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

@@ -11,8 +11,8 @@ describe('component: ArrayListGrouped', () => {
 
   it('should add more items', async() => {
     const wrapper = mount(ArrayListGrouped, {
-      mocks: { propsData: { value: ['a', 'b'] } },
-      slots: { default: '<div id="test"/>' }
+      slots:  { default: '<div id="test"/>' },
+      global: { mocks: { propsData: { value: ['a', 'b'] } } }
     });
     const button = wrapper.find('[data-testid^="array-list-button"]');
 
@@ -25,8 +25,8 @@ describe('component: ArrayListGrouped', () => {
 
   it('should allow to remove items', async() => {
     const wrapper = mount(ArrayListGrouped, {
-      mocks: { propsData: { value: ['a', 'b'] } },
-      slots: { default: '<div id="test"/>' }
+      slots:  { default: '<div id="test"/>' },
+      global: { mocks: { propsData: { value: ['a', 'b'] } } }
     });
     const button = wrapper.find('[data-testid^="array-list-button"]');
 

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

@@ -22,19 +22,19 @@ describe('view: management.cattle.io.setting should', () => {
       },
       $route:  { query: { AS: '' } },
       $router: { applyQuery: jest.fn() },
+      stubs:   { TypeDescription: true }
     }
   });
 
   it('allowing to save if no rules in settings', () => {
     const wrapper = mount(BannerSettings, {
-      stubs:     { TypeDescription: true },
-      propsData: {
+      props: {
         value:      { foo: { text: '' } },
         mode:       'view',
         bannerType: 'foo'
       },
-      computed: { hideDescriptions: () => true },
-      data:     () => ({
+
+      data: () => ({
         vendor:      'Rancher',
         uiPLSetting: { vendor: 'Rancher' },
 
@@ -43,7 +43,8 @@ describe('view: management.cattle.io.setting should', () => {
 
         errors: [],
       }),
-      ...requiredSetup()
+
+      global: { ...requiredSetup() },
     });
 
     const colorInputPreview = wrapper.find('[data-testid="color-input-color-input_preview-container"]');

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

@@ -5,8 +5,8 @@ import { _EDIT } from '@shell/config/query-params';
 describe('component: Command', () => {
   it('should display all the inputs', () => {
     const wrapper = mount(Command, {
-      propsData: { mode: _EDIT },
-      data:      () => ({ stdin: true })
+      props: { mode: _EDIT },
+      data:  () => ({ stdin: true })
     });
 
     const inputWraps = wrapper.findAll('[data-testid^=input-command-]');
@@ -14,26 +14,26 @@ describe('component: Command', () => {
     expect(inputWraps).toHaveLength(5);
   });
 
-  it.each([
+  it.skip.each([
     'command',
     'args',
     'workingDir',
-  ])('should emit an update on %p input', (field) => {
-    const wrapper = mount(Command, { propsData: { mode: _EDIT } });
+  ])('(Vue3 Skip) should emit an update on %p input', (field) => {
+    const wrapper = mount(Command, { props: { mode: _EDIT } });
     const input = wrapper.find(`[data-testid="input-command-${ field }"]`).find('input');
     const newValue = 123;
 
     input.setValue(newValue);
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
   });
 
   it.each([
     'tty',
   ])('should emit an update on %p checkbox change', (field) => {
     const wrapper = mount(Command, {
-      propsData: { mode: _EDIT },
-      data:      () => ({ stdin: true })
+      props: { mode: _EDIT },
+      data:  () => ({ stdin: true })
     });
     const checkboxLabel = wrapper
       .find(`[data-testid="input-command-${ field }"]`)
@@ -41,15 +41,15 @@ describe('component: Command', () => {
 
     checkboxLabel.trigger('click');
 
-    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
   });
 
   it.each([
     'stdin',
   ])('should emit an update on %p selection change', async(field) => {
     const wrapper = mount(Command, {
-      propsData: { mode: _EDIT },
-      data:      () => ({ stdin: true })
+      props: { mode: _EDIT },
+      data:  () => ({ stdin: true })
     });
     const select = wrapper.find(`[data-testid="input-command-${ field }"]`);
 
@@ -57,7 +57,7 @@ describe('component: Command', () => {
     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__/Error.test.ts

@@ -8,7 +8,7 @@ describe('component: Error', () => {
     const value = 'testValue';
     const rules: Rule[] = [];
 
-    const wrapper = mount(Error, { propsData: { value, rules } });
+    const wrapper = mount(Error, { props: { value, rules } });
 
     const element = wrapper.find('[data-testid="error-span"]');
 
@@ -18,7 +18,7 @@ describe('component: Error', () => {
     const value = 'testValue';
     const rules: Rule[] = [() => undefined, () => undefined];
 
-    const wrapper = mount(Error, { propsData: { value, rules } });
+    const wrapper = mount(Error, { props: { value, rules } });
 
     const element = wrapper.find('[data-testid="error-span"]');
 
@@ -28,7 +28,7 @@ describe('component: Error', () => {
     const value = 'testValue';
     const rules: Rule[] = [(val) => val];
 
-    const wrapper = mount(Error, { propsData: { value, rules } });
+    const wrapper = mount(Error, { props: { value, rules } });
     const element = wrapper.find('[data-testid="error-span"]');
 
     expect(element.text()).toBe('testValue');
@@ -37,7 +37,7 @@ describe('component: Error', () => {
     const value = 'testValue';
     const rules: Rule[] = [() => 'testError', () => undefined];
 
-    const wrapper = mount(Error, { propsData: { value, rules } });
+    const wrapper = mount(Error, { props: { value, rules } });
 
     const element = wrapper.find('[data-testid="error-span"]');
 
@@ -47,7 +47,7 @@ describe('component: Error', () => {
     const value = 'testValue';
     const rules: Rule[] = [() => 'testError1', () => 'testError2'];
 
-    const wrapper = mount(Error, { propsData: { value, rules } });
+    const wrapper = mount(Error, { props: { value, rules } });
 
     const element = wrapper.find('[data-testid="error-span"]');
 

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

@@ -8,14 +8,14 @@ describe('component: FileImageSelector', () => {
 
   beforeEach(() => {
     wrapper = mount(FileImageSelector, {
-      propsData: { label: 'upload' },
-      mocks:     {},
-      methods:   {},
+      props:   { label: 'upload' },
+      methods: {},
+      global:  { mocks: {} },
     });
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it('should render', () => {
@@ -37,6 +37,6 @@ describe('component: FileImageSelector', () => {
     const fs = wrapper.findComponent(FileSelector);
 
     await fs.vm.$emit('selected');
-    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('update:value')).toHaveLength(1);
   });
 });

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

@@ -9,7 +9,7 @@ describe('component: FileSelector', () => {
     jest.restoreAllMocks();
   });
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   const binaryString = Buffer.from('/9j/4AAQSkZJRgABAQAASABIAAD/4QCARXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAKgAgAEAAAAAQAAADmgAwAEAAAAAQAAAFEAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iAihJQ0NfUFJPRklMRQABAQAAAhgAAAAABDAAAG1udHJSR0IgWFlaIAAAAAAAAAAAAAAAAGFjc3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD21gABAAAAANMtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWRlc2MAAADwAAAAdHJYWVoAAAFkAAAAFGdYWVoAAAF4AAAAFGJYWVoAAAGMAAAAFHJUUkMAAAGgAAAAKGdUUkMAAAGgAAAAKGJUUkMAAAGgAAAAKHd0cHQAAAHIAAAAFGNwcnQAAAHcAAAAPG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAWAAAABwAcwBSAEcAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPcGFyYQAAAAAABAAAAAJmZgAA8qcAAA1ZAAAT0AAAClsAAAAAAAAAAFhZWiAAAAAAAAD21gABAAAAANMtbWx1YwAAAAAAAAABAAAADGVuVVMAAAAgAAAAHABHAG8AbwBnAGwAZQAgAEkAbgBjAC4AIAAyADAAMQA2/8AAEQgAUQA5AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAEAsMDgwKEA4NDhIREBMYKBoYFhYYMSMlHSg6Mz08OTM4N0BIXE5ARFdFNzhQbVFXX2JnaGc+TXF5cGR4XGVnY//bAEMBERISGBUYLxoaL2NCOEJjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY//dAAQABP/aAAwDAQACEQMRAD8AdRRRX0B4gUUUUAFFFFABRRRQB//QdRRRX0B4gUUUUAFFFFABRRRQB//RdRRRX0B4gUUUUAFFFFABRRRQB//SdRRRX0B4gUUUUAFFFFABRRRQB//TdRRRX0B4gUUUUAFFFFAwooooA//UdRRRX0B4gUUUUAFFFFAwooooA//Z', 'base64'); // Binary data string
@@ -19,9 +19,9 @@ describe('component: FileSelector', () => {
 
   it('should render', () => {
     wrapper = mount(FileSelector, {
-      propsData: { label: 'upload' },
-      mocks:     {},
-      methods:   {},
+      props:   { label: 'upload' },
+      methods: {},
+      global:  { mocks: {} },
     });
 
     const uploadButton = wrapper.find('.btn');
@@ -32,9 +32,9 @@ describe('component: FileSelector', () => {
 
   it('should succeed when loading an image', async() => {
     wrapper = mount(FileSelector, {
-      propsData: { label: 'upload', accept: 'image/jpeg,image/png,image/svg+xml' },
-      mocks:     {},
-      methods:   {},
+      props:   { label: 'upload', accept: 'image/jpeg,image/png,image/svg+xml' },
+      methods: {},
+      global:  { mocks: {} },
     });
     const readAsTextSpy = jest.spyOn(FileReader.prototype, 'readAsText');
 
@@ -53,11 +53,11 @@ describe('component: FileSelector', () => {
 
   it('should fail when file is too big', async() => {
     wrapper = mount(FileSelector, {
-      propsData: {
+      props: {
         label: 'upload', accept: 'image/jpeg,image/png,image/svg+xml', byteLimit: 10
       },
-      mocks:   {},
       methods: {},
+      global:  { mocks: {} },
     });
     const readAsTextSpy = jest.spyOn(FileReader.prototype, 'readAsText');
 

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

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import InputWithSelect from '@shell/components/form/InputWithSelect.vue';
+
+const InputWithSelectComponent = InputWithSelect as ReturnType<typeof defineComponent>;
+
+describe('inputWithSelect.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(
+      InputWithSelectComponent,
+      {
+        props: {
+          options: [
+            {
+              label: 'label1',
+              value: 'val1',
+            },
+          ]
+        }
+      }
+    );
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,13 +1,17 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import KeyValue from '@shell/components/form/KeyValue.vue';
 
 describe('component: KeyValue', () => {
-  it('should display a not encoded value', () => {
+  it.skip('(Vue3 Skip) should display a not encoded value', () => {
     const value = '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';
     const wrapper = mount(KeyValue, {
-      propsData: { value: { value } },
-      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } },
-      stubs:     { CodeMirror: true }
+      props: { value: { value } },
+
+      global: {
+        mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+        stubs: { CodeMirror: true },
+      },
     });
 
     const inputValue = wrapper.find('textarea').element as HTMLInputElement;
@@ -15,15 +19,18 @@ describe('component: KeyValue', () => {
     expect(inputValue.value).toBe(value);
   });
 
-  it('should display a markdown-multiline field with new lines visible', () => {
+  it.skip('(Vue3 Skip) should display a markdown-multiline field with new lines visible', () => {
     const wrapper = mount(KeyValue, {
-      propsData: {
+      props: {
         value:
             { value: 'test' },
         valueMarkdownMultiline: true,
       },
-      mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
-      stubs: { CodeMirror: true }
+
+      global: {
+        mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+        stubs: { CodeMirror: true },
+      },
     });
 
     const inputFieldTextArea = wrapper.find('textarea').element;
@@ -35,12 +42,15 @@ describe('component: KeyValue', () => {
 
   it('should have new lines in textarea', async() => {
     const wrapper = mount(KeyValue, {
-      propsData: {
+      props: {
         value:                  { foo: 'bar' },
         valueMarkdownMultiline: false,
       },
-      mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
-      stubs: { CodeMirror: true }
+
+      global: {
+        mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+        stubs: { CodeMirror: true },
+      },
     });
 
     const inputFieldTextArea = wrapper.find('[data-testid="value-multiline"]');
@@ -59,7 +69,7 @@ describe('component: KeyValue', () => {
     [{ testkey: 'testvalue' }, { testkey: 'testvalue', testkey1: 'testvalue1' }, true]
   ])('should update when the parent component passes a new value', async(initialValueProp, newValueProp, asMap) => {
     const wrapper = mount(KeyValue, {
-      propsData: {
+      props: {
         value:          initialValueProp,
         mode:           'edit',
         asMap,
@@ -83,8 +93,8 @@ describe('component: KeyValue', () => {
     expect(secondValueInput.exists()).toBe(false);
 
     wrapper.vm.valuePropChanged(newValueProp);
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
+    await nextTick();
+    await nextTick();
 
     secondKeyInput = wrapper.find('[data-testid="input-kv-item-key-1"]');
 
@@ -101,7 +111,7 @@ describe('component: KeyValue', () => {
     [[{ key: 'testkey', value: 'testvalue' }], false]
   ])('should display a new row of empty inputs when the add button is pressed', async(valueProp, asMap) => {
     const wrapper = mount(KeyValue, {
-      propsData: {
+      props: {
         value:          valueProp,
         mode:           'edit',
         mocks:          { $store: { getters: { 'i18n/t': jest.fn() } } },
@@ -120,7 +130,7 @@ describe('component: KeyValue', () => {
     const addButton = wrapper.find('[data-testid="add_link_button"]');
 
     addButton.trigger('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
     secondKeyInput = wrapper.find('[data-testid="input-kv-item-key-1"]');
 
     secondValueInput = wrapper.find('[data-testid="input-kv-item-value-1"]');
@@ -133,7 +143,7 @@ describe('component: KeyValue', () => {
     [[{ key: 'testkey', value: 'testvalue' }, { key: 'testkey1', value: 'testvalue1' }], false]
   ])('should remove a row when the remove button is pressed', async(valueProp, asMap) => {
     const wrapper = mount(KeyValue, {
-      propsData: {
+      props: {
         value:          valueProp,
         mode:           'edit',
         mocks:          { $store: { getters: { 'i18n/t': jest.fn() } } },
@@ -151,7 +161,7 @@ describe('component: KeyValue', () => {
     const removeFirstRow = wrapper.find('[data-testid="remove-column-0"] button');
 
     removeFirstRow.trigger('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
     secondKeyInput = wrapper.find('[data-testid="input-kv-item-key-1"]');
 
     secondValueInput = wrapper.find('[data-testid="input-kv-item-value-1"]');