feat(unit-test): add test for action tomastrajan#177

using debugElement instead of nativeElement
shootermv · May 16, 2018 · 8f01931 · 8f01931
1 parent 0930236
commit 8f01931
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/src/app/shared/big-input/big-input-action.component.spec.ts b/src/app/shared/big-input/big-input-action.component.spec.ts
@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { By } from '@angular/platform-browser';
 import { SharedModule } from '@app/shared';
 
 import { Component } from '@angular/core';
@@ -11,6 +11,7 @@ import { Component } from '@angular/core';
      color="warn"
      [icon]="icon"
      [label]="label"
+     (action)="actionHandler()"
     [disabled]="disabled"
     >
     </anms-big-input-action>
@@ -20,6 +21,7 @@ class HostComponent {
   disabled;
   icon;
   label;
+  actionHandler;
 }
 describe('BigInputActionComponent', () => {
   let component: HostComponent;
@@ -45,10 +47,9 @@ describe('BigInputActionComponent', () => {
   });
 
   it('should initially not be disabled nad no show icon and label', () => {
-    const hostElement: HTMLElement = fixture.nativeElement;
-    const button = hostElement.querySelector('button');
-    const icon = hostElement.querySelector('mat-icon');
-    const label = hostElement.querySelector('.mat-button-wrapper > span');
+    const button = fixture.debugElement.query(By.css('button')).nativeElement;
+    const icon = fixture.debugElement.query(By.css('mat-icon'));
+    const label = fixture.debugElement.query(By.css('.mat-button-wrapper > span'));
     expect(button.disabled).toBeFalsy();
     expect(icon).toBeNull();
     expect(label).toBeNull();
@@ -57,27 +58,36 @@ describe('BigInputActionComponent', () => {
   it('should disable button if disabled property is set', () => {
     component.disabled = true;
     fixture.detectChanges();
-    const button = fixture.nativeElement.querySelector('button');
+    const button = fixture.debugElement.query(By.css('button')).nativeElement;
 
     expect(button.disabled).toBeTruthy();
   });
 
   it('should display icon if icon property is set', () => {
     component.icon = 'delete';
     fixture.detectChanges();
-    const icon = fixture.nativeElement.querySelector('mat-icon');
+    const icon = fixture.debugElement.query(By.css('mat-icon')).nativeElement;
 
     expect(icon).toBeTruthy();
   });
 
   it('should display label with provided text when label property is set', () => {
     component.label = 'delete';
     fixture.detectChanges();
-    const label = fixture.nativeElement.querySelector(
+    const label = fixture.debugElement.query(By.css(
       '.mat-button-wrapper > span'
-    );
+    )).nativeElement;
 
     expect(label).toBeTruthy();
     expect(label.textContent).toBe('delete');
   });
+
+  it('should trigger action bound when button clicked', () => {
+    const button = fixture.debugElement.query(By.css('button'));
+    component.actionHandler = () => {};
+    fixture.detectChanges();
+    spyOn(component, 'actionHandler').and.callThrough();
+    button.triggerEventHandler('click', <Event>{});
+    expect(component.actionHandler).toHaveBeenCalled();
+  });
 });