test: add component tests

Kong · Jan 2, 2024 · b0a0d70 · b0a0d70
1 parent 3fe8d37
commit b0a0d70
Showing 1 changed file with 48 additions and 2 deletions.
diff --git a/src/components/toolbar/MarkdownToolbar.spec.ts b/src/components/toolbar/MarkdownToolbar.spec.ts
@@ -14,7 +14,7 @@ const setProvideData = (
   { mode?: MarkdownMode, editable?: boolean, fullscreen?: boolean, htmlPreview?: boolean },
 ) => ({
   // Bind the Symbol() as dynamic keys <https://test-utils.vuejs.org/api/#global-provide>
-  [MODE_INJECTION_KEY]: ref(mode),
+  [MODE_INJECTION_KEY]: ref(mode), // Note: split mode will be automatically switched to edit basd on the viewport
   [EDITABLE_INJECTION_KEY]: ref(editable),
   [FULLSCREEN_INJECTION_KEY]: ref(fullscreen),
   [HTML_PREVIEW_INJECTION_KEY]: ref(htmlPreview),
@@ -78,6 +78,52 @@ describe('<MarkdownToolbar />', () => {
     }
   })
 
+  describe('toolbar-buttons', () => {
+    // Loop through the iterable buttons
+    for (const button of [...formatOptions, ...templateOptions]) {
+      it(`'${button.label}' button is visible`, async () => {
+        const wrapper = await mount(MarkdownToolbar, {
+          global: {
+            provide: setProvideData({
+              mode: 'edit',
+              editable: true,
+            }),
+          },
+        })
+
+        expect(wrapper.find(`[data-testid$="-option-${button.action}"]`).isVisible()).toBe(true)
+      })
+    }
+
+    // Now test the standalone buttons
+
+    it("'Fullscreen' button is visible", async () => {
+      const wrapper = await mount(MarkdownToolbar, {
+        global: {
+          provide: setProvideData({
+            mode: 'edit',
+            editable: true,
+          }),
+        },
+      })
+
+      expect(wrapper.findTestId('toggle-fullscreen').isVisible()).toBe(true)
+    })
+
+    it("'HTML Preview' button is visible", async () => {
+      const wrapper = await mount(MarkdownToolbar, {
+        global: {
+          provide: setProvideData({
+            mode: 'preview', // must be in preview or split mode
+            editable: true,
+          }),
+        },
+      })
+
+      expect(wrapper.findTestId('toggle-html-preview').isVisible()).toBe(true)
+    })
+  })
+
   describe('emit events', () => {
     describe('change-mode', () => {
       it('changes the mode when one of the mode radio buttons is clicked', async () => {
@@ -207,7 +253,7 @@ describe('<MarkdownToolbar />', () => {
         const wrapper = await mount(MarkdownToolbar, {
           global: {
             provide: setProvideData({
-              mode: 'preview',
+              mode: 'preview', // must be in preview or split mode
               editable: true,
               htmlPreview: false,
             }),