testing shared service between child WC and host ShellApp

Author: xmlking

angular.json

@@ -25,7 +25,11 @@
             "assets": [
               "apps/webapp/src/favicon.ico",
               "apps/webapp/src/assets",
-              { "glob": "main.js", "input": "dist/apps/chat-app/", "output": "/assets/chat-app" }
+              {
+                "glob": "main.js",
+                "input": "dist/apps/chat-app/",
+                "output": "/assets/chat-app"
+              }
             ],
             "styles": [
               "apps/webapp/src/styles.scss"
@@ -317,6 +321,39 @@
           }
         }
       }
+    },
+    "core": {
+      "root": "libs/core",
+      "sourceRoot": "libs/core/src",
+      "projectType": "library",
+      "prefix": "ngx-starter-kit",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/core/tsconfig.lib.json",
+              "libs/core/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/builders:jest",
+          "options": {
+            "jestConfig": "libs/core/jest.config.js",
+            "tsConfig": "libs/core/tsconfig.spec.json",
+            "setupFile": "libs/core/src/test-setup.ts"
+          }
+        }
+      },
+      "schematics": {
+        "@nrwl/schematics:component": {
+          "styleext": "scss"
+        }
+      }
     }
   },
   "cli": {

apps/chat-app/src/app/button/button.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { StateService } from '@ngx-starter-kit/core';
 
 @Component({
   selector: 'wc-button',
@@ -15,14 +16,18 @@ export class ButtonComponent implements OnChanges {
 
   private numberOfClicks = 0;
 
-  constructor() { }
+  constructor(private stateService: StateService) {
+    stateService.ctx.name = 'ButtonComponent sumo'
+  }
 
   ngOnChanges(changes: SimpleChanges) {
     console.log(changes);
   }
 
   handleClick(event) {
     this.numberOfClicks++;
+    this.stateService.ctx.age = this.stateService.ctx.age + 2;
+    console.log('in ButtonComponent WC', this.stateService.ctx);
     this.action.emit(this.numberOfClicks);
   }
 }

libs/core/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  name: 'core',
+  preset: '../../jest.config.js',
+  coverageDirectory: '../../coverage/libs/core'
+};

libs/core/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/core.module';
+export * from './lib/services/state.service';

libs/core/src/lib/core.module.spec.ts

@@ -0,0 +1,14 @@
+import { async, TestBed } from '@angular/core/testing';
+import { CoreModule } from './core.module';
+
+describe('CoreModule', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [CoreModule]
+    }).compileComponents();
+  }));
+
+  it('should create', () => {
+    expect(CoreModule).toBeDefined();
+  });
+});

libs/core/src/lib/core.module.ts

@@ -0,0 +1,7 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [CommonModule]
+})
+export class CoreModule {}

libs/core/src/lib/services/state.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StateService {
+  ctx = {
+    name: 'sumo',
+    age: 5
+  };
+  constructor() { }
+}

libs/core/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular';

libs/core/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*.ts"]
+}

libs/core/tsconfig.lib.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc/libs/core",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
+}