Skip to content

Commit

Permalink
test: add component tests
Browse files Browse the repository at this point in the history
  • Loading branch information
adamdehaven committed Jan 4, 2024
1 parent a4af5b9 commit 667e434
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 56 deletions.
89 changes: 49 additions & 40 deletions src/components/MarkdownUi.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { vi, describe, it, expect, beforeEach } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import { ref } from 'vue'
import MarkdownUi from './MarkdownUi.vue'
import { InlineFormatWrapper } from '@/constants'
import { KUI_BREAKPOINT_PHABLET } from '@kong/design-tokens'
import type { Theme } from '@/types'

Expand Down Expand Up @@ -440,47 +441,55 @@ describe('<MarkdownUi />', () => {
})

describe('format buttons', () => {
it('formats text as bold', async () => {
const textStart = 'This is a sentence that needs '
const textMiddle = 'bold text'
const textEnd = ' in the middle.'
const sentence = textStart + textMiddle + textEnd

const wrapper = mount(MarkdownUi, {
props: {
mode: 'split',
editable: true,
modelValue: sentence,
},
// Loop through enabled format buttons
for (const format of Object.keys(InlineFormatWrapper)) {
// Skip the format options that are not currently enabled
if (['subscript', 'superscript', 'mark'].includes(format)) {
continue
}
it(`formats text as ${format}`, async () => {
const textStart = 'This is a sentence that needs '
const textMiddle = `${format} text`
const textEnd = ' in the middle.'
const sentence = textStart + textMiddle + textEnd

const wrapper = mount(MarkdownUi, {
props: {
mode: 'split',
editable: true,
modelValue: sentence,
},
})

await waitForMarkdownRender(wrapper)

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<'textarea'>('markdown-editor-textarea').element.value).toEqual(sentence)
// Ensure markdown is rendered into tags and content
expect(wrapper.findTestId('markdown-content').find('p').isVisible()).toBe(true)
expect(wrapper.findTestId('markdown-content').find('p').text()).toEqual(sentence)

await wrapper.findTestId<'textarea'>('markdown-editor-textarea').element.focus()
// Start the text selection after the start text
wrapper.findTestId<'textarea'>('markdown-editor-textarea').element.selectionStart = textStart.length
// End the text selection after the middle text
wrapper.findTestId<'textarea'>('markdown-editor-textarea').element.selectionEnd = textStart.length + textMiddle.length

// Click the formatting button
await wrapper.findTestId(`format-option-${format}`).trigger('click')

// Verify event is emitted
const eventName = 'update:modelValue'
await waitForEmittedEvent(wrapper, eventName)

expect(wrapper.emitted(eventName) || []).toHaveLength(1)
// @ts-ignore - referencing enum properties
expect(wrapper.emitted(eventName)![0]).toEqual([`${textStart}${InlineFormatWrapper[format]}${textMiddle}${InlineFormatWrapper[format]}${textEnd}`])
})

await waitForMarkdownRender(wrapper)

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<'textarea'>('markdown-editor-textarea').element.value).toEqual(sentence)
// Ensure markdown is rendered into tags and content
expect(wrapper.findTestId('markdown-content').find('p').isVisible()).toBe(true)
expect(wrapper.findTestId('markdown-content').find('p').text()).toEqual(sentence)

await wrapper.findTestId<'textarea'>('markdown-editor-textarea').element.focus()
// Start the text selection after the start text
wrapper.findTestId<'textarea'>('markdown-editor-textarea').element.selectionStart = textStart.length
// End the text selection after the middle text
wrapper.findTestId<'textarea'>('markdown-editor-textarea').element.selectionEnd = textStart.length + textMiddle.length

// Click the formatting button
await wrapper.findTestId('format-option-bold').trigger('click')

// Verify event is emitted
const eventName = 'update:modelValue'
await waitForEmittedEvent(wrapper, eventName)

expect(wrapper.emitted(eventName) || []).toHaveLength(1)
expect(wrapper.emitted(eventName)![0]).toEqual([`${textStart}**${textMiddle}**${textEnd}`])
})
}
})
})
})
16 changes: 8 additions & 8 deletions src/composables/useMarkdownActions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,28 +79,28 @@ export default function useMarkdownActions(

switch (format) {
case 'bold':
wrapper = InlineFormatWrapper.Bold
wrapper = InlineFormatWrapper.bold
break
case 'italic':
wrapper = InlineFormatWrapper.Italic
wrapper = InlineFormatWrapper.italic
break
case 'underline':
wrapper = InlineFormatWrapper.Underline
wrapper = InlineFormatWrapper.underline
break
case 'strikethrough':
wrapper = InlineFormatWrapper.Strikethrough
wrapper = InlineFormatWrapper.strikethrough
break
case 'subscript':
wrapper = InlineFormatWrapper.Subscript
wrapper = InlineFormatWrapper.subscript
break
case 'superscript':
wrapper = InlineFormatWrapper.Superscript
wrapper = InlineFormatWrapper.superscript
break
case 'mark':
wrapper = InlineFormatWrapper.Mark
wrapper = InlineFormatWrapper.mark
break
case 'code':
wrapper = InlineFormatWrapper.Code
wrapper = InlineFormatWrapper.code
break
}

Expand Down
16 changes: 8 additions & 8 deletions src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ export const EDITOR_DEBOUNCE_TIMEOUT: number = 400
export const DEFAULT_CODEBLOCK_LANGUAGE: string = 'markdown'

export enum InlineFormatWrapper {
Bold = '**',
Italic = '_',
Underline = '++',
Strikethrough = '~~',
Subscript = '~',
Superscript = '^',
Mark = '==',
Code = '`',
bold = '**',
italic = '_',
underline = '++',
strikethrough = '~~',
subscript = '~',
superscript = '^',
mark = '==',
code = '`',
}

/** The height of the .markdown-ui-toolbar */
Expand Down

0 comments on commit 667e434

Please sign in to comment.