test: add initial component tests (#923)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

test/components/Button.spec.ts

@@ -0,0 +1,24 @@
+// @vitest-environment nuxt
+import { describe, it, expect } from 'vitest'
+import Button from '../../src/runtime/components/elements/Button.vue'
+import type { TypeOf } from 'zod'
+import ComponentRender from './component-render'
+
+type ButtonOptions = TypeOf<typeof Button.props>
+
+describe('Button', () => {
+  it.each([
+    [ 'basic case', { } ],
+    [ 'leading icon', { props: { leading: true, icon: 'heroicons-check' } } ],
+    [ 'black solid', { props: { color: 'black', variant: 'solid' } } ],
+    [ 'rounded full', { props: { ui: { rounded: 'rounded-full' } } } ],
+    [ '<UButton icon="i-heroicons-pencil-square" size="sm" color="primary" square variant="solid" />' ]
+  ])('renders %s correctly', async (nameOrHtml: string, options: ButtonOptions) => {
+    if (options !== undefined) {
+      options.slots = options.slots || { default: () => 'label' }
+      options.slots.default = options.slots.default || (() => 'label')
+    }
+    const html = await ComponentRender(nameOrHtml, options, Button)
+    expect(html).toMatchSnapshot()
+  })
+})

test/components/__snapshots__/Button.spec.ts.snap

@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Button > renders <UButton icon="i-heroicons-pencil-square" size="sm" color="primary" square variant="solid" /> correctly 1`] = `
+"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\"><span class=\\"i-heroicons-pencil-square flex-shrink-0 h-5 w-5\\" aria-hidden=\\"true\\"></span>
+  <!--v-if-->
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders basic case correctly 1`] = `
+"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\">
+  <!--v-if-->label
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders black solid correctly 1`] = `
+"<button type=\\"button\\" class=\\"focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center\\">
+  <!--v-if-->label
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders leading icon correctly 1`] = `
+"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\"><span class=\\"heroicons-check flex-shrink-0 h-5 w-5\\" aria-hidden=\\"true\\"></span>label
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders rounded full correctly 1`] = `
+"<button type=\\"button\\" class=\\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-full text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center\\">
+  <!--v-if-->label
+  <!--v-if-->
+</button>"
+`;

test/components/component-render.ts

@@ -0,0 +1,19 @@
+import { mountSuspended } from 'nuxt-vitest/utils'
+import path from 'path'
+
+export default async function (nameOrHtml: string, options: any, component: any) {
+  let html
+  const name = path.parse(component.__file).name
+  if (options === undefined) {
+    const app = {
+      template: nameOrHtml,
+      components: { [`U${name}`]: component }
+    }
+    const result = await mountSuspended(app)
+    html = result.html()
+  } else {
+    const cResult = await mountSuspended(component, options)
+    html = cResult.html()
+  }
+  return html
+}

test/components/layout/Skeleton.spec.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest'
+import Skeleton from '../../../src/runtime/components/layout/Skeleton.vue'
+import type { TypeOf } from 'zod'
+import ComponentRender from '../component-render'
+
+describe('Skeleton', () => {
+  it.each([
+    [ 'basic case', { } ],
+    [ '<USkeleton class="h-12 w-12" :ui="{ rounded: \'rounded-full\' }" />' ]
+  ])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof Skeleton.props>) => {
+    const html = await ComponentRender(nameOrHtml, options, Skeleton)
+    expect(html).toMatchSnapshot()
+  })
+})

test/components/layout/__snapshots__/Skeleton.spec.ts.snap

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Skeleton > renders <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" /> correctly 1`] = `"<div class=\\"animate-pulse bg-gray-100 dark:bg-gray-800 rounded-full h-12 w-12\\"></div>"`;
+
+exports[`Skeleton > renders basic case correctly 1`] = `"<div class=\\"animate-pulse bg-gray-100 dark:bg-gray-800 rounded-md\\"></div>"`;