Update to Angular 19

.github/workflows/cicd.yaml

@@ -18,7 +18,7 @@ jobs:
       - name: Adding Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.14.0
+          node-version: 22.14.0
           cache: 'npm'
 
       - name: Install Dependencies
@@ -39,7 +39,7 @@ jobs:
 
       - name: Run TestCafe tests in container
         run: |
-          docker run -w /opt/tests -v ${{ github.workspace }}:/opt/tests timbru31/node-chrome:20 npx testcafe chrome:headless ./e2e/fixtures --app="npm run serve:ci" -c 4
+          docker run -w /opt/tests -v ${{ github.workspace }}:/opt/tests timbru31/node-chrome:22 npx testcafe chrome:headless ./e2e/fixtures --app="npm run serve:ci" -c 4
 
       - name: Upload Artifacts
         uses: actions/upload-artifact@v4

.testcaferc.cjs

@@ -23,7 +23,7 @@ module.exports = {
     test: {
       before: async (t) => {
         const client = await t.getCurrentCDPSession();
-        client.send('Animation.setPlaybackRate', { playbackRate: 100000 });
+        client.Animation.setPlaybackRate({ playbackRate: 100000 });
         await t.resizeWindow(1920, 1080);
       },
     },

Dockerfile

@@ -1,4 +1,4 @@
-FROM timbru31/node-chrome:20
+FROM timbru31/node-chrome:22
 COPY package*.json ./
 RUN npm ci
 ENTRYPOINT []

angular.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": {
               "base": "dist/timer-5",
@@ -47,7 +47,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "timer:build:production"
@@ -58,6 +58,7 @@
           },
           "defaultConfiguration": "development",
           "options": {
+            "allowedHosts": ["localhost", "0.0.0.0", "host.docker.internal"],
             "host": "0.0.0.0"
           }
         },

e2e/fixtures/filters.ts

@@ -16,7 +16,7 @@ test('Name', async (t) => {
 
   await t.expect(await comparePageScreenshot('empty filter')).eql(VISUAL_REGRESSION_OK);
   // Fill in the "Name filter", in lowercase
-  await t.typeText(screenTasks.filter.name.input, 'game');
+  await t.typeText(screenTasks.filter.name.input, 'game', { paste: true });
   // Assert current task is still opened
   await t.expect(screenTask.name.textContent).eql('BAZ');
   // Assert the displayed tasks match the filter

e2e/fixtures/general.ts

@@ -2,7 +2,7 @@ import { Selector } from 'testcafe';
 import { app } from '../page-objects/app';
 import { dialogHotkeyCheatsheet } from '../page-objects/dialog-hotkeys-cheatsheet';
 import { screenTasks } from '../page-objects/screen-tasks';
-import { getCdpClient, reload } from '../utils';
+import { reload } from '../utils';
 import { VISUAL_REGRESSION_OK, comparePageScreenshot } from '../visual-regression';
 
 fixture('General');
@@ -42,15 +42,15 @@ test('Theme switcher', async (t) => {
   await t.click(app.buttonSwitchTheme);
   await t.click(app.buttonTheme.withText('System'));
   // Override the system theme to dark
-  const client = await getCdpClient();
-  await client.send('Emulation.setEmulatedMedia', {
+  const client = await t.getCurrentCDPSession();
+  await client.Emulation.setEmulatedMedia({
     media: 'screen',
     features: [{ name: 'prefers-color-scheme', value: 'dark' }],
   });
   // Assert the theme is applied
   await t.expect(await comparePageScreenshot('system theme dark', { theme: 'preserve' })).eql(VISUAL_REGRESSION_OK);
   // Override the system theme to light
-  await client.send('Emulation.setEmulatedMedia', {
+  await client.Emulation.setEmulatedMedia({
     media: 'screen',
     features: [{ name: 'prefers-color-scheme', value: 'light' }],
   });

e2e/fixtures/tasks.ts

@@ -9,7 +9,7 @@ import { menuTaskActions } from '../page-objects/menu-task-actions';
 import { screenTask } from '../page-objects/screen-task';
 import { screenTasks } from '../page-objects/screen-tasks';
 import { tooltip } from '../page-objects/tooltip';
-import { advanceDate, getCdpClient, getLocationPathname, mockDate, reload, restoreDate } from '../utils';
+import { advanceDate, getLocationPathname, mockDate, reload, restoreDate } from '../utils';
 import { VISUAL_REGRESSION_OK, comparePageScreenshot } from '../visual-regression';
 
 fixture('Tasks');
@@ -238,8 +238,8 @@ test('Renaming the task', async (t) => {
     await t.click(dialogRenameTask.buttonDismiss);
     await t.expect(dialogRenameTask.title.exists).notOk();
   }
-  const client = await getCdpClient();
-  await client.send('Input.dispatchKeyEvent', {
+  const client = await t.getCurrentCDPSession();
+  await client.Input.dispatchKeyEvent({
     type: 'keyDown',
     key: 'F2',
     windowsVirtualKeyCode: 113,

e2e/utils.ts

@@ -1,11 +1,9 @@
-import type remoteChrome from 'chrome-remote-interface';
 import { ClientFunction, Selector, t } from 'testcafe';
 
 export const e2e = (id: string) => Selector(`[data-e2e="${id}"]`);
 export const getLocationPathname = ClientFunction(() => window.location.pathname);
 export const getLocationSearch = ClientFunction(() => window.location.search);
-export const getCdpClient = () => t.getCurrentCDPSession().then((client) => client as remoteChrome.Client);
-export const reload = async () => getCdpClient().then((client) => client.send('Page.reload', { ignoreCache: true }));
+export const reload = async () => t.getCurrentCDPSession().then((client) => client.Page.reload({ ignoreCache: true }));
 
 // Date mocks
 

e2e/visual-regression.ts

@@ -4,7 +4,6 @@ import { existsSync } from 'node:fs';
 import { mkdir, unlink, writeFile } from 'node:fs/promises';
 import { dirname, join, resolve } from 'node:path';
 import { t } from 'testcafe';
-import { getCdpClient } from './utils';
 const os = require('os');
 
 export const VISUAL_REGRESSION_OK = { match: true } as const;
@@ -45,8 +44,8 @@ const prepare = async (colorScheme: ColorScheme) => {
 };
 
 const captureScreenshot = async (path: string) => {
-  const client = await getCdpClient();
-  const screenshot = await client.send('Page.captureScreenshot', { format: 'png' });
+  const client = await t.getCurrentCDPSession();
+  const screenshot = await client.Page.captureScreenshot({ format: 'png' });
   await mkdir(dirname(path), { recursive: true });
   return Buffer.from(screenshot.data, 'base64');
 };
@@ -82,8 +81,8 @@ const maskImage = async (source: string | Buffer, bounds: Rect[]) => {
 
 const forceTheme = async (colorScheme: ColorScheme) => {
   if (colorScheme === 'preserve') return () => {};
-  const client = await getCdpClient();
-  await client.send('Emulation.setEmulatedMedia', {
+  const client = await t.getCurrentCDPSession();
+  await client.Emulation.setEmulatedMedia({
     media: 'screen',
     features: [
       {
@@ -93,7 +92,7 @@ const forceTheme = async (colorScheme: ColorScheme) => {
     ],
   });
   return async () => {
-    await client.send('Emulation.setEmulatedMedia', {
+    await client.Emulation.setEmulatedMedia({
       media: 'screen',
       features: [
         {