Created Cypress Testing Environment

.github/workflows/ci.yaml

@@ -0,0 +1,27 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  cypress:
+    name: 🧪 E2E - Testing
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Build Container
+        run: mv .env.sample .env && docker-compose up -d
+
+      - name: Run Cypress Tests
+        uses: cypress-io/github-action@v5.7.2
+        with:
+          browser: chrome
+
+      - name: Stop Container
+        run: docker-compose down

README.md

@@ -283,3 +283,21 @@ DELETE /todo/{id}
 ```
 
 </details>
+
+<details>
+<summary><h3>🔗 - deleteAllTodos<h3></summary>
+
+#### 📥 - Reqest
+
+```http
+DELETE /todo/remove/all
+```
+
+#### 📤 - Response
+
+```javascript
+{
+}
+```
+
+</details>

client/angular.json

@@ -93,5 +93,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+    baseUrl: 'http://localhost:8080',
+    env: {
+      DB_URL: 'http://localhost:8081'
+    }
+  }
+})

cypress/e2e/todo-func.cy.ts

@@ -0,0 +1,152 @@
+/// <reference types="cypress" />
+
+describe('ToDo Functionality', () => {
+  before(() => {
+    cy.clearDB().visit('/')
+  })
+
+  beforeEach(() => {
+    cy.clearDB()
+      .visit('/')
+      .fixture('page.json')
+      .then(function (json) {
+        this['todo'] = json.todo
+        this['todos'] = json.todos
+      })
+  })
+
+  after(() => {
+    cy.clearDB().visit('/')
+  })
+
+  it('can`t create a ToDo without Label', () => {
+    cy.get('app-template-todo-form div.todo-create').click()
+    cy.get('app-template-todo').should('not.exist')
+  })
+
+  it('creates a ToDo', function () {
+    cy.createTodo(this['todo'].label, this['todo'].priority, false)
+      .get('app-template-todo')
+      .should('exist')
+      .and('be.visible')
+  })
+
+  it('marks a ToDo to Done', function () {
+    cy.createTodo(this['todo'].label, this['todo'].priority, false)
+      .get('app-template-todo')
+      .find('div.todo-status-check')
+      .click()
+
+    cy.get('div.todo-entry-list').should($el => {
+      expect($el.eq(0).children()).to.have.length(0)
+      expect($el.eq(1).children()).to.have.length(1)
+    })
+  })
+
+  it('marks a ToDo to Open', function () {
+    cy.createTodo(this['todo'].label, this['todo'].priority, true)
+      .get('app-template-todo')
+      .find('div.todo-status-check')
+      .click()
+
+    cy.get('div.todo-entry-list').should($el => {
+      expect($el.eq(0).children()).to.have.length(1)
+      expect($el.eq(1).children()).to.have.length(0)
+    })
+  })
+
+  it("updates a ToDo's priority", function () {
+    cy.createTodo(this['todo'].label, this['todo'].priority, false)
+      .get('app-template-todo')
+      .as('todo')
+      .find('div.todo-content-inputs')
+      .dblclick()
+      .find('select')
+      .select(this['todo'].priority_updated)
+
+    cy.get('@todo').find('div.todo-update').click()
+
+    cy.get('@todo')
+      .find('select')
+      .should('contain', this['todo'].priority_updated)
+  })
+
+  it("updates a ToDo's Label", function () {
+    cy.createTodo(this['todo'].label, this['todo'].priority, false)
+      .get('app-template-todo')
+      .as('todo')
+      .find('div.todo-content-inputs')
+      .dblclick()
+      .find('input[type="text"]')
+      .clear()
+      .type(this['todo'].label_updated)
+
+    cy.get('@todo').find('div.todo-update').click()
+
+    cy.get('@todo')
+      .find('input[type="text"]')
+      .should('have.value', this['todo'].label_updated)
+  })
+
+  it('deletes a open ToDo', function () {
+    cy.createTodo(this['todo'].label, this['todo'].priority, false)
+      .get('app-template-todo')
+      .find('div.todo-delete')
+      .click()
+
+    cy.get('div.todo-entry-list').should($el => {
+      expect($el.eq(0).children()).to.have.length(0)
+      expect($el.eq(1).children()).to.have.length(0)
+    })
+  })
+
+  it('deletes a open ToDo', function () {
+    cy.createTodo(this['todo'].label, this['todo'].priority, true)
+      .get('app-template-todo')
+      .find('div.todo-delete')
+      .click()
+
+    cy.get('div.todo-entry-list').should($el => {
+      expect($el.eq(0).children()).to.have.length(0)
+      expect($el.eq(1).children()).to.have.length(0)
+    })
+  })
+
+  it('hides and shows both List', () => {
+    for (let i of [0, 1]) {
+      cy.get('h4').eq(i).click()
+      cy.get('div.todo-entry-list').should('have.length', 1)
+      cy.get('h4').eq(i).click()
+      cy.get('div.todo-entry-list').should('have.length', 2)
+    }
+  })
+
+  context('With many ToDos', () => {
+    it('moves a ToDo in the List', function () {
+      for (let todo of this['todos']) {
+        cy.createTodo(todo.label, todo.priority, todo.status)
+      }
+
+      const drag = cy.get('div.todo-entry-list').eq(0).children().last()
+      const drop = cy.get('div.todo-entry-list').eq(0).children().first()
+      drop.then($el => {
+        const dropPosition = $el[0].getBoundingClientRect().top
+
+        drag.trigger('mousedown', { which: 1, force: true })
+        cy.scrollTo('top')
+        drag
+          .trigger('mousemove', {
+            which: 1,
+            clientY: dropPosition,
+            force: true
+          })
+          .trigger('mouseup', { which: 1, force: true })
+
+        cy.get('app-template-todo')
+          .first()
+          .find("input[type='text']")
+          .should('have.value', 'LAST ITEM')
+      })
+    })
+  })
+})