Step one; upcase 'test input' in processInput() method

Author: Aiko-Klostermann

src/app/app.component.css

@@ -1,3 +1 @@
-<h1>
-  {{title}}
-</h1>
+<component-under-test></component-under-test>

src/app/app.component.html

@@ -1,13 +1,13 @@
 import { TestBed, async } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
+import {ComponentUnderTestModule} from './component-under-test/component-under-test.module';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
+      declarations: [AppComponent],
+      imports: [ ComponentUnderTestModule ],
     }).compileComponents();
   }));
 
@@ -16,17 +16,4 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-
-  it(`should have as title 'app works!'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app works!');
-  }));
-
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('app works!');
-  }));
 });

src/app/app.component.spec.ts

@@ -2,9 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
-  title = 'app works!';
 }

src/app/app.component.ts

@@ -1,9 +1,10 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {HttpModule} from '@angular/http';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
+import {ComponentUnderTestModule} from './component-under-test/component-under-test.module';
 
 @NgModule({
   declarations: [
@@ -12,9 +13,11 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    ComponentUnderTestModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/app.module.ts

@@ -0,0 +1,32 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ComponentUnderTestComponent} from './component-under-test.component';
+
+describe('ComponentUnderTestComponent', () => {
+  let component: ComponentUnderTestComponent;
+  let fixture: ComponentFixture<ComponentUnderTestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ComponentUnderTestComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComponentUnderTestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show TEST INPUT', () => {
+    component.input = 'test input';
+    component.processInput();
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('div').innerText).toEqual('TEST INPUT');
+  });
+});

src/app/component-under-test/component-under-test.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import {Input} from '@angular/core';
+
+@Component({
+  selector: 'component-under-test',
+  template: '<div>{{ input }}</div>'
+})
+export class ComponentUnderTestComponent{
+
+  @Input() input;
+
+  processInput(): void {
+    this.input = this.input.toUpperCase();
+  }
+}

src/app/component-under-test/component-under-test.component.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ComponentUnderTestComponent} from './component-under-test.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [ComponentUnderTestComponent],
+  exports: [ComponentUnderTestComponent]
+})
+export class ComponentUnderTestModule { }