test: translations (DEV-4071)

.gitignore

@@ -63,3 +63,4 @@ apps/dsp-app/cypress/screenshots
 
 # Sentry Config File
 .sentryclirc
+/apps/dsp-app/cypress/fixtures/temp/translations-in-use.json

README.md

@@ -57,23 +57,24 @@ The most common commands are defined in `package.json`.
 
 > **_NOTE:_** You can install `nx` globally with `npm install -g nx`. If not, then all `nx` commands below need to be prefixed with `npx`.
 
-| nx                                                   | npm                       |
-| ---------------------------------------------------- | ------------------------- |
-| `nx run dsp-app:test`                                | `npm run test-local`      |
-| `nx run dsp-app:test:ci`                             | `npm run test-ci`         |
-| `nx run-many --all --target=test --configuration=ci` | `npm run test-ci-all`     |
-| `nx run dsp-app:serve`                               | `npm run start-local`     |
-| `nx run dsp-app:serve:test-server`                   | `npm run start-test`      |
-| `nx run dsp-app:serve:dev-server`                    | `npm run start-dev`       |
-| `nx run dsp-app:serve:ls-test-server`                | `npm run start-ls-test`   |
-| `nx run dsp-app:serve:stage-server`                  | `npm run start-stage`     |
-| `nx run dsp-app:serve:0845-test-server`              | `npm run start-0845-test` |
-| `nx run dsp-app:lint`                                | `npm run lint-ci`         |
-| `nx run dsp-app:lint --fix`                          | `npm run lint-local`      |
-| `nx run dsp-app-e2e:e2e:development`                 | `npm run e2e-ci-dev`      |
-| `nx run dsp-app-e2e:e2e:production`                  | `npm run e2e-ci`          |
-| `nx run dsp-app:build`                               | `build`                   |
-| `nx run dsp-app:build:production`                    | `build-prod`              |
+| nx                                                   | npm                           |
+|------------------------------------------------------|-------------------------------|
+| `nx run dsp-app:test`                                | `npm run test-local`          |
+| `nx run dsp-app:test:ci`                             | `npm run test-ci`             |
+| `nx run-many --all --target=test --configuration=ci` | `npm run test-ci-all`         |
+| `nx run dsp-app:serve`                               | `npm run start-local`         |
+| `nx run dsp-app:serve:test-server`                   | `npm run start-test`          |
+| `nx run dsp-app:serve:dev-server`                    | `npm run start-dev`           |
+| `nx run dsp-app:serve:ls-test-server`                | `npm run start-ls-test`       |
+| `nx run dsp-app:serve:stage-server`                  | `npm run start-stage`         |
+| `nx run dsp-app:serve:0845-test-server`              | `npm run start-0845-test`     |
+| `nx run dsp-app:lint`                                | `npm run lint-ci`             |
+| `nx run dsp-app:lint --fix`                          | `npm run lint-local`          |
+| `nx run dsp-app-e2e:e2e:development`                 | `npm run e2e-ci-dev`          |
+| `nx run dsp-app-e2e:e2e:production`                  | `npm run e2e-ci`              |
+| `nx run dsp-app:build`                               | `build`                       |
+| `nx run dsp-app:build:production`                    | `build-prod`                  |
+
 
 | npx                                       | npm                 |
 | ----------------------------------------- | ------------------- |
@@ -92,6 +93,14 @@ There are three NPM scripts to run the E2E tests:
 - `npm run e2e-ci` will run the E2E tests in the console in a production environment. This is the command run also on GitHub CI.
 - `npm run e2e-local` will open the Cypress UI which will enable to run individual tests easily and see every step as it runs.
 
+If there are tests for translations failing, you can merge the translations with the following command:
+
+| npx                                       | npm                 |
+| ----------------------------------------- | ------------------- |
+| `nx run dsp-app:i18n:merge-translations`        | `i18n:merge-translations`           |
+
+This will extract all translation keys from the source code and add missing translation keys to all translation files. The values of added keys will be empty strings.
+
 ## Further Documentation
 
 ### User guide

apps/dsp-app/cypress.config.ts

@@ -1,5 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig } from 'cypress';
+import { checkUnusedENTranslations, compareTranslationFileWithEn } from './cypress/plugins/translations';
 
 export default defineConfig({
   projectId: 'n5b5id',
@@ -14,5 +15,12 @@ export default defineConfig({
     env: {
       apiUrl: 'http://0.0.0.0:3333',
     },
+    setupNodeEvents(on, config) {
+      on('task', {
+        checkUnusedENTranslations,
+        compareTranslationFileWithEn,
+      });
+      return config;
+    },
   },
 });

apps/dsp-app/cypress/e2e/translation/translation.cy.ts

@@ -0,0 +1,84 @@
+import { TranslationKeyComp, TranslationUsage } from '../../plugins/translations';
+
+(Cypress.env('INCLUDE_TRANSLATIONS') ? describe : describe.skip)('Translations', () => {
+  before(() => {
+    Cypress.env('skipDatabaseCleanup', true);
+  });
+
+  it('should have some translations, but no unused translations', () => {
+    cy.task<TranslationUsage>('checkUnusedENTranslations').then(translationKeys => {
+      expect(translationKeys.usedKeys.length).to.be.greaterThan(
+        0,
+        `There should be translation keys in use (${translationKeys.usedKeys.length} satisfies this condition)`
+      );
+      expect(translationKeys.unusedKeys.length).to.eq(
+        0,
+        `There should be no unused translation keys. Found ${translationKeys.unusedKeys.length} unused.\n\nUnused translation keys:\n\n${translationKeys.unusedKeys.join(',\n')}`
+      );
+    });
+  });
+
+  it('should have all used translation keys defined in en.json', () => {
+    cy.task<TranslationUsage>('checkUnusedENTranslations').then(translationKeys => {
+      // Load the en.json file
+      cy.readFile('src/assets/i18n/en.json').then(enTranslations => {
+        const isKeyInObject = (obj: any, key: string): boolean => {
+          return key.split('.').reduce((o, k) => (o && o.hasOwnProperty(k) ? o[k] : undefined), obj) !== undefined;
+        };
+
+        const missingInEn = translationKeys.usedKeys.filter(key => !isKeyInObject(enTranslations, key));
+
+        expect(missingInEn.length).to.eq(
+          0,
+          `There are missing translations in en.json for the following keys:\n\n${missingInEn.join(',\n')}`
+        );
+      });
+    });
+  });
+
+  it('should have the same translation keys in all translation files', () => {
+    const translationFiles = ['de.json', 'fr.json', 'it.json', 'rm.json'];
+    translationFiles.forEach(file => {
+      cy.task('compareTranslationFileWithEn', file).then((keys: TranslationKeyComp) => {
+        expect(keys.missingKeys.length).to.eq(
+          0,
+          `Translation file ${file} is missing keys:\n ${keys.missingKeys.join(',\n')}`
+        );
+        expect(keys.additionalKeys.length).to.eq(
+          0,
+          `Translation file ${file} has additional keys, which are not part of the default lang @en:\n ${keys.additionalKeys.join(',\n')}`
+        );
+      });
+    });
+  });
+
+  it('should have no empty translation strings in en.json', () => {
+    cy.readFile('src/assets/i18n/en.json').then(enTranslations => {
+      const findEmptyStrings = (obj: any, prefix = ''): string[] => {
+        const emptyKeys: string[] = [];
+        Object.keys(obj).forEach(key => {
+          const value = obj[key];
+          const fullKey = prefix ? `${prefix}.${key}` : key;
+
+          if (typeof value === 'object' && value !== null) {
+            emptyKeys.push(...findEmptyStrings(value, fullKey));
+          } else if (typeof value === 'string' && value.trim() === '') {
+            emptyKeys.push(fullKey);
+          }
+        });
+        return emptyKeys;
+      };
+
+      const emptyKeys = findEmptyStrings(enTranslations);
+
+      expect(emptyKeys.length).to.eq(
+        0,
+        `There are empty translation strings in en.json for the following keys:\n\n${emptyKeys.join(',\n')}`
+      );
+    });
+  });
+
+  after(() => {
+    Cypress.env('skipDatabaseCleanup', false);
+  });
+});

apps/dsp-app/cypress/plugins/index.ts

@@ -0,0 +1,10 @@
+import { checkUnusedENTranslations, compareTranslationFileWithEn } from './translations';
+
+const pluginConfig = (on: Cypress.PluginEvents) => {
+  on('task', {
+    checkUnusedENTranslations,
+    compareTranslationFileWithEn,
+  });
+};
+
+export default pluginConfig;

apps/dsp-app/cypress/plugins/translations.ts

@@ -0,0 +1,58 @@
+import fs = require('fs');
+import path = require('path');
+
+export interface TranslationUsage {
+  usedKeys: string[];
+  unusedKeys: string[];
+}
+
+export interface TranslationKeyComp {
+  missingKeys: string[];
+  additionalKeys: string[];
+}
+
+const extractKeys = (obj: any, prefix = ''): Record<string, boolean> =>
+  Object.keys(obj).reduce((res, key) => {
+    const pre = prefix ? `${prefix}.` : '';
+    if (typeof obj[key] === 'object') {
+      Object.assign(res, extractKeys(obj[key], pre + key));
+    } else {
+      res[pre + key] = true;
+    }
+    return res;
+  }, {});
+
+export const checkUnusedENTranslations = (): TranslationUsage => {
+  const translationsInUsePath = path.join(__dirname, '../../cypress/fixtures/temp/translations-in-use.json');
+  const translationKeysInUse = JSON.parse(fs.readFileSync(translationsInUsePath, 'utf8'));
+
+  const fPath = path.join(__dirname, '../../src/assets/i18n/en.json');
+  const translationKeys = JSON.parse(fs.readFileSync(fPath, 'utf8'));
+  const translationKeysSet = extractKeys(translationKeys);
+
+  const usedKeys = new Set(Object.keys(translationKeysInUse));
+
+  const allKeys = Object.keys(translationKeysSet);
+  const unusedKeys = allKeys.filter(key => !usedKeys.has(key));
+
+  return {
+    usedKeys: Array.from(usedKeys),
+    unusedKeys,
+  };
+};
+
+export const compareTranslationFileWithEn = (file: string): TranslationKeyComp => {
+  const translationsInUsePath = path.join(__dirname, '../../cypress/fixtures/temp/translations-in-use.json');
+  const translationKeysInUse = JSON.parse(fs.readFileSync(translationsInUsePath, 'utf8'));
+
+  const fPath = path.join(__dirname, '../../src/assets/i18n/', file);
+  const translationKeys = JSON.parse(fs.readFileSync(fPath, 'utf8'));
+
+  const flatTranslationKeys = extractKeys(translationKeys);
+  const usedKeys = Object.keys(translationKeysInUse);
+
+  const missingKeys = usedKeys.filter(key => !Object.keys(flatTranslationKeys).includes(key));
+  const additionalKeys = Object.keys(flatTranslationKeys).filter(key => !usedKeys.includes(key));
+
+  return { missingKeys, additionalKeys };
+};

apps/dsp-app/cypress/support/e2e.ts

@@ -14,6 +14,10 @@ Cypress.on('uncaught:exception', err => {
 // do things here before each test if needed
 // All active session data (cookies, localStorage and sessionStorage) across all domains are cleared.
 beforeEach(() => {
+  if (Cypress.env('skipDatabaseCleanup')) {
+    return; // Skip cleanup
+  }
+
   let users: UserProfiles;
 
   // clear database