Merge pull request #83 from Open-Model-Initiative/80-update-playwrigh…

…t-setup

Initial work to run Playwright as a GitHub action on our new end to end setup

.github/workflows/playwright.yml

@@ -0,0 +1,106 @@
+name: Playwright Tests
+on:
+  pull_request:
+    branches: [ main ]
+jobs:
+  test:
+    timeout-minutes: 10
+    continue-on-error: true # For now, until things are more stable.
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: modules/odr_frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: |
+          npm install -g pnpm
+          pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Install Task
+        uses: arduino/setup-task@v2
+        with:
+          version: 3.x
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create temp root .env file
+        working-directory: .
+        run: |
+          cat << EOF > .env
+          ROOT_DIR=.
+          MODEL_CACHE_DIR=
+
+          POSTGRES_HOST=localhost
+          POSTGRES_DB=odr_pipeline
+          POSTGRES_USER=odr_pipeline
+          POSTGRES_PASSWORD=odr_pipeline
+          POSTGRES_PORT=35432
+          TEST_POSTGRES_DB=test_odr_pipeline
+
+          [email protected]
+          PGADMIN_DEFAULT_PASSWORD=pipeline
+
+          JWT_SECRET=pipelinesecret
+          JWT_ALGORITHM=HS256
+          JWT_EXPIRATION_SECONDS=3600
+
+          SESSION_MAX_AGE_SECONDS=4233600
+
+          [email protected]
+          DEFAULT_SUPERUSER_PASSWORD=pipeline
+          DEFAULT_SUPERUSER_USERNAME=pipeline
+
+          GOOGLE_CLIENT_ID=google_client_id
+          GOOGLE_CLIENT_SECRET=google_client_secret
+
+          GITHUB_CLIENT_ID=github_client_id
+          GITHUB_CLIENT_SECRET=github_client_secret
+
+          DISCORD_CLIENT_ID=discord_client_id
+          DISCORD_CLIENT_SECRET=discord_client_secret
+
+          OAUTH2_REDIRECT_PATH=docs
+
+          HF_TOKEN=pipeline_token
+          HF_HDR_DATASET_NAME=openmodelinitiative/pipeline-hdr-submissions
+          EOF
+      - name: Create temp frontend .env file
+        run: |
+          cat << EOF > .env
+          PUBLIC_API_BASE_URL=http://localhost:31100
+          API_SERVICE_URL=http://odr-api:31100
+
+          AUTH_SECRET=authpipeline
+
+          GOOGLE_CLIENT_ID=google_client_id
+          GOOGLE_CLIENT_SECRET=google_client_secret
+
+          GITHUB_CLIENT_ID=github_client_id
+          GITHUB_CLIENT_SECRET=github_client_secret
+
+          DISCORD_CLIENT_ID=discord_client_id
+          DISCORD_CLIENT_SECRET=discord_client_secret
+
+          POSTGRES_HOST=postgres
+          POSTGRES_DB=odr_pipeline
+          POSTGRES_USER=odr_pipeline
+          POSTGRES_PASSWORD=odr_pipeline
+          POSTGRES_PORT=5432
+          TEST_POSTGRES_DB=test_odr_pipeline
+          EOF
+      - name: Create Docker network
+        run: docker network inspect omi-network >/dev/null 2>&1 || docker network create omi-network
+      - name: Run Playwright tests
+        working-directory: .
+        run: |
+          chmod +x run-playwright.sh
+          ./run-playwright.sh
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: modules/odr_frontend/playwright-report/
+          retention-days: 7

modules/odr_frontend/playwright.config.ts

@@ -1,16 +1,17 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
-	},
 	testDir: 'tests',
+	forbidOnly: !!process.env.CI,
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/,
 	use: {
-		baseURL: 'http://localhost:4173'
-		// headless: false
-	}
+		baseURL: 'http://localhost:5173',
+		headless: true
+	},
+	reporter: [
+        ['html', { outputFolder: 'playwright-report' }],
+        ['list']
+    ]
 };
 
 export default config;

modules/odr_frontend/tests/test.ts

@@ -1,6 +1,56 @@
 import { expect, test } from '@playwright/test';
 
-test('home page has expected title', async ({ page }) => {
+test('Auth page has expected home link', async ({ page }) => {
 	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Authenticate.' })).toBeVisible();
+	await expect(page.getByRole('link', { name: 'OMI DATA PIPELINE' })).toBeVisible();
+});
+
+test('Auth page has expected sign in options', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByTestId('app-bar').getByRole('button', { name: 'GitHub' })).toBeVisible();
+	await expect(page.getByTestId('app-bar').getByRole('button', { name: 'Discord' })).toBeVisible();
+
+	await expect(page.getByRole('button', { name: 'Sign In with GitHub' })).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Sign In with Discord' })).toBeVisible();
+});
+
+test('Auth page has expected footer links', async ({ page }) => {
+	await page.goto('/');
+
+	// TODO: Update footer icons to have better user accessible locators.
+	// Get all links
+	const links = page.getByRole('link');
+
+	// Check the first link (index 1)
+	const firstLink = links.nth(1);
+	await expect(firstLink).toBeVisible();
+	expect(await firstLink.getAttribute('href')).toBe('https://discord.gg/swYY5RVHft');
+
+	// Check the second link (index 2)
+	const secondLink = links.nth(2);
+	await expect(secondLink).toBeVisible();
+	expect(await secondLink.getAttribute('href')).toBe('https://github.com/Open-Model-Initiative/OMI-Data-Pipeline');
+});
+
+test('Unauthenticated user is redirect to auth page', async ({ page }) => {
+	await page.goto('/admin');
+	await expect(page).toHaveURL('/auth');
+
+	await page.goto('/datasets');
+	await expect(page).toHaveURL('/auth');
+
+	await page.goto('/dco');
+	await expect(page).toHaveURL('/auth');
+
+	await page.goto('/dump');
+	await expect(page).toHaveURL('/auth');
+
+	// await page.goto('/inactive');
+	// await expect(page).toHaveURL('/auth');
+
+	await page.goto('/queue');
+	await expect(page).toHaveURL('/auth');
+
+	await page.goto('/reports');
+	await expect(page).toHaveURL('/auth');
 });

run-playwright.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+set -e
+
+task dev &
+echo "Waiting for services to start..."
+
+# Maximum wait time in seconds
+max_wait=300
+check_interval=5
+start_time=$(date +%s)
+
+while true; do
+    if docker compose logs | grep -q "INFO:     Application startup complete."; then
+        echo "Services started successfully."
+        break
+    fi
+
+    current_time=$(date +%s)
+    elapsed=$((current_time - start_time))
+
+    if [ $elapsed -ge $max_wait ]; then
+        echo "Timeout: Services did not start within $max_wait seconds."
+        exit 1
+    fi
+
+    sleep $check_interval
+done
+
+cd modules/odr_frontend
+npx playwright test
+
+cd ../..
+docker compose down