Skip to content

Commit

Permalink
test: add component tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamdehaven
adamdehaven committed Jan 4, 2024
1 parent b9ace65 commit dff2425
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/components/MarkdownContent.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe('<MarkdownContent />', () => {
})

expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
expect(wrapper.findTestId('markdown-content').attributes('class')).toContain(`mode-${mode}`)
expect(wrapper.findTestId('markdown-content').classes(`mode-${mode}`)).toBe(true)
expect(wrapper.find('h1').text()).toEqual(title)
})
}
Expand Down
76 changes: 61 additions & 15 deletions src/components/MarkdownUi.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,20 @@ const defaultText = 'Markdown Content'
const defaultContent = `# ${defaultText}`

/**
* 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>}
* The markdown content takes roughly 400ms to initialize `markdown-it` and render, so await this function in each test immediately after calling `mount()` that is not in `edit` mode.
* @param wrapper The component wrapper
*/
const waitForContent = async (timeout = 400): Promise<void> => await new Promise((resolve) => setTimeout(resolve, timeout))
const waitForMarkdownRender = async (wrapper: any): Promise<void> => {
await vi.waitUntil(
() => wrapper.findTestId('markdown-content').element.innerHTML.length > 0,
{
timeout: 1000,
interval: 20,
},
)

expect(wrapper.findTestId('markdown-content').element.innerHTML.length).toBeGreaterThan(0)
}

// Stub the return value for useMediaQuery to determine if browser is at least phablet width
const mediaQuerySpy = ({
Expand Down Expand Up @@ -57,7 +65,7 @@ describe('<MarkdownUi />', () => {
},
})

await waitForContent()
await waitForMarkdownRender(wrapper)

expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
Expand All @@ -78,7 +86,7 @@ describe('<MarkdownUi />', () => {
},
})

await waitForContent()
await waitForMarkdownRender(wrapper)

expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
// Ensure markdown is rendered into tags and content
Expand All @@ -101,8 +109,7 @@ describe('<MarkdownUi />', () => {
},
})

// No need to wait in edit mode
await waitForContent(0)
await waitForMarkdownRender(wrapper)

expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
Expand All @@ -125,7 +132,6 @@ describe('<MarkdownUi />', () => {
})

// No need to wait in edit mode
await waitForContent(0)

expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
expect(wrapper.findTestId('toolbar').isVisible()).toBe(true)
Expand Down Expand Up @@ -153,7 +159,7 @@ describe('<MarkdownUi />', () => {
},
})

await waitForContent()
await waitForMarkdownRender(wrapper)

expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
expect(wrapper.findTestId('toolbar').isVisible()).toBe(true)
Expand All @@ -179,7 +185,7 @@ describe('<MarkdownUi />', () => {
},
})

await waitForContent()
await waitForMarkdownRender(wrapper)

expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
expect(wrapper.findTestId('toolbar').isVisible()).toBe(true)
Expand Down Expand Up @@ -216,7 +222,7 @@ describe('<MarkdownUi />', () => {
},
})

await waitForContent()
await waitForMarkdownRender(wrapper)

expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
Expand All @@ -241,7 +247,7 @@ describe('<MarkdownUi />', () => {
},
})

await waitForContent()
await waitForMarkdownRender(wrapper)

expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
expect(wrapper.findTestId('markdown-content').isVisible()).toBe(true)
Expand Down Expand Up @@ -281,7 +287,7 @@ describe('<MarkdownUi />', () => {

// 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')
expect(wrapper.findTestId('split-mode-button').classes('active')).toBe(true)
// 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)
Expand Down Expand Up @@ -328,5 +334,45 @@ describe('<MarkdownUi />', () => {
// Edit button should exist in read mode
expect(wrapper.findTestId('edit').isVisible()).toBe(true)
})

it('toggles fullscreen when the fullscreen button is clicked', async () => {
const wrapper = mount(MarkdownUi, {
props: {
mode: 'split',
editable: true,
modelValue: defaultContent,
},
})

await waitForMarkdownRender(wrapper)

expect(wrapper.findTestId('markdown-ui').isVisible()).toBe(true)
// Ensure the wrapper class does not exist
expect(wrapper.findTestId('markdown-ui').classes('fullscreen')).toBe(false)

// 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)

// Ensure the starting mode is active
expect(wrapper.findTestId('split-mode-button').classes('active')).toBe(true)

expect(wrapper.findTestId('toggle-fullscreen').isVisible()).toBe(true)

// Click the Fullscreen button
await wrapper.findTestId('toggle-fullscreen').trigger('click')

// Ensure the event was emitted
expect(wrapper.emitted()).toHaveProperty('fullscreen')
expect(wrapper.emitted('fullscreen') || []).toHaveLength(1)
expect(wrapper.emitted('fullscreen')![0]).toEqual([true])

// Ensure the wrapper class is added
expect(wrapper.findTestId('markdown-ui').classes('fullscreen')).toBe(true)
})
})
})
12 changes: 6 additions & 6 deletions src/components/toolbar/MarkdownToolbar.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ describe('<MarkdownToolbar />', () => {
})

// Ensure each mode radio button is visible
expect(wrapper.findTestId(`${mode}-mode-button`).attributes('class')).toContain('active')
expect(wrapper.findTestId(`${mode}-mode-button`).classes('active')).toBe(true)
expect(wrapper.findTestId('edit-mode-button').isVisible()).toBe(true)
expect(wrapper.findTestId('split-mode-button').isVisible()).toBe(true)
expect(wrapper.findTestId('preview-mode-button').isVisible()).toBe(true)
Expand Down Expand Up @@ -150,9 +150,9 @@ 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('edit-mode-button').classes('active')).toBe(true)
expect(wrapper.findTestId('split-mode-button').classes('active')).toBe(false)
expect(wrapper.findTestId('preview-mode-button').classes('active')).toBe(false)

expect(wrapper.findTestId('split-mode-button').isVisible()).toBe(true)

Expand Down Expand Up @@ -243,7 +243,7 @@ describe('<MarkdownToolbar />', () => {
})

// Ensure the starting mode is active
expect(wrapper.findTestId('edit-mode-button').attributes('class')).toContain('active')
expect(wrapper.findTestId('edit-mode-button').classes('active')).toBe(true)

expect(wrapper.findTestId('toggle-fullscreen').isVisible()).toBe(true)

Expand Down Expand Up @@ -274,7 +274,7 @@ describe('<MarkdownToolbar />', () => {
})

// Ensure the starting mode is active
expect(wrapper.findTestId('preview-mode-button').attributes('class')).toContain('active')
expect(wrapper.findTestId('preview-mode-button').classes('active')).toBe(true)

expect(wrapper.findTestId('toggle-html-preview').isVisible()).toBe(true)

Expand Down
14 changes: 7 additions & 7 deletions src/components/toolbar/ToolbarButton.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ describe('<ToolbarButton />', () => {
expect(wrapper.find('button.toolbar-button').isVisible()).toBe(true)
expect(wrapper.find('button.toolbar-button').attributes('tabindex')).toEqual('0')
expect(wrapper.find('button.toolbar-button').attributes('type')).toEqual('button')
expect(wrapper.find('button.toolbar-button').attributes('class')).not.toContain('primary')
expect(wrapper.find('button.toolbar-button').attributes('class')).toContain('secondary')
expect(wrapper.find('button.toolbar-button').attributes('class')).not.toContain('has-text')
expect(wrapper.find('button.toolbar-button').classes('primary')).toBe(false)
expect(wrapper.find('button.toolbar-button').classes('secondary')).toBe(true)
expect(wrapper.find('button.toolbar-button').classes('has-text')).toBe(false)
expect(wrapper.find('button').text()).toEqual(slotContent)
})

Expand All @@ -40,7 +40,7 @@ describe('<ToolbarButton />', () => {
expect(wrapper.find('button.toolbar-button').isVisible()).toBe(true)
expect(wrapper.find('button.toolbar-button').attributes('tabindex')).toEqual('0')
expect(wrapper.find('button.toolbar-button').attributes('type')).toEqual('button')
expect(wrapper.find('button.toolbar-button').attributes('class')).toContain('has-text')
expect(wrapper.find('button.toolbar-button').classes('has-text')).toBe(true)
expect(wrapper.find('button').text()).toEqual(slotContent)
})

Expand All @@ -60,9 +60,9 @@ describe('<ToolbarButton />', () => {
expect(wrapper.find('button.toolbar-button').isVisible()).toBe(true)
expect(wrapper.find('button.toolbar-button').attributes('tabindex')).toEqual('0')
expect(wrapper.find('button.toolbar-button').attributes('type')).toEqual('button')
expect(wrapper.find('button.toolbar-button').attributes('class')).toContain('primary')
expect(wrapper.find('button.toolbar-button').attributes('class')).not.toContain('secondary')
expect(wrapper.find('button.toolbar-button').attributes('class')).toContain('has-text')
expect(wrapper.find('button.toolbar-button').classes('primary')).toBe(true)
expect(wrapper.find('button.toolbar-button').classes('secondary')).toBe(false)
expect(wrapper.find('button.toolbar-button').classes('has-text')).toBe(true)
expect(wrapper.find('button').text()).toEqual(slotContent)
})
})
Expand Down

0 comments on commit dff2425

Please sign in to comment.