Setup CI/CD for lint, vitest and cypress tests

.github/workflows/main.yml

@@ -1,33 +1,153 @@
-name: Build and deploy
+name: Main
 
 on:
   push:
     branches: [ main ]
   pull_request:
     branches: [ main ]
-
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
   build:
-    name: Build
     runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1
+      options: --user 1001
     steps:
       - name: Checkout repository
-        uses: actions/checkout@main
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        uses: actions/checkout@v4
+
+      - name: Cache node_modules
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Cypress install
+        uses: cypress-io/github-action@v6
+        with:
+          runTests: false
+
       - name: Write Firebase config
         run: |
           echo ${{ secrets.FIREBASE_CONFIG }} | base64 -d > firebase.config.json
-      - name: Build dependencies
-        run: yarn run build
-      - name: Archive production artifact
-        uses: actions/upload-artifact@main
+
+      - run: npx cypress info
+      - run: node --version
+      - run: node -p 'os.cpus()'
+      - run: npm run lint
+      - run: npm run test:ci
+      - run: npm run build
+
+      - name: Save build folder
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          if-no-files-found: error
+          path: dist
+
+  e2e-chrome-tests:
+    environment: manual
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1
+      options: --user 1001
+    needs: build
+    strategy:
+      fail-fast: false # https://github.com/cypress-io/github-action/issues/48
+      matrix:
+        containers: [ 1, 2 ]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Download the build folders
+        uses: actions/download-artifact@v4
         with:
           name: dist
           path: dist
+
+      - name: Node info
+        run: node -v
+
+      - name: __e Dir
+        run: ls /__e
+
+      - name: "E2E Tests - Chrome"
+        uses: cypress-io/github-action@v6
+        with:
+          build: npx cypress info
+          start: npm run preview
+          wait-on: "http://localhost:8080"
+          wait-on-timeout: 120
+          browser: chrome
+          record: true
+          parallel: true
+          group: "E2E - Chrome"
+          spec: cypress/e2e/*
+          config-file: cypress.config.ts
+          config: "{\"e2e\":{\"baseUrl\":\"http://localhost:8080\"}}"
+        env:
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}
+          TEST_USER_USERNAME: ${{ secrets.TEST_USER_USERNAME_1 }}
+          TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD_1 }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  e2e-chrome-mobile-tests:
+    environment: manual
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-18.16.0-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1
+      options: --user 1001
+    needs: build
+    strategy:
+      fail-fast: false # https://github.com/cypress-io/github-action/issues/48
+      matrix:
+        containers: [ 1, 2 ]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Download the build folders
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+      - name: Node info
+        run: node -v
+
+      - name: __e Dir
+        run: ls /__e
+
+      - name: "E2E Tests - Chrome - Mobile"
+        uses: cypress-io/github-action@v6
+        with:
+          build: npx cypress info
+          start: npm run preview
+          wait-on: "http://localhost:8080"
+          wait-on-timeout: 120
+          browser: chrome
+          record: true
+          parallel: true
+          group: "E2E - Chrome - Mobile"
+          spec: cypress/e2e/*
+          config-file: cypress.config.ts
+          config: "{\"e2e\":{\"baseUrl\":\"http://localhost:8080\",\"viewportWidth\":400,\"viewportHeight\":660}}"
+        env:
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          COMMIT_INFO_SHA: ${{ github.event.pull_request.head.sha }}
+          TEST_USER_USERNAME: ${{ secrets.TEST_USER_USERNAME_2 }}
+          TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD_2 }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
   deploy_live_website:
     name: Deploy Prod
     needs: build

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn run lint-staged
+npx lint-staged

cypress.config.ts

@@ -5,6 +5,7 @@ dotenv.config({ path: '.env' })
 dotenv.config()
 
 export default defineConfig({
+    projectId: 'fm6ypm',
     chromeWebSecurity: false,
     env: {
         language: 'xx',
@@ -24,7 +25,7 @@ export default defineConfig({
         baseUrl: 'http://localhost:3000',
         viewportHeight: 660,
         viewportWidth: 1000,
-        defaultCommandTimeout: 10000,
+        defaultCommandTimeout: 25000,
         experimentalRunAllSpecs: true,
     },
 })

cypress/e2e/auth.cy.ts

@@ -6,6 +6,7 @@ import { EDataTest, EDataTestClass } from '@/enums/EDataTest'
 describe('user sign-in, sign-up and logout', () => {
     beforeEach(() => {
         cy.visit(withLang())
+        cy.location('pathname').should('equal', withLang())
         cy.logout()
     })
 

cypress/support/e2e.ts

@@ -24,9 +24,9 @@ Cypress.Commands.add('authWithoutSession', (options = {}) => {
         cy.visit(withLang())
     cy.el(isSignIn ? EDataTest.landing_sign_in_button : EDataTest.landing_sign_up_button).click()
     if (finalOptions.username)
-        cy.get('input[type="email"]').type(finalOptions.username)
+        cy.el(EDataTest.authentication_modal_email).type(finalOptions.username)
     if (finalOptions.password)
-        cy.get('input[type="password"]').type(finalOptions.password)
+        cy.el(EDataTest.authentication_modal_password).type(finalOptions.password)
     cy.el(EDataTest.authentication_modal_action_button)
         // .contains(isSignIn ? 'sign_in' : 'sign_up')
         .click()

package.json

@@ -12,8 +12,11 @@
     "stylelint:fix": "stylelint \"src/**/*.{scss,vue}\" --fix",
     "prepare": "husky install",
     "test": "vitest",
+    "test:ci": "vitest --run",
     "cypress:open": "cypress open",
-    "cypress:open:mobile": "cypress open --config \"{\\\"e2e\\\":{\\\"viewportWidth\\\":400,\\\"viewportHeight\\\":660}}\""
+    "cypress:open:mobile": "cypress open --config \"{\\\"e2e\\\":{\\\"viewportWidth\\\":400,\\\"viewportHeight\\\":660}}\"",
+    "cypress:run": "cypress run",
+    "cypress:run:mobile": "cypress run --config \"{\\\"e2e\\\":{\\\"viewportWidth\\\":400,\\\"viewportHeight\\\":660}}\""
   },
   "lint-staged": {
     "src/**/*.{scss,vue}": [

src/enums/EDataTest.ts

@@ -4,6 +4,8 @@ export enum EDataTest {
     landing_go_to_workspace_button,
 
     authentication_modal,
+    authentication_modal_email,
+    authentication_modal_password,
     authentication_modal_sign_in_tab,
     authentication_modal_sign_up_tab,
     authentication_modal_action_button,

src/modules/landing/modules/authenticate/components/AuthenticateModal/components/AuthenticateModalForm/AuthenticateModalForm.vue

@@ -85,15 +85,16 @@ const action = computed(() => {
         <n-form-item-row :label="$t('email')">
             <n-input
                 v-model:value="form.email"
-                type="email"
-                :placeholder="$t('email')"/>
+                :placeholder="$t('email')"
+                :data-test="EDataTest.authentication_modal_email"/>
         </n-form-item-row>
         <n-form-item-row :label="$t('password')">
             <n-input
                 v-model:value="form.password"
                 type="password"
                 show-password-on="mousedown"
-                :placeholder="$t('password')"/>
+                :placeholder="$t('password')"
+                :data-test="EDataTest.authentication_modal_password"/>
         </n-form-item-row>
     </n-form>
     <n-button

src/services/authentication/firebase/FirebaseAuthentication.ts

@@ -63,10 +63,10 @@ export class FirebaseAuthentication implements IAuthentication {
         }
     }
 
-    private getErrorMessage = (error: any) => {
+    private getErrorMessage = (error: unknown) => {
         let message = getErrorMessage(error)
 
-        if (error.code === 'auth/account-exists-with-different-credential') {
+        if ((error as {code: string}).code === 'auth/account-exists-with-different-credential') {
             message = 'You have already signed up with a different auth provider for that email.'
         }
 

src/services/dbstore/firestore/__mocks__/UserFirestoreCollection.ts

@@ -11,6 +11,7 @@ export class UserFirestoreCollection implements IUserCollection {
         }
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     public create = async (user: User) => {
         this.checkCurrentUser()
     }