Initial Commit

.github/workflows/playwright.yml

@@ -0,0 +1,46 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  playwright:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        working-directory: ./client
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        working-directory: ./client
+        run: npx playwright install --with-deps
+
+      - name: Run the client project
+        working-directory: ./client
+        run: |
+          echo "Starting Vite dev server in the background..."
+          npm run dev &
+          echo "Waiting for Vite server to be ready..."
+          while ! nc -z localhost 5173; do
+            sleep 5
+          done
+
+      - name: Run Playwright tests
+        working-directory: ./client
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

client/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

client/e2e/fixtures/game.ts

@@ -0,0 +1,59 @@
+import type { Page } from "@playwright/test";
+import { test as base, expect } from "@playwright/test";
+import { gameListResponse } from "../mockResponses";
+import { API_ROUTES } from "../support/constant";
+
+type GameForm = {
+  gameName: string;
+  gameDescription: string;
+  gameImage: string;
+};
+
+export class Game {
+  constructor(public readonly page: Page) {}
+
+  async gotoGameList(list?: typeof gameListResponse) {
+    await this.page.route(API_ROUTES.GAME_LIST, async (route) => {
+      await route.fulfill({ json: list || gameListResponse });
+    });
+
+    await this.page.goto("/");
+  }
+
+  async gameFormValidation() {
+    await expect(
+      this.page.locator("text=Game Name must be provided")
+    ).toBeVisible();
+    await expect(
+      this.page.locator("text=Game Image must be a valid URL")
+    ).toBeVisible();
+    await expect(
+      this.page.locator("text=Description must be provided")
+    ).toBeVisible();
+  }
+
+  async fillGameForm({ gameName, gameDescription, gameImage }: GameForm) {
+    const nameInput = this.page.locator('input[placeholder="Game Name"]');
+    const descriptionInput = this.page.locator(
+      'textarea[placeholder="Game description..."]'
+    );
+    const imageInput = this.page.locator(
+      'input[placeholder="Game Image (URL Only)"]'
+    );
+
+    await nameInput.fill(gameName);
+    await descriptionInput.fill(gameDescription);
+    await imageInput.fill(gameImage);
+  }
+
+  gameReviewUrl(id: string) {
+    return `${API_ROUTES.GAME_DETAILS + "/" + id}`;
+  }
+}
+
+export const gameTest = base.extend<{ game: Game }>({
+  game: async ({ page }, use) => {
+    const game = new Game(page);
+    await use(game);
+  },
+});

client/e2e/fixtures/index.ts

@@ -0,0 +1,7 @@
+import { expect, mergeTests } from "@playwright/test";
+import { gameTest } from "./game";
+import { loginTest } from "./login";
+
+const test = mergeTests(loginTest, gameTest);
+
+export { expect, test };

client/e2e/fixtures/login.ts

@@ -0,0 +1,79 @@
+import { test as base } from "@playwright/test";
+import type { Page, Locator } from "@playwright/test";
+import {
+  createModeratorResponse,
+  gameListResponse,
+  moderatorExistsResponse,
+  moderatorNotExistsResponse,
+} from "../mockResponses";
+import { API_ROUTES } from "../support/constant";
+
+export class Login {
+  private readonly inputName: Locator;
+  private readonly inputEmail: Locator;
+  private readonly inputPassword: Locator;
+  private readonly submitButton: Locator;
+
+  constructor(public readonly page: Page) {
+    this.inputName = this.page.locator('input[placeholder="Name"]');
+    this.inputEmail = this.page.locator('input[placeholder="Email"]');
+    this.inputPassword = this.page.locator('input[placeholder="Password"]');
+    this.submitButton = this.page.locator("button");
+  }
+
+  async submitLoginForm() {
+    await this.inputEmail.fill("[email protected]");
+    await this.inputPassword.fill("password123");
+
+    await this.page.route(API_ROUTES.LOGIN, async (route) => {
+      route.fulfill({
+        body: JSON.stringify({ token: "mockToken" }),
+      });
+    });
+
+    await this.submitButton.click();
+  }
+
+  async submitCreateForm() {
+    await this.inputName.fill("John Doe");
+    await this.inputEmail.fill("[email protected]");
+    await this.inputPassword.fill("password123");
+
+    await this.page.route(API_ROUTES.CREATE_MODERATOR, async (route) => {
+      await route.fulfill({ json: createModeratorResponse });
+    });
+
+    await this.submitButton.click();
+  }
+
+  // This function will work as login and create page based on the argument
+  async gotoLoginPage(isCreatePage?: boolean) {
+    await this.page.route(API_ROUTES.CHECK_MODERATOR, async (route) => {
+      await route.fulfill({
+        json: isCreatePage
+          ? moderatorNotExistsResponse
+          : moderatorExistsResponse,
+      });
+    });
+    await this.page.goto("/login");
+  }
+
+  async gotoGamesPage() {
+    await this.gotoLoginPage();
+    await this.submitLoginForm();
+
+    await this.page.route(API_ROUTES.GAME_LIST, async (route) => {
+      await route.fulfill({ json: gameListResponse });
+    });
+
+    await this.page.goto("/games");
+    await this.page.waitForLoadState("networkidle");
+  }
+}
+
+export const loginTest = base.extend<{ login: Login }>({
+  login: async ({ page }, use) => {
+    const login = new Login(page);
+    await use(login);
+  },
+});

client/e2e/mockResponses/createModerator.ts

@@ -0,0 +1,4 @@
+export default {
+  success: true,
+  message: "Moderator created successfully",
+};