From 4b56cb42983d4134715eb7fe7b083fdcc04980f0 Mon Sep 17 00:00:00 2001
From: Maurycy Zarzycki <maurycy@evidentlycube.com>
Date: Sun, 29 Oct 2023 10:05:24 +0100
Subject: [PATCH] Add support for running in-browser tests via playwright in
 GitHub CLI (#7820)

* Add support for running in-browser tests via playwright in GitHub CLI

* `ci.yml` was updated to store the report so that it can be inspected on failure
* `ci-test.sh` was added as an expansion to `test.sh` which installs and runs playwright
* `playwright.spec.js` does the actual verification of opening the test TW edition in browser, waiting for the tests to finish and then verifying it has indeed passed
* `playwright.config.js` Playwrifht configuration

* Add support for running in-browser tests via playwright in GitHub CLI

* `ci.yml` was updated to store the report so that it can be inspected on failure
* `ci-test.sh` was added as an expansion to `test.sh` which installs and runs playwright
* `playwright.spec.js` does the actual verification of opening the test TW edition in browser, waiting for the tests to finish and then verifying it has indeed passed
* `playwright.config.js` Playwrifht configuration

* Fix file permissions for `ci-test.sh`

* Increased node version for github actions to support playwright

* Add installation of the required @playwright/test library during CI test execution
---
 .github/workflows/ci.yml         | 10 +++++--
 .gitignore                       |  4 ++-
 bin/ci-test.sh                   | 16 +++++++++++
 editions/test/playwright.spec.js | 25 +++++++++++++++++
 playwright.config.js             | 46 ++++++++++++++++++++++++++++++++
 5 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100755 bin/ci-test.sh
 create mode 100644 editions/test/playwright.spec.js
 create mode 100644 playwright.config.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8daf2f468c1..a146d15a8d5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -5,7 +5,7 @@ on:
       - master
       - tiddlywiki-com
 env:
-  NODE_VERSION: "12"
+  NODE_VERSION: "18"
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -14,7 +14,13 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: "${{ env.NODE_VERSION }}"
-      - run: "./bin/test.sh"
+      - run: "./bin/ci-test.sh"
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
   build-prerelease:
     runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/master'
diff --git a/.gitignore b/.gitignore
index 351c576ad0b..0ab5b300f77 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,6 @@
 tmp/
 output/
 node_modules/
-
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/bin/ci-test.sh b/bin/ci-test.sh
new file mode 100755
index 00000000000..dd90c4db671
--- /dev/null
+++ b/bin/ci-test.sh
@@ -0,0 +1,16 @@
+#!/bin/bash
+
+# test TiddlyWiki5 for tiddlywiki.com
+
+npm install playwright @playwright/test
+npx playwright install chromium firefox --with-deps
+
+node ./tiddlywiki.js \
+	./editions/test \
+	--verbose \
+	--version \
+	--rendertiddler $:/core/save/all test.html text/plain \
+	--test \
+	|| exit 1
+
+npx playwright test
diff --git a/editions/test/playwright.spec.js b/editions/test/playwright.spec.js
new file mode 100644
index 00000000000..1d8c624c73a
--- /dev/null
+++ b/editions/test/playwright.spec.js
@@ -0,0 +1,25 @@
+const { test, expect } = require('@playwright/test');
+const {resolve} = require('path');
+
+const indexPath = resolve(__dirname, 'output', 'test.html');
+const crossPlatformIndexPath = indexPath.replace(/^\/+/, '');
+
+
+test('get started link', async ({ page }) => {
+    // The tests can take a while to run
+    const timeout = 1000 * 30;
+    test.setTimeout(timeout);
+
+    // Load the generated test TW html
+    await page.goto(`file:///${crossPlatformIndexPath}`);
+
+    // Sanity check
+    await expect(page.locator('.tc-site-title'), "Expected correct page title to verify the test page was loaded").toHaveText('TiddlyWiki5');
+
+    // Wait for jasmine results bar to appear
+    await expect(page.locator('.jasmine-overall-result'), "Expected jasmine test results bar to be present").toBeVisible({timeout});
+
+    // Assert the tests have passed
+    await expect(page.locator('.jasmine-overall-result.jasmine-failed'), "Expected jasmine tests to not have failed").not.toBeVisible();
+    await expect(page.locator('.jasmine-overall-result.jasmine-passed'), "Expected jasmine tests to have passed").toBeVisible();
+});
diff --git a/playwright.config.js b/playwright.config.js
new file mode 100644
index 00000000000..491679a6f56
--- /dev/null
+++ b/playwright.config.js
@@ -0,0 +1,46 @@
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './editions/test/',
+
+  // Allow parallel tests
+  fullyParallel: true,
+
+  // Prevent accidentally committed "test.only" from wrecking havoc
+  forbidOnly: !!process.env.CI,
+
+  // Do not retry tests on failure
+  retries: 0,
+
+  // How many parallel workers
+  workers: process.env.CI ? 1 : undefined,
+
+  // Reporter to use. See https://playwright.dev/docs/test-reporters
+  reporter: 'html',
+
+  // Settings shared with all the tests
+  use: {
+    // Take a screenshot when the test fails
+    screenshot: {
+      mode: 'only-on-failure',
+      fullPage: true
+    }
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    }
+  ],
+});
+