build: setup Cypress for end-to-end testing

.gitignore

@@ -39,3 +39,6 @@ jspm_packages
 lib
 parcel/
 *.tgz
+
+dist
+dist-server

cypress.json

@@ -0,0 +1,10 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "video": false,
+  "responseTimeout": 60000,
+  "pageLoadTimeout": 120000,
+  "ignoreTestFiles": [
+    "**/plugins/**.js",
+    "**/tsconfig.json"
+  ]
+}

cypress/fixtures/example.json

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

cypress/integration/issue-94.js

@@ -0,0 +1,30 @@
+/// <reference types="cypress" />
+
+describe('https://github.com/single-spa/single-spa-angular/issues/94', () => {
+  it('should navigate using back button and change detection should stop working', () => {
+    cy.visit('/shop');
+
+    cy.get('button').click();
+
+    // On the first load when we click the button Angular will run
+    // change detection and we will see that input.
+    cy.get('input[type=search]').should('exist');
+
+    // Let's navigate by click `a` that will schedule navigation
+    // inside the Angular's zone.
+    cy.get('a').first().click();
+
+    // Ensure we're on the next page.
+    cy.url().should('contain', '/shop/transmission/1');
+
+    // Let's go back using `history.back()` that will run `history.replaceState`
+    // outside of the Angular's zone.
+    cy.go('back');
+
+    // Let's click the button again.
+    cy.get('button').click();
+
+    // And ensure that element is not projected anymore because change detection is not run.
+    cy.get('input[type=search]').should('not.exist');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js 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
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- 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) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js 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.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

integration/docker-compose.yml

@@ -0,0 +1,28 @@
+version: '3.7'
+
+x-default: &default
+  image: pierrezemb/gostatic
+  networks:
+    - default
+
+services:
+  shop:
+    <<: *default
+    container_name: single-spa-angular.shop
+    volumes:
+      # It will take a lot of time to build images with Angular
+      # assets inside, since `ngcc` compiler is super slow inside Docker containers.
+      # Thus we build it locally and then just mount a volume.
+      - ./shop/dist:/srv/http
+    command: --port 4200 --append-header Access-Control-Allow-Origin:*
+    ports:
+      - 4200:4200
+
+  portal:
+    <<: *default
+    container_name: single-spa-angular.portal
+    volumes:
+      - ./portal/dist:/srv/http
+    command: --port 8080 --fallback index.html
+    ports:
+      - 8080:8080

integration/portal/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "portal",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "prebuild:prod": "rm -rf dist",
+    "build:prod": "webpack -p"
+  },
+  "dependencies": {
+    "single-spa": "^5.3.1",
+    "zone.js": "file:../../node_modules/zone.js"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^4.0.4",
+    "ts-loader": "^6.2.2",
+    "typescript": "file:../../node_modules/typescript",
+    "webpack": "file:../../node_modules/webpack",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+}

integration/portal/src/config.ts

@@ -0,0 +1,3 @@
+export const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+
+export const SHOP_APP_URL = process.env.SHOP_APP_URL || 'http://localhost:4200';

integration/portal/src/loaders.ts

@@ -0,0 +1,62 @@
+import { IS_PRODUCTION } from './config';
+
+type Resolve = () => void;
+type Reject = (error: ErrorEvent) => void;
+
+function createScriptElement(
+  resolve: Resolve,
+  reject: Reject
+): HTMLScriptElement {
+  const script = document.createElement('script');
+  script.addEventListener('load', () => resolve());
+  script.addEventListener('error', error => reject(error));
+  return script;
+}
+
+function loadScriptUsingDefaultFileName(
+  url: string,
+  resolve: Resolve,
+  reject: Reject
+): void {
+  const script = createScriptElement(resolve, reject);
+  script.src = `${url}/main.js`;
+  document.head.appendChild(script);
+}
+
+function loadAngularScriptsInProductionMode(
+  url: string,
+  resolve: Resolve,
+  reject: Reject
+): void {
+  const moduleScript = createScriptElement(resolve, reject);
+  moduleScript.type = 'module';
+  moduleScript.src = `${url}/main-es2015.js`;
+
+  const noModuleScript = createScriptElement(resolve, reject);
+  noModuleScript.noModule = true;
+  noModuleScript.src = `${url}/main-es5.js`;
+
+  document.head.appendChild(moduleScript);
+  document.head.appendChild(noModuleScript);
+}
+
+/**
+ * Since Angular supports differential loading it will emit `main.js` file
+ * in the development mode and `main.(es-2015|es-5).js` files when applicaiton
+ * is built in the production mode.
+ */
+export function loadAngularScript(url: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (IS_PRODUCTION) {
+      loadAngularScriptsInProductionMode(url, resolve, reject);
+    } else {
+      loadScriptUsingDefaultFileName(url, resolve, reject);
+    }
+  });
+}
+
+export function loadScript(url: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    loadScriptUsingDefaultFileName(url, resolve, reject);
+  });
+}

integration/portal/src/main.ts

@@ -0,0 +1,16 @@
+import 'zone.js';
+import { registerApplication, start } from 'single-spa';
+
+import { SHOP_APP_URL } from './config';
+import { loadAngularScript } from './loaders';
+
+registerApplication(
+  'shop',
+  async () => {
+    await loadAngularScript(SHOP_APP_URL);
+    return window.shop;
+  },
+  () => true
+);
+
+start();

integration/portal/src/typings.d.ts

@@ -0,0 +1,8 @@
+import { LifeCycles } from 'single-spa';
+
+declare global {
+  interface Window {
+    shop: LifeCycles<never>;
+    navbar: LifeCycles<never>;
+  }
+}

integration/portal/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "strict": true,
+    "importHelpers": true
+  }
+}

integration/portal/webpack.config.js

@@ -0,0 +1,25 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/main.ts',
+  output: {
+    publicPath: '/',
+    filename: 'portal.js',
+  },
+  resolve: {
+    extensions: ['.js', '.ts'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+      },
+    ],
+  },
+  plugins: [new HtmlWebpackPlugin()],
+  devServer: {
+    port: 8080,
+    historyApiFallback: true,
+  },
+};