DEV Community

A0mineTV
A0mineTV

Posted on

🚀 Building a Task List with Vue 3 + TypeScript and Testing It with Cypress

#cypress #e2e #javascript #automation

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
Enter fullscreen mode Exit fullscreen mode

Start your development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

✨ 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>
Enter fullscreen mode Exit fullscreen mode

🧪 Step 3: Install Cypress for E2E Testing

Add Cypress to your project:

npm install cypress --save-dev
Enter fullscreen mode Exit fullscreen mode

Open Cypress to generate the necessary configuration files:

npx cypress open
Enter fullscreen mode Exit fullscreen mode

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'); }); })
Enter fullscreen mode Exit fullscreen mode

 ✅ Breaking Down the Cypress Tests

  1. Display existing tasks: Ensures the initial task ("Buying milk") is visible.

  2. Add a new task: Tests that a new task can be added and is displayed in the list.

  3. Prevent adding empty tasks: Submitting the form without entering text should not add an empty task.

  4. Delete a task: Clicking the delete button should remove the task from the list.

  5. 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
Enter fullscreen mode Exit fullscreen mode

🎉 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)