DEV Community

A0mineTV
A0mineTV

Posted on

2

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

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay