VF-131 bytt ut cypress med playwright

.github/workflows/code-quality-check.yml → .github/workflows/quality-control.yml

@@ -1,7 +1,7 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Code Quality Check
+name: Quality Control
 
 env:
   NODE_VERSION: 20.12.2
@@ -22,14 +22,13 @@ jobs:
         uses: pnpm/action-setup@v3
         with:
           version: 8
-      - name: Setup Node 
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: ${{env.NODE_VERSION}}
+          node-version: ${{ env.NODE_VERSION }}
           cache: "pnpm"
       - name: Install dependencies
-        run:
-          pnpm install
+        run: pnpm install
       - name: Build
         run: pnpm build
       - name: store build artifact
@@ -51,41 +50,42 @@ jobs:
         run: biome ci .
 
   vitest_tests:
-    needs: build
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
         with:
           version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "pnpm"
       - name: Run tests
         run: |
           pnpm install
           pnpm test:vitest
 
-  cypress_tests:
-    needs: build
+  e2e-tests:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        browser: [chrome, firefox, edge]
-
-    container:
-      image: cypress/browsers:node16.14.2-slim-chrome100-ff99-edge
-      options: --user 1001
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v3
         with:
           version: 8
-      - name: Download the build folders
-        uses: actions/download-artifact@v4
+      - uses: actions/setup-node@v4
         with:
-          name: build
-          path: build
-      - uses: cypress-io/github-action@v4
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
         with:
-          browser: ${{ matrix.browser }}
-          build: pnpm build
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -13,6 +13,10 @@
 
 # testing
 /coverage
+e2e/results/
+/playwright-report/
+/playwright/.cache/
+/blob-report/
 
 # production
 /build
@@ -29,5 +33,3 @@ yarn-debug.log*
 yarn-error.log*
 
 .eslintcache
-
-/cypress/videos

README.md

@@ -14,11 +14,6 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `pnpm test`
-
-Runs the cypress tests defined in [cypress](./cypress).
-To specify the tests to run in firefox specifically run `pnpm test:firefox`
-
 ### `pnpm build`
 
 Builds the app for production to the `build` folder.\
@@ -47,6 +42,19 @@ The linter settings are stored in the [.eslintrc.js file](.eslintrc.js) which al
 
 Running `pnpm lint --fix` will fix small auto-fixable problems.
 
+## Testing
+
+Testing is done with Vitest for simple testing,
+and Playwright for e2e testing in browsers.
+
+Install required browsers by running:
+
+- `pnpm e2e:install`
+
+Then run e2e test with:
+
+- `pnpm e2e:test`
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

e2e/example.spec.ts

@@ -0,0 +1,140 @@
+import { test, expect } from '@playwright/test';
+
+
+
+test('has title', async ({page}) => {
+  await page.goto('/');
+  await expect(page).toHaveTitle('Vektorprogrammet');
+})
+
+test.describe('Navbar', () => {
+  test.beforeEach( async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('can navigate to assistent page', async ({page}) => {
+    await page.getByRole('link', { name: 'Assistenter' }).click();
+    await expect(page.getByRole('heading', { name: 'Assistenter' })).toBeVisible();
+  })
+
+  test('can navigate to parent page', async ({page}) => {
+    await page.getByRole('link', { name: 'Foreldre' }).click();
+    await expect(page.getByRole('heading', { name: 'Informasjon for foreldre' })).toBeVisible();
+  })
+
+  test('can navigate to teams page', async ({page}) => {
+    await page.getByRole('link', { name: 'Team' }).click();
+    await expect(page.getByRole('heading', { name: 'Styre og team' })).toBeVisible();
+  })
+
+  test('can navigate to school page', async ({page}) => {
+    await page.getByRole('link', { name: 'Skoler' }).click();
+    await expect(page.getByRole('heading', { name: 'Vektorassistenter i skolen' })).toBeVisible();
+  })
+})
+
+test.describe('Contact page', () => {
+  test.beforeEach( async ({ page }) => {
+    await page.goto('/kontakt');
+  })
+
+  test('has contact informations for Trondheim and contact', async ({ page }) => {
+    await page.locator('button').filter({ hasText: 'Trondheim' }).click();
+    await expect(
+      page.locator('div').filter({ hasText: /^styret\.ntnu@vektorprogrammet\.no$/ }).getByRole('link'))
+      .toBeVisible();
+    await expect(page.getByText('Høgskoleringen 5 7491')).toBeVisible();
+  })
+
+  test('can submit message in contact form', async ({ page }) => {
+    const name = page.getByLabel('Ditt navn');
+    const email = page.getByLabel('Din e-post');
+    const subject = page.getByLabel('Emne');
+    const message = page.getByLabel('Melding');
+    const submitButton = page.getByRole('button', { name: 'Send melding' });
+
+    await expect(name).toBeVisible();
+    await expect(email).toBeVisible();
+    await expect(subject).toBeVisible();
+    await expect(message).toBeVisible();
+    await expect(submitButton).toBeVisible();
+
+    await name.fill('John Doe');
+    await email.fill('[email protected]');
+    await subject.fill('teams');
+    await message.fill('How do I apply for teams?');
+
+    await expect(name).not.toBeEmpty();
+    await expect(email).not.toBeEmpty();
+    await expect(subject).not.toBeEmpty();
+    await expect(message).not.toBeEmpty();
+
+    submitButton.click();
+    await expect(name).toBeEmpty();
+    await expect(email).toBeEmpty();
+    await expect(subject).toBeEmpty();
+    await expect(message).toBeEmpty();
+  })
+
+})
+
+test.describe('Assistent page', () => {
+  test.beforeEach( async ({ page }) => {
+    await page.goto('/assistenter');
+  });
+
+  test('can use button to scroll down to application form', async ({page}) => {
+    const scrollButton = await page.getByRole('button', { name: 'Scroll ned for å søke!' });
+    scrollButton.click();
+    await expect(page.getByRole('button', { name: 'Søk nå!' })).toBeInViewport();
+  })
+
+  test('can change city', async ({page}) => {
+    const trondheimButton = await page.locator('button').filter({ hasText: 'Trondheim' })
+    const bergenButton = await page.getByRole('main').getByText('Bergen');
+    const aasButton = await page.getByRole('main').getByText('Ås');
+
+    await expect(trondheimButton).toBeVisible();
+    await expect(bergenButton).toBeVisible();
+    await expect(aasButton).toBeVisible();
+
+    await trondheimButton.click();
+    await expect(page.getByRole('heading', { name: 'Trondheim' })).toBeVisible();
+
+    await bergenButton.click();
+    await expect(page.getByRole('heading', { name: 'Bergen' })).toBeVisible();
+
+    await aasButton.click();
+    await expect(page.getByRole('heading', { name: 'Ås' })).toBeVisible();
+
+  })
+
+  test('can submit application', async ({page}) => {
+    await expect(page.getByRole('heading', { name: 'Trondheim' })).toBeVisible();
+    const submit = page.getByRole('button', { name: 'Søk nå!' });
+
+    const firstname = page.getByPlaceholder('Fornavn');
+    const surname = page.getByPlaceholder('Etternavn');
+    const email = page.getByPlaceholder('E-post');
+    const phone = page.getByPlaceholder('Telefon nr');
+    const studyprogram = page.getByPlaceholder('Linje');
+
+    await expect(firstname).toBeVisible();
+    await expect(surname).toBeVisible();
+    await expect(email).toBeVisible();
+    await expect(phone).toBeVisible();
+    await expect(studyprogram).toBeVisible();
+    await expect(submit).toBeVisible();
+
+    await firstname.fill('John');
+    await surname.fill('Doe');
+    await email.fill('[email protected]');
+    await phone.fill('00000000');
+    await studyprogram.fill('mtdt');
+
+    await submit.click();
+    await expect(page.getByRole('heading', { name: 'Assistenter' })).toBeInViewport()
+  })
+
+
+})

package.json

@@ -9,10 +9,12 @@
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
-    "test": "cypress run && vitest run",
-    "test:cypress:firefox": "cypress run --browser firefox",
     "test:vitest": "vitest run",
     "test:vitest:watch": "vitest watch",
+    "e2e:test": "exec playwright test",
+    "e2e:test:ui": "exec playwright test --ui",
+    "e2e:show-report": "exec playwright show-report",
+    "e2e:install": "exec playwright install",
     "check": "biome check ./ --apply",
     "lint": "biome lint ./ --apply",
     "format": "biome format ./ --apply"
@@ -70,13 +72,13 @@
     "web-vitals": "^4.2.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.43.0",
     "@biomejs/biome": "1.9.4",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@vitejs/plugin-react": "^4.2.1",
-    "cypress": "12.8.1",
     "vitest": "^2.0.0"
   }
-}
+}