Mount `clean-html` directive in tests

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>

pkg/rancher-components/src/components/Banner/Banner.test.ts

@@ -1,10 +1,18 @@
 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, { propsData: { label } });
+    const wrapper = mount(
+      Banner,
+      {
+        directives: {
+         cleanHtmlDirective 
+        },
+        propsData: { label }
+      });
 
     const element = wrapper.find('span').element;
 

shell/components/__tests__/AsyncButton.test.ts

@@ -1,5 +1,6 @@
 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', () => {
@@ -7,7 +8,8 @@ describe('component: AsyncButton', () => {
     const mockT = jest.fn().mockReturnValue('some-string');
 
     const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
-      mocks: {
+      directives: { cleanHtmlDirective },
+      mocks:      {
         $store: {
           getters: {
             'i18n/exists': mockExists,

shell/components/__tests__/CruResource.test.ts

@@ -1,6 +1,7 @@
 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';
 
 describe('component: CruResource', () => {
   it('should hide Cancel button', () => {
@@ -33,7 +34,8 @@ describe('component: CruResource', () => {
   it('should display multiple errors', () => {
     const errors = ['mistake!', 'BiG MiStAke11'];
     const wrapper = mount(CruResource, {
-      propsData: {
+      directives: { cleanHtmlDirective },
+      propsData:  {
         canYaml:  false,
         mode:     _EDIT,
         resource: {},

shell/edit/workload/__tests__/Job.test.ts

@@ -2,6 +2,7 @@ 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', () => {
@@ -10,7 +11,8 @@ describe('component: Job', () => {
       'failed',
     ])('should emit an update on %p input', (field) => {
       const wrapper = mount(Job, {
-        propsData: {
+        directives: { cleanHtmlDirective },
+        propsData:  {
           mode: _EDIT,
           type: WORKLOAD_TYPES.CRON_JOB
         }