test: components and findTestId

src/components/toolbar/ToolbarButton.spec.ts

@@ -0,0 +1,69 @@
+// Vitest unit test spec file
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import ToolbarButton from './ToolbarButton.vue'
+
+describe('<ToolbarButton />', () => {
+  it('renders the default button', async () => {
+    const slotContent = 'This is the button text'
+
+    const wrapper = await mount(ToolbarButton, {
+      slots: {
+        default: () => h('button', {}, slotContent),
+      },
+    })
+
+    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').text()).toEqual(slotContent)
+  })
+
+  describe('props', () => {
+    it('renders the non-icon button', async () => {
+      const slotContent = 'This is the button text'
+
+      const wrapper = await mount(ToolbarButton, {
+        props: {
+          icon: false,
+        },
+        slots: {
+          default: () => h('button', {}, slotContent),
+        },
+      })
+
+      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').text()).toEqual(slotContent)
+    })
+
+    it('renders the `primary` appearance', async () => {
+      const slotContent = 'This is the button text'
+
+      const wrapper = await mount(ToolbarButton, {
+        props: {
+          icon: false,
+          appearance: 'primary',
+        },
+        slots: {
+          default: () => h('button', {}, slotContent),
+        },
+      })
+
+      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').text()).toEqual(slotContent)
+    })
+  })
+})

src/components/toolbar/TooltipShortcut.spec.ts

@@ -0,0 +1,65 @@
+// Vitest unit test spec file
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TooltipShortcut from './TooltipShortcut.vue'
+
+describe('<TooltipShortcut />', () => {
+  it('renders the shortcut with no keys', async () => {
+    const text = 'Shortcut name'
+
+    const wrapper = await mount(TooltipShortcut, {
+      props: {
+        text,
+      },
+    })
+
+    expect(wrapper.find('.tooltip-shortcut').isVisible()).toBe(true)
+    expect(wrapper.findTestId('shortcut-text').text()).toContain(text)
+    expect(wrapper.findTestId('keys').exists()).toBe(false)
+  })
+
+  it('does not render the shortcut if the `text` prop does not have a value', async () => {
+    const wrapper = await mount(TooltipShortcut, {
+      props: {
+        text: '',
+      },
+    })
+
+    expect(wrapper.find('.tooltip-shortcut').exists()).toBe(false)
+  })
+
+  it('displays the shortcut text along with a single key', async () => {
+    const text = 'Bold'
+    const keys = ['B']
+
+    const wrapper = await mount(TooltipShortcut, {
+      props: {
+        text,
+        keys,
+      },
+    })
+
+    expect(wrapper.find('.tooltip-shortcut').exists()).toBe(true)
+    expect(wrapper.findTestId('shortcut-text').text()).toContain(text)
+    expect(wrapper.findAll('.meta-key').length).toEqual(1)
+    expect(wrapper.findAll('kbd').length).toEqual(keys.length + 1)
+  })
+
+  it('displays the shortcut text along with multiple keys', async () => {
+    const text = 'Strikethrough'
+    const keys = ['Shift', 'X']
+
+    const wrapper = await mount(TooltipShortcut, {
+      props: {
+        text,
+        keys,
+      },
+    })
+
+    expect(wrapper.find('.tooltip-shortcut').exists()).toBe(true)
+    expect(wrapper.findTestId('shortcut-text').text()).toContain(text)
+    expect(wrapper.findAll('.meta-key').length).toEqual(1)
+    expect(wrapper.findAll('kbd').length).toEqual(keys.length + 1)
+  })
+})

src/components/toolbar/TooltipShortcut.vue

@@ -3,15 +3,19 @@
     v-if="text"
     class="tooltip-shortcut"
   >
-    <div>{{ text }}</div>
+    <div data-testid="shortcut-text">
+      {{ text }}
+    </div>
     <div
       v-if="keys.length"
       class="keys"
+      data-testid="keys"
     >
       <kbd
         :aria-label="isMac ? 'Command' : 'Control'"
         class="keyboard-button meta-key"
         :class="{ 'mac': isMac }"
+        data-testid="meta-key"
       />
       <kbd
         v-for="key in keys"

src/vue-test-utils.d.ts

@@ -0,0 +1,7 @@
+import type { DOMWrapper } from '@vue/test-utils'
+
+declare module '@vue/test-utils' {
+  export class VueWrapper {
+    findTestId(dataTestid: string): DOMWrapper;
+  }
+}

vitest.config.ts

@@ -12,6 +12,7 @@ export default mergeConfig(viteConfig, defineConfig({
       './sandbox/**',
       'node_modules',
     ],
+    setupFiles: ['./vitest.setup.ts'],
     deps: {
       optimizer: {
         web: {

vitest.setup.ts

@@ -0,0 +1,15 @@
+import { config, DOMWrapper } from '@vue/test-utils'
+
+const DataTestIdPlugin = (wrapper: any) => {
+  const findTestId = (dataTestid: string): any => {
+    const dataSelector = `[data-testid='${dataTestid}']`
+    const element = wrapper.element.querySelector(dataSelector)
+    return new DOMWrapper(element)
+  }
+
+  return {
+    findTestId,
+  }
+}
+
+config.plugins.VueWrapper.install(DataTestIdPlugin)