feat: add e2e test by cypress

apps/client/cypress.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl:"http://localhost:3000/",
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
+});

apps/client/cypress/e2e/start-game.cy.ts

@@ -0,0 +1,65 @@
+describe("start game", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("navigates to the game scene as a guest", () => {
+    cy.intercept("GET", "/courses/try", {
+      statusCode: 200,
+      body: {
+        id: "1",
+        title: "第一课",
+        statements: [
+          {
+            chinese: "我",
+            english: "I",
+            id: 30725,
+            soundmark: "/aɪ/",
+          },
+        ],
+      },
+    }).as("getTryCourse");
+
+    cy.contains("Get Started").click();
+    // 目前对于游客来讲 是写死的 course id 为 1 ，所以这里暂时只验证是否有调用 try course 接口即可
+    // 后面如果 try course 的 id 是基于后端接口返回的话 那么在修改此处的测试写法
+    cy.wait("@getTryCourse").its("request.method").should("equal", "GET");
+    cy.url().should("include", "/main/1");
+  });
+
+  it("navigates to the game scene and shows course for logged-in users", () => {
+    cy.login({
+      phone: "13812345678",
+      password: "yourPassword",
+    });
+
+    cy.intercept("POST", "/game/start", {
+      statusCode: 200,
+      body: {
+        cId: 2,
+      },
+    }).as("fetchGameStart");
+
+    cy.intercept("GET", "/courses/2", {
+      statusCode: 200,
+      body: {
+        id: "2",
+        title: "第二课",
+        statements: [
+          {
+            chinese: "我",
+            english: "I",
+            id: 30725,
+            soundmark: "/aɪ/",
+          },
+        ],
+      },
+    }).as("getCourse");
+
+    cy.contains("Get Started").click(); // 点击 Get Started 按钮
+    cy.wait("@fetchGameStart"); // 等待拦截的请求
+    cy.wait("@getCourse"); // 等待拦截的请求
+
+    cy.url().should("include", "/main/2");
+  });
+});

apps/client/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/client/cypress/support/commands.ts

@@ -0,0 +1,82 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+Cypress.Commands.add(
+  "login",
+  function ({ phone, password }: { phone: string; password: string }) {
+    cy.intercept("POST", "/auth/login", (req) => {
+      // 断言请求体中包含特定的 phone 和 password
+      expect(req.body.phone).to.eq(phone);
+      expect(req.body.password).to.eq(password);
+
+      // 继续允许请求到达服务器或返回模拟的响应
+      req.reply({
+        statusCode: 200,
+        body: {
+          // 模拟的登录成功响应数据
+          token: "faketoken",
+          user: {
+            phone: "13812345678",
+            userId: 1,
+            username: "acui",
+          },
+        },
+      });
+    }).as("login");
+
+    cy.visit("/auth/login");
+
+    cy.get('input[type="text"]').as("phoneInput").type("13812345678");
+    cy.get('input[type="password"]')
+      .as("passwordInput")
+      .type("yourPassword{enter}");
+    cy.wait("@login");
+
+    cy.window().then((win) => {
+      const tokenInStorage = win.localStorage.getItem("token");
+      expect(tokenInStorage).to.eq("faketoken");
+    });
+
+    // we should be redirected to /
+    cy.wait(1000); // 等待 1 秒，确保页面加载完成
+    cy.url().should("eq", Cypress.config("baseUrl"));
+
+    cy.get(".dropdown").click(); // 触发下拉菜单展开
+    cy.contains("User info").should("be.visible"); // 然后检查 "User info" 是否可见
+  }
+);
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      login(params: { phone: string; password: string }): Chainable<void>;
+      //       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+      //       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+      //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+    }
+  }
+}
+
+export {};

apps/client/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

apps/client/cypress/support/component.ts

@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

apps/client/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

apps/client/package.json

@@ -9,7 +9,8 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "cypress:open": "cypress open"
   },
   "devDependencies": {
     "@bg-dev/nuxt-naiveui": "^1.9.0",
@@ -19,12 +20,14 @@
     "@vue/test-utils": "^2.4.3",
     "@vueuse/core": "^10.7.2",
     "@vueuse/nuxt": "^10.7.2",
+    "cypress": "^13.6.4",
     "daisyui": "^4.6.0",
     "happy-dom": "^13.3.1",
     "naive-ui": "^2.37.3",
     "nuxt": "^3.9.0",
     "tailwindcss": "^3.4.1",
     "vfonts": "^0.0.3",
+    "vite": "^5.1.0",
     "vitest": "^1.2.2",
     "vue": "^3.4.6",
     "vue-router": "^4.2.5"

apps/client/pages/index.vue

@@ -21,8 +21,7 @@
             </button>
           </a>
           <button @click="handleKeydown"
-            class="btn btn-outline w-48 hover:text-fuchsia-400 hover:border-fuchsia-400 hover:bg-fuchsia-100 text-fuchsia-300 border-fuchsia-300">
-            Go and get it <kbd class="kbd"> ↵ </kbd>
+            class="btn btn-outline w-48 hover:text-fuchsia-400 hover:border-fuchsia-400 hover:bg-fuchsia-100 text-fuchsia-300 border-fuchsia-300">Get Started<kbd class="kbd"> ↵ </kbd>
           </button>
         </div>
         <div class="w-1/2 flex items-center justify-center group select-none cursor-pointer rounded-xl relative m-4">