twd-vue-example

A showcase Vue 3 + Vite application demonstrating end-to-end testing with TWD (Test Web Dev). This project includes a complete todo list application with comprehensive test coverage using TWD.

About TWD

Test Web Dev (TWD) is a powerful testing framework for web applications. It provides seamless mocking, DOM interactions, and visual regression testing capabilities. This project showcases how easily TWD integrates with Vue 3 applications.

Features

• Vue 3 + TypeScript: Modern Vue application with full type safety
• Tailwind CSS: Utility-first styling for responsive design
• Todo Application: Full-featured todo list with create, read, and delete operations
• TWD Testing: End-to-end tests demonstrating TWD capabilities with Vue
• Mock API Server: JSON Server for local API mocking

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Structure

src/
├── views/           # Page components (Home, About, Todos)
├── components/      # Reusable UI components
├── api/            # API client functions
├── router/         # Vue Router configuration
└── twd-tests/      # TWD end-to-end tests
    ├── helloWorld.twd.test.ts
    └── todoList.twd.test.ts

Testing with TWD

This project includes TWD tests for:

• Home Page: Counter button functionality and page rendering
• Todo List: CRUD operations (Create, Read, Delete) with mock API requests

Run tests by executing TWD in your testing environment. Refer to the TWD documentation for detailed testing instructions.

Project Setup

npm install

Compile and Hot-Reload for Development

npm install
npm run serve:dev

This command runs both the development server and the mock API server in parallel. The app will be available at http://localhost:5173 and the API at http://localhost:3001.

Run Tests with TWD

npm run dev
# In another terminal
npm run test

Type-Check, Compile and Minify for Production

npm run build

Other Commands

• Type Check: npm run type-check - Run TypeScript type checking
• Build Only: npm run build-only - Build without type checking
• Preview: npm run preview - Preview the production build
• API Server: npm run serve - Run the mock API server only
• Dev Server: npm run dev - Run the Vite dev server only