Add E2E tests (#212)

.github/workflows/playwright.yml

@@ -1,20 +1,35 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master ]
+    branches: [ main ]
   pull_request:
-    branches: [ main, master ]
+    branches: [ main ]
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    env:
+      DATABASE_URL: postgresql://postgres:password@localhost:5432/postgres # postgresql://postgres:postgres@localhost:5432/grading-app
+    services:
+      postgres:
+        image: postgres:latest
+        env:
+          POSTGRES_PASSWORD: password
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          # Maps tcp port 5432 on service container to the host
+          - 5432:5432
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 18
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
     - name: Install dependencies
       run: npm ci
+    - name: Seed database
+      run: npx prisma migrate reset --force
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
     - name: Run Playwright tests

prisma/seed.mts

@@ -33,7 +33,7 @@ const categoriesCambridge = [
   },
 ]
 
-const categoriesUni = [
+const categoriesDurham = [
   {
     label: 'Policy',
     color: '000000',
@@ -62,6 +62,13 @@ const listingsDurham = [
       The University of Cambridge Conservation Research Institute are founding members of the Cambridge Conservation Initiative (CCI), a unique collaboration with ten leading biodiversity conservation organisations. Established in October 2013, (See article HERE) the Institute has expanded its role, supporting the University's presence, along with other CCI organisations in the David Attenborough Building, which was designed to enhance collaboration and the sharing of perspectives across organisational and disciplinary boundaries. As an Interdisciplinary Research Centre (IRC) since October 2016, it promotes collaboration and breaks down disciplinary silos by integrating conservation-related research from all six core University Schools.
       In the 21st century, understanding and managing human impacts on organisms and ecosystems amid population growth, socio-economic development, and climate change is a major challenge. Biodiversity faces threats from over-consumption, over-exploitation, and unsustainable use of natural resources. Addressing these challenges requires a better understanding of nature's value and practical steps for equitable and effective planet stewardship. All of which is our mission to address and help to foster positive change.`,
   },
+  {
+    title: 'Durham Community Kitchen',
+    slug: 'durham-community-kitchen',
+    description:
+      'We are a food solidarity collective tackling food poverty in Cambridge by offering free, hot, plant-based meals to those who need them every Tuesday, Thursday and Sunday.',
+    website: 'https://dckitchen.uk',
+  },
 ]
 
 async function populateSeedData() {
@@ -94,7 +101,7 @@ async function populateSeedData() {
     },
   })
 
-  for (const category of categoriesUni) {
+  for (const category of categoriesDurham) {
     await prisma.category.create({
       data: {
         ...category,

tests/homepage.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('Titles are displayed', async ({ page }) => {
+  await page.goto('/')
+
+  await expect(page).toHaveTitle(/Resilience Web/)
+
+  await expect(
+    page.getByRole('heading', {
+      name: 'Celebrating place-based community action',
+    }),
+  ).toBeVisible()
+
+  await expect(
+    page.getByText('Find Resilience Webs near you in the UK'),
+  ).toBeVisible()
+})
+
+test('Web cards are loaded', async ({ page }) => {
+  await page.goto('/')
+
+  await expect(page.getByRole('heading', { name: 'Cambridge' })).toBeVisible()
+  await expect(page.getByRole('heading', { name: 'Durham' })).toBeVisible()
+})

tests/web.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('Web title is displayed', async ({ page }) => {
+  await page.goto('http://durham.localhost:3000')
+
+  await expect(
+    page.getByRole('heading', { level: 2, exact: true, name: 'Durham' }),
+  ).toBeVisible()
+})
+
+test('Listings are loaded', async ({ page }) => {
+  await page.goto('http://durham.localhost:3000')
+
+  await expect(page.getByText('Conservation Research Institute')).toBeVisible()
+  await expect(page.getByText('Durham Community Kitchen')).toBeVisible()
+})