test: migrate i18n E2E tests to Puppeteer

tests/e2e/tests/i18n/ivy-localize-basehref.ts

@@ -9,7 +9,14 @@
 import { expectFileToMatch } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
-import { baseHrefs, externalServer, langTranslations, setupI18nConfig } from './setup';
+import { executeBrowserTest } from '../../utils/puppeteer';
+import {
+  baseHrefs,
+  browserCheck,
+  externalServer,
+  langTranslations,
+  setupI18nConfig,
+} from './setup';
 
 export default async function () {
   // Setup i18n tests and config.
@@ -50,18 +57,12 @@ export default async function () {
     await expectFileToMatch(`${outputPath}/index.html`, `href="${baseHrefs[lang] || '/'}"`);
 
     // Execute Application E2E tests for a production build without dev server
-    const { server, port, url } = await externalServer(
-      outputPath,
-      (baseHrefs[lang] as string) || '/',
-    );
+    const { server, url } = await externalServer(outputPath, (baseHrefs[lang] as string) || '/');
     try {
-      await ng(
-        'e2e',
-        `--port=${port}`,
-        `--configuration=${lang}`,
-        '--dev-server-target=',
-        `--base-url=${url}`,
-      );
+      await executeBrowserTest({
+        baseUrl: url,
+        checkFn: (page) => browserCheck(page, lang),
+      });
     } finally {
       server.close();
     }
@@ -81,18 +82,12 @@ export default async function () {
     await expectFileToMatch(`${outputPath}/index.html`, `href="/test${baseHrefs[lang] || '/'}"`);
 
     // Execute Application E2E tests for a production build without dev server
-    const { server, port, url } = await externalServer(
-      outputPath,
-      '/test' + (baseHrefs[lang] || '/'),
-    );
+    const { server, url } = await externalServer(outputPath, '/test' + (baseHrefs[lang] || '/'));
     try {
-      await ng(
-        'e2e',
-        `--port=${port}`,
-        `--configuration=${lang}`,
-        '--dev-server-target=',
-        `--base-url=${url}`,
-      );
+      await executeBrowserTest({
+        baseUrl: url,
+        checkFn: (page) => browserCheck(page, lang),
+      });
     } finally {
       server.close();
     }

tests/e2e/tests/i18n/ivy-localize-es2015-e2e.ts

@@ -1,13 +1,14 @@
-import { getGlobalVariable } from '../../utils/env';
-import { ng } from '../../utils/process';
-import { langTranslations, setupI18nConfig } from './setup';
+import { executeBrowserTest } from '../../utils/puppeteer';
+import { browserCheck, langTranslations, setupI18nConfig } from './setup';
 
 export default async function () {
   // Setup i18n tests and config.
   await setupI18nConfig();
 
   for (const { lang } of langTranslations) {
-    // Execute Application E2E tests with dev server
-    await ng('e2e', `--configuration=${lang}`, '--port=0');
+    await executeBrowserTest({
+      configuration: lang,
+      checkFn: (page) => browserCheck(page, lang),
+    });
   }
 }

tests/e2e/tests/i18n/ivy-localize-es2015.ts

@@ -1,8 +1,9 @@
 import { getGlobalVariable } from '../../utils/env';
 import { expectFileToMatch } from '../../utils/fs';
 import { ng } from '../../utils/process';
+import { executeBrowserTest } from '../../utils/puppeteer';
 import { expectToFail } from '../../utils/utils';
-import { externalServer, langTranslations, setupI18nConfig } from './setup';
+import { browserCheck, externalServer, langTranslations, setupI18nConfig } from './setup';
 
 export default async function () {
   // Setup i18n tests and config.
@@ -32,15 +33,12 @@ export default async function () {
     await expectFileToMatch(`${outputPath}/index.html`, `lang="${lang}"`);
 
     // Execute Application E2E tests for a production build without dev server
-    const { server, port, url } = await externalServer(outputPath, `/${lang}/`);
+    const { server, url } = await externalServer(outputPath, `/${lang}/`);
     try {
-      await ng(
-        'e2e',
-        `--port=${port}`,
-        `--configuration=${lang}`,
-        '--dev-server-target=',
-        `--base-url=${url}`,
-      );
+      await executeBrowserTest({
+        baseUrl: url,
+        checkFn: (page) => browserCheck(page, lang),
+      });
     } finally {
       server.close();
     }

tests/e2e/tests/i18n/ivy-localize-locale-data-augment.ts

@@ -1,14 +1,9 @@
 import { getGlobalVariable } from '../../utils/env';
-import {
-  expectFileToMatch,
-  prependToFile,
-  readFile,
-  replaceInFile,
-  writeFile,
-} from '../../utils/fs';
+import { expectFileToMatch, prependToFile, readFile, writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
-import { langTranslations, setupI18nConfig } from './setup';
+import { executeBrowserTest } from '../../utils/puppeteer';
+import { browserCheck, langTranslations, setupI18nConfig } from './setup';
 
 export default async function () {
   // Setup i18n tests and config.
@@ -20,9 +15,6 @@ export default async function () {
     appProject.architect['build'].options.localize = ['fr'];
   });
 
-  // Update E2E test to look for augmented locale data
-  await replaceInFile('./e2e/src/app.fr.e2e-spec.ts', 'janvier', 'changed-janvier');
-
   // Augment the locale data and import into the main application file
   const localeData = await readFile('node_modules/@angular/common/locales/global/fr.js');
   await writeFile('src/fr-changed.js', localeData.replace('janvier', 'changed-janvier'));
@@ -45,6 +37,27 @@ export default async function () {
     }
 
     // Execute Application E2E tests with dev server
-    await ng('e2e', `--configuration=${lang}`, '--port=0');
+    await executeBrowserTest({
+      configuration: lang,
+      checkFn: async (page) => {
+        // Run standard checks but expect failure on date
+        try {
+          await browserCheck(page, lang);
+          throw new Error('Expected browserCheck to fail due to modified locale data');
+        } catch (e) {
+          if (!(e instanceof Error) || !e.message.includes("Expected 'date' to be")) {
+            throw e;
+          }
+        }
+
+        // Verify the modified date
+        const getParagraph = async (id: string) =>
+          page.$eval(`p#${id}`, (el) => el.textContent?.trim());
+        const date = await getParagraph('date');
+        if (date !== 'changed-janvier') {
+          throw new Error(`Expected 'date' to be 'changed-janvier', but got '${date}'.`);
+        }
+      },
+    });
   }
 }

tests/e2e/tests/i18n/ivy-localize-sub-path.ts

@@ -10,7 +10,8 @@ import { join } from 'node:path';
 import { expectFileToMatch } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
-import { baseDir, baseHrefs, externalServer, langTranslations, setupI18nConfig } from './setup';
+import { executeBrowserTest } from '../../utils/puppeteer';
+import { baseDir, browserCheck, externalServer, langTranslations, setupI18nConfig } from './setup';
 
 export default async function () {
   // Setup i18n tests and config.
@@ -56,16 +57,13 @@ export default async function () {
     await expectFileToMatch(`${outputPath}/index.html`, `href="${baseHref}"`);
 
     // Execute Application E2E tests for a production build without dev server
-    const { server, port, url } = await externalServer(outputPath, baseHref);
+    const { server, url } = await externalServer(outputPath, baseHref);
 
     try {
-      await ng(
-        'e2e',
-        `--port=${port}`,
-        `--configuration=${lang}`,
-        '--dev-server-target=',
-        `--base-url=${url}`,
-      );
+      await executeBrowserTest({
+        baseUrl: url,
+        checkFn: (page) => browserCheck(page, lang),
+      });
     } finally {
       server.close();
     }

tests/e2e/tests/i18n/setup.ts

@@ -7,6 +7,7 @@ import { updateJsonFile } from '../../utils/project';
 import { readNgVersion } from '../../utils/version';
 import { Server } from 'node:http';
 import { AddressInfo } from 'node:net';
+import type { Page } from 'puppeteer';
 
 // Configurations for each locale.
 const translationFile = 'src/locale/messages.xlf';
@@ -61,6 +62,35 @@ export const langTranslations = [
 ];
 export const sourceLocale = langTranslations[0].lang;
 
+export async function browserCheck(page: Page, lang: string) {
+  const translation = langTranslations.find((t) => t.lang === lang)?.translation;
+  if (!translation) {
+    throw new Error(`Could not find translation for language '${lang}'`);
+  }
+
+  const getParagraph = async (id: string) => page.$eval(`p#${id}`, (el) => el.textContent?.trim());
+
+  const hello = await getParagraph('hello');
+  if (hello !== translation.hello) {
+    throw new Error(`Expected 'hello' to be '${translation.hello}', but got '${hello}'.`);
+  }
+
+  const locale = await getParagraph('locale');
+  if (locale !== lang) {
+    throw new Error(`Expected 'locale' to be '${lang}', but got '${locale}'.`);
+  }
+
+  const date = await getParagraph('date');
+  if (date !== translation.date) {
+    throw new Error(`Expected 'date' to be '${translation.date}', but got '${date}'.`);
+  }
+
+  const plural = await getParagraph('plural');
+  if (plural !== translation.plural) {
+    throw new Error(`Expected 'plural' to be '${translation.plural}', but got '${plural}'.`);
+  }
+}
+
 export interface ExternalServer {
   readonly server: Server;
   readonly port: number;
@@ -173,47 +203,12 @@ export async function setupI18nConfig() {
   `,
   );
 
-  // Add e2e specs for each lang.
-  for (const { lang, translation } of langTranslations) {
-    await writeFile(
-      `./e2e/src/app.${lang}.e2e-spec.ts`,
-      `
-      import { browser, logging, element, by } from 'protractor';
-
-      describe('workspace-project App', () => {
-        const getParagraph = async (name: string) => element(by.css('app-root p#' + name)).getText();
-        beforeEach(() => browser.get(browser.baseUrl));
-        afterEach(async () => {
-          // Assert that there are no errors emitted from the browser
-          const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-          expect(logs).not.toContain(jasmine.objectContaining({
-            level: logging.Level.SEVERE,
-          } as logging.Entry));
-        });
-
-        it('should display welcome message', async () =>
-          expect(await getParagraph('hello')).toEqual('${translation.hello}'));
-
-        it('should display locale', async () =>
-          expect(await getParagraph('locale')).toEqual('${lang}'));
-
-        it('should display localized date', async () =>
-          expect(await getParagraph('date')).toEqual('${translation.date}'));
-
-        it('should display pluralized message', async () =>
-          expect(await getParagraph('plural')).toEqual('${translation.plural}'));
-      });
-    `,
-    );
-  }
-
   // Update angular.json to build, serve, and test each locale.
   await updateJsonFile('angular.json', (workspaceJson) => {
     const appProject = workspaceJson.projects['test-project'];
     const appArchitect = workspaceJson.projects['test-project'].architect;
     const buildConfigs = appArchitect['build'].configurations;
     const serveConfigs = appArchitect['serve'].configurations;
-    const e2eConfigs = appArchitect['e2e'].configurations;
 
     appArchitect['build'].defaultConfiguration = undefined;
 
@@ -245,10 +240,6 @@ export async function setupI18nConfig() {
 
       buildConfigs[lang] = { localize: [lang] };
       serveConfigs[lang] = { buildTarget: `test-project:build:${lang}` };
-      e2eConfigs[lang] = {
-        specs: [`./src/app.${lang}.e2e-spec.ts`],
-        devServerTarget: `test-project:serve:${lang}`,
-      };
     }
   });