tests working

.github/workflows/ci.yml

@@ -1,23 +1,41 @@
 name: CI
 on:
   push:
-    branches:
-      - master
+    branches: ['*']
   pull_request:
-    branches:
-      - master
+    branches: [master]
 jobs:
   all-cli-check:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2-beta
         with:
-          node-version: '14.16'
+          node-version: lts/*
       - run: mv .env.example .env
       - run: yarn install
       - run: yarn build
-      - run: yarn test:jest
+      - run: yarn test
       - run: yarn lint
       - run: yarn check-format
       - run: yarn check-types
+  e2e:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g yarn && yarn
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn validate
+yarn lint-staged

e2e/smoke.spec.ts

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 
 import { userGenerator, discussionGenerator, commentGenerator } from '../src/test/data-generators';
 test('smoke', async ({ page }) => {
@@ -10,11 +10,15 @@ test('smoke', async ({ page }) => {
     authorId: user.id,
   });
 
-  await page.goto('http://localhost:3000/');
+  await page.goto('/');
   await page.getByRole('button', { name: 'Get started' }).click();
 
+  await page.waitForURL('/auth/login');
+
   // registration:
   await page.getByRole('link', { name: 'Register' }).click();
+
+  await page.waitForURL('/auth/register');
   await page.getByLabel('First Name').click();
   await page.getByLabel('First Name').fill('test-name');
   await page.getByLabel('Last Name').click();
@@ -27,37 +31,45 @@ test('smoke', async ({ page }) => {
   await page.getByLabel('Team Name').fill('Team');
   await page.getByRole('button', { name: 'Register' }).click();
 
-  await page.getByRole('heading', { name: 'Dashboard' }).click();
-  await page.getByRole('heading', { name: 'Welcome test-name test-' }).click();
+  await page.waitForURL('/app');
+  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Welcome test-name test-' })).toBeVisible();
 
   // log out:
   await page.getByRole('button', { name: 'Open user menu' }).click();
   await page.getByRole('menuitem', { name: 'Sign out' }).click();
+  await page.waitForURL('/');
   await page.getByRole('button', { name: 'Get started' }).click();
+  await page.waitForURL('/auth/login');
 
   // log in:
   await page.getByLabel('Email Address').click();
   await page.getByLabel('Email Address').fill('test@mail.com');
   await page.getByLabel('Password').click();
   await page.getByLabel('Password').fill('Test123!@#');
   await page.getByRole('button', { name: 'Log in' }).click();
-  await page.getByRole('heading', { name: 'Welcome test-name test-' }).click();
+  await expect(page.getByRole('heading', { name: 'Welcome test-name test-' })).toBeVisible();
 
   // create discussion:
 
   await page.getByRole('link', { name: 'Discussions' }).click();
+  await page.waitForURL('/app/discussions');
+
   await page.getByRole('button', { name: 'Create Discussion' }).click();
   await page.getByLabel('Title').click();
   await page.getByLabel('Title').fill('discussion title');
   await page.getByLabel('Body').click();
   await page.getByLabel('Body').fill('discussion body');
   await page.getByRole('button', { name: 'Submit' }).click();
+  await page.getByLabel('Discussion Created').getByRole('button', { name: 'Close' }).click();
 
   // visit discussion page:
   await page.getByRole('link', { name: 'View' }).click();
 
-  await page.getByRole('heading', { name: 'discussion title' }).click();
-  await page.getByText('discussion body').click();
+  // todo: assert the page:
+  await page.waitForTimeout(1000);
+  await expect(page.getByRole('heading', { name: 'discussion title' })).toBeVisible();
+  await expect(page.getByText('discussion body')).toBeVisible();
 
   // update discussion:
 
@@ -67,39 +79,44 @@ test('smoke', async ({ page }) => {
   await page.getByLabel('Body').click();
   await page.getByLabel('Body').fill('discussion body - updated');
   await page.getByRole('button', { name: 'Submit' }).click();
+  await page.getByLabel('Discussion Updated').getByRole('button', { name: 'Close' }).click();
 
-  // create comment:
+  await expect(page.getByRole('heading', { name: 'discussion title - updated' })).toBeVisible();
+  await expect(page.getByText('discussion body - updated')).toBeVisible();
 
+  // create comment:
   await page.getByRole('button', { name: 'Create Comment' }).click();
   await page.getByLabel('Body').click();
   await page.getByLabel('Body').fill('test comment');
   await page.getByRole('button', { name: 'Submit' }).click();
-  await page.getByText('test comment').click();
+  await expect(page.getByText('test comment')).toBeVisible();
+  await page.getByLabel('Comment Created').getByRole('button', { name: 'Close' }).click();
 
   // delete comment:
-
   await page.getByRole('button', { name: 'Delete Comment' }).click();
+  await expect(page.getByText('Are you sure you want to delete this comment?')).toBeVisible();
   await page.getByRole('button', { name: 'Delete Comment' }).click();
-  await page.getByRole('heading', { name: 'No Comments Found' }).click();
+  await page.getByLabel('Comment Deleted').getByRole('button', { name: 'Close' }).click();
+  await expect(page.getByRole('heading', { name: 'No Comments Found' })).toBeVisible();
+  await expect(page.getByText('test comment')).toBeHidden();
 
   // go back to discussions:
-
-  await page.goto('http://localhost:3000/app/discussions');
+  await page.getByRole('link', { name: 'Discussions' }).click();
+  await page.waitForURL('/app/discussions');
 
   // delete discussion:
-
   await page.getByRole('button', { name: 'Delete Discussion' }).click();
   await page.getByRole('button', { name: 'Delete Discussion' }).click();
-  await page.getByRole('heading', { name: 'No Entries Found' }).click();
+  await page.getByLabel('Discussion Deleted').getByRole('button', { name: 'Close' }).click();
+  await expect(page.getByRole('heading', { name: 'No Entries Found' })).toBeVisible();
 
   // update user:
-
   await page.getByRole('button', { name: 'Open user menu' }).click();
   await page.getByRole('menuitem', { name: 'Your Profile' }).click();
   await page.getByRole('button', { name: 'Update Profile' }).click();
   await page.getByLabel('Bio').click();
   await page.getByLabel('Bio').fill('bio added');
   await page.getByRole('button', { name: 'Submit' }).click();
-  await page.getByText('bio added').click();
-  await page.getByText('User UpdatedClose').click();
+  await page.getByLabel('User Updated').getByRole('button', { name: 'Close' }).click();
+  await expect(page.getByText('bio added')).toBeVisible();
 });

package.json

@@ -14,8 +14,6 @@
     "format": "npm run prettier -- --write",
     "check-types": "tsc --project tsconfig.json --pretty --noEmit",
     "check-format": "npm run prettier -- --list-different",
-    "validate-and-build": "npm-run-all --parallel check-types check-format lint build",
-    "validate": "npm-run-all --parallel check-types && lint-staged",
     "generate": "plop",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -68,7 +66,6 @@
     "@typescript-eslint/parser": "6",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.19",
-    "cross-env": "^7.0.3",
     "eslint": "8",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -83,14 +80,11 @@
     "husky": "^6.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.0.0",
-    "jsonwebtoken": "^9.0.2",
     "lint-staged": "^11.0.0",
-    "msw": "^2.2.14",
-    "npm-run-all": "^4.1.5",
+    "msw": "2.2.11",
     "plop": "^2.7.4",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "serve": "^12.0.0",
     "storybook": "^8.0.9",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
@@ -103,7 +97,8 @@
   },
   "lint-staged": {
     "*.+(ts|tsx)": [
-      "yarn lint"
+      "yarn lint",
+      "bash -c 'yarn check-types'"
     ]
   }
 }

playwright.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig, devices } from '@playwright/test';
 
+const port = 3000;
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -40,8 +42,9 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run preview',
-    url: 'http://127.0.0.1:3000',
+    command: `npx vite --port ${port}`,
+    timeout: 10 * 1000,
+    port,
     reuseExistingServer: !process.env.CI,
   },
 });

src/setupTests.ts

@@ -13,6 +13,9 @@ beforeEach(() => {
   }));
 
   vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+
+  window.btoa = (str: string) => Buffer.from(str, 'binary').toString('base64');
+  window.atob = (str: string) => Buffer.from(str, 'base64').toString('binary');
 });
 afterEach(() => {
   server.resetHandlers();