From e5dfe58f101a727db747addf86510d3c077f7ae3 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 3 Jan 2024 17:39:44 -0500
Subject: [PATCH] test: add component tests

---
 src/components/MarkdownUi.spec.ts | 56 +++++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/components/MarkdownUi.spec.ts b/src/components/MarkdownUi.spec.ts
index a5e64026..1dccaed1 100644
--- a/src/components/MarkdownUi.spec.ts
+++ b/src/components/MarkdownUi.spec.ts
@@ -11,6 +11,7 @@ vi.mock('@vueuse/core', async () => {
   const actual: any = await vi.importActual('@vueuse/core')
   return {
     ...actual,
+    // Mock the useScroll composable
     useScroll: vi.fn(() => ({
       arrivedState: {
         left: false,
@@ -28,7 +29,7 @@ const defaultContent = `# ${defaultText}`
 
 // The markdown content takes roughly 350ms to initialize, so wait in each test.
 // Not ideal.
-const waitForContent = async (timeout = 350): Promise<void> => await new Promise((resolve) => setTimeout(resolve, timeout))
+const waitForContent = async (timeout = 300): 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 = ({
@@ -109,7 +110,7 @@ describe('<MarkdownUi />', () => {
         })
 
         // No need to wait in edit mode
-        await waitForContent()
+        await waitForContent(0)
 
         expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
         expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
@@ -132,7 +133,7 @@ describe('<MarkdownUi />', () => {
         })
 
         // No need to wait in edit mode
-        await waitForContent()
+        await waitForContent(0)
 
         expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
         expect(wrapper.findTestId('toolbar').isVisible()).toBe(true)
@@ -150,13 +151,54 @@ describe('<MarkdownUi />', () => {
       })
     })
 
-    // describe('split', () => {
+    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,
+          },
+        })
+
+        await waitForContent()
+
+        expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
+        expect(wrapper.findTestId('toolbar').isVisible()).toBe(true)
+        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-content').text()).toContain(text.replace('# ', ''))
+        // 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,
+          },
+        })
 
-    // describe('preview', () => {
+        await waitForContent()
 
-    // })
+        expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
+        expect(wrapper.findTestId('toolbar').isVisible()).toBe(true)
+        expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
+        // Expect text
+        expect(wrapper.findTestId('markdown-content').text()).toContain(text.replace('# ', ''))
+        // Elements should not exist
+        expect(wrapper.findTestId('markdown-editor-textarea').exists()).toBe(false)
+        expect(wrapper.findTestId('edit').exists()).toBe(false)
+      })
+    })
   })
 
   describe('actions', () => {