☔ all specs are valid, resolves #12

nx-workspace/apps/component-testing/src/app/app.module.ts

@@ -1,14 +1,15 @@
 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';
 import { SimpleInputComponent } from './components/simple-input/simple-input.component';
 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]
 })

nx-workspace/apps/component-testing/src/app/components/simple-input/simple-input.component.html

@@ -1,3 +1,10 @@
+<div class="abc-checkbox abc-checkbox-danger">
+  <input type="checkbox" id="simpleInput" [ngModel]="value" />
+  <label for="simpleInput">Set value</label>
+</div>
 <p>
-  simple-input works!
+  📃“<a
+    href="https://medium.com/@juliapassynkova/unit-testing-of-simple-input-box-fdbba93f3d2e"
+    >Unit testing of simple input box</a
+  >” by Julia Passynkova
 </p>

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;
+}

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<SimpleInputComponent>;
 
   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);
+    });
+  }));
 });

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() {}
 }