Feat automation test - Transfer to Typescript (#104)

- Update Readme for new build-up commands (still not the latest version)
- Add Cpress optional OAuth activation
- Transfer testing files into Typescript

.dockerignore

@@ -1,3 +1,3 @@
-*/node_modules
+**/node_modules
 .git
 */dist

.env.dev

@@ -0,0 +1,4 @@
+TESTING=true
+TESTING_USERNAME=alex
+TESTING_PASSWORD=Alex1234
+SECRET_KEY=b1d2e917-17b9-4fce-9055-082dee6ec5d6

.eslintrc.js

@@ -63,9 +63,10 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['**/tests/**/*.js', '**/tests/**/*.ts'], // Adjust the pattern to match your test files
+      files: ['**/tests/**/*.js', '**/tests/**/*.ts', '**/*.test.ts'], // Adjust the pattern to match your test files
       rules: {
         'import/extensions': 'off', // Turn off the rule for test files
+        'import/no-extraneous-dependencies': 'off',
       },
     },
   ],

README.md

@@ -17,15 +17,22 @@
 
 ## Development
 
-Run everything (frontend, backend, db, swagger, quests):
+Run mongoDB first:
 
-    docker compose build
-    docker compose up -d
+    docker compose -f docker-compose.dev.yml up -d db
+
+The db will automatically restarts by Docker.
+
+Build up dependencies:
+
+    yarn build:deps
+
+Run dev server (frontend, backend):
+
+    yarn dev
 
 If you want to enable social login, you should have OAuth client token in a `.env` file:
 
-    docker compose --env-file .env up -d
-
 ### Build Quest Images
 
 In each quest folder, there is a `game.yml` file, which is the quest definition. And a optional `Dockerfile` to overwrite the base image. If you want to include additional files, put them in a `home` folder. The files in `home` will **not** be copied to the image automatically, you have to copy them in the `Dockerfile`.
@@ -144,4 +151,3 @@ connect to other host:
 list sessions:
 
     yarn cli list
- 

app/Dockerfile

@@ -7,7 +7,7 @@ COPY packages/file-graph/package.json ./packages/file-graph/package.json
 COPY packages/utils/package.json ./packages/utils/package.json
 COPY packages/constants/package.json ./packages/constants/package.json
 COPY app/package.json ./app/package.json
-RUN yarn install 
+RUN yarn install
 
 # Dev stage
 FROM base as dev

docker-compose.dev.yml

@@ -74,6 +74,7 @@ services:
 
   db:
     image: mongo
+    restart: always
     networks:
       - internal
     ports:

docker-compose.testing.yml

@@ -12,6 +12,7 @@ services:
       - BASE_URL=http://app-test
       - TESTING_USERNAME=alex
       - TESTING_PASSWORD=Alex1234
+      # - DEBUG=cypress:*
     depends_on:
       - app-test
 
@@ -23,8 +24,9 @@ services:
       target: prod
     networks:
       internal:
-    ports:
-      - 5173:80
+    # Only open the port for debugging
+    # ports:
+    #   - 5173:80
     depends_on:
       - backend
 
@@ -71,8 +73,8 @@ services:
       - MONGO_USER=user
       - MONGO_PASS=user-password
       - MONGO_DB=odyssey-test
-    ports:
-      - 27017:27017
+  #    ports:
+  #      - 27017:27017
 
   base:
     image: linuxodyssey/quest-base

package.json

@@ -30,6 +30,7 @@
     "build:quests": "yarn workspace server build:quests"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.10.4",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

packages/file-graph/tests/file.test.ts

@@ -1,4 +1,5 @@
-import File from '../src/file'
+import { describe, test, expect } from '@jest/globals'
+import File from '../src/file.js'
 
 describe('File', () => {
   let file: File

packages/file-graph/tests/fileGraph.test.ts

@@ -1,3 +1,4 @@
+import { describe, test, expect } from '@jest/globals'
 import FileGraph from '../src/fileGraph.js'
 import FileNode from '../src/fileNode.js'
 

packages/file-graph/tests/fileNode.test.ts

@@ -1,3 +1,4 @@
+import { describe, test, expect } from '@jest/globals'
 import { DuplicateItemError, ParentNotExistsError } from '../src/errors.js'
 import FileNode from '../src/fileNode.js'
 import { FileObject } from '../src/file.js'

packages/utils/tests/auth.test.ts

@@ -1,3 +1,4 @@
+import { test, expect } from '@jest/globals'
 import { isValidEmail, isValidUsername } from '../src/auth.js'
 
 test('check valid username', () => {

packages/utils/tests/commands.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from '@jest/globals'
 import { buildFileCheckCmd, File } from '../src/commands.js'
 
 describe('buildFileCheckCmd function', () => {

packages/utils/tests/dag.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from '@jest/globals'
 import DAG from '../src/dag.js'
 
 describe('dag layers', () => {

server/src/config.ts

@@ -4,6 +4,9 @@ import { get } from './utils/env.js'
 
 // Import dotenv and load ../.env
 dotenv.config({ path: '../.env' })
+if (process.env.NODE_ENV !== 'production') {
+  dotenv.config({ path: '../.env.dev' })
+}
 
 function getTrustProxies(key: string): string[] {
   const value = process.env[key]

tests/Dockerfile

@@ -3,7 +3,7 @@ FROM cypress/browsers
 WORKDIR /e2e
 COPY package.json yarn.lock ./
 COPY tests/package.json ./tests/package.json
-RUN yarn install
+RUN yarn install --frozen-lockfile
 
 COPY quests ./quests
 COPY tests ./tests

tests/cypress.config.ts

@@ -1,20 +1,27 @@
-const { defineConfig } = require('cypress')
-const process = require('process')
-require('dotenv').config({ path: '../.env' })
+import { defineConfig } from 'cypress'
+import process from 'process'
+import dotenv from 'dotenv'
+import fs from 'fs' // Import fs module
+
+dotenv.config({ path: '../.env.dev' })
+dotenv.config({ path: '../.env' })
 
 const getConfig = (key, defaultValue) => {
   return process.env[key] || defaultValue
 }
 
 const getOrFail = (key) => {
-  const value = getConfig(key)
+  const value = getConfig(key, null)
   if (!value) {
     throw new Error(`Missing required environment variable ${key}`)
   }
   return value
 }
 
-module.exports = defineConfig({
+// Check if the .env file exists
+const EnableoAuth = fs.existsSync('../.env')
+
+export default defineConfig({
   e2e: {
     baseUrl: getConfig('BASE_URL', 'http://localhost:5173'),
     viewportWidth: 1920,
@@ -28,13 +35,13 @@ module.exports = defineConfig({
     defaultAccount: getOrFail('TESTING_USERNAME'),
     defaultPassword: getOrFail('TESTING_PASSWORD'),
     isCHVersion: true,
+    EnableoAuth, // Add the EnableoAuth variable here
     // google_username: process.env.GOOGLE_USERNAME,
     // google_password: process.env.GOOGLE_PASSWORD,
     // google_client_id: process.env.GOOGLE_CLIENT_ID,
-    // google_client_secret: process.env.GOOGLE_CLIENT_SECRET,
+
     // github_username: process.env.GITHUB_USERNAME,
     // github_password: process.env.GITHUB_PASSWORD,
     // github_client_id: process.env.GITHUB_CLIENT_ID,
-    // github_client_secret: process.env.GITHUB_CLIENT_SECRET,
   },
 })

tests/cypress/e2e/UItests.cy.ts

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 export default function checkLoginUI() {
   cy.get('#title').should('contain', 'Linux Odyssey').and('be.visible')
   cy.CheckPlaceholder('#password', '密碼', 'Password')
@@ -37,17 +36,19 @@ describe('example helloworld app', () => {
       cy.CheckTextElement('#SwitchtoRegister', '註冊', 'Sign up')
     })
     it('Check social account UI', () => {
-      cy.CheckTextElement(
-        '#GoogleLogin',
-        '以 Google 繼續',
-        'Continue with Google'
-      )
-      cy.CheckTextElement('#or', '或', 'or')
-      cy.CheckTextElement(
-        '#GitHubLogin',
-        '以 GitHub 繼續',
-        'Continue with GitHub'
-      )
+      if (Cypress.env('EnableoAuth')) {
+        cy.CheckTextElement(
+          '#GoogleLogin',
+          '以 Google 繼續',
+          'Continue with Google'
+        )
+        cy.CheckTextElement('#or', '或', 'or')
+        cy.CheckTextElement(
+          '#GitHubLogin',
+          '以 GitHub 繼續',
+          'Continue with GitHub'
+        )
+      }
     })
     it('Check login fail', () => {
       cy.LoginWithPassword('dddd', '123456')
@@ -96,20 +97,18 @@ describe('example helloworld app', () => {
       cy.CheckTextElement('#tasks', '任務', 'Tasks:')
     })
     it('Check Terminal', () => {
-      cy.get('#terminal', { timeout: 20000 }).within(($terminal) => {
-        cy.get($terminal).should('be.visible')
-        cy.get('svg[data-icon="terminal"]').should('be.visible')
-        cy.CheckTextElement('#Terminal', '終端機', 'Terminal')
-        cy.get('@Terminaltextbox')
-          .should('be.visible')
-          .and('contain', 'commander:~ $')
-      })
+      // cy.get('#terminal', { timeout: 20000 }).within(($terminal) => {
+      //   cy.get($terminal).should('be.visible')
+      cy.get('#terminal', { timeout: 20000 }).should('be.visible')
+      cy.get('svg[data-icon="terminal"]').should('be.visible')
+      cy.CheckTextElement('#Terminal', '終端機', 'Terminal')
+      cy.get('@Terminaltextbox')
+        .should('be.visible')
+        .and('contain', 'commander:~ $')
     })
     it('Check Hint Part', () => {
-      cy.get('#hint', { timeout: 20000 }).within(($hint) => {
-        cy.get($hint).should('be.visible')
-        cy.get('svg[data-icon="lightbulb"]').should('be.visible')
-      })
+      cy.get('#hint', { timeout: 20000 }).should('be.visible')
+      cy.get('svg[data-icon="lightbulb"]').should('be.visible')
       cy.CheckTextElement('#hint', '提示', 'Hint')
     })
     it('Check File TreeChart', () => {

tests/cypress/e2e/completeQuests.cy.ts

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 describe('Complete quests with only commands', () => {
   beforeEach(() => {
     cy.PrepareForGame()

tests/cypress/support/commands.ts

@@ -1,7 +1,38 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+/// <reference types="cypress" />
 import '@testing-library/cypress/add-commands'
 
+declare const expect: Chai.ExpectStatic
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      LoginWithPassword(username: string, password: string): Chainable<string>
+      PrepareForGame(): Chainable<void>
+      InitTerminal(): Chainable<void>
+      typeInCommand(command: string): Chainable<string>
+      getQuestInfo(id: string): Chainable<JQuery<HTMLParagraphElement>>
+      checkHint(index: number, total: number): Chainable<number> // 修改類型
+      checkTaskInit(): Chainable<void>
+      waitUntilActive(last?: boolean): Chainable<void> // 注意小寫boolean，並且變量名應該是小寫
+      checkPending(): Chainable<void>
+      CompleteStageWithCommands(stagename: string): Chainable<string>
+      CheckTextElement(
+        id: string,
+        chText: string,
+        enText: string
+      ): Chainable<string>
+      CheckPlaceholder(
+        id: string,
+        chText: string,
+        enText: string
+      ): Chainable<string>
+      CheckTreeElement(element: string): Chainable<string>
+    }
+  }
+}
 Cypress.Commands.add('LoginWithPassword', (username, password) => {
-  cy.clearAllCookies({ domain: null })
+  cy.clearAllCookies()
   cy.visit('/login')
   cy.get('#username').type(username)
   cy.get('#password').type(password)
@@ -10,7 +41,7 @@ Cypress.Commands.add('LoginWithPassword', (username, password) => {
 Cypress.Commands.add('PrepareForGame', () => {
   cy.visit('/')
   // make sure the login page is loaded
-  cy.url().should('satisfy', (elements) => {
+  cy.url().should('satisfy', (elements: string) => {
     const text = elements
     return text.includes('login') || text.includes('register')
   })
@@ -70,9 +101,9 @@ Cypress.Commands.add('waitUntilActive', (last = false) => {
         return
       }
       if (value === 'pending' && !last) {
-        cy.log(last)
+        cy.log(`${last}`)
         cy.typeInCommand('{enter}')
-        cy.waitUntilActive()
+        cy.waitUntilActive(last) // Pass `last` parameter
       }
     })
 })
@@ -90,8 +121,7 @@ Cypress.Commands.add('CompleteStageWithCommands', (stagename) => {
   cy.CheckTextElement('#reset', '重來', 'Reset').click()
   cy.checkTaskInit()
   cy.InitTerminal()
-  cy.readFile(`../quests/${stagename}/answer.sh`, 'utf-8').as('answers')
-  cy.get('@answers').then((answers) => {
+  cy.readFile(`../quests/${stagename}/answer.sh`, 'utf-8').then((answers) => {
     const answerarr = answers.split('\n')
     for (const element of answerarr) {
       cy.typeInCommand(`${element}{enter}`)
@@ -109,13 +139,11 @@ Cypress.Commands.add('CompleteStageWithCommands', (stagename) => {
   })
 })
 Cypress.Commands.add('CheckTextElement', (id, chText, enText) => {
-  cy.get(id, { timeout: 50000 }).within(($element) => {
-    if (Cypress.env('isCHVersion')) {
-      cy.get($element).should('contain', chText).and('be.visible')
-    } else {
-      cy.get($element).should('contain', enText).and('be.visible')
-    }
-  })
+  if (Cypress.env('isCHVersion')) {
+    cy.get(id, { timeout: 50000 }).should('contain', chText).and('be.visible')
+  } else {
+    cy.get(id, { timeout: 50000 }).should('contain', enText).and('be.visible')
+  }
 })
 Cypress.Commands.add('CheckPlaceholder', (id, chText, enText) => {
   cy.get(id)

tests/package.json

@@ -3,14 +3,20 @@
   "version": "1.0.0",
   "private": true,
   "main": "index.js",
+  "type": "commonjs",
   "license": "MIT",
   "scripts": {
-    "test": "TESTING_USERNAME=alex TESTING_PASSWORD=Alex1234 cypress run",
-    "test:open": "TESTING_USERNAME=alex TESTING_PASSWORD=Alex1234 cypress open"
+    "test": "yarn cypress run",
+    "test:open": "yarn cypress open"
   },
   "dependencies": {
     "@testing-library/cypress": "^10.0.1",
     "cypress": "^13.5.1",
-    "dotenv": "^16.3.1"
+    "dotenv": "^16.3.1",
+    "ts-node": "^10.9.2"
+  },
+  "devDependencies": {
+    "@types/dotenv": "^8.2.0",
+    "typescript": "^5.3.3"
   }
 }

tests/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node", "@testing-library/cypress"],
+    "esModuleInterop": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["dist"]
+}

yarn.lock

@@ -1043,6 +1043,13 @@
     "@types/docker-modem" "*"
     "@types/node" "*"
 
+"@types/dotenv@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@types/dotenv/-/dotenv-8.2.0.tgz#5cd64710c3c98e82d9d15844375a33bf1b45d053"
+  integrity sha512-ylSC9GhfRH7m1EUXBXofhgx4lUWmFeQDINW5oLuS+gxWdfUeW4zJdeVTYVkexEW+e2VUvlZR2kGnGGipAWR7kw==
+  dependencies:
+    dotenv "*"
+
 "@types/express-serve-static-core@^4.17.33":
   version "4.17.43"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.43.tgz#10d8444be560cb789c4735aea5eac6e5af45df54"
@@ -2777,7 +2784,7 @@ dompurify@^3.0.6:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.9.tgz#b3f362f24b99f53498c75d43ecbd784b0b3ad65e"
   integrity sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ==
 
-dotenv@^16.3.1, dotenv@^16.4.1:
+dotenv@*, dotenv@^16.3.1, dotenv@^16.4.1:
   version "16.4.5"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
   integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==