update node to v20 lts

.github/workflows/ci-frontend-api.yml

@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [16.20.2]
+        node: [20.9.0]
 
     steps:
       - name: Checkout
@@ -35,7 +35,7 @@ jobs:
         uses: pnpm/[email protected]
         id: pnpm-install
         with:
-          version: 7
+          version: 8
           run_install: false
 
       - name: Get pnpm store directory
@@ -44,7 +44,7 @@ jobs:
           echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v3.3.2
         with:
           path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -64,7 +64,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [16.20.2]
+        node: [20.9.0]
 
     steps:
       - name: Checkout
@@ -79,7 +79,7 @@ jobs:
         uses: pnpm/[email protected]
         id: pnpm-install
         with:
-          version: 7
+          version: 8
           run_install: false
 
       - name: Get pnpm store directory
@@ -88,7 +88,7 @@ jobs:
           echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v3.3.2
         with:
           path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -108,7 +108,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [16.20.2]
+        node: [20.9.0]
 
     steps:
       - name: Checkout
@@ -123,7 +123,7 @@ jobs:
         uses: pnpm/[email protected]
         id: pnpm-install
         with:
-          version: 7
+          version: 8
           run_install: false
 
       - name: Get pnpm store directory
@@ -132,7 +132,7 @@ jobs:
           echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v3.3.2
         with:
           path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}

.github/workflows/ci-frontend.yml

@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [16.20.2]
+        node: [20.9.0]
 
     steps:
       - name: Checkout
@@ -64,7 +64,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [16.20.2]
+        node: [20.9.0]
 
     steps:
       - name: Checkout
@@ -104,11 +104,11 @@ jobs:
         working-directory: ./frontend/apps/remark42
 
   lint:
-    name: Eslint & Stylelint
+    name: Linters
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [16.20.2]
+        node: [20.9.0]
 
     steps:
       - name: Checkout
@@ -176,7 +176,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [16.20.2]
+        node: [20.9.0]
 
     steps:
       - name: Checkout

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=$BUILDPLATFORM node:16.20.2-alpine AS frontend-deps
+FROM --platform=$BUILDPLATFORM node:20.9.0-alpine AS frontend-deps
 
 ARG SKIP_FRONTEND_TEST
 ARG SKIP_FRONTEND_BUILD

Dockerfile.artifacts

@@ -1,4 +1,4 @@
-FROM node:16.20.2-alpine AS frontend-deps
+FROM node:20.9.0-alpine AS frontend-deps
 
 ENV CI=true
 

compose-e2e-test.yml

@@ -24,6 +24,7 @@ services:
       - ADMIN_SHARED_ID=dev_user # set admin flag for default user on local oauth2
       - AUTH_ANON=true
       - AUTH_EMAIL_ENABLE=true
+      - UPDATE_LIMIT=0 # we run multiple browsers in parallel and test with the same user
     volumes:
       - ./var:/srv/var
 

frontend/.npmrc

@@ -0,0 +1,2 @@
+use-node-version=20.9.0
+auto-install-peers=false

frontend/Dockerfile.e2e

@@ -5,7 +5,9 @@ WORKDIR /frontend
 
 COPY ./package.json ./pnpm-workspace.yaml ./pnpm-lock.yaml /frontend/
 COPY ./e2e/package.json /frontend/e2e/
-RUN corepack enable pnpm && pnpm install
+RUN corepack enable
+RUN corepack prepare pnpm@latest-8 --activate
+RUN pnpm install --no-frozen-lockfile
 
 COPY ./e2e/playwright.config.ts /frontend/e2e/
 COPY ./e2e/tests /frontend/e2e/tests/

frontend/apps/remark42/package.json

@@ -21,10 +21,6 @@
     "translation:generate": "node ./tasks/generateDictionary.js",
     "translation:check": "node ./tasks/checkTranslation.js"
   },
-  "engines": {
-    "node": ">=16.15 <=17.*",
-    "pnpm": "7.*"
-  },
   "dependencies": {
     "@github/markdown-toolbar-element": "^2.1.1",
     "@github/text-expander-element": "^2.2.2",

frontend/e2e/.gitignore

@@ -1,4 +1,5 @@
-node_modules/
-/test-results/
-/playwright-report/
-/playwright/.cache/
+node_modules
+test-results
+playwright-report
+playwright/.cache
+screenshots

frontend/e2e/package.json

@@ -4,16 +4,17 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "test": "playwright test"
+    "test": "playwright test",
+    "debug": "playwright test --ui"
   },
   "author": "Paul Mineev <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.25.0",
-    "@types/node": "^18.7.8",
-    "nanoid": "^4.0.0",
-    "playwright": "^1.25.0",
+    "@playwright/test": "^1.39.0",
+    "@types/node": "^18.18.7",
+    "nanoid": "^4.0.2",
+    "playwright": "^1.39.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.5"
   }
 }

frontend/e2e/playwright.config.ts

@@ -1,5 +1,9 @@
-import type { PlaywrightTestConfig } from '@playwright/test'
-import { devices } from '@playwright/test'
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+const baseURL = process.env.CI
+	? "http://remark42:8080"
+	: "http://127.0.0.1:8080";
 
 /**
  * Read environment variables from file.
@@ -11,7 +15,7 @@ import { devices } from '@playwright/test'
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-	testDir: './tests',
+	testDir: "./tests",
 	/* Maximum time one test can run for. */
 	timeout: 30 * 1000,
 	expect: {
@@ -30,38 +34,40 @@ const config: PlaywrightTestConfig = {
 	/* 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',
+	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: process.env.CI ? 'http://remark42:8080' : 'http://127.0.0.1:8080',
+		baseURL,
 
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-		trace: 'on-first-retry',
+		trace: "on-first-retry",
+
+		screenshot: "only-on-failure",
 	},
 
 	/* Configure projects for major browsers */
 	projects: [
 		{
-			name: 'chromium',
+			name: "chromium",
 			use: {
-				...devices['Desktop Chrome'],
+				...devices["Desktop Chrome"],
 			},
 		},
 
 		{
-			name: 'firefox',
+			name: "firefox",
 			use: {
-				...devices['Desktop Firefox'],
+				...devices["Desktop Firefox"],
 			},
 		},
 
 		{
-			name: 'webkit',
+			name: "webkit",
 			use: {
-				...devices['Desktop Safari'],
+				...devices["Desktop Safari"],
 			},
 		},
 
@@ -95,13 +101,13 @@ const config: PlaywrightTestConfig = {
 	],
 
 	/* Folder for test artifacts such as screenshots, videos, traces, etc. */
-	// outputDir: 'test-results/',
+	outputDir: "test-results/",
 
 	/* Run your local dev server before starting the tests */
 	// webServer: {
 	//   command: 'npm run start',
 	//   port: 3000,
 	// },
-}
+};
 
-export default config
+export default config;

frontend/e2e/prettier.config.js → frontend/e2e/prettier.config.mjs

@@ -1,8 +1,8 @@
 /** @type {import('prettier').Config} */
-module.exports = {
+export default {
 	singleQuote: true,
 	semi: false,
-	arrowParens: 'always',
-	trailingComma: 'es5',
+	arrowParens: "always",
+	trailingComma: "es5",
 	printWidth: 120,
-}
+};

frontend/e2e/tests/post-comment.spec.ts

@@ -1,30 +1,50 @@
-import { test } from '@playwright/test'
-import { nanoid } from 'nanoid'
-import * as path from 'path'
+import { test, expect } from "@playwright/test";
+import { nanoid } from "nanoid";
 
-test.describe('Post comment', () => {
+test.describe("Post comment", () => {
 	test.beforeEach(async ({ page }) => {
-		await page.goto('/web/')
-	})
+		await page.goto("/web/");
+	});
 
-	test('as dev user', async ({ page, browserName }) => {
-		const iframe = page.frameLocator('iframe[name]')
-		await iframe.locator('text=Sign In').click()
+	test("as dev user", async ({ page, browserName }) => {
+		await page.frameLocator("iframe[name]").locator("text=Sign In").click();
 		const [authPage] = await Promise.all([
-			page.waitForEvent('popup'),
-			iframe.locator("[title='Sign In with Dev']").click(),
-		])
-		await authPage.locator('text=Authorize').click()
-		// triggers tab visibility and enables widget to re-render with auth state
-		await page.press('iframe[name]', 'Tab')
-		await iframe.locator('textarea').click()
-		const message = `Hello world! ${nanoid()}`
-		await iframe.locator('textarea').type(message)
-		await iframe.locator('text=Send').click()
-		// checks if comment was posted
-		iframe.locator(`text=${message}`).first()
-		await page.reload()
-		// checks if saved comment is visible
-		iframe.locator(`text=${message}`).first()
-	})
-})
+			page.waitForEvent("popup"),
+			page
+				.frameLocator("iframe[name]")
+				.locator("[title='Sign In with Dev']")
+				.click(),
+		]);
+		await authPage.locator("text=Authorize").click();
+
+		// firefox doesn't see iframe after auth
+		if (browserName === "firefox") {
+			await page.reload();
+		} else {
+			await page.press("iframe[name]", "Tab");
+		}
+		const message = `Hello world, ${browserName}! ${nanoid()}`;
+		await page
+			.frameLocator("iframe[name]")
+			.getByPlaceholder("Your comment here")
+			.fill(message);
+		await page
+			.frameLocator("iframe[name]")
+			.getByRole("button", { name: "Send" })
+			.click();
+		await expect(
+			page.frameLocator("iframe[name]").getByText(message)
+		).toBeVisible();
+		await page.reload();
+		// checks if comment is saved and visible after reload
+		await page
+			.frameLocator("iframe[name]")
+			.locator("body")
+			.screenshot({
+				path: `./screenshots/${browserName}.png`,
+			});
+		await expect(
+			page.frameLocator("iframe[name]").getByText(message)
+		).toBeVisible();
+	});
+});