test: add component tests

Kong · Jan 4, 2024 · b9ace65 · b9ace65
1 parent f4825fd
commit b9ace65
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 9 deletions.
diff --git a/src/components/MarkdownUi.spec.ts b/src/components/MarkdownUi.spec.ts
@@ -12,11 +12,12 @@ const defaultText = 'Markdown Content'
 const defaultContent = `# ${defaultText}`
 
 /**
- * The markdown content takes roughly 350ms to initialize `markdown-it` and render, so wait in each test that is not in `edit` mode. This isn't ideal.
+ * The markdown content takes roughly 400ms to initialize `markdown-it` and render, so wait in each test that is not in `edit` mode. This isn't ideal.
+ * If the tests fail consistently, unfortunately the time should be increased. Need to find a way to actually await the markdown content being rendered.
  * @param {number} timeout Time, in milliseconds, to wait
  * @returns {Promise<void>}
  */
-const waitForContent = async (timeout = 350): Promise<void> => await new Promise((resolve) => setTimeout(resolve, timeout))
+const waitForContent = async (timeout = 400): Promise<void> => await new Promise((resolve) => setTimeout(resolve, timeout))
 
 // Stub the return value for useMediaQuery to determine if browser is at least phablet width
 const mediaQuerySpy = ({
@@ -41,6 +42,7 @@ const mediaQuerySpy = ({
 
 describe('<MarkdownUi />', () => {
   beforeEach(() => {
+    // Emulate a larger browser
     mediaQuerySpy({})
   })
 
@@ -143,12 +145,11 @@ describe('<MarkdownUi />', () => {
 
     describe('split', () => {
       it('displays both the editor and preview panes with correct content', async () => {
-        const text = '# Starter content'
         const wrapper = mount(MarkdownUi, {
           props: {
             mode: 'split',
             editable: true,
-            modelValue: text,
+            modelValue: defaultContent,
           },
         })
 
@@ -159,23 +160,22 @@ describe('<MarkdownUi />', () => {
         expect(wrapper.findTestId('markdown-editor-textarea').isVisible()).toBe(true)
         expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
         // Expect text
-        expect((wrapper.findTestId('markdown-editor-textarea').element as HTMLTextAreaElement).value).toEqual(text)
+        expect((wrapper.findTestId('markdown-editor-textarea').element as HTMLTextAreaElement).value).toEqual(defaultContent)
         // Ensure markdown is rendered into tags and content
         expect(wrapper.findTestId('markdown-content').find('h1').isVisible()).toBe(true)
-        expect(wrapper.findTestId('markdown-content').find('h1').text()).toEqual(text.replace('# ', ''))
+        expect(wrapper.findTestId('markdown-content').find('h1').text()).toEqual(defaultText)
         // Elements should not exist
         expect(wrapper.findTestId('edit').exists()).toBe(false)
       })
     })
 
     describe('preview', () => {
       it('displays only the preview pane correct content', async () => {
-        const text = '# Starter content'
         const wrapper = mount(MarkdownUi, {
           props: {
             mode: 'preview',
             editable: true,
-            modelValue: text,
+            modelValue: defaultContent,
           },
         })
 
@@ -186,7 +186,7 @@ describe('<MarkdownUi />', () => {
         expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
         // Ensure markdown is rendered into tags and content
         expect(wrapper.findTestId('markdown-content').find('h1').isVisible()).toBe(true)
-        expect(wrapper.findTestId('markdown-content').find('h1').text()).toEqual(text.replace('# ', ''))
+        expect(wrapper.findTestId('markdown-content').find('h1').text()).toEqual(defaultText)
         // Elements should not exist
         expect(wrapper.findTestId('markdown-editor-textarea').exists()).toBe(false)
         expect(wrapper.findTestId('edit').exists()).toBe(false)
@@ -231,5 +231,102 @@ describe('<MarkdownUi />', () => {
       // Verify the text was copied
       expect(copiedText.value).toEqual(codeContent)
     })
+
+    it('can change modes via all action buttons when editing is enabled', async () => {
+      const wrapper = mount(MarkdownUi, {
+        props: {
+          mode: 'read',
+          editable: true,
+          modelValue: defaultContent,
+        },
+      })
+
+      await waitForContent()
+
+      expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
+      expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
+      // Ensure markdown is rendered into tags and content
+      expect(wrapper.findTestId('markdown-content').find('h1').isVisible()).toBe(true)
+      expect(wrapper.findTestId('markdown-content').find('h1').text()).toEqual(defaultText)
+      // Elements should not exist
+      expect(wrapper.findTestId('toolbar').exists()).toBe(false)
+      expect(wrapper.findTestId('markdown-editor-textarea').exists()).toBe(false)
+      expect(wrapper.findTestId('save').exists()).toBe(false)
+      expect(wrapper.findTestId('cancel').exists()).toBe(false)
+      // Edit button should exist in read mode
+      expect(wrapper.findTestId('edit').isVisible()).toBe(true)
+
+      // Click the Edit button
+      await wrapper.findTestId('edit').trigger('click')
+
+      // Mode event should be emitted
+      expect(wrapper.emitted()).toHaveProperty('mode')
+
+      // Verify the emitted event
+      expect(wrapper.emitted('mode') || []).toHaveLength(1)
+      expect(wrapper.emitted('mode')![0]).toEqual(['split'])
+
+      // Both panes should be visible
+      expect(wrapper.findTestId('markdown-editor-textarea').isVisible()).toBe(true)
+      expect((wrapper.findTestId('markdown-editor-textarea').element as HTMLTextAreaElement).value).toEqual(defaultContent)
+
+      expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
+      expect(wrapper.findTestId('markdown-content').find('h1').isVisible()).toBe(true)
+      expect(wrapper.findTestId('markdown-content').find('h1').text()).toEqual(defaultText)
+
+      // Toolbar should now be visible
+      expect(wrapper.findTestId('toolbar').exists()).toBe(true)
+      expect(wrapper.findTestId('save').isVisible()).toBe(true)
+      expect(wrapper.findTestId('cancel').isVisible()).toBe(true)
+
+      // We should now be in split mode since on a larger screen
+      expect(wrapper.findTestId('split-mode-button').isVisible()).toBe(true)
+      expect(wrapper.findTestId('split-mode-button').attributes('class')).toContain('active')
+      // Ensure the other mode buttons are also visible
+      expect(wrapper.findTestId('edit-mode-button').isVisible()).toBe(true)
+      expect(wrapper.findTestId('preview-mode-button').isVisible()).toBe(true)
+
+      // Click the Edit mode button
+      await wrapper.findTestId('edit-mode-button').trigger('click')
+
+      // Mode event should be emitted again
+      expect(wrapper.emitted('mode') || []).toHaveLength(2)
+      expect(wrapper.emitted('mode')![1]).toEqual(['edit'])
+
+      expect(wrapper.findTestId('markdown-editor-textarea').isVisible()).toBe(true)
+      // Expect original text
+      expect((wrapper.findTestId('markdown-editor-textarea').element as HTMLTextAreaElement).value).toEqual(defaultContent)
+      // Elements should not exist
+      expect(wrapper.findTestId('markdown-content').exists()).toBe(false)
+      expect(wrapper.findTestId('edit').exists()).toBe(false)
+
+      // Click the Preview mode button
+      await wrapper.findTestId('preview-mode-button').trigger('click')
+
+      // Mode event should be emitted again
+      expect(wrapper.emitted('mode') || []).toHaveLength(3)
+      expect(wrapper.emitted('mode')![2]).toEqual(['preview'])
+
+      expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
+      expect(wrapper.findTestId('markdown-content').find('h1').isVisible()).toBe(true)
+      expect(wrapper.findTestId('markdown-content').find('h1').text()).toEqual(defaultText)
+      // Textarea should not exist
+      expect(wrapper.findTestId('markdown-editor-textarea').exists()).toBe(false)
+
+      // Click the Save button
+      await wrapper.findTestId('save').trigger('click')
+
+      expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
+      // Ensure markdown is rendered into tags and content
+      expect(wrapper.findTestId('markdown-content').find('h1').isVisible()).toBe(true)
+      expect(wrapper.findTestId('markdown-content').find('h1').text()).toEqual(defaultText)
+      // Elements should not exist
+      expect(wrapper.findTestId('toolbar').exists()).toBe(false)
+      expect(wrapper.findTestId('markdown-editor-textarea').exists()).toBe(false)
+      expect(wrapper.findTestId('save').exists()).toBe(false)
+      expect(wrapper.findTestId('cancel').exists()).toBe(false)
+      // Edit button should exist in read mode
+      expect(wrapper.findTestId('edit').isVisible()).toBe(true)
+    })
   })
 })
diff --git a/src/components/toolbar/MarkdownToolbar.spec.ts b/src/components/toolbar/MarkdownToolbar.spec.ts
@@ -122,6 +122,19 @@ describe('<MarkdownToolbar />', () => {
 
       expect(wrapper.findTestId('toggle-html-preview').isVisible()).toBe(true)
     })
+
+    it("'HTML Preview' button is not visible in edit mode", async () => {
+      const wrapper = mount(MarkdownToolbar, {
+        global: {
+          provide: setProvideData({
+            mode: 'edit', // must be in preview or split mode
+            editable: true,
+          }),
+        },
+      })
+
+      expect(wrapper.findTestId('toggle-html-preview').exists()).toBe(false)
+    })
   })
 
   describe('emit events', () => {