chore: add e2e test

.github/workflows/build-and-test.yml

@@ -87,3 +87,8 @@ jobs:
     needs: checkout-install
     uses: ./.github/workflows/e2e-router.yml
     secrets: inherit
+
+  e2e-modern-ssr-data-loader:
+    needs: checkout-install
+    uses: ./.github/workflows/e2e-modern-ssr-data-loader.yml
+    secrets: inherit

.github/workflows/e2e-modern-ssr-data-loader.yml

@@ -0,0 +1,54 @@
+name: E2E Test for ModernJS SSR Data Loader
+
+on:
+  workflow_call:
+
+jobs:
+  e2e-modern:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Pnpm
+        run: corepack enable
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'pnpm'
+
+      - name: Set Nx SHA
+        uses: nrwl/nx-set-shas@v3
+
+      - name: Set SKIP_DEVTOOLS_POSTINSTALL environment variable
+        run: echo "SKIP_DEVTOOLS_POSTINSTALL=true" >> $GITHUB_ENV
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Install Cypress
+        run: npx cypress install
+
+      - name: Run Build for All
+        run: npx nx run-many --targets=build --projects=tag:type:pkg
+
+      - name: Run condition check script
+        id: check-ci
+        run: node tools/scripts/ci-is-affected.mjs --appName=modernjs
+
+      - name: E2E Test for Modern.js SSR Data Loader
+        if: steps.check-ci.outcome == 'success'
+        run: |
+          lsof -ti tcp:3062,3061,3063,3064| xargs -r kill &&
+          pnpm run app:modern:dev &
+          sleep 1 &&
+          npx wait-on http://127.0.0.1:3062/ &&
+          npx wait-on http://127.0.0.1:3061/ &&
+          npx wait-on http://127.0.0.1:3063/ &&
+          npx wait-on http://127.0.0.1:3064/ &&
+          npx nx run modernjs-ssr-data-loader-host:e2e &&
+          lsof -ti tcp:3062,3061,3063,3064 | xargs kill

apps/modernjs-ssr-data-loader/README.md

@@ -0,0 +1,29 @@
+# modernjs-ssr
+
+## Running Demo
+
+**Apps**
+
+- host: [localhost:3062](http://localhost:3062/)
+- sub: [localhost:3061](http://localhost:3061/)
+
+**Components**
+
+- host-provider: [localhost:3063](http://localhost:3063/)
+- sub-provider: [localhost:3064](http://localhost:3064/)
+
+## How to start the demos ?
+
+```bash
+# Root directory
+pnpm i
+
+nx build modern-js-plugin
+
+pnpm app:modern:data-loader:dev
+
+# SSR 
+open http://localhost:3062/entry-one/nested-routes/pathname
+# CSR
+open http://localhost:3062/entry-two
+```

apps/modernjs-ssr-data-loader/host-provider/package.json

@@ -9,7 +9,6 @@
     "start": "modern start",
     "serve": "modern serve",
     "new": "modern new",
-    "lint": "modern lint",
     "upgrade": "modern upgrade"
   },
   "engines": {
@@ -25,18 +24,16 @@
     "dist/"
   ],
   "dependencies": {
-    "@modern-js/runtime": "^2.59.0",
+    "@modern-js/runtime": "^2.60.2",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "@module-federation/modern-js": "workspace:*",
     "@babel/runtime": "7.24.4",
     "antd": "4.24.15"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^2.59.0",
-    "@modern-js/eslint-config": "^2.59.0",
-    "@modern-js/tsconfig": "^2.59.0",
-    "@modern-js-app/eslint-config": "^2.59.0",
+    "@modern-js/app-tools": "^2.60.2",
+    "@modern-js/tsconfig": "^2.60.2",
     "typescript": "~5.0.4",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",

apps/modernjs-ssr-data-loader/host/cypress.config.ts

@@ -0,0 +1,12 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  projectId: 'sa6wfn',
+  e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
+  defaultCommandTimeout: 20000,
+  retries: {
+    runMode: 2,
+    openMode: 1,
+  },
+});

apps/modernjs-ssr-data-loader/host/cypress/e2e/app.cy.ts

@@ -0,0 +1,133 @@
+import { getH1, getH2, getH3, getH4, getH5 } from '../support/app.po';
+
+const hostUrlPrefix = 'http://localhost:3062';
+
+describe('Warmup ModernJS', () => {
+  it('warms pages concurrently', () => {
+    const urls = ['/entry-one/nested-routes/pathname', '/entry-two'];
+    urls.forEach((url) => {
+      cy.visit(`${hostUrlPrefix}${url}`);
+    });
+  });
+});
+
+describe('Check SSR', () => {
+  beforeEach(() => {
+    cy.visit(hostUrlPrefix + '/entry-one/nested-routes/pathname');
+  });
+  it('should ssr success', () => {
+    cy.window().should((win) => {
+      // @ts-ignore
+      expect(win._SSR_DATA.renderLevel).to.equal(2);
+    });
+  });
+
+  it('should render host layout', () => {
+    getH1().contains('entry one layout');
+  });
+
+  it('should render host path layout', () => {
+    getH2().contains('nested-routes layout');
+  });
+
+  it('should render sub layout', () => {
+    getH3().contains('sub layout');
+  });
+
+  it('should render sub page', () => {
+    getH4().contains('sub self provider');
+  });
+
+  it('should get sub data loader data successfully', () => {
+    cy.get('#sub-data')
+      .invoke('html')
+      .then((innerHTML) => {
+        expect(innerHTML).to.equal('hello world!');
+      });
+  });
+
+  it('should render sub self component and the the component should be interactive', () => {
+    cy.wait(2000);
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#sub-component-button')
+      .should('be.visible')
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(
+          '[sub] Client side Javascript works!',
+        );
+      });
+  });
+
+  it('should render sub self provider and the the sub provider button should be interactive', () => {
+    cy.wait(3000);
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#sub-provider-components-button')
+      .should('be.visible')
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(
+          '[sub-provider-components] Client side Javascript works!',
+        );
+      });
+  });
+});
+
+describe('check SSR route', () => {
+  beforeEach(() => {
+    cy.visit(hostUrlPrefix + '/entry-one/nested-routes/pathname');
+  });
+  it('should support jump to sub self route', () => {
+    cy.get('#sub-link').click();
+    cy.url().should('include', '/entry-one/nested-routes/pathname/a');
+    getH5().contains('page/a');
+  });
+});
+
+describe('check CSR', () => {
+  beforeEach(() => {
+    cy.visit(hostUrlPrefix + '/entry-two');
+  });
+  it('should render csr page', () => {
+    cy.window().should((win) => {
+      console.log(111, win._SSR_DATA);
+      // @ts-ignore
+      expect(win._SSR_DATA).to.equal(undefined);
+    });
+    getH2().contains('entry two page');
+  });
+});
+
+describe('check CSR route', () => {
+  beforeEach(() => {
+    cy.visit(hostUrlPrefix + '/entry-two/federation');
+  });
+  it('should render sub self component and the the component should be interactive', () => {
+    cy.wait(2000);
+    cy.window().should((win) => {
+      // @ts-ignore
+      expect(win._SSR_DATA).to.equal(undefined);
+    });
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#sub-component-button')
+      .should('be.visible')
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(
+          '[sub] Client side Javascript works!',
+        );
+      });
+  });
+
+  it('should support jump to sub self route', () => {
+    cy.get('#sub-link').click();
+    cy.url().should('include', '/entry-two/federation/a');
+    getH5().contains('page/a');
+  });
+});

apps/modernjs-ssr-data-loader/host/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/modernjs-ssr-data-loader/host/cypress/support/app.po.ts

@@ -0,0 +1,5 @@
+export const getH1 = () => cy.get('h1');
+export const getH2 = () => cy.get('h2');
+export const getH3 = () => cy.get('h3');
+export const getH4 = () => cy.get('h4');
+export const getH5 = () => cy.get('h5');

apps/modernjs-ssr-data-loader/host/cypress/support/commands.ts

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/modernjs-ssr-data-loader/host/cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';

apps/modernjs-ssr-data-loader/host/cypress/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"],
+    "sourceMap": false
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "../cypress.config.ts",
+    "../**/*.cy.ts",
+    "../**/*.cy.tsx",
+    "../**/*.cy.js",
+    "../**/*.cy.jsx",
+    "../**/*.d.ts"
+  ]
+}

apps/modernjs-ssr-data-loader/host/package.json

@@ -9,7 +9,6 @@
     "start": "modern start",
     "serve": "modern serve",
     "new": "modern new",
-    "lint": "modern lint",
     "upgrade": "modern upgrade"
   },
   "engines": {
@@ -25,18 +24,16 @@
     "dist/"
   ],
   "dependencies": {
-    "@modern-js/runtime": "2.60.2-alpha.6",
+    "@modern-js/runtime": "^2.60.2",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "@module-federation/modern-js": "workspace:*",
     "@babel/runtime": "7.24.4",
     "antd": "4.24.15"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "2.60.2-alpha.0",
-    "@modern-js/eslint-config": "^2.59.0",
-    "@modern-js/tsconfig": "^2.59.0",
-    "@modern-js-app/eslint-config": "^2.59.0",
+    "@modern-js/app-tools": "^2.60.2",
+    "@modern-js/tsconfig": "^2.60.2",
     "typescript": "~5.0.4",
     "@types/jest": "~29.5.0",
     "@types/node": "~16.11.7",