test: vue

.changeset/odd-owls-battle.md

@@ -0,0 +1,5 @@
+---
+"@urami/vue": patch
+---
+
+test suite for vue

package.json

@@ -10,10 +10,13 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",
+    "@vitest/coverage-v8": "^0.34.6",
+    "happy-dom": "^12.9.1",
     "prettier": "^3.0.3",
-		"prettier-plugin-svelte": "^2.10.1",
-    "turbo": "latest",
+    "prettier-plugin-svelte": "^2.10.1",
     "tsup": "^7.2.0",
-		"typescript": "^5.2.2"
+    "turbo": "latest",
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.6"
   }
 }

packages/vue/package.json

@@ -52,6 +52,7 @@
     "@tsconfig/recommended": "^1.0.3",
     "@urami/types": "workspace:*",
     "@vitejs/plugin-vue": "^4.4.0",
+    "@vue/test-utils": "^2.4.1",
     "vite": "^4.4.11",
     "vue": "^3.3.4"
   }

packages/vue/src/Image.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import Image from './Image.vue'
+
+describe('<Image />', () => {
+  describe('display', () => {
+    const wrapper = mount(Image, {
+      props: {
+        src: 'https://example.com/image.jpg',
+        width: 640,
+        quality: 80,
+      },
+    })
+
+    it('should mount img element', async () => {
+      const imageElement = wrapper.get('img')
+
+      expect(imageElement).toBeDefined()
+    })
+
+    it('should have src, and srcSet attribute', async () => {
+      const imageElement = wrapper.get('img')
+
+      expect(imageElement.attributes('src')).toBeDefined()
+      expect(imageElement.attributes('srcset')).toBeDefined()
+    })
+  })
+
+  describe('extra props', () => {
+    const wrapper = mount(Image, {
+      props: {
+        src: 'https://example.com/image.jpg',
+        width: 640,
+        quality: 80,
+        class: 'demo-class'
+      },
+    })
+
+    it('should append extra attributes', () => {
+      const imageElement = wrapper.get('img')
+
+      expect(imageElement.attributes('src')).toBeDefined()
+      expect(imageElement.attributes('srcset')).toBeDefined()
+      expect(imageElement.attributes('class')).toBeDefined()
+    })
+  })
+})

packages/vue/vite.config.ts

@@ -1,8 +1,13 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   plugins: [vue()],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+  },
   build: {
     lib: {
       entry: 'src/index.ts',