chore(examples): migrate SSR example to angular 7 (#471)

* chore(examples): migrate SSR example to angular 7

* fix linting on version number

* migrate ssr example to angular 7

* chore(tests): add tests for ssr (#472)

* chore(tests): add tests for ssr

* separate build steps for readability

* remove caret ^ from devDeps

* fix restore externals in webpack.config

* explain mode: developement

Author: tkrugg

.circleci/config.yml

@@ -27,12 +27,28 @@ jobs:
           command: yarn build
 
       - run:
-          name: Build examples
+          name: Build ecommerce example
           command: |
             yarn examples:ecommerce:build
+      - run:
+          name: Build router example
+          command: |
             yarn examples:router:build
+      - run:
+          name: Build media example
+          command: |
             yarn examples:media:build
+      - run:
+          name: Build ssr example
+          command: |
             yarn examples:ssr:build
+      - run:
+          name: Test ssr example
+          command: |
+            yarn examples:ssr:test
+      - run:
+          name: Build storybook
+          command: |
             yarn examples:storybook:build
 
       - save_cache:

examples/server-side-rendering/.angular-cli.json

@@ -0,0 +1,44 @@
+import fetch from 'node-fetch';
+import { JSDOM } from 'jsdom';
+
+describe('SSR', () => {
+  describe('with no state', () => {
+    let dom;
+    beforeAll(async () => {
+      const res = await fetch('http://localhost:4000/');
+      const html = await res.text();
+      dom = new JSDOM(html);
+    });
+    it('should return html with a searchbox', async () => {
+      const searchBox = dom.window.document.querySelector('ais-search-box');
+      expect(searchBox).toBeDefined();
+    });
+    it('should return html with a refinement list', async () => {
+      const refinementList = dom.window.document.querySelector(
+        'ais-refinement-list'
+      );
+      expect(refinementList).toBeDefined();
+    });
+    it('should return page 1', async () => {
+      const pageSelected = dom.window.document.querySelector(
+        '.ais-Pagination-item--selected'
+      );
+      expect(pageSelected.textContent.trim()).toEqual('1');
+    });
+  });
+
+  describe('with state', () => {
+    let dom;
+    beforeAll(async () => {
+      const res = await fetch('http://localhost:4000/?p=2');
+      const html = await res.text();
+      dom = new JSDOM(html);
+    });
+    it('should return html on page 3', async () => {
+      const pageSelected = dom.window.document.querySelector(
+        '.ais-Pagination-item--selected'
+      );
+      expect(pageSelected.textContent.trim()).toEqual('3');
+    });
+  });
+});

examples/server-side-rendering/__tests__/ssr.spec.ts

@@ -0,0 +1,141 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ng-universal-demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/browser",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": ["src/assets", "src/favicon.ico"],
+            "styles": ["src/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ng-universal-demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ng-universal-demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ng-universal-demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "preserveSymlinks": true,
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": ["src/styles.scss"],
+            "assets": ["src/assets", "src/favicon.ico"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
+            "tsConfig": "src/tsconfig.server.json"
+          }
+        }
+      }
+    },
+    "ng-universal-demo-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "ng-universal-demo:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ng-universal-demo",
+  "schematics": {
+    "@schematics/angular:class": {
+      "spec": false
+    },
+    "@schematics/angular:component": {
+      "spec": false,
+      "inlineStyle": true,
+      "inlineTemplate": true,
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "spec": false,
+      "prefix": "app"
+    },
+    "@schematics/angular:guard": {
+      "spec": false
+    },
+    "@schematics/angular:module": {
+      "spec": false
+    },
+    "@schematics/angular:pipe": {
+      "spec": false
+    },
+    "@schematics/angular:service": {
+      "spec": false
+    }
+  }
+}