feat(playwright): setup and config

.gitignore

@@ -411,3 +411,8 @@ stats.csv
 .vscode/settings.json
 .vscode/tasks.json
 .vscode/launch.json
+/test-results/
+/blob-report/
+/playwright/.cache/
+/frontend/testing/playwright/playwright-report
+.playwright/

frontend/jest.config.js

@@ -50,7 +50,7 @@ const config = {
     '^@studio/components': path.join(__dirname, 'libs/studio-components/src/$1'),
     '^@studio/pure-functions': path.join(__dirname, 'libs/studio-pure-functions/src/$1'),
   },
-  testRegex: '(\\.(test|spec))\\.(ts|tsx)$',
+  testRegex: '(\\.(test))\\.(ts|tsx)$',
   moduleFileExtensions: ['ts', 'tsx', 'js'],
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: [path.join(__dirname, 'testing/setupTests.ts')],

frontend/testing/playwright/README.md

@@ -0,0 +1,45 @@
+# Get started with Playwright
+
+Team Studio employs Playwright for end-to-end (e2e) testing. This README.md is designed to guide you through the initial setup.
+It's crucial to bear in mind that each team member is responsible for keeping this README.md up-to-date. Your contributions are
+highly encouraged to enhance the document and facilitate an easier onboarding process for your fellow team members.
+
+## Test Strategy
+
+Team Studio has decided to test various user journeys. A user journey may, for example, involve adding a field to the data model.
+In such cases, the testing process should not only encompass the data model page itself, but we must also ensure that the data model
+and the field are accessible on all pages integrated with the data model. This ensures a comprehensive verification that our solution
+operates seamlessly across different pages. In this way, we can better ensure that things are integrated as they should be cross pages.
+
+More documentation and examples will be added after we have written our first scenario.
+
+
+## Setup
+To initiate test execution and writing tests, start by running the setup.js script located at the file path `/development/setup.js`.
+For more information, refer to the `README.md` located at the root of the monorepo. The reason this is needed is to ensure
+you have setup you local environment. If you already have a local environment up and running, you can skip this part.
+
+After executing the mentioned `setup.js` script, you are ready to set up Playwright. Simply run `yarn setup:playwright` to generate a `.env`
+file for localhost. Then, execute the tests using the following command: `yarn test:all`.
+
+## Change Environment
+If you wish to run tests against an environment other than `studio.localhost`, you can do so by modifying your `.env` file. In the `.env` file,
+locate a variable named `PLAYWRIGHT_TEST_BASE_URL`, which is set to `studio.localhost` by default. It is automatically configured for you when running `yarn setup:playwright`.
+
+
+## .ENV file
+`.env` that is generated by the setup script looks like following:
+```
+PLAYWRIGHT_TEST_BASE_URL=http://studio.localhost
+PLAYWRIGHT_USER=<<your-test-user-username>>
+PLAYWRIGHT_PASS=<<your-test-user-password>>
+PLAYWRIGHT_DESIGNER_APP_NAME=<<name-of-the-designer-app>>
+GITEA_ACCESS_TOKEN=<<generated-gitea-token-by-the-setup-script>>
+```
+
+## Short Step By Step Guide
+This is a short step-by-step guide with minimum needed explanation to get started.
+
+1. Install the dependencies within this package by running y`yarn install`.
+2. Install browsers and set up Playwright with local `.env` by executing `yarn setup:playwright`.
+3. You are now ready to execute tests using the command `yarn test:all`.

frontend/testing/playwright/extenders/testExtend.ts

@@ -0,0 +1,13 @@
+import { test as base } from '@playwright/test';
+
+export type ExtendedTestOptions = {
+  testAppName: string;
+};
+
+// Extends the default test to support custom parameters such as appName for our test app
+export const test = base.extend<ExtendedTestOptions>({
+  testAppName: [process.env.PLAYWRIGHT_DESIGNER_APP_NAME, { option: true }],
+});
+
+const describe = test.describe;
+export { describe };

frontend/testing/playwright/helpers/BasePage.ts

@@ -0,0 +1,26 @@
+import * as nbTexts from '@altinn-studio/language/src/nb.json';
+import * as enTexts from '@altinn-studio/language/src/en.json';
+import { Page } from '@playwright/test';
+import { RouterRoute } from './RouterRoute';
+import { Environment } from './StudioEnvironment';
+
+type Locale = 'nb' | 'en';
+type TextKey = keyof typeof nbTexts | keyof typeof enTexts;
+
+const localeTextMap: Record<Locale, typeof nbTexts | typeof enTexts> = {
+  nb: nbTexts,
+  en: enTexts,
+};
+
+export class BasePage extends RouterRoute {
+  public readonly page: Page;
+
+  constructor(page: Page, environment?: Environment) {
+    super(environment);
+    this.page = page;
+  }
+
+  public textMock(key: TextKey, locale: Locale = 'nb'): string {
+    return localeTextMap[locale][key] || key;
+  }
+}

frontend/testing/playwright/helpers/Gitea.ts

@@ -0,0 +1,15 @@
+import { StudioEnvironment, Environment } from './StudioEnvironment';
+
+export class Gitea extends StudioEnvironment {
+  public giteaAccessToken: string = process.env.GITEA_ACCESS_TOKEN;
+
+  constructor(environment?: Environment) {
+    super(environment);
+  }
+
+  public getDeleteAppEndpoint(environment?: Environment): string {
+    const org = environment?.org || this.org;
+    const app = environment?.app || this.app;
+    return `/repos/api/v1/repos/${org}/${app}?token=${this.giteaAccessToken}`;
+  }
+}

frontend/testing/playwright/helpers/RouterRoute.ts

@@ -0,0 +1,36 @@
+import { Environment, StudioEnvironment } from './StudioEnvironment';
+
+type SupportedRoutes = 'altinnLoginPage' | 'dashboard' | 'dashboardCreateApp' | 'editorOverview';
+
+type RouterRoutes = Record<SupportedRoutes, string>;
+
+const routerRoutes: RouterRoutes = {
+  altinnLoginPage: '/',
+  dashboard: '/dashboard',
+  dashboardCreateApp: '/dashboard/self/new',
+  editorOverview: `/editor/{{org}}/{{app}}/overview`,
+};
+
+export class RouterRoute extends StudioEnvironment {
+  constructor(environment: Environment) {
+    super(environment);
+  }
+
+  public getRoute(route: SupportedRoutes): string {
+    const routerRoute: string = routerRoutes[route];
+
+    if (this.includesOrgAndApp(routerRoute)) {
+      return this.replaceOrgAndMap(routerRoute);
+    }
+
+    return routerRoute;
+  }
+
+  private replaceOrgAndMap(route: string): string {
+    return route.replace('{{org}}', this.org).replace('{{app}}', this.app);
+  }
+
+  private includesOrgAndApp(route: string): boolean {
+    return route.includes('{{org}}') || route.includes('{{app}}');
+  }
+}

frontend/testing/playwright/helpers/StudioEnvironment.ts

@@ -0,0 +1,19 @@
+export type Environment = {
+  org?: string;
+  app?: string;
+};
+
+export class StudioEnvironment {
+  public readonly org: string;
+  public app: string;
+  public readonly designerAppName: string;
+
+  constructor(private environment?: Environment) {
+    this.org = this.environment?.org ?? process.env.PLAYWRIGHT_USER;
+    this.app = this.environment?.app ?? process.env.PLAYWRIGHT_DESIGNER_APP_NAME;
+  }
+
+  public updateAppNameEnv(appName: string): void {
+    this.app = appName;
+  }
+}

frontend/testing/playwright/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "playwright-studio",
+  "private": true,
+  "version": "1.0.0",
+  "packageManager": "yarn@4.0.2",
+  "dependencies": {
+    "dotenv": "^16.3.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.1",
+    "@types/dotenv": "^8.2.0",
+    "@types/node": "^20.10.5",
+    "ts-node": "^10.9.2"
+  },
+  "scripts": {
+    "setup:playwright": "playwright install --with-deps && yarn setup:local:env",
+    "setup:playwright:ci": "playwright install --with-deps",
+    "setup:local:env": "ts-node ./scripts/setup.ts",
+    "test:all": "playwright test --config ./playwright.config.ts"
+  }
+}

frontend/testing/playwright/pages/CreateServicePage.ts

@@ -0,0 +1,29 @@
+import { Page } from '@playwright/test';
+import { BasePage } from '../helpers/BasePage';
+
+export class CreateServicePage extends BasePage {
+  constructor(page: Page) {
+    super(page);
+  }
+
+  public async loadCreateAppFormPage(): Promise<void> {
+    await this.page.goto(this.getRoute('dashboardCreateApp'));
+  }
+
+  public async verifyCreateAppFormPage(): Promise<void> {
+    await this.page.waitForURL(this.getRoute('dashboardCreateApp'));
+  }
+
+  public async writeAppName(appName: string): Promise<void> {
+    await this.page.getByLabel(this.textMock('dashboard.name')).fill(appName);
+    return this.updateAppNameEnv(appName);
+  }
+
+  public async clickOnCreateAppButton(): Promise<void> {
+    await this.page.getByRole('button', { name: this.textMock('dashboard.create_service_btn') }).click();
+  }
+
+  public async verifyIsNavigatedToOverviewPage(): Promise<void> {
+    await this.page.waitForURL(this.getRoute('editorOverview'));
+  }
+}

frontend/testing/playwright/pages/DashboardPage.ts

@@ -0,0 +1,20 @@
+import { BasePage } from '../helpers/BasePage';
+import { Page } from '@playwright/test';
+
+export class DashboardPage extends BasePage {
+  constructor(page: Page) {
+    super(page);
+  }
+
+  public async loadDashboardPage(): Promise<void> {
+    await this.page.goto(this.getRoute('dashboard'));
+  }
+
+  public async verifyDashboardPage(): Promise<void> {
+    await this.page.waitForURL(this.getRoute('dashboard'));
+  }
+
+  public async clickOnCreateAppLink(): Promise<void> {
+    await this.page.getByRole('link', { name: this.textMock('dashboard.new_service') }).click();
+  }
+}

frontend/testing/playwright/pages/LoginPage.ts

@@ -0,0 +1,45 @@
+import { Page } from '@playwright/test';
+import { BasePage } from '../helpers/BasePage';
+
+// Since this page is a Razor page, it's not using the nb/en.json files, which are used in the frontend.
+const loginPageTexts: Record<string, string> = {
+  login: 'logg inn',
+  username: 'Brukernavn eller epost',
+  password: 'Passord',
+};
+
+export class LoginPage extends BasePage {
+  private readonly authStorageFile: string = '.playwright/auth/user.json';
+
+  constructor(page: Page) {
+    super(page);
+  }
+
+  public async goToAltinnLoginPage(): Promise<void> {
+    await this.page.goto(this.getRoute('altinnLoginPage'));
+  }
+
+  public async goToGiteaLoginPage(): Promise<void> {
+    await this.page.getByRole('button', { name: loginPageTexts['login'] }).click();
+  }
+
+  public async writeUsername(username: string): Promise<void> {
+    return await this.page.getByLabel(loginPageTexts['username']).fill(username);
+  }
+
+  public async writePassword(password: string): Promise<void> {
+    return await this.page.getByLabel(loginPageTexts['password']).fill(password);
+  }
+
+  public async clickLoginButton(): Promise<void> {
+    return await this.page.getByRole('button', { name: loginPageTexts['login'] }).click();
+  }
+
+  public async confirmSuccessfulLogin(): Promise<void> {
+    return this.page.waitForURL(this.getRoute('dashboard'));
+  }
+
+  public async addSessionToSharableStorage() {
+    return await this.page.context().storageState({ path: this.authStorageFile });
+  }
+}

frontend/testing/playwright/playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from '@playwright/test';
+import { config } from 'dotenv';
+import { ExtendedTestOptions } from './extenders/testExtend';
+
+config();
+
+export default defineConfig<ExtendedTestOptions>({
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    locale: 'nb-NO',
+    timezoneId: 'Europe/Oslo',
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    { name: 'setup', testMatch: /.*\.setup\.ts/ },
+    {
+      name: 'create-app-only',
+      dependencies: ['setup'],
+      testDir: './tests/create-app-only/',
+      testMatch: '*.spec.ts',
+      teardown: 'teardown-create-app-only',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL,
+        storageState: '.playwright/auth/user.json',
+        testAppName: 'simple-app-test',
+        headless: true,
+      },
+    },
+    {
+      name: 'teardown-create-app-only',
+      testDir: './tests/create-app-only/',
+      testMatch: '*create-app-only.teardown.ts',
+      use: {
+        baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL,
+        testAppName: 'simple-app-test',
+      },
+    },
+  ],
+});
+