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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

๐Ÿ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay