test: add unit tests for BaseButton and ExternalLink components

Author: sfxcode

package.json

@@ -15,7 +15,7 @@
     "lint:fix": "eslint --fix ./app",
     "test:ui": "vitest --ui",
     "test:unit": "vitest --run --reporter verbose",
-    "test:ci": "vitest --run --reporter verbose --exclude \"**/app.test.ts\"",
+    "test:ci": "vitest --run --reporter verbose",
     "test:coverage": "vitest run --coverage",
     "postinstall": "nuxt prepare",
     "release": "npm run lint && npm run build && changelogen --patch --release && git push --follow-tags"

test/basic/vitest_base.test.ts

@@ -19,3 +19,17 @@ it('jSON', () => {
   expect(output).eq('{"foo":"hello","bar":"world"}')
   assert.deepEqual(JSON.parse(output), input, 'matches original')
 })
+
+it('array operations', () => {
+  const arr = [1, 2, 3, 4]
+  expect(arr.length).toBe(4)
+  expect(arr.includes(2)).toBe(true)
+  expect(arr.map(x => x * 2)).toEqual([2, 4, 6, 8])
+})
+
+it('string manipulation', () => {
+  const str = 'NuxtPrimeVue'
+  expect(str.toLowerCase()).toBe('nuxtprimevue')
+  expect(str.replace('Prime', '-')).toBe('Nuxt-Vue')
+  expect(str.split('V')).toEqual(['NuxtPrime', 'ue'])
+})

test/e2e/app.test.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseButton from '../../app/components/BaseButton.vue'
+
+describe('baseButton', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(BaseButton, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+    expect(wrapper.text()).toContain('Click me')
+  })
+
+  it('applies color and size classes', () => {
+    const wrapper = mount(BaseButton, {
+      props: {
+        color: 'green',
+        size: 'big',
+      },
+      slots: {
+        default: 'Button',
+      },
+    })
+    expect(wrapper.classes()).toContain('btn-color-green')
+    expect(wrapper.classes()).toContain('btn-size-big')
+  })
+
+  it('emits click event', async () => {
+    const wrapper = mount(BaseButton, {
+      slots: {
+        default: 'Click',
+      },
+    })
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+})

test/nuxt/BaseButton.test.ts

@@ -0,0 +1,26 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ExternalLink from '../../app/components/ExternalLink.vue'
+
+describe('externalLink', () => {
+  it('renders link with correct text and href', () => {
+    const wrapper = mount(ExternalLink, {
+      props: {
+        text: 'Nuxt',
+        href: 'https://nuxt.com',
+      },
+    })
+    const a = wrapper.find('a')
+    expect(a.exists()).toBe(true)
+    expect(a.text()).toBe('Nuxt')
+    expect(a.attributes('href')).toBe('https://nuxt.com')
+    expect(a.attributes('target')).toBe('_blank')
+  })
+
+  it('renders default props', () => {
+    const wrapper = mount(ExternalLink)
+    const a = wrapper.find('a')
+    expect(a.text()).toBe('')
+    expect(a.attributes('href')).toBe('#')
+  })
+})

test/nuxt/ExternalLink.test.ts

@@ -2,6 +2,7 @@ import { defineVitestConfig } from '@nuxt/test-utils/config'
 
 export default defineVitestConfig({
   test: {
+    environment: 'nuxt',
   },
   // any custom Vitest config you require
 })