Vue.js: Testes Unitários e E2E

// ❌ The "Broken" Version:Not tested,Alice I don't dare to refactor
// ProductCard.vue Changed 1 line, The entire home page is a blank screen
// No one noticed, Day 2 not until a user filed a complaint they discovered
// Team:"Don't move this component,We don't know what it will destroy."

// tests/unit/ProductCard.test.js
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import ProductCard from '@/components/ProductCard.vue'

describe('ProductCard', () => {
  it('renders product name and price', () => {
    const product = { id: 1, name: 'iPhone', price: 999 }
    const wrapper = mount(ProductCard, { props: { product } })
    
    expect(wrapper.text()).toContain('iPhone')
    expect(wrapper.text()).toContain('$999')
  })
  
  it('emits add-to-cart event', async () => {
    const wrapper = mount(ProductCard, { 
      props: { product: { id: 1, name: 'iPhone', price: 999 } } 
    })
    
    await wrapper.find('button').trigger('click')
    
    expect(wrapper.emitted('add-to-cart')).toBeTruthy()
    expect(wrapper.emitted('add-to-cart')[0]).toEqual([1])
  })
})

$ npx vitest run
✓ ProductCard > renders product name and price
✓ ProductCard > emits add-to-cart event
2 passed

npm install -D vitest @vue/test-utils @vitest/coverage-v8 jsdom

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  
  test: {
    // Test Environment
    environment: 'jsdom',  // or 'happy-dom' / 'node'
    
    // Matching Files
    include: ['tests/**/*.test.ts', 'src/**/*.test.ts'],
    
    // Coverage Rate
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html', 'json'],
      exclude: ['node_modules/', 'tests/']
    },
    
    // Global setup
    setupFiles: ['./tests/setup.ts']
  },
  
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'

// 1. describe:Test Suite
describe('Calculator', () => { })

// 2. it:Single Test
it('adds 1 + 1 to equal 2', () => { })

// 3. expect:Assertion
expect(1 + 1).toBe(2)
expect(arr).toContain('apple')
expect(obj).toMatchObject({ name: 'Alice' })

// 4. vi:mock / spy
vi.fn()                  // mock Function
vi.mock('./api')         // mock Module
vi.spyOn(obj, 'method')  // spy Methods

import { mount, shallowMount, RouterLinkStub } from '@vue/test-utils'

// 1. mount:Full Mount(Child components are also mounted)
const wrapper = mount(Component, { props: { ... } })

// 2. shallowMount: Shallow Mount (Child components are stubbed)
const wrapper = shallowMount(Component, { props: { ... } })

// 3. Find an Element
wrapper.find('button')              // First match
wrapper.findAll('li')              // All matches
wrapper.findComponent(MyComponent)  // Find Child Components
wrapper.get('#submit')             // Must be found(Error not found)

// 4. Trigger Event
await wrapper.find('button').trigger('click')
await wrapper.find('input').setValue('hello')

// 5. Assertion
expect(wrapper.text()).toContain('Hello')
expect(wrapper.find('h1').text()).toBe('Title')
expect(wrapper.emitted('add-to-cart')).toBeTruthy()

// 1. props Test
it('renders props correctly', () => {
  const wrapper = mount(MyComponent, { props: { title: 'Hello' } })
  expect(wrapper.text()).toContain('Hello')
})

// 2. emit Test
it('emits event on click', async () => {
  const wrapper = mount(MyComponent)
  await wrapper.find('button').trigger('click')
  expect(wrapper.emitted('submit')).toBeTruthy()
})

// 3. slot Test
it('renders default slot', () => {
  const wrapper = mount(MyComponent, {
    slots: { default: '<p>Slot content</p>' }
  })
  expect(wrapper.html()).toContain('Slot content')
})

// 4. Asynchronous Testing
it('loads data on mount', async () => {
  const wrapper = mount(MyComponent)
  await flushPromises()  // Wait for asynchronous completion
  expect(wrapper.text()).toContain('Loaded')
})

// 5. provide/inject Test
it('uses provided value', () => {
  const wrapper = mount(MyComponent, {
    provide: { theme: 'dark' }
  })
  expect(wrapper.find('.dark').exists()).toBe(true)
})

// 1. The text contains
expect(wrapper.text()).toContain('Hello')

// 2. class Existence
expect(wrapper.find('.active').exists()).toBe(true)

// 3. Elemental Presence
expect(wrapper.find('button').exists()).toBe(true)

// 4. Event Trigger
expect(wrapper.emitted('click')).toBeTruthy()
expect(wrapper.emitted('click')[0]).toEqual([arg1, arg2])

// 5. Asynchronous operation completed
await wrapper.vm.$nextTick()
await flushPromises()

npm install -D @playwright/test
npx playwright install

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:5173',
    trace: 'on-first-retry'
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } }
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI
  }
})

// 1. Login Process
import { test, expect } from '@playwright/test'

test('user can login', async ({ page }) => {
  await page.goto('/login')
  await page.fill('input[name="username"]', 'alice@example.com')
  await page.fill('input[name="password"]', 'password123')
  await page.click('button[type="submit"]')
  
  await expect(page).toHaveURL('/dashboard')
  await expect(page.locator('h1')).toContainText('Welcome, Alice')
})

// 2. Add to Cart
test('add product to cart', async ({ page }) => {
  await page.goto('/products/1')
  await page.click('button:has-text("Add to Cart")')
  
  await expect(page.locator('.cart-count')).toHaveText('1')
})

// 3. Form Submission
test('submit form with validation', async ({ page }) => {
  await page.goto('/contact')
  await page.fill('input[name="email"]', 'invalid-email')
  await page.click('button[type="submit"]')
  
  await expect(page.locator('.error')).toBeVisible()
})

// 4. Route Redirection
test('navigate to products page', async ({ page }) => {
  await page.goto('/')
  await page.click('a:has-text("Products")')
  
  await expect(page).toHaveURL('/products')
})

// 5. Asynchronous Loading
test('loads data after navigation', async ({ page }) => {
  await page.goto('/dashboard')
  
  // Waiting for data to load
  await page.waitForSelector('.chart-loaded')
  await expect(page.locator('.chart-loaded')).toBeVisible()
})

# Run all tests
npx playwright test

# Run a Specific File
npx playwright test tests/e2e/login.spec.ts

# Debug Mode(Open your browser)
npx playwright test --debug

# UI Pattern(Visualization)
npx playwright test --ui

// 1. props
it('renders props', () => { ... })

// 2. emit
it('emits event', async () => { ... })

// 3. slot
it('renders slot', () => { ... })

// 4. async
it('loads data', async () => { ... })

// 5. provide
it('uses provide', () => { ... })

// 1. Text
expect(wrapper.text()).toContain('Hello')

// 2. class
expect(wrapper.find('.active').exists()).toBe(true)

// 3. Element
expect(wrapper.find('button').exists()).toBe(true)

// 4. Event
expect(wrapper.emitted('click')).toBeTruthy()

// 5. Asynchronous
await wrapper.vm.$nextTick()

// 1. Log In
test('login', async ({ page }) => { ... })

// 2. Shopping Cart
test('add to cart', async ({ page }) => { ... })

// 3. Form
test('form submit', async ({ page }) => { ... })

// 4. Routing
test('navigate', async ({ page }) => { ... })

// 5. Asynchronous
test('async load', async ({ page }) => { ... })