test: add component tests

Kong · Jan 2, 2024 · 67c1b77 · 67c1b77
1 parent a175b1b
commit 67c1b77
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 9 deletions.
diff --git a/src/components/toolbar/MarkdownToolbar.spec.ts b/src/components/toolbar/MarkdownToolbar.spec.ts
@@ -1,7 +1,7 @@
 // Vitest unit test spec file
 
 import { describe, it, expect } from 'vitest'
-import { ref } from 'vue'
+import { ref, h } from 'vue'
 import { mount } from '@vue/test-utils'
 import MarkdownToolbar from './MarkdownToolbar.vue'
 import { MODE_INJECTION_KEY, EDITABLE_INJECTION_KEY, FULLSCREEN_INJECTION_KEY, HTML_PREVIEW_INJECTION_KEY } from '@/injection-keys'
@@ -38,7 +38,7 @@ const templateOptions: Partial<TemplateOption>[] = [
 ]
 
 describe('<MarkdownToolbar />', () => {
-  describe('visibility', () => {
+  describe('mode switcher', () => {
     // Loop through each mode
     for (const mode of ['read', 'edit', 'split', 'preview']) {
       describe(`${mode}-mode`, () => {
@@ -92,6 +92,8 @@ describe('<MarkdownToolbar />', () => {
 
         // Ensure the starting mode is active
         expect(wrapper.findTestId('edit-mode-button').attributes('class')).toContain('active')
+        expect(wrapper.findTestId('split-mode-button').attributes('class')).not.toContain('active')
+        expect(wrapper.findTestId('preview-mode-button').attributes('class')).not.toContain('active')
 
         expect(wrapper.findTestId('split-mode-button').isVisible()).toBe(true)
 
@@ -231,4 +233,60 @@ describe('<MarkdownToolbar />', () => {
       })
     })
   })
+
+  describe('slots', () => {
+    // We cannot test the default slot content from this component since it is provided by the parent `MarkdownUi.vue` component
+    describe('editor-actions', () => {
+      it('displays slot content if provided', async () => {
+        const saveButtonText = 'Save changes'
+        const cancelButtonText = 'Cancel changes'
+
+        const wrapper = await mount(MarkdownToolbar, {
+          global: {
+            provide: setProvideData({
+              mode: 'edit',
+              editable: true,
+            }),
+          },
+          slots: {
+            'editor-actions': () => [
+              h('button', { 'data-testid': 'save' }, saveButtonText),
+              h('button', { 'data-testid': 'cancel' }, cancelButtonText),
+            ],
+          },
+        })
+
+        expect(wrapper.findTestId('slot-editor-actions').isVisible()).toBe(true)
+        // Slotted Save button
+        expect(wrapper.findTestId('save').isVisible()).toBe(true)
+        expect(wrapper.findTestId('save').text()).toEqual(saveButtonText)
+        // Slotted Cancel button
+        expect(wrapper.findTestId('cancel').isVisible()).toBe(true)
+        expect(wrapper.findTestId('cancel').text()).toEqual(cancelButtonText)
+      })
+    })
+
+    describe('toolbar-right', () => {
+      it('displays slot content if provided', async () => {
+        const buttonText = 'Custom toolbar button'
+
+        const wrapper = await mount(MarkdownToolbar, {
+          global: {
+            provide: setProvideData({
+              mode: 'edit',
+              editable: true,
+            }),
+          },
+          slots: {
+            'toolbar-right': () => h('button', { 'data-testid': 'custom' }, buttonText),
+          },
+        })
+
+        expect(wrapper.findTestId('slot-toolbar-right').isVisible()).toBe(true)
+        // Slotted button
+        expect(wrapper.findTestId('custom').isVisible()).toBe(true)
+        expect(wrapper.findTestId('custom').text()).toEqual(buttonText)
+      })
+    })
+  })
 })
diff --git a/src/components/toolbar/MarkdownToolbar.vue b/src/components/toolbar/MarkdownToolbar.vue
@@ -145,12 +145,14 @@
       </InfoTooltip>
     </div>
     <div
+      v-if="$slots['toolbar-right']"
       class="toolbar-right"
       data-testid="slot-toolbar-right"
     >
       <slot name="toolbar-right" />
     </div>
     <div
+      v-if="$slots['editor-actions']"
       class="editor-actions"
       data-testid="slot-editor-actions"
     >
@@ -225,12 +227,9 @@ const formatOptions: FormatOption[] = [
   { label: 'Italic', action: 'italic', keys: ['I'], icon: ItalicIcon },
   { label: 'Underline', action: 'underline', keys: ['U'], icon: UnderlineIcon },
   { label: 'Strikethrough', action: 'strikethrough', keys: ['Shift', 'X'], icon: StrikethroughIcon },
-  // Hidden for now
-  // { label: 'Subscript', action: 'subscript', icon: SubscriptIcon },
-  // Hidden for now
-  // { label: 'Superscript', action: 'superscript', icon: SuperscriptIcon },
-  // Hidden for now
-  // { label: 'Mark', action: 'mark', icon: MarkIcon },
+  // { label: 'Subscript', action: 'subscript', icon: SubscriptIcon }, // Hidden for now
+  // { label: 'Superscript', action: 'superscript', icon: SuperscriptIcon }, // Hidden for now
+  // { label: 'Mark', action: 'mark', icon: MarkIcon }, // Hidden for now
   { label: 'Code', action: 'code', keys: ['Shift', 'C'], icon: CodeIcon },
 ]
 
@@ -246,7 +245,6 @@ const templateOptions: TemplateOption[] = [
 onMounted(() => {
   // If the screen size decreases and the user is in `split` mode, turn on edit mode
   adjustSplitMode()
-
 })
 </script>