diff --git a/nx-workspace/apps/component-testing/src/app/app.module.ts b/nx-workspace/apps/component-testing/src/app/app.module.ts index 1a88e70..6786190 100644 --- a/nx-workspace/apps/component-testing/src/app/app.module.ts +++ b/nx-workspace/apps/component-testing/src/app/app.module.ts @@ -1,5 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { RoutingModule } from './routing.module'; import { AppComponent } from './components/app.component'; @@ -7,8 +8,8 @@ import { SimpleInputComponent } from './components/simple-input/simple-input.com import { IndexComponent } from './components/index/index.component'; @NgModule({ - declarations: [AppComponent, SimpleInputComponent, IndexComponent], - imports: [BrowserModule, RoutingModule], + imports: [BrowserModule, FormsModule, RoutingModule], + declarations: [AppComponent, IndexComponent, SimpleInputComponent], providers: [], bootstrap: [AppComponent] }) diff --git a/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.html b/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.html index cde6f2d..136ef2b 100644 --- a/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.html +++ b/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.html @@ -1,3 +1,10 @@ +
+ + +

- simple-input works! + 📃“Unit testing of simple input box” by Julia Passynkova

diff --git a/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.scss b/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.scss index e69de29..b1caf48 100644 --- a/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.scss +++ b/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.scss @@ -0,0 +1,6 @@ +input[type='checkbox'] { + border: solid 4px #000; + display: inline-block; + width: 32px; + height: 32px; +} \ No newline at end of file diff --git a/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.spec.ts b/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.spec.ts index a2d6d89..a045eee 100644 --- a/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.spec.ts +++ b/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.spec.ts @@ -1,16 +1,18 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; import { SimpleInputComponent } from './simple-input.component'; -describe('SimpleInputComponent', () => { +describe(SimpleInputComponent.name, () => { let component: SimpleInputComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ SimpleInputComponent ] - }) - .compileComponents(); + imports: [FormsModule], + declarations: [SimpleInputComponent] + }).compileComponents(); })); beforeEach(() => { @@ -22,4 +24,14 @@ describe('SimpleInputComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('checkbox is checked if value is true', async(() => { + component.value = true; + fixture.detectChanges(); + + fixture.whenStable().then(() => { + const inEl = fixture.debugElement.query(By.css('#simpleInput')); + expect(inEl.nativeElement.checked).toBe(true); + }); + })); }); diff --git a/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.ts b/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.ts index 001efff..f9842ef 100644 --- a/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.ts +++ b/nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.ts @@ -1,15 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'nx-workspace-simple-input', templateUrl: './simple-input.component.html', styleUrls: ['./simple-input.component.scss'] }) -export class SimpleInputComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - +export class SimpleInputComponent { + @Input() value: boolean; + constructor() {} }