feat: Add basic playwright ui tests

Author: timonback

.github/workflows/build-on-pull-request.yml

@@ -6,6 +6,7 @@ on:
 
 jobs:
   build:
+    timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -18,5 +19,23 @@ jobs:
       - name: Setup Gradle
         uses: gradle/gradle-build-action@v2
 
+# run build
       - name: Build
         run: ./gradlew build
+
+# prepare ui test
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Start application in the background
+        run: ./gradlew npm_run_start &
+# run ui tests
+      - name: E2E
+        run: ./gradlew npm_run_e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -47,3 +47,8 @@ testem.log
 .DS_Store
 Thumbs.db
 /gradle.properties
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -27,6 +27,16 @@ It contains multiple mocks - including the ones from the springwolf-core example
 
 To update the mock data, run `npm run update-mocks`.
 
+## E2E tests
+
+E2E tests are written with [playwright](https://playwright.dev).
+To run them:
+1. start the development server with `npm run start`
+2. run the tests with `npm run test`
+
+During development of test you might find the codegen feature useful:
+`npx playwright codegen localhost:4200`
+
 ## Release
 
 Releasing is done by running the gradle task `publish`. For local development, use `publishToMavenLocal`.

package-lock.json

@@ -5,9 +5,8 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build --prod --base-href=./",
-    "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e",
+    "e2e": "playwright test",
     "update-mocks": "node ./script/update_mock_data.js"
   },
   "private": true,
@@ -33,6 +32,7 @@
     "@angular-devkit/build-angular": "~0.901.6",
     "@angular/cli": "~9.1.6",
     "@angular/compiler-cli": "~9.1.7",
+    "@playwright/test": "^1.27.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",

package.json

@@ -0,0 +1,107 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* 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',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

playwright.config.ts

@@ -19,7 +19,7 @@ <h1>Channels</h1>
 </ul>
 
 <mat-accordion>
-    <mat-expansion-panel *ngFor="let channel of channels" [id]="channel.anchorIdentifier" [expanded]="selectedChannel == channel.anchorIdentifier" (opened)="this.setChannelSelection(channel)">
+    <mat-expansion-panel *ngFor="let channel of channels" [id]="channel.anchorIdentifier.substr(1)" [expanded]="selectedChannel == channel.anchorIdentifier" (opened)="this.setChannelSelection(channel)">
         <mat-expansion-panel-header>
             <mat-panel-title fxLayout fxLayoutAlign="flex-start center" fxLayoutGap="16px">
                 <div class="badge protocol-badge" >

src/app/channels/channels.component.html

@@ -1,6 +1,6 @@
 <h1>Schemas</h1>
 <mat-accordion>
-    <mat-expansion-panel *ngFor="let schema of schemas | keyvalue;" [id]="schema.value.anchorIdentifier" [expanded]="selectedSchema == schema.value.anchorIdentifier" (opened)="this.setSchemaSelection(schema.value)">
+    <mat-expansion-panel *ngFor="let schema of schemas | keyvalue;" [id]="schema.value.anchorIdentifier.substr(1)" [expanded]="selectedSchema == schema.value.anchorIdentifier" (opened)="this.setSchemaSelection(schema.value)">
         <mat-expansion-panel-header>
             <mat-panel-title>
                 <h3>{{ schema.key }}</h3>

src/app/schemas/schemas.component.html

@@ -3,7 +3,7 @@ import { Example } from './example.model';
 export interface Schema {
     name?: string;
     description?: string;
-    anchorIdentifier?: string;
+    anchorIdentifier: string;
     anchorUrl?: string;
     type?: string;
     format?: string;

src/app/shared/models/schema.model.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+import asyncApiJson from '../src/app/shared/mock/mock.springwolf-kafka-example.json'
+
+test.describe('Channel', ()=> {
+  test.beforeEach(async ({ page }, testInfo) => {
+    console.log(`Running ${testInfo.title}`);
+    await page.goto('http://localhost:4200/');
+  });
+
+  test('first collapsible is rendered', async ({ page }) => {
+    await page.locator("#channel-kafka-another-topic-publish-AnotherPayloadDto").click()
+    await expect(page).toHaveURL('http://localhost:4200/#channel-kafka-another-topic-publish-AnotherPayloadDto');
+
+    await expect(page.getByRole('tabpanel', { name: 'Example' }).locator('textarea'))
+      .toHaveValue(JSON.stringify(asyncApiJson.components.schemas.AnotherPayloadDto.example, null, 2))
+
+    await page.getByRole('tab', { name: 'Schema' }).getByText('Schema').click();
+    await page.getByRole('heading', { name: 'AnotherPayloadDto #/components/schemas/AnotherPayloadDto' }).click();
+    await page.getByRole('cell', { name: 'string Foo field example: "bar"' }).getByText('string').click();
+    await page.getByRole('cell', { name: 'string Foo field example: "bar"' }).getByText('Foo field').click();
+    await page.getByRole('cell', { name: 'string Foo field example: "bar"' }).getByText('example: "bar"').click();
+
+    await page.getByRole('tab', { name: 'Headers' }).getByText('Headers').click();
+    await page.getByRole('heading', { name: 'HeadersNotDocumented #/components/schemas/HeadersNotDocumented' }).click();
+    await expect(page.getByRole('tabpanel', { name: 'Headers' }).locator('textarea'))
+      .toHaveValue(JSON.stringify(asyncApiJson.components.schemas.HeadersNotDocumented.example, null, 2))
+
+    await page.getByRole('tab', { name: 'Bindings' }).getByText('Bindings').click();
+    await page.getByText(/\{\s+"groupId":\s+\{\s+"type":\s+"string",\s+"enum":\s+\[\s+"example-group-id"\s+\]\s+\}\s+\}/).click();
+  });
+})

tests/channel.test.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Header', ()=> {
+  test.beforeEach(async ({ page }, testInfo) => {
+    console.log(`Running ${testInfo.title}`);
+    await page.goto('http://localhost:4200/');
+  });
+
+  test('github url is shown', async ({ page }) => {
+    await expect(page.locator("mat-toolbar a")).toHaveAttribute('href', 'https://github.com/stavshamir/springwolf')
+  });
+})

tests/header.test.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+import asyncApiJson from '../src/app/shared/mock/mock.springwolf-kafka-example.json'
+
+test.describe('Info', ()=> {
+  test.beforeEach(async ({ page }, testInfo) => {
+    console.log(`Running ${testInfo.title}`);
+    await page.goto('http://localhost:4200/');
+  });
+
+  test('section is shown', async ({ page }) => {
+    await expect(page.locator('app-info h1')).toHaveText('Springwolf example project - Kafka' );
+    await expect(page.locator('app-info h5')).toHaveText('API VERSION 1.0.0 - AsyncAPI JSON file' );
+    await expect(page.locator('app-info p')).toHaveText('Springwolf example project to demonstrate springwolfs abilities' );
+  });
+
+  test('download of AsyncApi json', async ({ page }) => {
+    const [popup] = await Promise.all([
+      page.waitForEvent('popup'),
+      page.getByRole('link', { name: 'AsyncAPI JSON file' }).click()
+    ]);
+    const popupContent = await popup.evaluate('document.body.textContent') as string
+    await expect(JSON.parse(popupContent)).toStrictEqual(asyncApiJson)
+  });
+})