透過測試驅動 AI 開發流程

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from './HelloWorld.vue'

describe('HelloWorld', () => {
  it('renders the message prop correctly', () => {
    const message = 'Hello Vue!'
    const wrapper = mount(HelloWorld, {
      props: { msg: message }
    })

    expect(wrapper.find('h1').text()).toBe(message)
  })

  it('displays initial count as 0', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Test Message' }
    })

    expect(wrapper.find('button').text()).toBe('count is 0')
  })

  it('increments count when button is clicked', async () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Test Message' }
    })

    const button = wrapper.find('button')

    // Click the button
    await button.trigger('click')

    // Check if count increased to 1
    expect(button.text()).toBe('count is 1')

    // Click again
    await button.trigger('click')

    // Check if count increased to 2
    expect(button.text()).toBe('count is 2')
  })

  it('renders the edit instruction text', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Test Message' }
    })

    expect(wrapper.text()).toContain('Edit')
    expect(wrapper.text()).toContain('components/HelloWorld.vue')
    expect(wrapper.text()).toContain('to test HMR')
  })

  it('renders the create-vue link with correct attributes', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Test Message' }
    })

    const createVueLink = wrapper.find('a[href="https://vuejs.org/guide/quick-start.html#local"]')

    expect(createVueLink.exists()).toBe(true)
    expect(createVueLink.text()).toBe('create-vue')
    expect(createVueLink.attributes('target')).toBe('_blank')
  })

  it('renders the Vue Docs link with correct attributes', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Test Message' }
    })

    const vueDocsLink = wrapper.find('a[href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"]')

    expect(vueDocsLink.exists()).toBe(true)
    expect(vueDocsLink.text()).toBe('Vue Docs Scaling up Guide')
    expect(vueDocsLink.attributes('target')).toBe('_blank')
  })

  it('renders the read-the-docs paragraph with correct class', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Test Message' }
    })

    const readTheDocs = wrapper.find('p.read-the-docs')

    expect(readTheDocs.exists()).toBe(true)
    expect(readTheDocs.text()).toBe('Click on the Vite and Vue logos to learn more')
  })

  it('has the correct CSS class for read-the-docs', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Test Message' }
    })

    const readTheDocs = wrapper.find('.read-the-docs')
    expect(readTheDocs.exists()).toBe(true)
  })

  it('renders all expected elements', () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Test Message' }
    })

    // Check for main elements
    expect(wrapper.find('h1').exists()).toBe(true)
    expect(wrapper.find('.card').exists()).toBe(true)
    expect(wrapper.find('button').exists()).toBe(true)
    expect(wrapper.find('code').exists()).toBe(true)

    // Check for all paragraphs
    const paragraphs = wrapper.findAll('p')
    expect(paragraphs).toHaveLength(4)
  })
})