🚨(frontend) create package eslint-config-people

We want to lint the e2e tests, we export the eslint config from the
app desk to a package in order to use it for the e2e tests and
for our apps.

src/frontend/apps/e2e/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ["people/playwright"],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+  },
+};

src/frontend/apps/e2e/__tests__/app-desk/app.spec.ts

@@ -1,29 +1,29 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from "@playwright/test";
 
-import { keyCloakSignIn } from './common';
+import { keyCloakSignIn } from "./common";
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/');
+  await page.goto("/");
   await keyCloakSignIn(page);
 });
 
 test.describe("App", () => {
   test("should display the main elements", async ({ page }) => {
-    await expect(page.locator('header').first()).toContainText('Desk');
-    await expect(page.getByLabel('Team name')).toBeVisible();
+    await expect(page.locator("header").first()).toContainText("Desk");
+    await expect(page.getByLabel("Team name")).toBeVisible();
   });
 
-  test('creates 2 teams and displayed them', async ({ page }) => {
-    await page.getByLabel('Team name').fill('My new team');
+  test("creates 2 teams and displayed them", async ({ page }) => {
+    await page.getByLabel("Team name").fill("My new team");
     await page.click('button:has-text("Create Team")');
-    await page.getByLabel('Team name').fill('My second new team');
+    await page.getByLabel("Team name").fill("My second new team");
     await page.click('button:has-text("Create Team")');
 
     await expect(
-      page.locator('li').getByText('My new team').first(),
+      page.locator("li").getByText("My new team").first(),
     ).toBeVisible();
     await expect(
-      page.locator('li').getByText('My second new team').first(),
+      page.locator("li").getByText("My second new team").first(),
     ).toBeVisible();
   });
 });

src/frontend/apps/e2e/__tests__/app-desk/common.ts

@@ -1,13 +1,13 @@
-import { Page } from '@playwright/test';
+import { Page } from "@playwright/test";
 
 export const keyCloakSignIn = async (page: Page) => {
-  const title = await page.locator('h1').first().textContent({
+  const title = await page.locator("h1").first().textContent({
     timeout: 5000,
   });
 
-  if (title?.includes('Sign in to your account')) {
-    await page.getByRole('textbox', { name: 'username' }).fill('user-e2e');
-    await page.getByRole('textbox', { name: 'password' }).fill('password-e2e');
+  if (title?.includes("Sign in to your account")) {
+    await page.getByRole("textbox", { name: "username" }).fill("user-e2e");
+    await page.getByRole("textbox", { name: "password" }).fill("password-e2e");
 
     await page.click('input[type="submit"]');
   }

src/frontend/apps/e2e/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "lint": "eslint . --ext .ts",
     "install": "playwright install --with-deps",
     "test": "playwright test",
     "test:ui": "yarn test --ui"
@@ -10,6 +11,7 @@
   "devDependencies": {
     "@playwright/test": "1.40.1",
     "@types/node": "*",
+    "eslint-config-people": "*",
     "typescript": "*"
   }
 }

src/frontend/apps/e2e/playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 const PORT = process.env.PORT || 3200;
 
@@ -10,9 +10,9 @@ const baseURL = `http://localhost:${PORT}`;
 export default defineConfig({
   // Timeout per test
   timeout: 30 * 1000,
-  testDir: './__tests__',
-  outputDir: './test-results',
-  
+  testDir: "./__tests__",
+  outputDir: "./test-results",
+
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -22,17 +22,19 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [['html', { outputFolder: './report' }]],
+  reporter: [["html", { outputFolder: "./report" }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL: baseURL,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   webServer: {
-    command:  `cd ../.. && yarn app:${process.env.CI ? "start -p " : "dev --port "} ${PORT}`,
+    command: `cd ../.. && yarn app:${
+      process.env.CI ? "start -p " : "dev --port "
+    } ${PORT}`,
     url: baseURL,
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
@@ -41,18 +43,18 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
     },
   ],
 });