test: refactor i18n tests

The app-shell and service worker tests were not refactored because they are disabled. They should be refactored when re-enabled.

Author: filipesilva

tests/legacy-cli/e2e/tests/i18n/aot.ts

@@ -15,6 +15,7 @@ const snapshots = require('../../ng-snapshot/package.json');
 
 export default async function () {
   // TEMP: disable pending i18n updates
+  // TODO: when re-enabling, use setupI18nConfig and helpers like other i18n tests.
   return;
 
   const isSnapshotBuild = getGlobalVariable('argv')['ng-snapshots'];

tests/legacy-cli/e2e/tests/i18n/ivy-localize-app-shell.ts

@@ -1,163 +1,45 @@
-import * as express from 'express';
-import { resolve } from 'path';
-import { getGlobalVariable } from '../../utils/env';
-import {
-  appendToFile,
-  copyFile,
-  expectFileToExist,
-  expectFileToMatch,
-  replaceInFile,
-  writeFile,
-} from '../../utils/fs';
-import { ng, npm } from '../../utils/process';
+import { appendToFile, expectFileToMatch } from '../../utils/fs';
+import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 import { expectToFail } from '../../utils/utils';
-import { readNgVersion } from '../../utils/version';
+import { baseDir, externalServer, langTranslations, setupI18nConfig } from './legacy';
 
-export default async function() {
-  let localizeVersion = '@angular/localize@' + readNgVersion();
-  if (getGlobalVariable('argv')['ng-snapshots']) {
-    localizeVersion = require('../../ng-snapshot/package.json').dependencies['@angular/localize'];
-  }
-  await npm('install', `${localizeVersion}`);
 
+export default async function () {
+  // Setup i18n tests and config.
+  await setupI18nConfig();
+
+  // Ensure a DL build is used.
   await updateJsonFile('tsconfig.json', config => {
     config.compilerOptions.target = 'es2015';
     config.angularCompilerOptions.disableTypeScriptVersionCheck = true;
   });
 
-  const baseDir = 'dist/test-project';
-
-  // Set configurations for each locale.
-  const langTranslations = [
-    // TODO: re-enable all locales once localeData support is added.
-    // { lang: 'en-US', translation: 'Hello i18n!' },
-    { lang: 'fr', translation: 'Bonjour i18n!' },
-  ];
-
-  await updateJsonFile('angular.json', workspaceJson => {
-    const appProject = workspaceJson.projects['test-project'];
-    const appArchitect = appProject.architect || appProject.targets;
-    const serveConfigs = appArchitect['serve'].configurations;
-    const e2eConfigs = appArchitect['e2e'].configurations;
-    const buildConfigs = appArchitect['build'].configurations;
-
-    // Make default builds prod.
-    appArchitect['build'].options.optimization = true;
-    appArchitect['build'].options.buildOptimizer = true;
-    appArchitect['build'].options.aot = true;
-    appArchitect['build'].options.fileReplacements = [
-      {
-        replace: 'src/environments/environment.ts',
-        with: 'src/environments/environment.prod.ts',
-      },
-    ];
-
-    // Enable localization for all locales
-    // TODO: re-enable all locales once localeData support is added.
-    // appArchitect['build'].options.localize = true;
-    appArchitect['build'].options.localize = ['fr'];
-    // Always error on missing translations.
-    appArchitect['build'].options.i18nMissingTranslation = 'error';
-
-    // Add locale definitions to the project
-    // tslint:disable-next-line: no-any
-    const i18n: Record<string, any> = (appProject.i18n = { locales: {} });
-    for (const { lang } of langTranslations) {
-      if (lang == 'en-US') {
-        i18n.sourceLocale = lang;
-      } else {
-        i18n.locales[lang] = `src/locale/messages.${lang}.xlf`;
-      }
-
-      buildConfigs[lang] = { localize: [lang] };
-      serveConfigs[lang] = { browserTarget: `test-project:build:${lang}` };
-      e2eConfigs[lang] = {
-        specs: [`./src/app.${lang}.e2e-spec.ts`],
-        devServerTarget: `test-project:serve:${lang}`,
-      };
-    }
-  });
-
-  // Add a translatable element.
-  await writeFile(
-    'src/app/app.component.html',
-    '<h1 i18n="An introduction header for this sample">Hello i18n!</h1>',
-  );
-
-  // Extract the translation messages and copy them for each language.
-  await ng('xi18n', '--output-path=src/locale');
-  await expectFileToExist('src/locale/messages.xlf');
-  await expectFileToMatch('src/locale/messages.xlf', `source-language="en-US"`);
-  await expectFileToMatch('src/locale/messages.xlf', `An introduction header for this sample`);
-
-  for (const { lang, translation } of langTranslations) {
-    if (lang != 'en-US') {
-      await copyFile('src/locale/messages.xlf', `src/locale/messages.${lang}.xlf`);
-      await replaceInFile(
-        `src/locale/messages.${lang}.xlf`,
-        'source-language="en-US"',
-        `source-language="en-US" target-language="${lang}"`,
-      );
-      await replaceInFile(
-        `src/locale/messages.${lang}.xlf`,
-        '<source>Hello i18n!</source>',
-        `<source>Hello i18n!</source>\n<target>${translation}</target>`,
-      );
-    }
-  }
+  // TODO: re-enable all locales once localeData support is added.
+  const tempLangTranslations = langTranslations.filter(l => l.lang == 'fr');
 
   // Build each locale and verify the output.
   // NOTE: this should not fail in general, but multi-locale translation is currently disabled.
   // TODO: remove expectToFail once localeData support is added.
   await expectToFail(() => ng('build', '--localize', 'true'));
   await ng('build');
-  for (const { lang, translation } of langTranslations) {
-    await expectFileToMatch(`${baseDir}/${lang}/main-es5.js`, translation);
-    await expectFileToMatch(`${baseDir}/${lang}/main-es2015.js`, translation);
-    await expectToFail(() => expectFileToMatch(`${baseDir}/${lang}/main-es5.js`, '$localize`'));
-    await expectToFail(() => expectFileToMatch(`${baseDir}/${lang}/main-es2015.js`, '$localize`'));
-    await expectFileToMatch(`${baseDir}/${lang}/main-es5.js`, lang);
-    await expectFileToMatch(`${baseDir}/${lang}/main-es2015.js`, lang);
-
-    // Ivy i18n doesn't yet work with `ng serve` so we must use a separate server.
-    const app = express();
-    app.use(express.static(resolve(baseDir, lang)));
-    const server = app.listen(4200, 'localhost');
+  for (const { lang, outputPath, translation } of tempLangTranslations) {
+    await expectFileToMatch(`${outputPath}/main-es5.js`, translation.helloPartial);
+    await expectFileToMatch(`${outputPath}/main-es2015.js`, translation.helloPartial);
+    await expectToFail(() => expectFileToMatch(`${outputPath}/main-es5.js`, '$localize`'));
+    await expectToFail(() => expectFileToMatch(`${outputPath}/main-es2015.js`, '$localize`'));
+    await expectFileToMatch(`${outputPath}/main-es5.js`, lang);
+    await expectFileToMatch(`${outputPath}/main-es2015.js`, lang);
+
+    const server = externalServer(outputPath);
     try {
-      // Add E2E test for locale
-      await writeFile(
-        'e2e/src/app.e2e-spec.ts',
-        `
-        import { browser, logging, element, by } from 'protractor';
-        describe('workspace-project App', () => {
-          it('should display welcome message', () => {
-            browser.get(browser.baseUrl);
-            expect(element(by.css('h1')).getText()).toEqual('${translation}');
-          });
-          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));
-          });
-        });
-      `,
-      );
-
       // Execute without a devserver.
-      await ng('e2e', '--devServerTarget=');
+      await ng('e2e', `--configuration=${lang}`, '--devServerTarget=');
     } finally {
       server.close();
     }
   }
 
-  // Verify locale data registration (currently only for single locale builds)
-  await ng('build', '--optimization', 'false', '-c', 'fr', '--i18n-missing-translation', 'error');
-  await expectFileToMatch(`${baseDir}/fr/main-es5.js`, 'registerLocaleData');
-  await expectFileToMatch(`${baseDir}/fr/main-es2015.js`, 'registerLocaleData');
-
   // Verify missing translation behaviour.
   await appendToFile('src/app/app.component.html', '<p i18n>Other content</p>');
   await ng('build', '--i18n-missing-translation', 'ignore');