From b731203bf676f963acb22e525a1ab538e594db16 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Tue, 2 Jan 2024 14:15:54 -0500
Subject: [PATCH] test: components and findTestId

---
 src/components/toolbar/ToolbarButton.spec.ts  | 69 +++++++++++++++++++
 .../toolbar/TooltipShortcut.spec.ts           | 65 +++++++++++++++++
 src/components/toolbar/TooltipShortcut.vue    |  6 +-
 src/vue-test-utils.d.ts                       |  7 ++
 vitest.config.ts                              |  1 +
 vitest.setup.ts                               | 15 ++++
 6 files changed, 162 insertions(+), 1 deletion(-)
 create mode 100644 src/components/toolbar/ToolbarButton.spec.ts
 create mode 100644 src/components/toolbar/TooltipShortcut.spec.ts
 create mode 100644 src/vue-test-utils.d.ts
 create mode 100644 vitest.setup.ts

diff --git a/src/components/toolbar/ToolbarButton.spec.ts b/src/components/toolbar/ToolbarButton.spec.ts
new file mode 100644
index 00000000..12e48162
--- /dev/null
+++ b/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)
+    })
+  })
+})
diff --git a/src/components/toolbar/TooltipShortcut.spec.ts b/src/components/toolbar/TooltipShortcut.spec.ts
new file mode 100644
index 00000000..eaac219f
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/src/components/toolbar/TooltipShortcut.vue b/src/components/toolbar/TooltipShortcut.vue
index 592a978d..4e48d770 100644
--- a/src/components/toolbar/TooltipShortcut.vue
+++ b/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"
diff --git a/src/vue-test-utils.d.ts b/src/vue-test-utils.d.ts
new file mode 100644
index 00000000..bb5e75e6
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/vitest.config.ts b/vitest.config.ts
index 36036d01..099729ab 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -12,6 +12,7 @@ export default mergeConfig(viteConfig, defineConfig({
       './sandbox/**',
       'node_modules',
     ],
+    setupFiles: ['./vitest.setup.ts'],
     deps: {
       optimizer: {
         web: {
diff --git a/vitest.setup.ts b/vitest.setup.ts
new file mode 100644
index 00000000..21ba7e36
--- /dev/null
+++ b/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)