Add initial e2e tests. Implement page objects for admin and experiment page

.gitignore

@@ -10,3 +10,6 @@ yarn-error.log
 node_modules
 go.work
 go.work.sum
+
+playwright-results
+test-results

e2e-tests/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "e2e_tests",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test:e2e": "playwright test --trace on"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.28.0",
+    "typescript": "^4.9.3",
+    "uuid": "^9.0.0"
+  }
+}

e2e-tests/page-objects/BasePageObject.ts

@@ -0,0 +1,24 @@
+import { test, expect, type Page } from '@playwright/test';
+
+export type BasePageObjectConstructor = {
+    page: Page;
+    baseUrl?: string;
+}
+
+export default class BasePageObject {
+    public page: Page;
+    public baseUrl: string;
+
+    constructor({ page, baseUrl }: BasePageObjectConstructor) {
+        this.baseUrl = baseUrl ?? '';
+        this.page = page;
+    }
+
+    // Override this method if needed
+    public async open() {
+        if (this.baseUrl) {
+            this.page.goto(this.baseUrl);
+        }
+    }
+
+}

e2e-tests/page-objects/admin/AdminPage.ts

@@ -0,0 +1,28 @@
+import { expect } from "@playwright/test";
+import BasePageObject, { BasePageObjectConstructor } from "../BasePageObject";
+import BatchesPage from "./BatchesPage";
+
+
+
+
+export default class AdminPage extends BasePageObject {
+    private batchesPage: BatchesPage;
+
+    constructor({ page, baseUrl }: BasePageObjectConstructor) {
+        super({ page, baseUrl });
+
+        this.batchesPage = new BatchesPage({ page });
+    }
+
+    public async open() {
+        await this.page.goto(`${this.baseUrl}/admin`)
+
+        const leftPanel = await this.page.locator('[aria-label="Sidebar"]');
+
+        await expect(leftPanel).toBeVisible()
+    }
+
+    public getBatchesPage() {
+        return this.batchesPage;
+    }
+}

e2e-tests/page-objects/admin/BatchesPage.ts

@@ -0,0 +1,71 @@
+import { expect } from "@playwright/test";
+import BasePageObject from "../BasePageObject";
+
+
+
+export enum GamesTypeTreatment {
+    'Solo' = 'Solo',
+    'TwoPlayers' = 'Two Players',
+}
+
+
+export default class BatchesPage extends BasePageObject {
+    private getBatchesLinkInSidebar() {
+        return this.page.locator('[data-test="batchesSidebarButton"]');
+    }
+    private getNewBatchButton() {
+        return this.page.locator('[data-test="newBatchButton"]');
+    }
+
+    private getTreatmentsSelect() {
+        return this.page.locator('[data-test="treatmentSelect"]');
+    }
+
+    private getCreateBatchButton() {
+        return this.page.locator('[data-test="createBatchButton"]');
+    }
+
+    private getGameBatchLine() {
+        return this.page.locator('[data-test="batchLine"]');
+    }
+
+    private getStartGameButton() {
+        return this.page.locator('[data-test="startButton"]');
+    }
+
+    public async open() {
+        const batchesSidebarButton = await this.getBatchesLinkInSidebar();
+
+        await batchesSidebarButton.click();
+
+        const newBatchButton = await this.getNewBatchButton();
+
+        await expect(newBatchButton).toBeVisible()
+    }
+
+    public async createBatch({ mode, gamesCount }: { mode: GamesTypeTreatment, gamesCount: number}) {
+        const newBatchButton = await this.getNewBatchButton();
+
+        await newBatchButton.click();
+
+        const treatmentsSelect = await this.getTreatmentsSelect();
+
+        await treatmentsSelect.selectOption(
+            '[object Object]'
+        ); // TODO: fix displayed value in the app
+
+        const createBatchButton = await this.getCreateBatchButton();
+
+        await createBatchButton.click();
+    }
+
+    public async startGame() {
+        const batchLine = await this.getGameBatchLine();
+
+        await expect(batchLine).toBeVisible();
+
+        const startGameButton = await this.getStartGameButton();
+
+        await startGameButton.click();
+    }
+}

e2e-tests/page-objects/admin/ExportPage.ts

@@ -0,0 +1,19 @@
+import { expect } from "@playwright/test";
+import BasePageObject from "../BasePageObject";
+
+
+
+
+export default class ExportPage extends BasePageObject {
+    public async open() {
+        await this.page.goto(`${this.baseUrl}/admin`)
+
+        const leftPanel = await this.page.locator('[aria-label="Sidebar"]');
+
+        await expect(leftPanel).toBeVisible()
+    }
+
+    public async export() {
+        // TODO: implement export functionality
+    }
+}

e2e-tests/page-objects/admin/PlayersPage.ts

@@ -0,0 +1,15 @@
+import { expect } from "@playwright/test";
+import BasePageObject from "../BasePageObject";
+
+
+
+
+export default class PlayersPage extends BasePageObject {
+    public async open() {
+        await this.page.goto(`${this.baseUrl}/admin`)
+
+        const leftPanel = await this.page.locator('[aria-label="Sidebar"]');
+
+        await expect(leftPanel).toBeVisible()
+    }
+}

e2e-tests/page-objects/admin/TreatmentsPage.ts

@@ -0,0 +1,15 @@
+import { expect } from "@playwright/test";
+import BasePageObject from "../BasePageObject";
+
+
+
+
+export default class TreatmentsPage extends BasePageObject {
+    public async open() {
+        await this.page.goto(`${this.baseUrl}/admin`)
+
+        const leftPanel = await this.page.locator('[aria-label="Sidebar"]');
+
+        await expect(leftPanel).toBeVisible()
+    }
+}

e2e-tests/page-objects/main/ConsentElement.ts

@@ -0,0 +1,19 @@
+import { expect } from "@playwright/test";
+import BasePageObject from "../BasePageObject";
+
+
+
+
+export default class ConsentElement extends BasePageObject {
+    getAcceptConsentButton() {
+        return this.page.locator('button[type="button"]'); // TODO: add test id!
+    }
+
+    public async acceptConsent() {
+        const acceptConsentButton = await this.getAcceptConsentButton();
+
+        await expect(acceptConsentButton).toBeVisible();
+
+        await acceptConsentButton.click();
+    }
+}

e2e-tests/page-objects/main/ExitSurveyElement.ts

@@ -0,0 +1,45 @@
+import { expect } from "@playwright/test";
+import BasePageObject from "../BasePageObject";
+
+
+
+
+export default class ExitSurveyElement extends BasePageObject {
+    getBonusTitleElement() {
+        return this.page.getByText('Bonus');
+    }
+
+    getAgeInput() {
+        return this.page.locator('[id="age"]');
+    }
+
+    getGenderInput() {
+        return this.page.locator('[id="gender"]');
+    }
+
+    getEducationInput() {
+        return this.page.locator('[name="education"]');
+    }
+
+    getSubmitButton() {
+        return this.page.locator('button[type="submit"]');
+    }
+
+    public async fillSurvey({ age, gender }: { age: number, gender: string }) {
+        const ageInput = await this.getAgeInput();
+
+        await expect(ageInput).toBeVisible();
+
+        ageInput.fill(age.toString());
+
+        const genderInput = await this.getGenderInput();
+
+        await expect(genderInput).toBeVisible();
+
+        genderInput.fill(gender);
+
+        const submitButton = await this.getSubmitButton();
+
+        await submitButton.click();
+    }
+}