ci: unit tests changes

shanmukhateja · shanmukhateja · commit e01d14728d65 · 2022-12-30T12:07:26.000+05:30
- add unit tests for new components

- fix broken unit tests due to updates
diff --git a/demo/src/app/advanced/dt-instance.component.spec.ts b/demo/src/app/advanced/dt-instance.component.spec.ts
@@ -46,9 +46,9 @@ describe('DtInstanceComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it('should have title "Getting the DataTable instance"', waitForAsync(() => {
+  it('should have title "Finding DataTable instance"', waitForAsync(() => {
     const app = fixture.debugElement.componentInstance as DtInstanceComponent;
-    expect(app.pageTitle).toBe('Getting the DataTable instance');
+    expect(app.pageTitle).toBe('Finding DataTable instance');
   }));
 
   it('should retrieve Table instance', async () => {
diff --git a/demo/src/app/advanced/load-dt-options-with-promise.component.spec.ts b/demo/src/app/advanced/load-dt-options-with-promise.component.spec.ts
@@ -46,9 +46,9 @@ describe('LoadDtOptionsWithPromiseComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it('should have title "Load DataTables Options with Promise"', waitForAsync(() => {
+  it('should have title "Load DT Options with Promise"', waitForAsync(() => {
     const app = fixture.debugElement.componentInstance as LoadDtOptionsWithPromiseComponent;
-    expect(app.pageTitle).toBe('Load DataTables Options with Promise');
+    expect(app.pageTitle).toBe('Load DT Options with Promise');
   }));
 
   it('should render table from dtOptions as a Promise', async () => {
diff --git a/demo/src/app/advanced/multiple-tables.component.spec.ts b/demo/src/app/advanced/multiple-tables.component.spec.ts
@@ -46,9 +46,9 @@ describe('MultipleTablesComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it('should have title "Multiple DataTables in the same page"', waitForAsync(() => {
+  it('should have title "Multiple tables in the same page"', waitForAsync(() => {
     const app = fixture.debugElement.componentInstance as MultipleTablesComponent;
-    expect(app.pageTitle).toBe('Multiple DataTables in the same page');
+    expect(app.pageTitle).toBe('Multiple tables in the same page');
   }));
 
   it('should have two table instances in dtElements', async () => {
diff --git a/demo/src/app/advanced/router-link.component.spec.ts b/demo/src/app/advanced/router-link.component.spec.ts
@@ -9,6 +9,8 @@ import { AppRoutingModule } from '../app.routing';
 import { FormsModule } from '@angular/forms';
 import { RouterLinkComponent } from './router-link.component';
 import { Router } from '@angular/router';
+import { By } from '@angular/platform-browser';
+import { DemoNgComponent } from './demo-ng-template-ref.component';
 
 
 let fixture: ComponentFixture<RouterLinkComponent>, component: RouterLinkComponent = null, router: Router = null;
@@ -18,6 +20,7 @@ describe('RouterLinkComponent', () => {
     fixture = TestBed.configureTestingModule({
       declarations: [
         BaseDemoComponent,
+        DemoNgComponent,
         RouterLinkComponent,
         DataTableDirective
       ],
@@ -52,19 +55,20 @@ describe('RouterLinkComponent', () => {
     expect(app.pageTitle).toBe('Router Link');
   }));
 
-  it('should open Person info on click', async () => {
+  it('should respond to button click event inside TemplateRef', async () => {
     await fixture.whenStable();
 
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+
     const rSpy = spyOn(router, 'navigate');
 
-    const button = document.createElement('button');
-    button.setAttribute('view-person-id', '3');
-    fixture.nativeElement.appendChild(button);
+    const row: HTMLTableRowElement = fixture.nativeElement.querySelector('tbody tr:first-child');
+    const button: HTMLButtonElement = row.querySelector('button.btn-sm');
     button.click();
 
-
-    fixture.detectChanges();
-    expect(rSpy).toHaveBeenCalledWith(["/person/3"]);
+    expect(rSpy).toHaveBeenCalled();
   });
 
 });
diff --git a/demo/src/app/basic/new-server-side/new-server-side.component.spec.ts b/demo/src/app/basic/new-server-side/new-server-side.component.spec.ts
@@ -1,23 +1,64 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { SecurityContext, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { AppRoutingModule } from 'app/app.routing';
+import { BaseDemoComponent } from 'app/base-demo/base-demo.component';
+import { MarkdownModule } from 'ngx-markdown';
 
 import { NewServerSideComponent } from './new-server-side.component';
 
 describe('NewServerSideComponent', () => {
   let component: NewServerSideComponent;
   let fixture: ComponentFixture<NewServerSideComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ NewServerSideComponent ]
-    })
-    .compileComponents();
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        NewServerSideComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        )
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(NewServerSideComponent);
 
-    fixture = TestBed.createComponent(NewServerSideComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+
+    fixture.detectChanges(); // initial binding
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+
+  it('should have title "Server-side processing"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as NewServerSideComponent;
+    expect(app.pageTitle).toBe('Server-side processing');
+  }));
+
+  it('should have table populated via AJAX', async () => {
+    const app = fixture.debugElement.componentInstance as NewServerSideComponent;
+    await fixture.whenStable();
+    expect(app.dtOptions.columns).toBeDefined();
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+    const instance = await dir.dtInstance;
+    fixture.detectChanges();
+    expect(instance.rows().length).toBeGreaterThan(0);
+  });
 });
diff --git a/demo/src/app/basic/with-ajax-callback/with-ajax-callback.component.spec.ts b/demo/src/app/basic/with-ajax-callback/with-ajax-callback.component.spec.ts
@@ -1,23 +1,64 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { SecurityContext, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { AppRoutingModule } from 'app/app.routing';
+import { BaseDemoComponent } from 'app/base-demo/base-demo.component';
+import { MarkdownModule } from 'ngx-markdown';
 
 import { WithAjaxCallbackComponent } from './with-ajax-callback.component';
 
 describe('WithAjaxCallbackComponent', () => {
   let component: WithAjaxCallbackComponent;
   let fixture: ComponentFixture<WithAjaxCallbackComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ WithAjaxCallbackComponent ]
-    })
-    .compileComponents();
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        WithAjaxCallbackComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        )
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(WithAjaxCallbackComponent);
 
-    fixture = TestBed.createComponent(WithAjaxCallbackComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+
+    fixture.detectChanges(); // initial binding
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should create the app', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it('should have title "AJAX with callback"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as WithAjaxCallbackComponent;
+    expect(app.pageTitle).toBe('AJAX with callback');
+  }));
+
+  it('should have table populated via AJAX', async () => {
+    const app = fixture.debugElement.componentInstance as WithAjaxCallbackComponent;
+    await fixture.whenStable();
+    expect(app.dtOptions.columns).toBeDefined();
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+    const instance = await dir.dtInstance;
+    fixture.detectChanges();
+    expect(instance.rows().length).toBeGreaterThan(0);
   });
 });
diff --git a/demo/src/app/basic/with-ajax.component.spec.ts b/demo/src/app/basic/with-ajax.component.spec.ts
@@ -44,9 +44,9 @@ describe('WithAjaxComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it('should have title "With Ajax"', waitForAsync(() => {
+  it('should have title "Quickstart"', waitForAsync(() => {
     const app = fixture.debugElement.componentInstance as WithAjaxComponent;
-    expect(app.pageTitle).toBe('With Ajax');
+    expect(app.pageTitle).toBe('Quickstart');
   }));
 
   it('should have table populated via AJAX', async () => {
