fix: one simple e2e test

Author: ZibanPirate

web/cypress.config.ts

@@ -0,0 +1,13 @@
+import { fsConfig } from "@dzcode.io/utils/dist/config";
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: fsConfig("development").web.url,
+    supportFile: false,
+    specPattern: "src/_e2e-test/tests/**/*.spec.{js,jsx,ts,tsx}",
+    downloadsFolder: "src/_e2e-test/downloads",
+    videosFolder: "src/_e2e-test/videos",
+    screenshotsFolder: "src/_e2e-test/screenshots",
+  },
+});

web/package.json

@@ -23,6 +23,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
+    "cypress": "^13.14.1",
     "daisyui": "^4.12.10",
     "globals": "^15.8.0",
     "postcss": "^8.4.39",
@@ -32,7 +33,8 @@
     "react-router-dom": "^6.24.1",
     "sitemap": "^7.1.1",
     "tailwindcss": "^3.4.4",
-    "typescript-eslint": "^7.15.0"
+    "typescript-eslint": "^7.15.0",
+    "wait-on": "^8.0.0"
   },
   "engines": {
     "node": ">=16",
@@ -58,6 +60,7 @@
     "clean:alone": "rimraf dist coverage bundle node_modules/.cache",
     "deploy": "yarn generate:sitemap && rimraf ./firebase/public && cpx -u \"./bundle/**/*\" ./firebase/public && cd ./firebase && firebase deploy --only hosting:dzcode.io --token \"$FIREBASE_TOKEN\"",
     "deploy:stg": "yarn generate:sitemap && rimraf ./firebase/public && cpx -u \"./bundle/**/*\" ./firebase/public && cd ./firebase && firebase deploy --only hosting:stage.dzcode.io --token \"$FIREBASE_TOKEN\"",
+    "e2e:dev": "yarn wait-on http://localhost:8080/ && yarn cypress open",
     "generate:bundle-info": "ts-node ../packages/tooling/bundle-info.ts",
     "generate:sentry-release": "ts-node ../packages/tooling/sentry-release.ts web bundle",
     "generate:sitemap": "cross-env TS_NODE_SKIP_PROJECT=true ts-node --compilerOptions \"{\\\"baseUrl\\\": \\\".\\\"}\" src/_build/sitemap.ts",

web/rsbuild.config.ts

@@ -24,6 +24,9 @@ export default defineConfig({
   html: {
     template: "./src/_entry/main.html",
   },
+  server: {
+    port: 8080,
+  },
   output: {
     distPath: {
       root: "./bundle",

web/src/_e2e-test/tests/landing.spec.ts

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+
+describe("Landing Page", () => {
+  it("should redirect to `/faq` when clicking on `FAQ`", () => {
+    cy.visit("/");
+    cy.get('[data-testid="top-bar-to:/faq"]').click();
+    cy.url().should("contain", "/faq");
+  });
+});

web/src/components/top-bar.tsx

@@ -115,6 +115,7 @@ export function TopBar({ version, links }: TopBarProps): JSX.Element {
               key={index}
               role="tab"
               className={`tab ${activeIndex === index ? "tab-active" : ""}`}
+              data-testid={`top-bar-to:${href}`}
             >
               <Locale {...{ localeKey }} />
             </Link>