test: E2E tests for dashboard

e2e/utils/config.ts

@@ -3,7 +3,7 @@ export const config = {
   userId: process.env["REEARTH_WEB_E2E_USER_ID"],
   userName: process.env["REEARTH_WEB_E2E_USERNAME"],
   password: process.env["REEARTH_WEB_E2E_PASSWORD"],
-  teamId: process.env["REEARTH_WEB_E2E_TEAM_ID"],
+  workspaceId: process.env["REEARTH_WEB_E2E_TEAM_ID"],
   authAudience: process.env["REEARTH_WEB_AUTH0_AUDIENCE"],
   authClientId: process.env["REEARTH_WEB_AUTH0_CLIENT_ID"],
   authUrl: process.env["REEARTH_WEB_AUTH0_DOMAIN"],

e2e/utils/index.ts

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { type APIRequestContext, request, test as base, type Page } from "@playwright/test";
+// import Workspace from "@reearth/components/molecules/Dashboard/Workspace";
 
 import { config, getAccessToken, type Config } from "./config";
 
@@ -76,11 +77,11 @@ export async function initUser(
     throw new Error("access token is not initialized");
   }
 
-  const { userName, userId, teamId, api, signUpSecret } = config;
+  const { userName, userId, workspaceId: teamId, api, signUpSecret } = config;
 
   if (!userName || !userId || !teamId || !api) {
     throw new Error(
-      `either userName, userId, teamId and api are missing: ${JSON.stringify({
+      `either userName, userId,teamId and api are missing: ${JSON.stringify({
         userName,
         userId,
         teamId,
@@ -96,7 +97,7 @@ export async function initUser(
     data: {
       query: `mutation($userId: ID!, $teamId: ID!, $lang: Lang, $secret: String) {
         deleteMe(input: { userId: $userId }) { userId }
-        signup(input: { lang: $lang, userId: $userId, teamId: $teamId, secret: $secret }) { user { id } }
+        signup(input: { lang: $lang, userId: $userId,teamId: $teamId, secret: $secret }) { user { id } }
       }`,
       variables: {
         userId,

playwright.config.ts

@@ -2,12 +2,27 @@ import { type PlaywrightTestConfig } from "@playwright/test";
 import dotenv from "dotenv";
 
 dotenv.config();
+const localHost = "http://localhost:3000/";
+const isLocal =
+  !process.env.REEARTH_WEB_E2E_BASEURL || process.env.REEARTH_WEB_E2E_BASEURL.includes(localHost);
 
 const config: PlaywrightTestConfig = {
+  ...(isLocal
+    ? {
+        webServer: {
+          command: "yarn start",
+          url: localHost,
+        },
+      }
+    : {}),
   use: {
-    baseURL: process.env.REEARTH_WEB_E2E_BASEURL || "http://localhost:3000/",
-    screenshot: "only-on-failure",
-    video: "retain-on-failure",
+    // baseURL: process.env.REEARTH_WEB_E2E_BASEURL || "http://localhost:3000/",
+    baseURL: process.env.REEARTH_WEB_E2E_BASEURL || localHost,
+    headless: false,
+    screenshot: "on",
+    video: "on",
+    // screenshot: "only-on-failure",
+    // video: "retain-on-failure",
   },
   testDir: "e2e",
   globalSetup: "./e2e/utils/setup.ts",

src/components/molecules/Dashboard/index.tsx

@@ -36,7 +36,8 @@ const Dashboard: React.FC<Props> = ({
       ref={wrapperRef}
       onScroll={e => {
         !isLoading && hasMoreProjects && onScrollToBottom(e, onGetMoreProjects);
-      }}>
+      }}
+      data-testid="dashboard-wrapper">
       {header}
       <Content>
         {children}