🚀 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

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.