test (test inputs): experiment with default values for inputs (#96)

* test (test inputs): experiment with default values for inputs

* test (test inputs): experiment with default values for inputs

* test (test inputs): experiment with default values for inputs

* test (test inputs): experiment with default values for inputs

* test (test inputs): experiment with default values for inputs

* test (test inputs): experiment with default values for inputs

* test (test inputs): experiment with default values for inputs

* test (test inputs): experiment with default values for inputs

* test (test inputs): rearrange imports

src/app/development/input-test/input-test.component.html

@@ -0,0 +1 @@
+<p>input-test works!</p>

src/app/development/input-test/input-test.component.spec.ts

@@ -0,0 +1,190 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { async, TestBed } from '@angular/core/testing';
+import { InputTestComponent } from './input-test.component';
+
+/**
+ * Test host component to simulate parent component.
+ */
+@Component({
+    template: `
+        <app-input-test #testComp [myFirstInput]="'dada'"></app-input-test>`
+})
+class TestHostComponent1 implements OnInit {
+
+    @ViewChild('testComp') testComponent: InputTestComponent;
+
+    ngOnInit() {
+
+    }
+}
+
+/**
+ * Test host component to simulate parent component.
+ */
+@Component({
+    template: `
+        <app-input-test #testComp [mySecondInput]="'dudu'"></app-input-test>`
+})
+class TestHostComponent2 implements OnInit {
+
+    @ViewChild('testComp') testComponent: InputTestComponent;
+
+    ngOnInit() {
+
+    }
+}
+
+/**
+ * Test host component to simulate parent component.
+ */
+@Component({
+    template: `
+        <app-input-test #testComp [myThirdInput]="'aha'"></app-input-test>`
+})
+class TestHostComponent3 implements OnInit {
+
+    @ViewChild('testComp') testComponent: InputTestComponent;
+
+    ngOnInit() {
+
+    }
+}
+
+/**
+ * Test host component to simulate parent component.
+ */
+@Component({
+    template: `
+        <app-input-test #testComp [myFirstInput]="firstInput" [mySecondInput]="secondInput"></app-input-test>`
+})
+class TestHostComponent4 implements OnInit {
+
+    firstInput = 'dada';
+    secondInput = 'dudu';
+
+    @ViewChild('testComp') testComponent: InputTestComponent;
+
+    ngOnInit() {
+
+    }
+}
+
+/**
+ * Test host component to simulate parent component.
+ */
+@Component({
+    template: `
+        <app-input-test #testComp [myFirstInput]="firstInput" [mySecondInput]="secondInput" [myThirdInput]="thirdInput"></app-input-test>`
+})
+class TestHostComponent5 implements OnInit {
+
+    firstInput = 'dada';
+    secondInput = 'dudu';
+    thirdInput = 'hihi';
+
+    @ViewChild('testComp') testComponent: InputTestComponent;
+
+    ngOnInit() {
+
+    }
+}
+
+describe('InputTestComponent', () => {
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                InputTestComponent,
+                TestHostComponent1,
+                TestHostComponent2,
+                TestHostComponent3,
+                TestHostComponent4,
+                TestHostComponent5
+            ]
+        })
+            .compileComponents();
+    }));
+
+    it('should create InputTestComponent using TestHostComponent1', () => {
+        const fixture = TestBed.createComponent(TestHostComponent1);
+        const component = fixture.componentInstance;
+        fixture.detectChanges();
+
+        expect(component).toBeTruthy();
+
+        expect(component.testComponent).toBeTruthy();
+        expect(component.testComponent.myFirstInput).toEqual('dada');
+        expect(component.testComponent.mySecondInput).toEqual('hi');
+        expect(component.testComponent.myThirdInput).toEqual(undefined);
+    });
+
+    it('should create InputTestComponent using TestHostComponent2', () => {
+        const fixture = TestBed.createComponent(TestHostComponent2);
+        const component = fixture.componentInstance;
+        fixture.detectChanges();
+
+        expect(component).toBeTruthy();
+
+        expect(component.testComponent).toBeTruthy();
+        expect(component.testComponent.myFirstInput).toEqual('oho');
+        expect(component.testComponent.mySecondInput).toEqual('dudu');
+        expect(component.testComponent.myThirdInput).toEqual(undefined);
+    });
+
+    it('should create InputTestComponent using TestHostComponent3', () => {
+        const fixture = TestBed.createComponent(TestHostComponent3);
+        const component = fixture.componentInstance;
+        fixture.detectChanges();
+
+        expect(component).toBeTruthy();
+
+        expect(component.testComponent).toBeTruthy();
+        expect(component.testComponent.myFirstInput).toEqual('oho');
+        expect(component.testComponent.mySecondInput).toEqual('hi');
+        expect(component.testComponent.myThirdInput).toEqual('aha');
+    });
+
+    it('should create InputTestComponent using TestHostComponent4', () => {
+        const fixture = TestBed.createComponent(TestHostComponent4);
+        const component = fixture.componentInstance;
+        fixture.detectChanges();
+
+        expect(component).toBeTruthy();
+
+        expect(component.testComponent).toBeTruthy();
+        expect(component.testComponent.myFirstInput).toEqual('dada');
+        expect(component.testComponent.mySecondInput).toEqual('dudu');
+        expect(component.testComponent.myThirdInput).toEqual(undefined);
+
+        component.firstInput = 'gaga';
+
+        fixture.detectChanges();
+
+        expect(component.testComponent.myFirstInput).toEqual('gaga');
+        expect(component.testComponent.mySecondInput).toEqual('dudu');
+        expect(component.testComponent.myThirdInput).toEqual(undefined);
+
+    });
+
+    it('should create InputTestComponent using TestHostComponent5', () => {
+        const fixture = TestBed.createComponent(TestHostComponent5);
+        const component = fixture.componentInstance;
+        fixture.detectChanges();
+
+        expect(component).toBeTruthy();
+
+        expect(component.testComponent).toBeTruthy();
+        expect(component.testComponent.myFirstInput).toEqual('dada');
+        expect(component.testComponent.mySecondInput).toEqual('dudu');
+        expect(component.testComponent.myThirdInput).toEqual('hihi');
+
+        component.thirdInput = undefined;
+
+        fixture.detectChanges();
+
+        expect(component.testComponent.myFirstInput).toEqual('dada');
+        expect(component.testComponent.mySecondInput).toEqual('dudu');
+        expect(component.testComponent.myThirdInput).toEqual(undefined);
+
+    });
+});

src/app/development/input-test/input-test.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+
+@Component({
+    selector: 'app-input-test',
+    templateUrl: './input-test.component.html',
+    styleUrls: ['./input-test.component.scss']
+})
+export class InputTestComponent implements OnInit, OnChanges {
+
+    @Input() myFirstInput = 'oho';
+
+    private _mySecondInput = 'hi';
+
+    @Input() set mySecondInput(value: string) {
+        this._mySecondInput = value;
+    }
+
+    get mySecondInput() {
+        return this._mySecondInput;
+    }
+
+    @Input() myThirdInput?: string;
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+
+    }
+
+    replacer(key, value) {
+        // Filtering out properties
+        if (value === undefined) {
+            return 'undefined';
+        }
+        return value;
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+       // console.log(JSON.stringify(changes, this.replacer));
+    }
+
+
+}