build(test-app): move test app out of the packages dir

examples/test-app-e2e/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "cypress/no-unnecessary-waiting": "off"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.cy.{ts,js,tsx,jsx}", "src/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
+    }
+  ]
+}

examples/test-app-e2e/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## [1.0.6](https://github.com/Hyperkid123/nxtesting/compare/v1.0.5...v1.0.6) (2023-11-28)
+
+## [1.0.5](https://github.com/Hyperkid123/nxtesting/compare/v1.0.4...v1.0.5) (2023-11-28)
+
+## [1.0.4](https://github.com/Hyperkid123/nxtesting/compare/v1.0.3...v1.0.4) (2023-11-28)
+
+## [1.0.3](https://github.com/Hyperkid123/nxtesting/compare/v1.0.2...v1.0.3) (2023-11-28)
+
+## [1.0.3](https://github.com/Hyperkid123/nxtesting/compare/v1.0.2...v1.0.3) (2023-11-28)

examples/test-app-e2e/cypress.config.ts

@@ -0,0 +1,6 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__filename, { cypressDir: 'src' }),
+});

examples/test-app-e2e/project.json

@@ -0,0 +1,34 @@
+{
+  "name": "test-app-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "examples/test-app-e2e/src",
+  "targets": {
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "examples/test-app-e2e/cypress.config.ts",
+        "testingType": "e2e",
+        "devServerTarget": "test-app:serve",
+        "baseUrl": "http://localhost:4200"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "test-app:serve:production"
+        },
+        "ci": {
+          "devServerTarget": "test-app:serve-static"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["examples/test-app-e2e/**/*.{js,ts}"]
+      }
+    }
+  },
+  "implicitDependencies": ["test-app"],
+  "tags": []
+}

examples/test-app-e2e/src/e2e/app.cy.ts

@@ -0,0 +1,7 @@
+describe('shell-e2e', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    cy.contains(/Scalprum testing page/).should('exist');
+  });
+});

examples/test-app-e2e/src/e2e/test-app/module-loading-errors.cy.ts

@@ -0,0 +1,47 @@
+describe('Module error loading handling', () => {
+  it('should show chunk loading error message', () => {
+    cy.visit('http://localhost:4200/legacy');
+
+    // intercept webpack chunk and return 500 response
+    cy.intercept('GET', '/src_modules_preLoad_tsx.js', {
+      statusCode: 500,
+    });
+
+    cy.on('uncaught:exception', () => {
+      // exceptions are expected during this test
+      // returning false here prevents Cypress from failing the test
+      return false;
+    });
+
+    cy.get('#render-preload-module').click();
+    cy.wait(1000);
+
+    cy.contains(`Loading chunk src_modules_preLoad_tsx failed.`).should('exist');
+  });
+
+  it('should handle runtime module error', () => {
+    cy.on('uncaught:exception', () => {
+      // exceptions are expected during this test
+      // returning false here prevents Cypress from failing the test
+      return false;
+    });
+    cy.visit('http://localhost:4200/runtime-error');
+
+    // the react app is still active
+    cy.get('h2').contains('Runtime error route').should('exist');
+    // error component is rendered
+    cy.get('p').contains('Synthetic error message').should('exist');
+  });
+
+  it('should render an error with a message is manifest fetch returned 404', () => {
+    cy.visit('http://localhost:4200/not-found-error');
+    cy.on('uncaught:exception', () => {
+      // exceptions are expected during this test
+      // returning false here prevents Cypress from failing the test
+      return false;
+    });
+
+    cy.get('h2').contains('Error loading component').should('exist');
+    cy.get('p').contains('Unable to load manifest files at /assets/testPath/foo/bar/nonsense.json! 404: Not Found').should('exist');
+  });
+});

cypress/e2e/test-app/module-prefetch-data.cy.js → examples/test-app-e2e/src/e2e/test-app/module-prefetch-data.cy.ts

@@ -1,13 +1,15 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 describe('Data prefetch', () => {
   it('should show data from prefetch', () => {
-    cy.visit('http://localhost:8123/legacy');
+    cy.visit('http://localhost:4200/legacy');
 
     cy.get('h2').contains('Module one remote component').should('exist');
     cy.get('p#success').contains('Hello').should('exist');
   });
   it('should show error message on prefetch failure', () => {
-    cy.visit('http://localhost:8123/legacy');
+    cy.visit('http://localhost:4200/legacy');
     cy.window().then((win) => {
+      // @ts-ignore
       win.prefetchError = true;
     });
 
@@ -21,17 +23,15 @@ describe('Data prefetch', () => {
     cy.get('p#error').contains('Expected error').should('exist');
   });
   it('should render component when module does not have prefetch', () => {
-    cy.visit('http://localhost:8123/legacy');
+    cy.visit('http://localhost:4200/legacy');
 
-    const button = cy.get('#render-preload-module');
-    button.click();
+    cy.get('#render-preload-module').click();
     cy.get('h2#preload-heading').contains('This module is supposed to be pre-loaded').should('exist');
   });
   it('should call prefetch only once', () => {
-    cy.visit('http://localhost:8123/legacy');
+    cy.visit('http://localhost:4200/legacy');
 
-    const button = cy.get('#render-prefetch-module');
-    button.click();
+    cy.get('#render-prefetch-module').click();
     cy.wait(1000);
     cy.window().its('prefetchCounter').should('equal', 1);
   });

cypress/e2e/test-app/named-export-scalprum-component.cy.js → examples/test-app-e2e/src/e2e/test-app/named-export-scalprum-component.cy.ts

@@ -1,6 +1,9 @@
 describe('SDK module loading', () => {
+  beforeEach(() => {
+    cy.handleMetaError();
+  });
   it('should show data from prefetch', () => {
-    cy.visit('http://localhost:8123/sdk');
+    cy.visit('http://localhost:4200/sdk');
 
     // check if the component using named export is rendered
     cy.get('#named-component').should('exist');

cypress/e2e/test-app/sdk-plugin-loading.cy.js → examples/test-app-e2e/src/e2e/test-app/sdk-plugin-loading.cy.ts

@@ -1,6 +1,9 @@
 describe('SDK module loading', () => {
+  beforeEach(() => {
+    cy.handleMetaError();
+  });
   it('should show data from prefetch', () => {
-    cy.visit('http://localhost:8123/sdk');
+    cy.visit('http://localhost:4200/sdk');
 
     cy.get('div#sdk-module-item').contains('SDK Inbox').should('exist');
   });

cypress/e2e/test-app/use-module-loading.cy.js → examples/test-app-e2e/src/e2e/test-app/use-module-loading.cy.ts

@@ -1,6 +1,9 @@
 describe('UseModule loading callback', () => {
+  beforeEach(() => {
+    cy.handleMetaError();
+  });
   it('should display SDK inbox text', () => {
-    cy.visit('http://localhost:8123/use-module');
+    cy.visit('http://localhost:4200/use-module');
     cy.contains('SDK Inbox').should('exist');
   });
 });

cypress/fixtures/example.json → examples/test-app-e2e/src/fixtures/example.json

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

examples/test-app-e2e/src/support/app.po.ts

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');

cypress/support/commands.js → examples/test-app-e2e/src/support/commands.ts

@@ -1,17 +1,38 @@
+/// <reference types="cypress" />
+
 // ***********************************************
-// This example commands.js shows you how to
+// 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;
+    handleMetaError(): void;
+  }
+}
+
 // -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+
+Cypress.Commands.add('handleMetaError', () => {
+  cy.on('uncaught:exception', (err) => {
+    if (err.message.includes(`Cannot use 'import.meta' outside a module`)) {
+      return false;
+    }
+
+    throw err;
+  });
+});
 //
 // -- This is a child command --
 // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })