In this article, we’ll create a simple task list application using Vue 3 and TypeScript. Then, we’ll write end-to-end (E2E) tests using Cypress to ensure the app functions as expected.
🛠️ Step 1: Setting Up Your Vue 3 Project
If you don’t already have a Vue 3 project, start by creating one with Vite:
npm create vue@latest
During setup, choose the following options:
- TypeScript: Yes
- Pinia: No (optional for this project)
- ESLint + Prettier: Yes
Then, install dependencies:
cd your-project
npm install
Start your development server:
npm run dev
✨ Step 2: Create a Task List with Vue 3 and TypeScript
Create a TaskList.vue component that will display a list of tasks and allow users to add or remove tasks.
Here’s the complete code:
<script setup lang="ts">
import {ref} from "vue";
interface Task {
id: number;
name: string;
}
const tasks = ref<Task[]>([
{id: 1, name: "Buying milk"}
])
const newTask = ref<string>("")
const addTask = () => {
if (newTask.value.trim()) {
tasks.value.push({id: Date.now(), name: newTask.value})
newTask.value = ""
}
}
const removeTask = (id: string|number) => {
tasks.value = tasks.value.filter(item => item.id !== id)
}
</script>
<template>
<h1>Task lists</h1>
<p v-if="tasks.length === 0">No tasks available</p>
<ul>
<li v-for="task in tasks" :key="task.id">
{{ task.name }}
<button @click="removeTask(task.id)" aria-label="Remove task">x</button>
</li>
</ul>
<form @submit.prevent="addTask">
<input type="text" v-model="newTask" placeholder="New task">
<button type="submit">Add</button>
</form>
</template>
<style scoped>
</style>
🧪 Step 3: Install Cypress for E2E Testing
Add Cypress to your project:
npm install cypress --save-dev
Open Cypress to generate the necessary configuration files:
npx cypress open
In the cypress/e2e folder, create a file named task-list.cy.js to write your tests.
🔍 Step 4: Writing E2E Tests with Cypress
Here’s the full Cypress test file:
describe('Task lists', () => {
beforeEach(() => {
cy.visit('http://localhost:5173/')
})
it('should "display list of existing tasks"', () => {
cy.contains('Buying milk').should('exist')
});
it('should "Adds a new task"', () => {
cy.get('input[placeholder="New task"]').type('Learn Cypress')
cy.get('form').submit()
cy.contains('Learn Cypress').should('exist')
cy.get('ul li').last().should('contain', 'Learn Cypress');
});
it('should "Don\'t add empty tasks"', () => {
cy.get('form').submit()
cy.get('ul li').should('have.length', 1)
});
it('should "To delete a task"', () => {
cy.get('ul li > button').first().click()
cy.get('ul li').should('have.length', 0)
});
it('should display "No tasks available" when the list is empty', () => {
cy.get('ul li > button').click();
cy.contains('No tasks available').should('exist');
});
})
✅ Breaking Down the Cypress Tests
Display existing tasks: Ensures the initial task ("Buying milk") is visible.
Add a new task: Tests that a new task can be added and is displayed in the list.
Prevent adding empty tasks: Submitting the form without entering text should not add an empty task.
Delete a task: Clicking the delete button should remove the task from the list.
Add display "No tasks available": Show display "No tasks available" when the list is empty.
🚀 Step 5: Running Cypress Tests
Run your tests with:
npx cypress run
🎉 Conclusion
We’ve built a Vue 3 task list with TypeScript, then verified its functionality with Cypress. This approach ensures that your application works as intended.
🌟 Next Steps:
- Add validation for minimum task length.
- Test edge cases (e.g., deleting a non-existent task).
- Integrate Cypress axe to test for accessibility.
You can find the full code in github
Top comments (0)