feat: extract SUT into dedicated files

makes it easier to understand tests

Author: juristr

README.md

@@ -17,38 +17,36 @@ I've been giving a talk on "Testing with Angular".
 
 All the scenarios are listed here below and nicely linked to the source file.
 
-1. [**Testing Components**](./src/app/components)
-   * [testing @Input](./src/app/components/input.component.spec.ts)  
-     _Learn how to a component's `@Input()`._
-   * [testing @Output](./src/app/components/output.component.spec.ts)  
-     _Learn how to test a component's `@Output()`, more specifically the `EventEmitter` type._
-   * [testing timers inside components](./src/app/components/counter.component.spec.ts)  
-     _Learn about how to handle timers inside components using `fakeAsync` and `discardPeriodicTasks()`._
-   * [testing DOM manipulations](./src/app/components/domtesting.component.spec.ts)  
-     _Learn how to test the DOM manipulations which might be caused by like `*ngIf` statements etc._
-   * [testing content projection](./src/app/components/content-projection.component.spec.ts)  
-     _Learn how to test `<ng-content>` directives._
-   * [testing dynamic CSS classes](./src/app/components/dynamic-css-classes.component.spec.ts)  
-     _Test CSS classes being added and removed dynamically from your component's template based on some conditional expressions._
-   * [testing dynamic CSS styles](./src/app/components/dynamic-styles.component.spec.ts)  
-     _Test dynamic CSS styles using custom Jasmine matchers._
-   * [mocking nested components](./src/app/components/nested.component.spec.ts)  
-     _Learn how to mock out nested components which you don't want to necessarily test_
-   * [async pipes within templates](./src/app/components/async-stream.component.spec.ts)  
-     _Shows how to correctly resolve async pipes and then verify they properly render in the HTML_
-1. [**Testing Services**](./src/app/services)
-   * [Simple stateless function](./src/app/services/greeting.service.spec.ts)  
-     _Learn about different ways of injecting a service into a test case as well as how to test service methods._
-   * [Async operations](./src/app/services/async.service.spec.ts)  
-     _Learn how to test async operations using the `async()` as well as `fakeAsync()` functions._
-   * Mocking and remote http calls  
-     _Learn how to mock external dependencies, such as use the `MockBackend` provided by Angular to respond to http calls._
-     * [Old, < 4.3.1 Http service](./src/app/services/remote.service.spec.ts)
-     * [New HttpClient from `@angular/common/http`](./src/app/services/remote-new.service.spec.ts)
-1. [**Testing Pipes**](./src/app/pipes)
-   * [custom filter pipe](./src/app/pipes/filter.pipe.spec.ts)
-1. [**Custom Matchers and Utilities**](./src/app/utils)
-   * [Create your own custom Jasmine matchers](./src/app/utils/custom-matchers.ts)
+1.  [**Testing Components**](./src/app/components)
+    * [testing @Input](./src/app/components/input.component.spec.ts)  
+      _Learn how to a component's `@Input()`._
+    * [testing @Output](./src/app/components/output.component.spec.ts)  
+      _Learn how to test a component's `@Output()`, more specifically the `EventEmitter` type._
+    * [testing timers inside components](./src/app/components/counter.component.spec.ts)  
+      _Learn about how to handle timers inside components using `fakeAsync` and `discardPeriodicTasks()`._
+    * [testing DOM manipulations](./src/app/components/domtesting.component.spec.ts)  
+      _Learn how to test the DOM manipulations which might be caused by like `*ngIf` statements etc._
+    * [testing content projection](./src/app/components/content-projection.component.spec.ts)  
+      _Learn how to test `<ng-content>` directives._
+    * [testing dynamic CSS classes](./src/app/components/dynamic-css-classes.component.spec.ts)  
+      _Test CSS classes being added and removed dynamically from your component's template based on some conditional expressions._
+    * [testing dynamic CSS styles](./src/app/components/dynamic-styles.component.spec.ts)  
+      _Test dynamic CSS styles using custom Jasmine matchers._
+    * [mocking nested components](./src/app/components/nested.component.spec.ts)  
+      _Learn how to mock out nested components which you don't want to necessarily test_
+    * [async pipes within templates](./src/app/components/async-stream.component.spec.ts)  
+      _Shows how to correctly resolve async pipes and then verify they properly render in the HTML_
+1.  [**Testing Services**](./src/app/services)
+    * [Simple stateless function](./src/app/services/greeting.service.spec.ts)  
+      _Learn about different ways of injecting a service into a test case as well as how to test service methods._
+    * [Async operations](./src/app/services/async.service.spec.ts)  
+      _Learn how to test async operations using the `async()` as well as `fakeAsync()` functions._
+    * [Mocking and remote http calls](./src/app/services/remote.service.spec.ts)
+      _Learn how to mock external dependencies, such as use the `MockBackend` provided by Angular to respond to http calls._
+1.  [**Testing Pipes**](./src/app/pipes)
+    * [custom filter pipe](./src/app/pipes/filter.pipe.spec.ts)
+1.  [**Custom Matchers and Utilities**](./src/app/utils)
+    * [Create your own custom Jasmine matchers](./src/app/utils/custom-matchers.ts)
 
 ## Articles on Testing
 
@@ -61,9 +59,9 @@ All the scenarios are listed here below and nicely linked to the source file.
 
 If you want to run the example locally,
 
-1. clone this repository
-1. Run `npm install`
-1. Run `npm test` to execute all the tests
+1.  clone this repository
+1.  Run `npm install`
+1.  Run `npm test` to execute all the tests
 
 By running `npm run test.watch` you can run the tests in watch mode which is particularly useful during development.
 
@@ -73,4 +71,4 @@ Wanna help? Of course! Just open an [issue](https://github.com/juristr/angular-t
 
 ## Other Links & Resources
 
-- [Testing Angular Material Dialog templates](http://angular-tips.com/blog/2018/02/testing-angular-material-dialog-templates/)
+* [Testing Angular Material Dialog templates](http://angular-tips.com/blog/2018/02/testing-angular-material-dialog-templates/)

src/app/components/async-stream.component.spec.ts

@@ -1,34 +1,18 @@
-import { tick } from '@angular/core/testing';
 /* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { Component, Output, EventEmitter } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
-
-@Component({
-  selector: 'test',
-  template: `
-    <div>{{ personName | async }}</div>
-  `
-})
-class AsyncComponent {
-  personName: Observable<string>;
-}
+import { AsyncComponent } from './async-stream.component';
 
 describe('Async Compnent', () => {
   let component: AsyncComponent;
   let fixture: ComponentFixture<AsyncComponent>;
 
-  beforeEach(
-    async(() => {
-      TestBed.configureTestingModule({
-        declarations: [AsyncComponent]
-      }).compileComponents();
-    })
-  );
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AsyncComponent]
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AsyncComponent);
@@ -41,14 +25,18 @@ describe('Async Compnent', () => {
   });
 
   it('should correctly visualize the emitted values from the stream', () => {
-    let stream = new Subject<string>();
+    const stream = new Subject<string>();
     component.personName = stream.asObservable();
     fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('div')).nativeElement.innerHTML).toBe('');
+    expect(
+      fixture.debugElement.query(By.css('div')).nativeElement.innerHTML
+    ).toBe('');
 
     stream.next('Hi');
 
     fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('div')).nativeElement.innerHTML).toBe('Hi');
+    expect(
+      fixture.debugElement.query(By.css('div')).nativeElement.innerHTML
+    ).toBe('Hi');
   });
 });

src/app/components/async-stream.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'test',
+  template: `
+      <div>{{ personName | async }}</div>
+    `
+})
+export class AsyncComponent {
+  personName: Observable<string>;
+}

src/app/components/content-projection.component.spec.ts

@@ -1,23 +1,8 @@
 /* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
 import { Component } from '@angular/core';
-
-// the content projected Component
-@Component({
-    selector: 'my-collapsible',
-    template: `
-        <h1>
-            <ng-content select="[title]"></ng-content>
-        </h1>
-        <div class="content">
-            <ng-content select="[body]"></ng-content>
-        </div>
-    `
-})
-class CollapsiblePanel {}
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { CollapsiblePanelComponent } from './content-projection.component';
 
 @Component({
   selector: 'test',
@@ -28,21 +13,20 @@ class CollapsiblePanel {}
     </my-collapsible>
   `
 })
-class ContentProjectionComponent {}
+class TestComponent {}
 
 describe('ContentProjectionComponent', () => {
-  let component: ContentProjectionComponent;
-  let fixture: ComponentFixture<ContentProjectionComponent>;
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ContentProjectionComponent, CollapsiblePanel]
-    })
-      .compileComponents();
+      declarations: [TestComponent, CollapsiblePanelComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ContentProjectionComponent);
+    fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -52,11 +36,16 @@ describe('ContentProjectionComponent', () => {
   });
 
   it('should correctly project the title', () => {
-      expect(fixture.debugElement.query(By.css('my-collapsible')).query(By.css('h1')).nativeElement.innerHTML).toContain("I'm the title");
+    expect(
+      fixture.debugElement.query(By.css('my-collapsible')).query(By.css('h1'))
+        .nativeElement.innerHTML
+    ).toContain("I'm the title");
   });
 
   it('should correctly project the body', () => {
-      expect(fixture.debugElement.query(By.css('my-collapsible')).query(By.css('div')).nativeElement.innerHTML).toContain("I'm the body");
-  });  
-
+    expect(
+      fixture.debugElement.query(By.css('my-collapsible')).query(By.css('div'))
+        .nativeElement.innerHTML
+    ).toContain("I'm the body");
+  });
 });

src/app/components/content-projection.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-collapsible',
+  template: `
+    <h1>
+        <ng-content select="[title]"></ng-content>
+    </h1>
+    <div class="content">
+        <ng-content select="[body]"></ng-content>
+    </div>
+  `
+})
+export class CollapsiblePanelComponent {}

src/app/components/counter.component.spec.ts

@@ -1,59 +1,22 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-
 import {
-  async,
-  fakeAsync,
   ComponentFixture,
-  tick,
   TestBed,
-  discardPeriodicTasks
+  async,
+  discardPeriodicTasks,
+  fakeAsync,
+  tick
 } from '@angular/core/testing';
-
-import { By } from '@angular/platform-browser';
-
-@Component({
-  selector: 'app-counter',
-  template: ``
-})
-export class CounterComponent implements OnInit, OnDestroy {
-  currentCounter = 0;
-  maxCounter = 10;
-  private counterInterval;
-
-  constructor() {}
-
-  ngOnInit() {
-    this.startCounter();
-  }
-
-  private startCounter() {
-    this.counterInterval = setInterval(() => {
-      if (this.currentCounter >= this.maxCounter) {
-        this.currentCounter = 0;
-      } else {
-        this.currentCounter++;
-      }
-    }, 1000);
-  }
-
-  ngOnDestroy() {
-    if (this.counterInterval) {
-      clearTimeout(this.counterInterval);
-    }
-  }
-}
+import { CounterComponent } from './counter.component';
 
 describe('CounterComponent', () => {
   let component: CounterComponent;
   let fixture: ComponentFixture<CounterComponent>;
 
-  beforeEach(
-    async(() => {
-      TestBed.configureTestingModule({
-        declarations: [CounterComponent]
-      }).compileComponents();
-    })
-  );
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CounterComponent]
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CounterComponent);

src/app/components/counter.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+@Component({
+  selector: 'app-counter',
+  template: ``
+})
+export class CounterComponent implements OnInit, OnDestroy {
+  currentCounter = 0;
+  maxCounter = 10;
+  private counterInterval;
+
+  constructor() {}
+
+  ngOnInit() {
+    this.startCounter();
+  }
+
+  private startCounter() {
+    this.counterInterval = setInterval(() => {
+      if (this.currentCounter >= this.maxCounter) {
+        this.currentCounter = 0;
+      } else {
+        this.currentCounter++;
+      }
+    }, 1000);
+  }
+
+  ngOnDestroy() {
+    if (this.counterInterval) {
+      clearTimeout(this.counterInterval);
+    }
+  }
+}