feat(#1579): add unit tests to demo project

* fix: tests can't find DOM types

* feat: update AppComponent tests

* feat: Add tests for zero-config component

* feat: add tests for with-options component

* feat: tests for with-ajax component

* WIP feat: server-side-angular-way test

* feat(demo): Upgrade demo project to Angular v12

* fix(tests): fix up server-side-angular-way, with-ajax

* fix(tests): tsconfig.spec.json bug fixes

- extends from `tsconfig.json`

- fix esModuleInterop flag error

* feat: tests for angular-way component

* feat: add tests for custom-range-search component

* feat: add tests for dt-instance component

* feat: add tests for individual column filter component

* feat: add tests for load-dt-options-with-promise component

* feat: add tests for multiple-tables component

* feat: add tests for rerender component

* feat(demo): add unit tests for router-link.component

* feat(demo): add unit tests for row-click-event component

* feat(demo): add unit tests for using-ng-pipe component

* feat: UsingNgTemplateRef update

- send dtOptions to trigger event

- add unit tests

* fix(tests): remove redunant tslint comment

* fix(tests): update comment in ng-template-ref component

* fix:  remove tslint comment in spec files

- part 2 of d6fbd0b

Author: shanmukhateja

demo/package-lock.json

@@ -0,0 +1,94 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+import { CustomRangeSearchComponent } from './custom-range-search.component';
+import { FormsModule } from '@angular/forms';
+
+
+let fixture: ComponentFixture<CustomRangeSearchComponent>, component: CustomRangeSearchComponent = null;
+
+describe('CustomRangeSearchComponent', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        CustomRangeSearchComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        ),
+        FormsModule
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(CustomRangeSearchComponent);
+
+    component = fixture.componentInstance;
+
+    fixture.detectChanges(); // initial binding
+  });
+
+  it('should create the app', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it('should have title "Custom filtering - Range search"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as CustomRangeSearchComponent;
+    expect(app.pageTitle).toBe('Custom filtering - Range search');
+  }));
+
+  it('should have data filtered when min, max values change', async () => {
+    const app = fixture.componentInstance as CustomRangeSearchComponent;
+    await fixture.whenStable();
+
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+    const instance = await dir.dtInstance;
+
+    const inputFieldMin: HTMLInputElement = fixture.nativeElement.querySelector('input[name="min"]');
+    const inputFieldMax: HTMLInputElement = fixture.nativeElement.querySelector('input[name="max"]');
+
+    //  # Test 1
+
+    inputFieldMin.value = '1';
+    inputFieldMax.value = '5';
+
+    inputFieldMin.dispatchEvent(new Event('input'));
+    inputFieldMax.dispatchEvent(new Event('input'));
+
+    instance.draw();
+    fixture.detectChanges();
+
+    expect(instance.rows({ page: 'current' }).count()).toBe(1);
+
+    //  # Test 2
+
+    inputFieldMin.value = '1';
+    inputFieldMax.value = '15';
+
+    inputFieldMin.dispatchEvent(new Event('input'));
+    inputFieldMax.dispatchEvent(new Event('input'));
+
+    instance.draw();
+    fixture.detectChanges();
+
+    expect(instance.rows({ page: 'current' }).count()).toBe(3);
+
+  });
+
+});

demo/src/app/advanced/custom-range-search.component.spec.ts

@@ -0,0 +1,66 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { DtInstanceComponent } from './dt-instance.component';
+
+
+let fixture: ComponentFixture<DtInstanceComponent>, component: DtInstanceComponent = null;
+
+describe('DtInstanceComponent', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        DtInstanceComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        ),
+        FormsModule
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(DtInstanceComponent);
+
+    component = fixture.componentInstance;
+
+    fixture.detectChanges(); // initial binding
+  });
+
+  it('should create the app', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it('should have title "Getting the DataTable instance"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as DtInstanceComponent;
+    expect(app.pageTitle).toBe('Getting the DataTable instance');
+  }));
+
+  it('should retrieve Table instance', async () => {
+    const app = fixture.componentInstance as DtInstanceComponent;
+    await fixture.whenStable();
+
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+
+    const instance = await dir.dtInstance;
+    expect(instance).toBeTruthy();
+  });
+
+});

demo/src/app/advanced/dt-instance.component.spec.ts

@@ -0,0 +1,97 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { IndividualColumnFilteringComponent } from './individual-column-filtering.component';
+
+
+let fixture: ComponentFixture<IndividualColumnFilteringComponent>, component: IndividualColumnFilteringComponent = null;
+
+function applyValueToInput(inputElement: HTMLInputElement, value: string, table: DataTables.Api) {
+  inputElement.value = value;
+  inputElement.dispatchEvent(new Event('input'));
+  inputElement.dispatchEvent(new Event('change'));
+  table.draw();
+}
+
+describe('IndividualColumnFilteringComponent', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        IndividualColumnFilteringComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        ),
+        FormsModule
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(IndividualColumnFilteringComponent);
+
+    component = fixture.componentInstance;
+
+    fixture.detectChanges(); // initial binding
+  });
+
+  it('should create the app', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it('should have title "Individual column searching"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as IndividualColumnFilteringComponent;
+    expect(app.pageTitle).toBe('Individual column searching');
+  }));
+
+  it('should filter contents acc. to column', async () => {
+    const app = fixture.componentInstance as IndividualColumnFilteringComponent;
+    app.dtOptions.paging = false;
+
+    await fixture.whenStable();
+
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+
+    const instance = await dir.dtInstance;
+
+    const inputFields = Array.from(fixture.nativeElement.querySelectorAll('input')) as HTMLInputElement[];
+    const inputFieldID = inputFields.find(e => e.name == "search-id");
+    const inputFieldFirstName = inputFields.find(e => e.name == "search-first-name");
+    const inputFieldLastName = inputFields.find(e => e.name == "search-last-name");
+
+    // # Test 1
+    applyValueToInput(inputFieldID, '113', instance);
+    expect(instance.rows({ page: 'current' }).count()).toBe(1);
+
+    // # Test 2
+
+    // reset prev. field
+    applyValueToInput(inputFieldID, '', instance);
+    applyValueToInput(inputFieldFirstName, 'Batman', instance);
+    expect(instance.rows({ page: 'current' }).count()).toBe(30);
+
+    // # Test 3
+    // reset prev. field
+    applyValueToInput(inputFieldFirstName, '', instance);
+    applyValueToInput(inputFieldLastName, 'Titi', instance);
+    expect(instance.rows({ page: 'current' }).count()).toBe(28);
+
+  });
+
+});

demo/src/app/advanced/individual-column-filtering.component.spec.ts

@@ -0,0 +1,66 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { LoadDtOptionsWithPromiseComponent } from './load-dt-options-with-promise.component';
+
+
+let fixture: ComponentFixture<LoadDtOptionsWithPromiseComponent>, component: LoadDtOptionsWithPromiseComponent = null;
+
+describe('LoadDtOptionsWithPromiseComponent', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        LoadDtOptionsWithPromiseComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        ),
+        FormsModule
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(LoadDtOptionsWithPromiseComponent);
+
+    component = fixture.componentInstance;
+
+    fixture.detectChanges(); // initial binding
+  });
+
+  it('should create the app', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it('should have title "Load DataTables Options with Promise"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as LoadDtOptionsWithPromiseComponent;
+    expect(app.pageTitle).toBe('Load DataTables Options with Promise');
+  }));
+
+  it('should render table from dtOptions as a Promise', async () => {
+    const app = fixture.componentInstance as LoadDtOptionsWithPromiseComponent;
+    await fixture.whenStable();
+
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+
+    const instance = await dir.dtInstance;
+    expect(instance.rows().count()).toBeGreaterThan(0);
+  });
+
+});

demo/src/app/advanced/load-dt-options-with-promise.component.spec.ts

@@ -0,0 +1,61 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, QueryList, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { MultipleTablesComponent } from './multiple-tables.component';
+
+
+let fixture: ComponentFixture<MultipleTablesComponent>, component: MultipleTablesComponent = null;
+
+describe('MultipleTablesComponent', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        MultipleTablesComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        ),
+        FormsModule
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(MultipleTablesComponent);
+
+    component = fixture.componentInstance;
+
+    fixture.detectChanges(); // initial binding
+  });
+
+  it('should create the app', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it('should have title "Multiple DataTables in the same page"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as MultipleTablesComponent;
+    expect(app.pageTitle).toBe('Multiple DataTables in the same page');
+  }));
+
+  it('should have two table instances in dtElements', async () => {
+    const app = fixture.componentInstance as MultipleTablesComponent;
+    await fixture.whenStable();
+
+    expect(app.dtElements.length).toBe(2);
+  });
+
+});