Create e2e tests with cypress

.github/workflows/cy.yml

@@ -0,0 +1,45 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  eslint:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install modules
+        run: npm install
+      - name: Run ESLint
+        run: npm run lint
+  cypress-tests-desktop:
+    needs: eslint
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Run end-to-end tests on desktop viewport 🧪
+        uses: cypress-io/github-action@v5
+        env:
+          CYPRESS_USER_EMAIL: ${{ secrets.CYPRESS_USER_EMAIL }}
+          CYPRESS_USER_PASSWORD: ${{ secrets.CYPRESS_USER_PASSWORD }}
+          CYPRESS_MAILOSAUR_SERVER_ID: ${{ secrets.CYPRESS_MAILOSAUR_SERVER_ID }}
+          CYPRESS_MAILOSAUR_API_KEY: ${{ secrets.CYPRESS_MAILOSAUR_API_KEY }}
+        with:
+          command: npm test
+  cypress-tests-tablet:
+    needs: eslint
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Run end-to-end tests on tablet viewport 🧪
+        uses: cypress-io/github-action@v5
+        env:
+          CYPRESS_USER_EMAIL: ${{ secrets.CYPRESS_USER_EMAIL }}
+          CYPRESS_USER_PASSWORD: ${{ secrets.CYPRESS_USER_PASSWORD }}
+        with:
+          command: npm run test:tablet

cypress.config.js

@@ -6,6 +6,9 @@ module.exports = defineConfig({
     defaultCommandTimeout : 10000,
     requestTimeout: 10000,
     chromeWebSecurity: false,
+    env: {
+      viewportWidthBreakpoint: 768,
+    },
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

cypress/e2e/authenticated.cy.js

@@ -15,4 +15,21 @@ describe('Scenarios where authentication is a pre-condition', () => {
       .its('state')
       .should('be.equal', 'Complete')
   })
+
+  it('logs out', () => {
+    cy.visit('/')
+    cy.wait('@getNotes')
+
+    if (Cypress.config('viewportWidth') < Cypress.env('viewportWidthBreakpoint')) {
+      cy.get('.navbar-toggle.collapsed')
+        .should('be.visible')
+        .click()
+    }
+
+    cy.contains('.nav a', 'Logout').click()
+
+    cy.get('#email')
+      .should('be.visible')
+      .should('be.empty')
+  })
 })

cypress/support/commands.js

@@ -1,4 +1,3 @@
-///<reference types="cypress-iframe" />
 
 const attachFileHandler = () => {
   cy.get('#file').selectFile('cypress/fixtures/example.json')

package.json

@@ -5,7 +5,11 @@
   "main": "cypress.config.js",
   "scripts": {
     "lint": "eslint cypress/**/*.js && eslint cypress.config.js",
-    "lint:fix": "eslint cypress/**/*.js --fix && eslint cypress.config.js --fix"
+    "lint:fix": "eslint cypress/**/*.js --fix && eslint cypress.config.js --fix",
+    "cy:open": "cypress open",
+    "cy:open:tablet": "cypress open --config viewportWidth=767,viewportHeight=480",
+    "test": "cypress run",
+    "test:tablet": "cypress run --config viewportWidth=767,viewportHeight=480 --spec cypress/e2e/authenticated.cy.js"
   },
   "keywords": [],
   "author": "Leonardo Costa",
@@ -18,4 +22,4 @@
     "eslint": "^8.43.0",
     "eslint-plugin-cypress": "^2.13.3"
   }
-}
+}