Test Updates and misc Fixes

ppr-ui/src/assets/styles/base.scss

@@ -802,4 +802,7 @@ tr.registration-row.draft-registration-row.added-reg-effect td.actions-cell,
       margin: 0;
     }
   }
+}
+.theme--light.v-application code {
+  white-space: break-spaces;
 }

ppr-ui/src/components/collateral/generalCollateral/GenColSummary.vue

@@ -157,7 +157,7 @@
         </v-row>
       </div>
     </div>
-    <div v-else class="general-collateral-summary pt-5">
+    <div v-else class="general-collateral-summary pt-5 pr-3">
       <p v-if="generalCollateral.length > 0" class="ma-0">
         <span v-html="generalCollateral[0].description"></span>
       </p>

ppr-ui/src/components/common/WysiwygEditor.vue

@@ -38,8 +38,8 @@
         <template v-slot:activator="{ on }">
           <v-btn
             v-on="on" text
-            :class="{ 'is-active': editor.isActive(tool.isActiveClass) }"
-            @click="getToolAction(editor, tool)"
+            :class="{ 'is-active': isActiveTool(tool) }"
+            @click="getToolAction(tool)"
           >
             <v-icon small>{{ tool.icon }}</v-icon>
           </v-btn>
@@ -70,7 +70,7 @@
 <script lang="ts">
 import { defineComponent, reactive, toRefs, watch, onMounted, computed } from 'vue-demi'
 import BaseDialog from '@/components/dialogs/BaseDialog.vue'
-import { DialogOptionsIF } from '@/interfaces'
+import { DialogOptionsIF, WysiwygToolsIF } from '@/interfaces'
 import { useInputRules } from '@/composables'
 
 // External editor package and extensions
@@ -139,10 +139,17 @@ export default defineComponent({
       localState.editor.commands.setContent(val)
     }
 
+    /** Returns true if the current tool is active on the selected content **/
+    const isActiveTool = (tool: WysiwygToolsIF) => {
+      return tool.isActiveClass === 'heading'
+        ? localState.editor?.isActive(tool.isActiveClass, { level: tool.hLevel })
+        : localState.editor?.isActive(tool.isActiveClass)
+    }
+
     /** Returns the toolkit formatting function **/
-    const getToolAction = (editor, tool) => {
+    const getToolAction = (tool: WysiwygToolsIF) => {
       if (tool.action === 'insertTable') localState.displayTableInput = true
-      else return editor.chain().focus()[tool.action](tool.hLevel ? { level: tool.hLevel } : null).run()
+      else return localState.editor?.chain().focus()[tool.action](tool.hLevel ? { level: tool.hLevel } : null).run()
     }
 
     /** Handle user input from dialog actions **/
@@ -183,6 +190,7 @@ export default defineComponent({
     return {
       StarterKit,
       isNumber,
+      isActiveTool,
       getToolAction,
       setEditorContent,
       handleDialogAction,

ppr-ui/src/resources/wysiwygToolbarConfig.ts

@@ -62,23 +62,23 @@ export const wysiwygToolkitConfig: Array<WysiwygToolsIF> = [
     tooltipText: 'Level 1 Header',
     action: 'toggleHeading',
     hLevel: 1,
-    isActiveClass: 'heading1',
+    isActiveClass: 'heading',
     icon: 'mdi-format-header-1'
   },
   {
     id: 'editor-heading-2',
     tooltipText: 'Level 2 Header',
     action: 'toggleHeading',
     hLevel: 2,
-    isActiveClass: 'heading2',
+    isActiveClass: 'heading',
     icon: 'mdi-format-header-2'
   },
   {
     id: 'editor-heading-3',
     tooltipText: 'Level 3 Header',
     action: 'toggleHeading',
     hLevel: 3,
-    isActiveClass: 'heading3',
+    isActiveClass: 'heading',
     icon: 'mdi-format-header-3'
   },
   {

ppr-ui/tests/unit/WysiwygEditor.spec.ts

@@ -0,0 +1,50 @@
+import { nextTick } from 'vue'
+import { WysiwygEditor } from '@/components/common'
+import { createComponent } from './utils'
+
+describe('WysiwygEditor', () => {
+  let wrapper
+  beforeEach(async () => {
+    wrapper = await createComponent(WysiwygEditor, { editorContent: '<p>Test content</p>' })
+  })
+
+  it('renders the component correctly', () => {
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('sets the editor content correctly', () => {
+    expect(wrapper.vm.wysiwygEditorContent).toBe('<p>Test content</p>')
+  })
+
+  it('emits the editor content when it updates', async () => {
+    wrapper.vm.setEditorContent('<p>New content</p>')
+    await nextTick()
+
+    expect(wrapper.emitted('emitEditorContent')[1]).toEqual(['<p>New content</p>'])
+  })
+
+  it('displays table input dialog on insertTable action', async () => {
+    // Simulate clicking insertTable action
+    await wrapper.vm.getToolAction({
+      action: 'insertTable'
+    })
+
+    expect(wrapper.vm.displayTableInput).toBe(true)
+  })
+
+  it('handles dialog action correctly', async () => {
+    // Simulate clicking insertTable action
+    await wrapper.vm.getToolAction({
+      action: 'insertTable'
+    })
+
+    wrapper.vm.insertTableRows = 2
+    wrapper.vm.insertTableCols = 3
+
+    // Simulate proceeding with the dialog action
+    await wrapper.vm.handleDialogAction(true)
+
+    expect(wrapper.vm.displayTableInput).toBe(false)
+    // Add your assertions for the inserted table here
+  })
+})

ppr-ui/tests/unit/utils/helper-functions.ts

@@ -1,4 +1,13 @@
-import { Wrapper } from '@vue/test-utils'
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
+import Vuetify from 'vuetify'
+import VueRouter from 'vue-router'
+import mockRouter from '../MockRouter'
+import { useStore } from '@/store/store'
+import { createPinia, setActivePinia } from 'pinia'
+
+const vuetify = new Vuetify({})
+setActivePinia(createPinia())
+const store = useStore()
 
 /**
  * Returns the last event for a given name, to be used for testing event propagation in response to component changes.
@@ -60,3 +69,25 @@ export function setupIntersectionObserverMock ({
 export function getTestId (dataTestId: string) {
   return `[data-test-id='${dataTestId}']`
 }
+
+/**
+ * Creates and mounts a component, so that it can be tested.
+ *
+ * @returns a Wrapper<any> object with the given parameters.
+ */
+export function createComponent (component: any, props: any): Wrapper<any> {
+  const localVue = createLocalVue()
+  localVue.use(Vuetify)
+  // Prevent the warning "[Vuetify] Unable to locate target [data-app]"
+  document.body.setAttribute('data-app', 'true')
+  localVue.use(VueRouter)
+  const router = mockRouter.mock()
+
+  return mount((component as any), {
+    localVue,
+    propsData: props,
+    router,
+    store,
+    vuetify
+  })
+}