Merge pull request #42 from fjordllc/chore/create-first-e2e-test

はじめてのE2Eテストを作成する

.github/workflows/ci.yml

@@ -34,16 +34,35 @@ jobs:
 
   test:
     needs: setup
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
         with:
           node-version: ${{ env.NODE_VERSION }}
+      - run: npx playwright install --with-deps
+      - run: npx supabase start
+      - run: npx supabase db reset
+      - name: Generate .env.local for test environment
+        run: |
+          STATUS_OUTPUT=$(npx supabase status)
+          API_URL=$(echo "$STATUS_OUTPUT" | grep "API URL:" | awk '{print $3}')
+          ANON_KEY=$(echo "$STATUS_OUTPUT" | grep "anon key:" | awk '{print $3}')
+          echo "NEXT_PUBLIC_SUPABASE_URL=$API_URL" > .env.local
+          echo "NEXT_PUBLIC_SUPABASE_ANON_KEY=$ANON_KEY" >> .env.local
+      - run: npm run build
+      - run: npm run start &
+      - name: Wait Front Response
+        run: |
+          curl --retry 5 --max-time 5 http://localhost:3000
+      - name: Install PostgreSQL Client
+        run: sudo apt update && sudo apt install -y postgresql-client
       - run: npm run test
-
-
-
-
-
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
 

.gitignore

@@ -34,3 +34,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/login_then_logout.test.ts

@@ -0,0 +1,62 @@
+import { describe } from "node:test";
+import { expect } from "@playwright/test";
+import { withSupawright } from "supawright";
+import type { Database } from "../src/lib/database.types";
+
+const test = withSupawright<Database, "public">(["public"]);
+
+describe("Login and Logout E2E test", () => {
+  let validEmail: string | undefined;
+  const e2ePassword = "e2e_password";
+
+  test.beforeEach(async ({ supawright }) => {
+    const attributes = {
+      password: e2ePassword,
+      email_confirm: true,
+    };
+    const user = await supawright.createUser(attributes);
+    validEmail = user.email;
+  });
+
+  test("Should Success Login with valid Email and Password then Logout", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/");
+    await page.getByRole("link", { name: "ログイン" }).click();
+
+    console.log(`valid email: ${validEmail}`);
+
+    await page.getByPlaceholder("[email protected]").fill(validEmail ?? "");
+    await page.getByLabel("Password").fill(e2ePassword);
+    await page.getByRole("button", { name: "ログイン" }).click();
+
+    const logoutButton = page.getByRole("link", { name: "ログアウト" });
+    await expect(logoutButton).toBeVisible();
+
+    /** 現在リロードしないと画面が更新されずログイン、サインインが表示されない **/
+    await logoutButton.click();
+    await page.waitForTimeout(1500);
+
+    await page.reload();
+
+    const loginButton = page.getByRole("link", { name: "ログイン" });
+    const signInButton = page.getByRole("link", { name: "ユーザー登録" });
+
+    await expect(loginButton).toBeVisible();
+    await expect(signInButton).toBeVisible();
+  });
+
+  test("Should Fail Login with Invalid Email and Password", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/");
+    await page.getByRole("link", { name: "ログイン" }).click();
+
+    await page.getByPlaceholder("[email protected]").fill("[email protected]");
+    await page.getByLabel("Password").fill("invalidpassword");
+    await page.getByRole("button", { name: "ログイン" }).click();
+
+    const loginButton = page.getByRole("button", { name: "ログイン" });
+    await expect(loginButton).toBeVisible();
+  });
+});

jest.config.ts

@@ -26,6 +26,7 @@ const config: Config = {
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
   },
+  testPathIgnorePatterns: ["/e2e/"],
 };
 
 export default createJestConfig(config);