[FIX] Add Wiki tests and downgrade react-router to avoid latest regre…

…ssion for nested routing (#451)

pandora-client-web/package.json

@@ -38,8 +38,8 @@
 		"react-dom": "18.2.0",
 		"react-hook-form": "7.48.2",
 		"react-rnd": "10.4.1",
-		"react-router": "6.20.0",
-		"react-router-dom": "6.20.0",
+		"react-router": "6.18.0",
+		"react-router-dom": "6.18.0",
 		"react-toastify": "9.1.3",
 		"socket.io-client": "4.6.1",
 		"zod": "3.22.4"

pandora-tests/test/eula.test.ts

@@ -1,9 +1,10 @@
 import { test, expect } from '@playwright/test';
-import { TestOpenPandora } from './utils/helpers';
+import { TEST_EULA_TEXT, TestOpenPandora } from './utils/helpers';
 
 test.describe('EULA', () => {
 	test('Shows privacy policy', async ({ page }) => {
 		await TestOpenPandora(page, { agreeEula: false });
+		await expect(page.getByText(TEST_EULA_TEXT)).toBeVisible();
 
 		// Click privacy policy link
 		await page.getByRole('button', { name: 'privacy policy' }).click();
@@ -19,6 +20,7 @@ test.describe('EULA', () => {
 
 	test('Disagree navigates away', async ({ page }) => {
 		await TestOpenPandora(page, { agreeEula: false });
+		await expect(page.getByText(TEST_EULA_TEXT)).toBeVisible();
 
 		// Disagree button should navigate away from pandora
 		await page.getByRole('button', { name: 'Disagree' }).click();
@@ -32,13 +34,14 @@ test.describe('EULA', () => {
 			agreeEula: false,
 		});
 
-		// Disagree button should navigate away from pandora
+		await expect(page.getByText(TEST_EULA_TEXT)).toBeVisible();
 		await expect(page.getByRole('button', { name: 'Disagree' })).toBeVisible();
 		await expect(page.getByRole('button', { name: /^Agree/ })).toBeVisible();
 	});
 
 	test('Agree opens login', async ({ page }) => {
 		await TestOpenPandora(page, { agreeEula: false });
+		await expect(page.getByText(TEST_EULA_TEXT)).toBeVisible();
 
 		// Agree button opens login
 		await page.getByRole('button', { name: /^Agree/ }).click();
@@ -49,6 +52,7 @@ test.describe('EULA', () => {
 
 	test('Agreement is remembered', async ({ page }) => {
 		await TestOpenPandora(page, { agreeEula: false });
+		await expect(page.getByText(TEST_EULA_TEXT)).toBeVisible();
 
 		await page.getByRole('button', { name: /^Agree/ }).click();
 		await page.waitForURL('/login');
@@ -57,6 +61,7 @@ test.describe('EULA', () => {
 		await page.reload();
 
 		// No agreement needed
+		await expect(page.getByText(TEST_EULA_TEXT)).not.toBeVisible();
 		await page.waitForURL('/login');
 		await expect(page.getByRole('button', { name: 'Sign in', exact: true })).toBeVisible();
 	});
@@ -65,6 +70,7 @@ test.describe('EULA', () => {
 		await TestOpenPandora(page, { agreeEula: true });
 
 		// No agreement needed
+		await expect(page.getByText(TEST_EULA_TEXT)).not.toBeVisible();
 		await page.waitForURL('/login');
 		await expect(page.getByRole('button', { name: 'Sign in', exact: true })).toBeVisible();
 	});

pandora-tests/test/utils/helpers.ts

@@ -1,4 +1,4 @@
-import { ConsoleMessage, Page } from '@playwright/test';
+import { ConsoleMessage, Page, expect } from '@playwright/test';
 
 const handleLog = (message: ConsoleMessage) => {
 	if (message.type() === 'error') {
@@ -35,7 +35,14 @@ export async function TestOpenPandora(page: Page, options: TestOpenPandoraOption
 	await page.goto(options.path ?? '/');
 
 	if (options.agreeEula !== false) {
-		await page.getByRole('button', { name: /^Agree/ }).click();
-		await page.waitForURL('/login');
+		await TestPandoraAgreeEula(page);
 	}
 }
+
+// EULA helper
+export const TEST_EULA_TEXT = 'By playing this game, you agree to the following:';
+async function TestPandoraAgreeEula(page: Page): Promise<void> {
+	await expect(page.getByText(TEST_EULA_TEXT)).toBeVisible();
+	await page.getByRole('button', { name: /^Agree/ }).click();
+	await expect(page.getByText(TEST_EULA_TEXT)).not.toBeVisible();
+}

pandora-tests/test/wiki.test.ts

@@ -0,0 +1,55 @@
+import { test, expect } from '@playwright/test';
+import { TestOpenPandora } from './utils/helpers';
+
+test.describe('Wiki', () => {
+	test('Selects default tab', async ({ page }) => {
+		await TestOpenPandora(page, { path: '/wiki' });
+
+		await page.waitForURL('/wiki/introduction');
+		await expect(page.getByRole('button', { name: 'Introduction' })).toHaveClass('tab active');
+		await expect(page.getByRole('heading', { name: 'Introduction to Pandora' })).toBeVisible();
+	});
+
+	test('Loads specific tab directly based on url', async ({ page }) => {
+		await TestOpenPandora(page, { path: '/wiki/history' });
+
+		await expect(page.getByRole('button', { name: 'Introduction' })).toHaveClass('tab');
+		await expect(page.getByRole('button', { name: 'Pandora History' })).toHaveClass('tab active');
+		await expect(page.getByRole('heading', { name: `Pandora's history`, exact: true })).toBeVisible();
+	});
+
+	test('Switches tabs', async ({ page }) => {
+		await TestOpenPandora(page, { path: '/wiki/introduction' });
+
+		// Initial tab is introcution
+		await expect(page.getByRole('button', { name: 'Introduction' })).toHaveClass('tab active');
+		await expect(page.getByRole('button', { name: 'Contact' })).toHaveClass('tab');
+		await expect(page.getByRole('heading', { name: 'Introduction to Pandora' })).toBeVisible();
+		await page.waitForURL('/wiki/introduction');
+
+		// Nothing changes when clicking already selected tab
+		await page.getByRole('button', { name: 'Introduction' }).click();
+		await expect(page.getByRole('button', { name: 'Introduction' })).toHaveClass('tab active');
+		await expect(page.getByRole('button', { name: 'Contact' })).toHaveClass('tab');
+		await expect(page.getByRole('heading', { name: 'Introduction to Pandora' })).toBeVisible();
+		await page.waitForURL('/wiki/introduction');
+
+		// Switch to tab "Contact"
+		await page.getByRole('button', { name: 'Contact' }).click();
+		await expect(page.getByRole('button', { name: 'Contact' })).toHaveClass('tab active');
+		await expect(page.getByRole('heading', { name: 'Contact Us', exact: true })).toBeVisible();
+		await page.waitForURL('/wiki/contact');
+
+		await expect(page.getByRole('button', { name: 'Introduction' })).toHaveClass('tab');
+		await expect(page.getByRole('heading', { name: 'Introduction to Pandora' })).not.toBeVisible();
+	});
+
+	test('Uses back button', async ({ page }) => {
+		await TestOpenPandora(page, { path: '/wiki/introduction' });
+
+		// Initial tab is introcution
+		await expect(page.getByRole('button', { name: 'Introduction' })).toHaveClass('tab active');
+		await page.getByRole('button', { name: 'Back' }).click();
+		await page.waitForURL('/login');
+	});
+});