first commit

tests/__snapshots__/component.nuxt.test.ts.snap

@@ -0,0 +1,38 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`component DialogConfirm.vue > should open and close 1`] = `
+"<div class="v-card v-card--flat v-theme--light v-card--border v-card--density-default rounded-lg v-card--variant-elevated">
+  <!---->
+  <div class="v-card__loader">
+    <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+      <!---->
+      <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
+      <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
+      <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+        <div class="v-progress-linear__indeterminate">
+          <div class="v-progress-linear__indeterminate long bg-primary"></div>
+          <div class="v-progress-linear__indeterminate short bg-primary"></div>
+        </div>
+      </transition-stub>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <!---->
+  <div class="v-card-text font-weight-bold d-flex"><i class="v-icon notranslate v-theme--light v-icon--size-default text-warning mr-2" aria-hidden="true"><span class="iconify i-mdi:alert-circle" aria-hidden="true"></span></i><span>message</span></div>
+  <div class="v-card-actions">
+    <div class="v-spacer"></div><button type="button" class="v-btn v-btn--slim v-theme--light text-primary v-btn--density-default rounded-xl v-btn--size-default v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+      <!----><span class="v-btn__content" data-no-activator=""> Cancel </span>
+      <!---->
+      <!---->
+    </button><button type="button" class="v-btn v-btn--slim v-theme--light text-primary v-btn--density-default rounded-xl v-btn--size-default v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+      <!----><span class="v-btn__content" data-no-activator=""> Confirm </span>
+      <!---->
+      <!---->
+    </button>
+    <div class="v-spacer"></div>
+  </div>
+  <!---->
+  <!----><span class="v-card__underlay"></span>
+</div>"
+`;

tests/browser.e2e.test.ts

@@ -0,0 +1,47 @@
+import { fileURLToPath } from 'node:url'
+import { createPage, setup } from '@nuxt/test-utils/e2e'
+import { describe, it } from 'vitest'
+
+await setup({
+  rootDir: fileURLToPath(new URL('../', import.meta.url)),
+  browser: true,
+})
+describe('page /homepage', () => {
+  it(
+    'should render',
+    async () => {
+      const page = await createPage('/')
+      await page.getByText('Opinionated Starter Template').isVisible()
+      await page.close()
+    },
+    20000
+  )
+
+  it('should show notification', async () => {
+    const page = await createPage('/')
+    await page.getByLabel("What's your name?").fill('kingyue')
+    await page.getByRole('button', { name: 'Confirm', exact: true }).click()
+    const locator = page.getByText('Hi, kingyue!')
+    await locator.isVisible()
+    await locator.isHidden({ timeout: 6000 })
+    await page.close()
+  })
+})
+
+describe('page /table', () => {
+  it('should render', async () => {
+    const page = await createPage('/table')
+    await page.getByText('Dessert').isVisible()
+    await page.close()
+  })
+
+  it('should remove a row', async () => {
+    const page = await createPage('/table')
+    const row = page.getByRole('row', { name: 'Yogurt' })
+    await row.getByRole('button').click()
+    const dialog = page.getByRole('dialog')
+    await dialog.getByRole('button', { name: 'Confirm' }).click()
+    await row.isHidden()
+    await page.close()
+  })
+})

tests/component.nuxt.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import DialogConfirm from '~/components/DialogConfirm.vue'
+import { VCard } from 'vuetify/components'
+
+describe('component DialogConfirm.vue', () => {
+  it('should not open', async () => {
+    const wrapper = await mountSuspended(DialogConfirm)
+    expect(wrapper.html()).toMatchInlineSnapshot(`""`)
+  })
+
+  it('should open and close', async () => {
+    const wrapper = await mountSuspended(DialogConfirm)
+    wrapper.vm.open('message')
+    await nextTick()
+    const cardWrapper = wrapper.getComponent(VCard)
+    expect(cardWrapper.text()).toContain('message')
+    expect(cardWrapper.html()).toMatchSnapshot()
+    expect(cardWrapper.find('button').exists()).toBe(true)
+
+    await cardWrapper.find('button').trigger('click')
+    expect(cardWrapper.isVisible()).toBe(false)
+  })
+})