UI testcases and new lisence free images updation

Author: ishwaryamamidi

client/src/app/app.component.spec.ts

@@ -1,27 +1,24 @@
 import { TestBed, async } from '@angular/core/testing';
+import { Router, RouterOutlet } from "@angular/router";
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+
+class MockRouter { public navigate() {}; }
+
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
       ],
+      providers: [{provide: Router, useClass: MockRouter },
+            RouterOutlet],
+      imports: [ RouterTestingModule ]
     }).compileComponents();
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-  it(`should have as title 'client'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('client');
-  }));
-  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('Welcome to client!');
-  }));
 });

client/src/app/dashboard/crawler/crawler.component.spec.ts

@@ -1,14 +1,24 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { MatTableModule, MatInputModule} from '@angular/material';
+import { MatFormFieldModule} from '@angular/material/form-field';
+import { MatCheckboxModule} from '@angular/material/checkbox';
+import { MatIconModule} from '@angular/material/icon';
+import { MatDialogModule} from '@angular/material/dialog';
+import { TableAllComponent } from '../table-all/table-all.component';
 import { CrawlerComponent } from './crawler.component';
+import { ApiService} from '../../api';
 
 describe('CrawlerComponent', () => {
   let component: CrawlerComponent;
   let fixture: ComponentFixture<CrawlerComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CrawlerComponent ]
+      declarations: [ CrawlerComponent, TableAllComponent],
+      imports: [HttpClientTestingModule, HttpClientModule, BrowserAnimationsModule, MatTableModule, MatInputModule, MatFormFieldModule, MatCheckboxModule, MatIconModule, MatDialogModule]
     })
     .compileComponents();
   }));
@@ -19,7 +29,12 @@ describe('CrawlerComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  /*it('should create', () => {
     expect(component).toBeTruthy();
-  });
+  });*/
+
+  it(`should create`, async(inject([HttpTestingController, ApiService],
+    (httpClient: HttpTestingController, apiService: ApiService) => {
+      expect(apiService).toBeTruthy();
+  })));
 });

client/src/app/dashboard/dashboard-card/dashboard-card.component.spec.ts

@@ -1,5 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { Router, RouterOutlet } from "@angular/router";
+import { RouterModule } from '@angular/router';
 import { DashboardCardComponent } from './dashboard-card.component';
 
 describe('DashboardCardComponent', () => {
@@ -8,7 +9,10 @@ describe('DashboardCardComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DashboardCardComponent ]
+      declarations: [ DashboardCardComponent ],
+       providers: [{provide: Router},
+            RouterOutlet],
+      imports: [RouterModule]
     })
     .compileComponents();
   }));

client/src/app/dashboard/dashboard-overview/dashboard-overview.component.spec.ts

@@ -1,4 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {Instance} from "../../api";
+import { HttpClientModule } from '@angular/common/http';
+import { StatusCardComponent } from '../status-card/status-card.component';
+import { DashboardCardComponent } from '../dashboard-card/dashboard-card.component';
+import { RouterModule } from '@angular/router';
 import { DashboardOverviewComponent } from './dashboard-overview.component';
 
 describe('DashboardOverviewComponent', () => {
@@ -7,7 +12,8 @@ describe('DashboardOverviewComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DashboardOverviewComponent ]
+      declarations: [ DashboardOverviewComponent, DashboardCardComponent, StatusCardComponent ],
+      imports: [RouterModule, HttpClientModule]
     })
     .compileComponents();
   }));

client/src/app/dashboard/dashboard.component.spec.ts

@@ -1,14 +1,21 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { Router, RouterOutlet } from "@angular/router";
+import { RouterTestingModule } from '@angular/router/testing';
+import { HeaderComponent } from './header/header.component';
 import { DashboardComponent } from './dashboard.component';
 
+class MockRouter { public navigate() {}; }
+
 describe('DashboardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DashboardComponent ]
+      declarations: [ DashboardComponent, HeaderComponent],
+      providers: [{provide: Router, useClass: MockRouter },
+            RouterOutlet],
+      imports: [ RouterTestingModule ]
     })
     .compileComponents();
   }));

client/src/app/dashboard/deletedialog/deletedialog.component.spec.ts

@@ -1,14 +1,25 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogModule} from '@angular/material/dialog';
 
 import { DeletedialogComponent } from './deletedialog.component';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
 
 describe('DeletedialogComponent', () => {
   let component: DeletedialogComponent;
   let fixture: ComponentFixture<DeletedialogComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DeletedialogComponent ]
+      declarations: [ DeletedialogComponent ],
+      imports: [MatDialogModule],
+      providers: [{
+      provide: MatDialogRef,
+      useValue: {}
+      }, {
+      provide: MAT_DIALOG_DATA,
+      useValue: {} // Add any data you wish to test if it is passed/used correctly
+  }]
     })
     .compileComponents();
   }));

client/src/app/dashboard/table-all/table-all.component.html

@@ -1,6 +1,6 @@
 <div class="container">
     <mat-form-field>
-    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+    <input id="filter_data" matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
     </mat-form-field>
   <table class="mat-elevation-z8 mat-table" mat-table [dataSource]="dataSource">
     <ng-container matColumnDef="ID">

client/src/app/dashboard/table-all/table-all.component.spec.ts

@@ -1,25 +1,69 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserModule, By} from '@angular/platform-browser';
+import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { MatTableModule, MatInputModule} from '@angular/material';
+import { MatFormFieldModule} from '@angular/material/form-field';
+import { MatCheckboxModule} from '@angular/material/checkbox';
+import { MatIconModule} from '@angular/material/icon';
+import { MatDialogRef, MAT_DIALOG_DATA, MatTableDataSource} from '@angular/material';
+import { MatDialogModule} from '@angular/material/dialog';
 
 import { TableAllComponent } from './table-all.component';
 
+
 describe('TableAllComponent', () => {
   let component: TableAllComponent;
   let fixture: ComponentFixture<TableAllComponent>;
+  let debugElement: DebugElement;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TableAllComponent ]
+      declarations: [ TableAllComponent ],
+      imports: [BrowserModule, BrowserAnimationsModule, MatTableModule, MatInputModule, MatFormFieldModule, MatCheckboxModule, MatIconModule, MatDialogModule],
+      providers: [{
+      provide: MatDialogRef,
+      useValue: {}
+      }, {
+      provide: MAT_DIALOG_DATA,
+      useValue: {} // Add any data you wish to test if it is passed/used correctly
+      },
+      {
+      provide: MatTableDataSource,
+      useValue: {} // Add any data you wish to test if it is passed/used correctly
+  }]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TableAllComponent);
     component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should check for openDialog function call', async(() => {
+  spyOn(component, 'openDialog');
+
+  let button = fixture.debugElement.nativeElement.querySelector('button');
+  button.click();
+
+  fixture.whenStable().then(() => {
+    expect(component.openDialog).toHaveBeenCalled();
+  })
+}));
+
+it('should check for apply filter keyup event', () => {
+    spyOn(component, 'applyFilter');
+    fixture.detectChanges();
+    let input = debugElement.query(By.css('#filter_data');
+    let inputElement = input.nativeElement;
+    inputElement.dispatchEvent(new Event('keyup'));
+    
+    expect(component.applyFilter).toHaveBeenCalled();
+  });
 });

client/src/app/dashboard/webapi/web-api.component.spec.ts

@@ -1,14 +1,24 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { MatTableModule, MatInputModule} from '@angular/material';
+import { MatFormFieldModule} from '@angular/material/form-field';
+import { MatCheckboxModule} from '@angular/material/checkbox';
+import { MatIconModule} from '@angular/material/icon';
+import { MatDialogModule} from '@angular/material/dialog';
+import { TableAllComponent } from '../table-all/table-all.component';
 import { WebApiComponent } from './web-api.component';
+import { ApiService} from '../../api';
 
 describe('WebApiComponent', () => {
   let component: WebApiComponent;
   let fixture: ComponentFixture<WebApiComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ WebApiComponent ]
+      declarations: [ WebApiComponent, TableAllComponent ],
+      imports: [HttpClientTestingModule,  HttpClientModule, BrowserAnimationsModule, MatTableModule, MatInputModule, MatFormFieldModule, MatCheckboxModule, MatIconModule, MatDialogModule]
     })
     .compileComponents();
   }));
@@ -19,7 +29,12 @@ describe('WebApiComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  /*it('should create', () => {
     expect(component).toBeTruthy();
-  });
+  });*/
+
+  it(`should create`, async(inject([HttpTestingController, ApiService],
+    (httpClient: HttpTestingController, apiService: ApiService) => {
+      expect(apiService).toBeTruthy();
+  })));
 });

client/src/app/dashboard/webapp/webapp.component.spec.ts

@@ -1,14 +1,24 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { MatTableModule, MatInputModule} from '@angular/material';
+import { MatFormFieldModule} from '@angular/material/form-field';
+import { MatCheckboxModule} from '@angular/material/checkbox';
+import { MatIconModule} from '@angular/material/icon';
+import { MatDialogModule} from '@angular/material/dialog';
+import { TableAllComponent } from '../table-all/table-all.component';
 import { WebappComponent } from './webapp.component';
+import { ApiService} from '../../api';
 
 describe('WebappComponent', () => {
   let component: WebappComponent;
   let fixture: ComponentFixture<WebappComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ WebappComponent ]
+      declarations: [ WebappComponent, TableAllComponent],
+      imports: [HttpClientTestingModule,  HttpClientModule, BrowserAnimationsModule, MatTableModule, MatInputModule, MatFormFieldModule, MatCheckboxModule, MatIconModule, MatDialogModule]
     })
     .compileComponents();
   }));
@@ -19,7 +29,12 @@ describe('WebappComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  /*it('should create', () => {
     expect(component).toBeTruthy();
-  });
+  });*/
+
+  it(`should create`, async(inject([HttpTestingController, ApiService],
+    (httpClient: HttpTestingController, apiService: ApiService) => {
+      expect(apiService).toBeTruthy();
+  })));
 });