Feat/added playwright testing framework

.github/workflows/main.yml

@@ -50,7 +50,6 @@ jobs:
           echo "appVersion=${{ steps.get_version.outputs.appVersion }}" >> .env
           echo "NEXT_PUBLIC_ENVIRONMENT=production" >> .env
           echo "NEXT_PUBLIC_LOCAL_MODE=false" >> .env
-          echo "CAP_DESKTOP_SENTRY_URL=https://efd3156d9c0a8a49bee3ee675bec80d8@o4506859771527168.ingest.us.sentry.io/4506859844403200" >> .env
 
       - name: Copy .env to apps/desktop
         run: cp .env apps/desktop/.env

apps/desktop/tests/desktop.test1.e2e.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:3001/');
+  await page.getByRole('button', { name: 'Full screen' }).click();
+  await page.getByRole('button', { name: 'Video On' }).click();
+  await page.getByRole('button', { name: 'Mic On' }).click();
+  await page.getByRole('button', { name: 'Start Recording' }).click();
+  await page.getByRole('button', { name: 'Stop - 0:' }).click();
+  await page.getByRole('button', { name: 'Video On' }).click();
+
+});

apps/desktop/tsconfig.json

@@ -30,6 +30,6 @@
     }
   },
 
-  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx","tests/*.ts"],
   "exclude": ["node_modules", "src-tauri"]
 }

apps/tasks/tests/api.test.e2e.ts

@@ -0,0 +1,29 @@
+import { test, expect, request } from "@playwright/test";
+
+test.describe("GET /api/v1", () => {
+  let apiContext:any;
+
+  test.beforeAll(async ({ playwright }) => {
+    apiContext = await playwright.request.newContext({
+      baseURL: "http://localhost:3002",
+    });
+  });
+
+  test.afterAll(async () => {
+    await apiContext.dispose();
+  });
+
+  test("responds with a json message", async () => {
+    const response = await apiContext.get("/api/v1", {
+      headers: {
+        Accept: "application/json",
+      },
+    });
+
+    expect(response.status()).toBe(200);
+    expect(response.headers()["content-type"]).toContain("application/json");
+
+    const responseBody = await response.json();
+    expect(responseBody).toEqual({ message: "OK" });
+  });
+});

apps/tasks/tests/app.test.e2e.ts

@@ -0,0 +1,40 @@
+import { test, expect, request } from '@playwright/test';
+
+test.describe('API Endpoints', () => {
+  let apiContext:any;
+
+  test.beforeAll(async ({ playwright }) => {
+    apiContext = await playwright.request.newContext({
+      baseURL: 'http://localhost:3002',
+    });
+  });
+
+  test.afterAll(async () => {
+    await apiContext.dispose();
+  });
+
+  test('responds with a not found message for unknown route', async () => {
+    const response = await apiContext.get('/what-is-this-even', {
+      headers: {
+        Accept: 'application/json',
+      },
+    });
+
+    expect(response.status()).toBe(404);
+    expect(response.headers()['content-type']).toContain('application/json');
+  });
+
+  test('responds with a json message at root', async () => {
+    const response = await apiContext.get('/', {
+      headers: {
+        Accept: 'application/json',
+      },
+    });
+
+    expect(response.status()).toBe(200);
+    expect(response.headers()['content-type']).toContain('application/json');
+
+    const responseBody = await response.json();
+    expect(responseBody).toEqual({ message: 'OK' });
+  });
+});

apps/tasks/tsconfig.json

@@ -13,6 +13,6 @@
   "include": [
     "./*.js",
     "src/**/*.ts",
-    "test/**/*.ts",
+    "tests/*.ts",
   ],
 }

apps/web/tests/web.test1.e2e.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('test1', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await page.locator('div').filter({ hasText: /^Get started for free$/ }).getByRole('link').click();
+  await page.getByPlaceholder('[email protected]').click();
+  await page.getByRole('button', { name: 'Continue with Email' }).click();
+  await page.goto('http://localhost:3000/');
+  await page.getByRole('img', { name: 'Landing Page Screenshot Banner' }).click();
+  await page.goto('http://localhost:3000/updates');
+  await page.getByRole('button', { name: 'Product' }).click();
+  await page.goto('http://localhost:3000/login');
+});

package.json

@@ -1,24 +1,29 @@
 {
   "scripts": {
     "build": "dotenv -e .env -- turbo run build",
-    "dev": "(cd apps/web && docker-compose up -d)  && dotenv -e .env -- pnpm --dir packages/database db:generate && dotenv -e .env -- pnpm --dir packages/database db:push && dotenv -e .env -- turbo run dev --no-cache",
+    "dev": "(cd apps/web && docker-compose up -d) && cd ../../ && dotenv -e .env -- pnpm --dir packages/database db:generate && dotenv -e .env -- pnpm --dir packages/database db:push && dotenv -e .env -- turbo run dev --no-cache",
     "dev:manual": "dotenv -e .env -- turbo run dev --no-cache",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "db:push": "dotenv -e .env -- pnpm --dir packages/database db:push",
     "db:generate": "dotenv -e .env -- pnpm --dir packages/database db:generate",
-    "tauri:build": "dotenv -e .env -- pnpm --dir apps/desktop tauri build --target universal-apple-darwin"
+    "tauri:build": "dotenv -e .env -- pnpm --dir apps/desktop tauri build --target universal-apple-darwin",
+    "test": "playwright test"
   },
   "devDependencies": {
+    "@playwright/test": "^1.25.0",
     "@turbo/gen": "^1.9.7",
+    "dotenv-cli": "latest",
     "eslint": "^7.32.0",
     "prettier": "^2.5.1",
-    "turbo": "^1.10.16",
-    "dotenv-cli": "latest"
+    "turbo": "^1.10.16"
   },
   "packageManager": "[email protected]",
   "name": "cap",
   "engines": {
     "node": "20"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5"
   }
 }

playwright.config.ts

@@ -0,0 +1,114 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import * as os from 'os';
+import * as path from 'path';
+
+dotenv.config({ path: '.env' });
+
+const outputDir = path.join(__dirname, 'test-results');
+
+const DEFAULT_NAVIGATION_TIMEOUT = 120000;
+const DEFAULT_EXPECT_TIMEOUT = 120000;
+const DEFAULT_TEST_TIMEOUT = 240000;
+
+const headless = true; 
+
+const webServer = [
+  {
+    command: 'pnpm run dev',
+    port: 3000,
+    timeout: 60000,
+    reuseExistingServer: true,
+  },
+  {
+    command: 'pnpm run dev',
+    port: 3002,
+    timeout: 60000,
+    reuseExistingServer: true,
+  },
+  {
+    command: 'pnpm run dev',
+    port: 3003,
+    timeout: 60000,
+    reuseExistingServer: true,
+  },
+];
+
+const DEFAULT_CHROMIUM = {
+  ...devices['Desktop Chrome'],
+  timezoneId: 'Europe/London',
+  locale: 'en-US',
+  navigationTimeout: DEFAULT_NAVIGATION_TIMEOUT,
+};
+
+const config: PlaywrightTestConfig = {
+  forbidOnly: false,
+  retries: 2,
+  workers: os.cpus().length,
+  timeout: DEFAULT_TEST_TIMEOUT,
+  maxFailures: 5,
+  fullyParallel: true,
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: './test-results/reports/playwright-html-report', open: 'never' }],
+    ['junit', { outputFile: './test-results/reports/results.xml' }],
+  ],
+  outputDir: path.join(outputDir, 'results'),
+  webServer,
+  use: {
+    baseURL: process.env.NEXT_PUBLIC_URL || 'http://localhost:3000',
+    locale: 'en-US',
+    trace: 'retain-on-failure',
+    headless,
+    contextOptions: {
+      permissions: ['clipboard-read', 'clipboard-write'],
+    },
+  },
+  projects: [
+    {
+      name: 'web',
+      testDir: './apps/web/tests',
+      testMatch: /.*\.e2e\.tsx?/,
+      use: DEFAULT_CHROMIUM,
+    },
+    {
+      name: 'desktop',
+      testDir: './apps/desktop/tests',
+      testMatch: /.*\.e2e\.tsx?/,
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: 'http://localhost:3003/',
+      },
+    },
+    {
+      name: 'tasks',
+      testDir: './apps/tasks/tests',
+      testMatch: /.*\.e2e\.tsx?/,
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: 'http://localhost:3002/',
+      },
+    },
+    {
+      name: 'packages-ui',
+      testDir: './packages/ui/tests',
+      testMatch: /.*\.e2e\.tsx?/,
+      use: DEFAULT_CHROMIUM,
+    },
+    {
+      name: 'packages-utils',
+      testDir: './packages/utils/tests',
+      testMatch: /.*\.e2e\.tsx?/,
+      use: DEFAULT_CHROMIUM,
+    },
+    {
+      name: 'packages-database-config',
+      testDir: './packages/database-config/tests',
+      testMatch: /.*\.e2e\.tsx?/,
+      use: DEFAULT_CHROMIUM,
+    },
+  ],
+};
+
+export default config;