From d269bc395d671fba4994a5347927fe6cc17e4111 Mon Sep 17 00:00:00 2001 From: FranGuam <53105842+FranGuam@users.noreply.github.com> Date: Fri, 8 Mar 2024 19:54:29 +0800 Subject: [PATCH] feat(test): try out tests on login (#1630) * fix: non-empty env var * feat(test): try out tests on login * fix --- codegen.ts | 2 +- playwright.config.ts | 2 +- src/api/notification.ts | 2 +- src/api/utils/application.ts | 2 +- src/app/ContestSite/PlaybackPage.tsx | 4 +- src/app/HomeSite/ContestPage.tsx | 46 +++++++++--------- src/app/HomeSite/DivisionPage.tsx | 30 ++++++------ src/app/HomeSite/NewsPage.tsx | 8 ++-- src/app/index.tsx | 3 +- src/index.tsx | 4 +- tests/example.spec.ts | 20 -------- tests/user.spec.ts | 72 ++++++++++++++++++++++++++++ 12 files changed, 124 insertions(+), 71 deletions(-) delete mode 100644 tests/example.spec.ts create mode 100644 tests/user.spec.ts diff --git a/codegen.ts b/codegen.ts index 83c010599..d07d2dbd9 100644 --- a/codegen.ts +++ b/codegen.ts @@ -13,7 +13,7 @@ const config = { { [process.env.REACT_APP_HASURA_DEV_HTTPLINK!]: { headers: { - "x-hasura-admin-secret": process.env.HASURA_GRAPHQL_ADMIN_SECRET, + "x-hasura-admin-secret": process.env.HASURA_GRAPHQL_ADMIN_SECRET!, }, }, }, diff --git a/playwright.config.ts b/playwright.config.ts index 594858da9..f1946a11f 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -71,7 +71,7 @@ export default defineConfig({ /* Run your local dev server before starting the tests */ webServer: { command: "yarn start", - url: "http://localhost:3000/?source=test", + url: "http://localhost:3000", reuseExistingServer: !process.env.CI, }, }); diff --git a/src/api/notification.ts b/src/api/notification.ts index 12d578506..7f2409d80 100644 --- a/src/api/notification.ts +++ b/src/api/notification.ts @@ -36,7 +36,7 @@ export const subscribe = async () => { try { subscription = await serviceWorker.pushManager.subscribe({ userVisibleOnly: true, - applicationServerKey: process.env.REACT_APP_PUSH_PUBLICKEY, + applicationServerKey: process.env.REACT_APP_PUSH_PUBLICKEY!, }); } catch (err) { console.log("Failed to subscribe the user: ", err); diff --git a/src/api/utils/application.ts b/src/api/utils/application.ts index 7dbe47506..fdf0c46f4 100644 --- a/src/api/utils/application.ts +++ b/src/api/utils/application.ts @@ -30,7 +30,7 @@ export const generateThankLetter = async ( ) => { const templateData = await new Promise((resolve) => PizZipUtils.getBinaryContent( - `${process.env.REACT_APP_STATIC_URL}/public/files/thankletter-template.docx`, + `${process.env.REACT_APP_STATIC_URL!}/public/files/thankletter-template.docx`, (err: any, content: any) => resolve(content), ), ); diff --git a/src/app/ContestSite/PlaybackPage.tsx b/src/app/ContestSite/PlaybackPage.tsx index 81b481666..34456b697 100644 --- a/src/app/ContestSite/PlaybackPage.tsx +++ b/src/app/ContestSite/PlaybackPage.tsx @@ -46,10 +46,10 @@ const PlaybackPage: React.FC = ({ mode, user }) => { } }); - let projectUrl = process.env.REACT_APP_STATIC_URL + "/public/WebGL/THUAI6/"; + let projectUrl = process.env.REACT_APP_STATIC_URL! + "/public/WebGL/THUAI6/"; let projectName = "THUAI6_WebGL"; if (Contest_id === "jump") { - projectUrl = process.env.REACT_APP_STATIC_URL + "/public/WebGL/Jump/"; + projectUrl = process.env.REACT_APP_STATIC_URL! + "/public/WebGL/Jump/"; projectName = "JumpJump-Build"; } diff --git a/src/app/HomeSite/ContestPage.tsx b/src/app/HomeSite/ContestPage.tsx index fb2df124c..30d7dcd62 100644 --- a/src/app/HomeSite/ContestPage.tsx +++ b/src/app/HomeSite/ContestPage.tsx @@ -43,7 +43,7 @@ const ContestPage: React.FC = ({ mode, user }) => {
队式十六——深蓝 (Deep Blue) 队式十六——深蓝 (Deep Blue)
@@ -51,7 +51,7 @@ const ContestPage: React.FC = ({ mode, user }) => {
队式十七——Stellar Craft 队式十七——Stellar Craft
@@ -59,7 +59,7 @@ const ContestPage: React.FC = ({ mode, user }) => {
队式十八——CPClash 队式十八——CPClash
@@ -67,7 +67,7 @@ const ContestPage: React.FC = ({ mode, user }) => {
队式十九 2018 年，队式十九作为 A1 组比赛合并到 THU-AI 中
@@ -75,7 +75,7 @@ const ContestPage: React.FC = ({ mode, user }) => {
队式二十——THU-AI 枪林弹雨组 队式二十——THU-AI 枪林弹雨组
@@ -98,7 +98,7 @@ const ContestPage: React.FC = ({ mode, user }) => {
第十八届电子设计大赛——天赐良机 第十八届电子设计大赛——天赐良机
@@ -106,7 +106,7 @@ const ContestPage: React.FC = ({ mode, user }) => {
第十九届电子设计大赛——绿茵荣耀 第十九届电子设计大赛——绿茵荣耀
@@ -114,7 +114,7 @@ const ContestPage: React.FC = ({ mode, user }) => {
第二十届电子设计大赛——智圆行方 第二十届电子设计大赛——智圆行方
@@ -139,13 +139,13 @@ const ContestPage: React.FC = ({ mode, user }) => { 2017 年硬件设计大赛作品 1 2017 年硬件设计大赛作品 2 @@ -158,13 +158,13 @@ const ContestPage: React.FC = ({ mode, user }) => { 2018 年硬件设计大赛作品 1 2018 年硬件设计大赛作品 2 @@ -177,13 +177,13 @@ const ContestPage: React.FC = ({ mode, user }) => { 2019 年硬件设计大赛作品 1 2019 年硬件设计大赛作品 2 @@ -230,19 +230,19 @@ const ContestPage: React.FC = ({ mode, user }) => {
多功能计算器 CalcPro 多功能计算器 CalcPro
简易操作系统 BASIC-OS1 简易操作系统 BASIC-OS1
校园网管理软件 .NetCampus 校园网管理软件 .NetCampus
@@ -255,19 +255,19 @@ const ContestPage: React.FC = ({ mode, user }) => {
音乐节奏游戏 TuneStory 音乐节奏游戏 TuneStory
三角形滤镜 LowPoly 三角形滤镜 LowPoly
在线多功能绘图 在线多功能绘图
@@ -413,19 +413,19 @@ const ContestPage: React.FC = ({ mode, user }) => {
第十五届决赛 第十五届决赛
第十六届决赛 第十六届决赛
第十七届决赛 第十七届决赛
diff --git a/src/app/HomeSite/DivisionPage.tsx b/src/app/HomeSite/DivisionPage.tsx index 9e8a61870..e83a2436e 100644 --- a/src/app/HomeSite/DivisionPage.tsx +++ b/src/app/HomeSite/DivisionPage.tsx @@ -47,7 +47,7 @@ const DivisionPage: React.FC = ({ mode, user }) => { 软件部 软件部集体照 @@ -70,13 +70,13 @@ const DivisionPage: React.FC = ({ mode, user }) => { 软件部培训 1 软件部培训 2 @@ -95,7 +95,7 @@ const DivisionPage: React.FC = ({ mode, user }) => { 硬件部 division-introduction-hardware-group
@@ -112,13 +112,13 @@ const DivisionPage: React.FC = ({ mode, user }) => { 硬件设计大赛 1 硬件设计大赛 2 @@ -132,13 +132,13 @@ const DivisionPage: React.FC = ({ mode, user }) => { 电子设计大赛 1 电子设计大赛 2 @@ -170,13 +170,13 @@ const DivisionPage: React.FC = ({ mode, user }) => { 项目部 1 项目部 2 @@ -214,13 +214,13 @@ const DivisionPage: React.FC = ({ mode, user }) => { 新生信息知识竞赛 1 新生信息知识竞赛 2 @@ -266,7 +266,7 @@ const DivisionPage: React.FC = ({ mode, user }) => { 科创年会 1 @@ -294,13 +294,13 @@ const DivisionPage: React.FC = ({ mode, user }) => { 科创年会 2 科创年会 3 diff --git a/src/app/HomeSite/NewsPage.tsx b/src/app/HomeSite/NewsPage.tsx index 7a19b5813..aff48618b 100644 --- a/src/app/HomeSite/NewsPage.tsx +++ b/src/app/HomeSite/NewsPage.tsx @@ -9,23 +9,23 @@ const news = [ { title: "清华大学电子工程系学生科协", content: "宽口径、厚基础，我们软硬皆通。", - image: `${process.env.REACT_APP_STATIC_URL}/public/images/eesast-group-photo-2023.jpg`, + image: `${process.env.REACT_APP_STATIC_URL!}/public/images/eesast-group-photo-2023.jpg`, }, { title: "“商汤杯”第二十一届电子设计大赛", content: "本次电子设计大赛主题为“火线救援”。", - image: `${process.env.REACT_APP_STATIC_URL}/public/images/edc-2019-logo-background.png`, + image: `${process.env.REACT_APP_STATIC_URL!}/public/images/edc-2019-logo-background.png`, }, { title: "新生信息知识竞赛", content: "新生们登上信息学院的大舞台，凭借自己的知识与才智，展开一场激烈的角逐。", - image: `${process.env.REACT_APP_STATIC_URL}/public/images/knowledge-contest-2019.jpg`, + image: `${process.env.REACT_APP_STATIC_URL!}/public/images/knowledge-contest-2019.jpg`, }, { title: "硬件设计大赛", content: "课赛结合，快速入门，感受硬件的魅力", - image: `${process.env.REACT_APP_STATIC_URL}/public/images/hardware-design-contest-2019.jpg`, + image: `${process.env.REACT_APP_STATIC_URL!}/public/images/hardware-design-contest-2019.jpg`, }, ]; diff --git a/src/app/index.tsx b/src/app/index.tsx index eaaf9e7bd..8268ef7be 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -361,7 +361,8 @@ const App: React.FC = () => { const TourGuide = () => { const [open, setOpen] = useState( - localStorage.getItem("tour") !== "true", + localStorage.getItem("tour") !== "true" && + process.env.NODE_ENV !== "development", ); return ( { - await page.goto("https://playwright.dev/"); - - // Expect a title "to contain" a substring. - await expect(page).toHaveTitle(/Playwright/); -}); - -test("get started link", async ({ page }) => { - await page.goto("https://playwright.dev/"); - - // Click the get started link. - await page.getByRole("link", { name: "Get started" }).click(); - - // Expects page to have a heading with the name of Installation. - await expect( - page.getByRole("heading", { name: "Installation" }), - ).toBeVisible(); -}); diff --git a/tests/user.spec.ts b/tests/user.spec.ts new file mode 100644 index 000000000..3d73274a6 --- /dev/null +++ b/tests/user.spec.ts @@ -0,0 +1,72 @@ +import { test, expect, type Page } from "@playwright/test"; + +test.beforeEach(async ({ page }) => { + await page.goto("http://localhost:3000/"); +}); + +const account = { + username: "xuesheng", + email: "xuesheng@test.com", + phone: "19168067312", + password: "Abc!11111111", +}; + +async function login(page: Page, user: string, password: string) { + await page.getByRole("button", { name: "登 录" }).click(); + await page.getByPlaceholder("用户名/邮箱/手机号").fill(user); + await page.getByPlaceholder("密码").fill(password); + await page.getByRole("main").getByRole("button", { name: "登 录" }).click(); +} + +test.describe("Login", () => { + // test("should login with username", async ({ page }) => { + // await login(page, account.username, account.password); + // await expect(page.getByRole('heading', { name: '用户信息' })).toBeVisible(); + // }); + + test("should login with email", async ({ page }) => { + await login(page, account.email, account.password); + await expect(page.getByRole("heading", { name: "用户信息" })).toBeVisible(); + }); + + test("should login with phone", async ({ page }) => { + await login(page, account.phone, account.password); + await expect(page.getByRole("heading", { name: "用户信息" })).toBeVisible(); + }); +}); + +test.describe("Profile", () => { + test.beforeEach(async ({ page }) => { + await login(page, account.email, account.password); + }); + + test("should update department", async ({ page }) => { + if ((await page.getByRole("rowgroup").innerText()).includes("电子系")) { + await page + .getByRole("cell", { name: "电子系 edit" }) + .locator("svg") + .click(); + await page.getByText("电子系").click(); + await page.getByTitle("医学院").locator("div").click(); + await page + .getByRole("row", { name: "院系 : 医学院 医学院 check close" }) + .locator("a") + .first() + .click(); + await expect(page.getByRole("rowgroup")).toContainText("医学院"); + } else { + await page + .getByRole("cell", { name: "医学院 edit" }) + .locator("svg") + .click(); + await page.getByText("医学院").click(); + await page.getByTitle("电子系").locator("div").click(); + await page + .getByRole("row", { name: "院系 : 电子系 电子系 check close" }) + .locator("a") + .first() + .click(); + await expect(page.getByRole("rowgroup")).toContainText("电子系"); + } + }); +});