add some basic navigation tests

Author: CollinBeczak

.github/workflows/playwright.yml

@@ -21,6 +21,8 @@ chimp.js
 .DS_Store
 .env.local
 .env.*.local
+.env.test
+.env.*.test
 /public/env.json
 
 npm-debug.log*

.gitignore

@@ -0,0 +1,20 @@
+// @ts-check
+import { test, expect } from '@playwright/test';
+
+test.describe('Navigation (Logged In)', () => {
+  test.beforeEach(async ({ page }) => {
+    // Login before each test
+    await page.goto('http://localhost:3000');
+    await page.locator('a').filter({ hasText: 'Sign in' }).click();
+    await page.getByLabel('Email Address or Username').fill(process.env.REACT_APP_USERNAME || "");
+    await page.getByLabel('Password').fill(process.env.REACT_APP_PASSWORD || "");
+    await page.getByRole('button', { name: 'Log in' }).click();
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveTitle(/MapRoulette/);
+  });
+
+  test('should navigate to Find Chalslenges', async ({ page }) => {
+    await page.getByRole('navigation').getByRole('link', { name: 'Find Challenges' }).click();
+    await expect(page.getByRole('heading', { name: 'Challenges' }).locator('span')).toBeVisible();
+  });
+});

e2eTests/loggedInNavigation.spec.js

@@ -0,0 +1,33 @@
+// @ts-check
+import { test, expect } from '@playwright/test';
+
+test.describe('Navigation (Logged Out)', () => {
+
+  test.beforeEach(async ({ page }) => { 
+    await page.goto('http://localhost:3000');
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveTitle(/MapRoulette/);
+  });
+
+  test('should load find challenges page', async ({ page }) => {
+    await page.getByRole('navigation').getByRole('link', { name: 'Find Challenges' }).click();
+    await expect(page.getByRole('heading', { name: 'Challenges' }).locator('span')).toBeVisible();
+    await expect(page.locator('a').filter({ hasText: 'Sign in' })).toBeVisible();
+  });
+  test('should load leaderboard page', async ({ page }) => {
+    await page.getByRole('navigation').getByRole('link', { name: 'Leaderboard' }).click();
+    await page.waitForLoadState('networkidle');
+  });
+  test('should load learn page', async ({ page }) => {
+    await page.getByRole('navigation').getByRole('link', { name: 'Learn' }).click();
+    await page.waitForLoadState('networkidle');
+  });
+  test('should load blog page', async ({ page }) => {
+    await page.getByRole('navigation').getByRole('link', { name: 'Blog' }).click();
+    await page.waitForLoadState('networkidle');
+  });
+  test('should load donate page', async ({ page }) => {
+    await page.getByRole('navigation').getByRole('link', { name: 'Donate' }).click();
+    await page.waitForLoadState('networkidle');
+  });
+});

e2eTests/loggedOutNavigation.spec.js

@@ -147,7 +147,8 @@
     "test": "vitest",
     "test:cov": "vitest run --coverage",
     "lint": "eslint src/",
-    "explore": "source-map-explorer --only-mapped --no-border-checks 'dist/**/*.js'"
+    "explore": "source-map-explorer --only-mapped --no-border-checks 'dist/**/*.js'",
+    "test:e2e":"playwright test --ui"
   },
   "browserslist": [
     ">0.2%",

package.json

@@ -1,19 +1,27 @@
 // @ts-check
+const path = require('path');
 const { defineConfig, devices } = require('@playwright/test');
-
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config({ path: path.resolve(__dirname, '.env') });
+require('dotenv').config({ path: path.resolve(__dirname, '.env.local') });
+
+// Validate required environment variables
+const requiredEnvVars = ['REACT_APP_USERNAME', 'REACT_APP_PASSWORD'];
+requiredEnvVars.forEach(envVar => {
+  if (!process.env[envVar]) {
+    throw new Error(`Required environment variable ${envVar} is missing. Please add it to .env.local`);
+  }
+});
 
 /**
  * @see https://playwright.dev/docs/test-configuration
  */
 module.exports = defineConfig({
-  testDir: './tests',
+  testDir: './e2eTests',
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
@@ -22,13 +30,17 @@ module.exports = defineConfig({
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+
+    // Add environment variables to be available in tests
+    env: {
+      REACT_APP_USERNAME: process.env.REACT_APP_USERNAME,
+      REACT_APP_PASSWORD: process.env.REACT_APP_PASSWORD,
+    },
   },
 
   /* Configure projects for major browsers */
@@ -47,33 +59,6 @@ module.exports = defineConfig({
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
     },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
 });