feat(nx-angular-mf): E2E test

E2E test fir check serve return full HTML from ssr

Author: klerick

.github/workflows/test.yml

@@ -26,5 +26,8 @@ jobs:
       - name: Setup Node.js
         uses: ./.github/actions/nodejs
 
-      - name: Test
-        run: npx nx affected --target=test --configuration=ci --parallel --base=remotes/origin/${{ inputs.base }} --head=${{ inputs.head }}
+#      - name: Test
+#        run: npx nx affected --target=test --configuration=ci --parallel --base=remotes/origin/${{ inputs.base }} --head=${{ inputs.head }}
+
+      - name: E2E Test
+        run: npm nx run nx-angular-mf-e2e:e2e

apps/host-application/project.json

@@ -18,7 +18,8 @@
           "esPlugins": ["tools/esbuild-plugin/test-external-plugin.ts"],
           "remoteEntry": {
             "firstRemote": "http://localhost:4201/"
-          }
+          },
+          "deployUrlEnvName": "DEPLOY_URL"
         },
         "deployUrl": "http://localhost:4200/",
         "outputPath": "dist/apps/host-application",

apps/nx-angular-mf-e2e/eslint.config.cjs

@@ -0,0 +1,3 @@
+const baseConfig = require('../../eslint.config.cjs');
+
+module.exports = [...baseConfig];

apps/nx-angular-mf-e2e/jest.config.ts

@@ -0,0 +1,12 @@
+
+export default {
+  displayName: 'nx-angular-mf-e2e',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/apps/nx-angular-mf-e2e',
+  globalSetup: './tools/start-servers.ts',
+  globalTeardown: './tools/stop-servers.ts',
+};

apps/nx-angular-mf-e2e/project.json

@@ -0,0 +1,18 @@
+{
+  "name": "nx-angular-mf-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/nx-angular-mf-e2e/src",
+  "implicitDependencies": ["nx-angular-mf"],
+  "targets": {
+    "e2e": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/nx-angular-mf-e2e/jest.config.ts",
+        "runInBand": true
+      },
+      "dependsOn": ["^build"]
+    }
+  }
+}

apps/nx-angular-mf-e2e/src/check-run.spec.ts

@@ -0,0 +1,29 @@
+import axios from 'axios';
+import {parse} from 'parse5'
+import {findAllScripts, findContentWithinLibrary} from "../tools/utils";
+
+describe('check result after run', () => {
+  it('should html in response', async () => {
+
+    const response = await axios.get<string>('http://localhost:4200/').then(res => res.data)
+    const document = parse(response)
+    const result = findContentWithinLibrary(document, 'p', 'ngh')
+    expect(result).not.toBe(null);
+    expect(Array.isArray(result)).toBe(true)
+    expect(result.length).toBe(1)
+    expect(result[0]).toBe('TestSharedLibrary works!')
+
+    const result1 = findAllScripts(document)
+    expect(result1).not.toBe(null);
+    expect(Array.isArray(result1)).toBe(true)
+    let hasModuleBefore = false
+
+    for(const item of result1) {
+      if(item.attrs.type === 'module') {
+        hasModuleBefore = true
+      }
+      if(item.attrs.name === 'importmap') break
+    }
+    expect(hasModuleBefore).toBe(false)
+  })
+})

apps/nx-angular-mf-e2e/tools/start-servers.ts

@@ -0,0 +1,39 @@
+import { spawn } from 'child_process';
+
+const controller = new AbortController();
+const { signal } = controller;
+global.abortCcontrollerInst = controller;
+
+const runServe = async (app: string) => {
+  return new Promise((resolve, reject) => {
+    let isStarted = false;
+    const nxProcess = spawn('npx', ['nx', 'serve', app], {
+      stdio: ['pipe', 'pipe', 'inherit'],
+      signal,
+    });
+
+    nxProcess.stdout.on('data', (data) => {
+      const output = data.toString();
+      process.stdout.write(output);
+      if (output.includes('generation complete')) {
+        isStarted = true;
+        resolve(nxProcess);
+      }
+    });
+
+    nxProcess.on('error', (error) => {
+      reject(error);
+    });
+
+    nxProcess.on('close', (code) => {
+      if (!isStarted) {
+        reject(new Error(`Process exited before starting (code ${code})`));
+      }
+    });
+  });
+};
+
+export default async () => {
+  await runServe('mf1-application');
+  await runServe('host-application');
+};

apps/nx-angular-mf-e2e/tools/stop-servers.ts

@@ -0,0 +1,5 @@
+
+export default async () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  global.abortCcontrollerInst.abort()
+}

apps/nx-angular-mf-e2e/tools/utils.ts

@@ -0,0 +1,40 @@
+import {serialize} from 'parse5'
+
+export function findContentWithinLibrary(node, targetTagName, targetAttr) {
+  if (!node || !node['childNodes']) return null;
+
+  if (
+    node['tagName'] === 'lib-test-shared-library' &&
+    (node['attrs'] || []).some(attr => attr.name === 'ngh' && attr.value === '0')
+  ) {
+    return node['childNodes']
+      .filter(child => child.tagName === targetTagName)
+      .map(child => serialize(child));
+  }
+
+  for (const child of node['childNodes']) {
+    const result = findContentWithinLibrary(child, targetTagName, targetAttr);
+    if (result) return result;
+  }
+
+  return null;
+}
+
+
+export function findAllScripts(node) {
+  let scripts = [];
+
+  if (!node || !node.childNodes) return scripts;
+
+  // Проверяем, является ли текущий узел <script>
+  if (node.tagName === 'script') {
+    scripts.push(node);
+  }
+
+  // Рекурсивно обходим дочерние узлы
+  for (const child of node.childNodes) {
+    scripts = scripts.concat(findAllScripts(child));
+  }
+
+  return scripts;
+}

apps/nx-angular-mf-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}