[INT] Refactored some of the plugins - 3 (#10946)

[INT] Refactored some of the plugins - 3
rancher · May 8, 2024 · 6bd67ba · 6bd67ba
1 parent 381a15b
commit 6bd67ba
Show file tree

Hide file tree

Showing 26 changed files with 119 additions and 126 deletions.
diff --git a/jest.setup.js b/jest.setup.js
@@ -3,8 +3,8 @@ import { config } from '@vue/test-utils';
 import i18n from '@shell/plugins/i18n';
 import VTooltip from 'v-tooltip';
 import vSelect from 'vue-select';
-import { VCleanTooltip } from '@shell/plugins/clean-tooltip-directive.js';
-
+import vCleanTooltip from '@shell/plugins/clean-tooltip-directive.js';
+import cleanHtmlDirective from '@shell/plugins/clean-html-directive';
 import '@shell/plugins/replaceall';
 
 import Vue from 'vue';
@@ -16,8 +16,9 @@ global.TextDecoder = TextDecoder;
 Vue.config.productionTip = false;
 Vue.use(i18n);
 Vue.use(VTooltip);
-Vue.use(VCleanTooltip);
 Vue.component('v-select', vSelect);
+Vue.directive('clean-html', cleanHtmlDirective);
+Vue.directive('clean-tooltip', vCleanTooltip);
 
 /**
  * Global configuration for Jest tests
@@ -47,7 +48,6 @@ beforeEach(() => {
   config.mocks['$plugin'] = { getDynamic: () => undefined };
 
   config.mocks['$store'] = { getters: { 'i18n/t': jest.fn() } };
-  config.directives = { 'clean-tooltip': VCleanTooltip };
 
   // Overrides some components
   // config.stubs['my-component'] = { template: "<div></div> "};

diff --git a/pkg/rancher-components/src/components/Banner/Banner.test.ts b/pkg/rancher-components/src/components/Banner/Banner.test.ts
@@ -1,16 +1,12 @@
 import { mount } from '@vue/test-utils';
 import { Banner } from './index';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {
     const label = 'test';
     const wrapper = mount(
       Banner,
-      {
-        directives: { cleanHtmlDirective },
-        propsData:  { label }
-      });
+      { propsData: { label } });
 
     const element = wrapper.find('span').element;
 

diff --git a/pkg/rancher-components/src/components/Form/Radio/RadioButton.test.ts b/pkg/rancher-components/src/components/Form/Radio/RadioButton.test.ts
@@ -1,6 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
 import { RadioButton } from './index';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('radioButton.vue', () => {
   it('renders label slot contents', () => {
@@ -13,8 +12,7 @@ describe('radioButton.vue', () => {
     const wrapper = shallowMount(
       RadioButton,
       {
-        directives: { cleanHtmlDirective },
-        propsData:  {
+        propsData: {
           label: 'Test Label', val: {}, value: {}
         }
       });

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

diff --git a/shell/components/__tests__/CruResource.test.ts b/shell/components/__tests__/CruResource.test.ts
@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils';
 import CruResource from '@shell/components/CruResource.vue';
 import { _EDIT, _YAML } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 
 describe('component: CruResource', () => {
@@ -36,8 +35,7 @@ describe('component: CruResource', () => {
   it('should display multiple errors', () => {
     const errors = ['mistake!', 'BiG MiStAke11'];
     const wrapper = mount(CruResource, {
-      directives: { cleanHtmlDirective },
-      propsData:  {
+      propsData: {
         canYaml:  false,
         mode:     _EDIT,
         resource: {},
@@ -108,8 +106,7 @@ describe('component: CruResource', () => {
   it('should not prevent default events on keypress Enter', async() => {
     const event = { preventDefault: jest.fn() };
     const wrapper = mount(CruResource, {
-      directives: { cleanHtmlDirective },
-      propsData:  {
+      propsData: {
         canYaml:            false,
         mode:               _EDIT,
         resource:           {},

diff --git a/shell/components/__tests__/EtcdInfoBanner.test.ts b/shell/components/__tests__/EtcdInfoBanner.test.ts
@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
 import EtcdInfoBanner from '../EtcdInfoBanner.vue';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 import { CATALOG } from '@shell/config/types';
 
 describe('component: EtcdInfoBanner', () => {
@@ -11,8 +10,7 @@ describe('component: EtcdInfoBanner', () => {
     const wrapper = mount(
       EtcdInfoBanner,
       {
-        directives: { cleanHtmlDirective },
-        mocks:      {
+        mocks: {
           $store: {
             getters: {
               'i18n/t':          () => 'Test',

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

diff --git a/shell/components/form/__tests__/KeyValue.test.ts b/shell/components/form/__tests__/KeyValue.test.ts
@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
 import KeyValue from '@shell/components/form/KeyValue.vue';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: KeyValue', () => {
   it('should display a not encoded value', () => {
@@ -65,7 +64,6 @@ describe('component: KeyValue', () => {
         mode:           'edit',
         asMap,
         mocks:          { $store: { getters: { 'i18n/t': jest.fn() } } },
-        directives:     { cleanHtmlDirective },
         valueMultiline: false,
       }
     });
@@ -107,7 +105,6 @@ describe('component: KeyValue', () => {
         value:          valueProp,
         mode:           'edit',
         mocks:          { $store: { getters: { 'i18n/t': jest.fn() } } },
-        directives:     { cleanHtmlDirective },
         valueMultiline: false,
         asMap
       }
@@ -140,7 +137,6 @@ describe('component: KeyValue', () => {
         value:          valueProp,
         mode:           'edit',
         mocks:          { $store: { getters: { 'i18n/t': jest.fn() } } },
-        directives:     { cleanHtmlDirective },
         valueMultiline: false,
         asMap
       }

diff --git a/shell/edit/__tests__/kontainerDriver.test.ts b/shell/edit/__tests__/kontainerDriver.test.ts
@@ -2,7 +2,6 @@
 import { mount } from '@vue/test-utils';
 import KontainerDriverEdit from '@shell/edit/kontainerDriver.vue';
 import { _CREATE } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('view: kontainerdriver should', () => {
   const url = 'http://test.com';
@@ -22,8 +21,7 @@ describe('view: kontainerdriver should', () => {
       $route:  { query: { AS: '' } },
       $router: { applyQuery: jest.fn() },
     },
-    directives: { cleanHtmlDirective },
-    propsData:  {
+    propsData: {
       value: {
         spec: {
           active:           true,

diff --git a/shell/edit/__tests__/monitoring.coreos.com.prometheusrule.test.ts b/shell/edit/__tests__/monitoring.coreos.com.prometheusrule.test.ts
@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils';
 import FormValidation from '@shell/mixins/form-validation';
 import Monitoring from '@shell/edit/monitoring.coreos.com.prometheusrule/index.vue';
 import { _EDIT } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('edit: management.cattle.io.setting should', () => {
   const MOCKED_ERRORS = ['error1', 'error2', 'error3', 'error4', 'error5'];
@@ -37,7 +36,6 @@ describe('edit: management.cattle.io.setting should', () => {
         value:    { value: 'anything' },
         name:     ''
       },
-      directives: { cleanHtmlDirective },
       ...requiredSetup()
     });
 

diff --git a/shell/edit/__tests__/nodeDriver.test.ts b/shell/edit/__tests__/nodeDriver.test.ts
@@ -2,7 +2,6 @@
 import { mount } from '@vue/test-utils';
 import NodeDriverEdit from '@shell/edit/nodeDriver.vue';
 import { _CREATE } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('view: nodedriver should', () => {
   const url = 'http://test.com';
@@ -22,8 +21,6 @@ describe('view: nodedriver should', () => {
       $route:  { query: { AS: '' } },
       $router: { applyQuery: jest.fn() },
     },
-    directives: { cleanHtmlDirective },
-
     propsData: {
       value: {
         spec: {

diff --git a/shell/edit/__tests__/service.test.ts b/shell/edit/__tests__/service.test.ts
@@ -1,8 +1,5 @@
 import { shallowMount, Wrapper } from '@vue/test-utils';
-
 import { _CLONE } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
-
 import ServicePage from '@shell/edit/service.vue';
 
 const createEditViewMock = {
@@ -53,8 +50,7 @@ describe('service edit', () => {
             }
           }
         },
-        computed:   { provisioningCluster: jest.fn() },
-        directives: { cleanHtmlDirective },
+        computed: { provisioningCluster: jest.fn() },
       }
     );
   };

diff --git a/shell/edit/auth/__tests__/AuthProviderWarningBanners.test.ts b/shell/edit/auth/__tests__/AuthProviderWarningBanners.test.ts
@@ -1,12 +1,10 @@
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners.vue';
 import { mount } from '@vue/test-utils';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: AuthProviderWarningBanners.vue', () => {
   const wrapper = mount(AuthProviderWarningBanners, {
-    mocks:      { $store: { getters: { 'i18n/t': (text: string) => text } } },
-    propsData:  { tArgs: { provider: 'Any Provider', username: 'username' } },
-    directives: { cleanHtmlDirective }
+    mocks:     { $store: { getters: { 'i18n/t': (text: string) => text } } },
+    propsData: { tArgs: { provider: 'Any Provider', username: 'username' } }
   });
 
   it('should render properly', () => {

diff --git a/shell/edit/auth/__tests__/azuread.test.ts b/shell/edit/auth/__tests__/azuread.test.ts
@@ -2,7 +2,6 @@
 import { mount } from '@vue/test-utils';
 import AzureAD from '@shell/edit/auth/azuread.vue';
 import { _EDIT } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 jest.mock('@shell/utils/clipboard', () => {
   return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
@@ -68,7 +67,6 @@ describe('edit: azureAD should', () => {
       value: { applicationSecret: '' },
       mode:  _EDIT,
     },
-    directives: { cleanHtmlDirective },
   });
 
   beforeEach(() => {

diff --git a/shell/edit/networking.k8s.io.networkpolicy/__tests__/PolicyRuleTarget.test.ts b/shell/edit/networking.k8s.io.networkpolicy/__tests__/PolicyRuleTarget.test.ts
@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
 import PolicyRuleTarget from '@shell/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 import mock from '@shell/edit/networking.k8s.io.networkpolicy/__tests__/utils/mock.json';
 import { PolicyRuleTargetSelectors } from '@shell/edit/networking.k8s.io.networkpolicy/__tests__/utils/selectors.test.ts';
 
@@ -52,9 +51,6 @@ describe.each([
       type:          'ingress',
       mode
     },
-
-    directives: { cleanHtmlDirective },
-
     mocks: {
       $store: {
         getters: {

diff --git a/shell/edit/provisioning.cattle.io.cluster/__tests__/CustomCommand.test.ts b/shell/edit/provisioning.cattle.io.cluster/__tests__/CustomCommand.test.ts
@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
 import CustomCommand from '@shell/edit/provisioning.cattle.io.cluster/CustomCommand.vue';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 jest.mock('@shell/utils/clipboard', () => {
   return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
 });
@@ -39,8 +38,6 @@ describe('component: CustomCommand', () => {
       taints:          [],
       worker:          true,
     }),
-
-    directives: { cleanHtmlDirective }
   });
 
   it('should return linux commands with the right flags based on cluster information', () => {

diff --git a/shell/edit/workload/__tests__/Job.test.ts b/shell/edit/workload/__tests__/Job.test.ts
@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils';
 import Job from '@shell/edit/workload/Job.vue';
 import { _EDIT } from '@shell/config/query-params';
 import { WORKLOAD_TYPES } from '@shell/config/types';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: Job', () => {
   describe('given CronJob types', () => {
@@ -11,8 +10,7 @@ describe('component: Job', () => {
       'failed',
     ])('should emit an update on %p input', (field) => {
       const wrapper = mount(Job, {
-        directives: { cleanHtmlDirective },
-        propsData:  {
+        propsData: {
           mode: _EDIT,
           type: WORKLOAD_TYPES.CRON_JOB
         }