Add unit tests to demo project

demo/src/app/app.component.spec.ts

@@ -1,6 +1,7 @@
 /* tslint:disable:no-unused-variable */
 
 import { TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
@@ -9,6 +10,9 @@ describe('AppComponent', () => {
       declarations: [
         AppComponent
       ],
+      imports: [
+        RouterTestingModule
+      ]
     });
   });
 
@@ -18,16 +22,15 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'app works!'`, waitForAsync(() => {
+  it(`should have angular logo on navbar`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app works!');
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('img[src="assets/angular.png"]')).toBeTruthy();
   }));
 
-  it('should render title in a h1 tag', waitForAsync(() => {
+  it(`should have datatables logo on navbar`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+    expect(compiled.querySelector('img[src="assets/datatables.png"]')).toBeTruthy();
   }));
 });

demo/src/app/basic/server-side-angular-way.component.spec.ts

@@ -0,0 +1,70 @@
+/* tslint:disable:no-unused-variable */
+
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+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 { ServerSideAngularWayComponent } from './server-side-angular-way.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+
+let fixture: ComponentFixture<ServerSideAngularWayComponent>, app: ServerSideAngularWayComponent = null,
+  httpTestingController: HttpTestingController;
+
+describe('ServerSideAngularWayComponent', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        ServerSideAngularWayComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientTestingModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        )
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(ServerSideAngularWayComponent);
+
+    app = fixture.componentInstance;
+    httpTestingController = TestBed.inject(HttpTestingController);
+
+    fixture.detectChanges(); // initial binding
+  });
+
+  it('should create the app', waitForAsync(() => {
+    expect(app).toBeTruthy();
+  }));
+
+  it('should have title "Server side the Angular way"', waitForAsync(() => {
+    expect(app.pageTitle).toBe('Server side the Angular way');
+  }));
+
+  it('should have table populated via AJAX', () => {
+    expect(app.dtOptions.columns).toBeDefined();
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+    // app.ngOnInit();
+    // const req = httpTestingController.expectOne('https://angular-datatables-demo-server.herokuapp.com/');
+    // expect(req.request.method).toBe('POST');
+    const req = httpTestingController.expectOne('assets/docs/basic/server-side-angular-way/source-ts.md');
+    expect(req.request.method).toBe('GET');
+    fixture.detectChanges();
+    const mockResponse = `{"draw":1,"recordsTotal":258,"recordsFiltered":258,"data":[{"id":"3","firstName":"Cartman","lastName":"Whateveryournameis"},{"id":"10","firstName":"Cartman","lastName":"Titi"}]}
+      `;
+    req.flush(mockResponse);
+
+    httpTestingController.verify();
+  });
+});

demo/src/app/basic/with-ajax.component.spec.ts

@@ -0,0 +1,75 @@
+/* tslint:disable:no-unused-variable */
+
+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 { WithAjaxComponent } from './with-ajax.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+
+
+let fixture: ComponentFixture<WithAjaxComponent>, component: WithAjaxComponent = null;
+
+describe('WithAjaxComponent', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        WithAjaxComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        )
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(WithAjaxComponent);
+
+    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 "With Ajax"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as WithAjaxComponent;
+    expect(app.pageTitle).toBe('With Ajax');
+  }));
+
+  it('should have table populated via AJAX', function (done) {
+    const app = fixture.debugElement.componentInstance as WithAjaxComponent;
+    expect(app.dtOptions.columns).toBeDefined();
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+    dir.dtInstance
+      .then(_ => {
+        // TODO use table instance to figure this out
+        expect($('#preview table tbody').children().length).toBeGreaterThan(0);
+        done();
+      })
+      .catch(e => {
+        done.fail(e);
+      });
+    done();
+    // // check table is populated
+    // setTimeout(() => {
+    // }, 700);
+  });
+
+});

demo/src/app/basic/with-options.component.spec.ts

@@ -0,0 +1,59 @@
+/* tslint:disable:no-unused-variable */
+
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { 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 { WithOptionsComponent } from './with-options.component';
+import { AppRoutingModule } from '../app.routing';
+import { NO_ERRORS_SCHEMA } from '@angular/compiler';
+
+let fixture: ComponentFixture<WithOptionsComponent>, component: WithOptionsComponent = null;
+
+describe('WithOptionsComponent', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        WithOptionsComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        )
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(WithOptionsComponent);
+
+    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 "With Options"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as WithOptionsComponent;
+    expect(app.pageTitle).toBe('With Options');
+  }));
+
+  it('should have pagingType as "full_numbers"', waitForAsync(() => {
+    const app = fixture.debugElement.componentInstance as WithOptionsComponent;
+    expect(app.dtOptions.pagingType).toBe('full_numbers');
+  }));
+
+});

demo/src/app/basic/zero-config.component.spec.ts

@@ -0,0 +1,70 @@
+/* tslint:disable:no-unused-variable */
+
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA, SecurityContext } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DataTableDirective, DataTablesModule } from 'angular-datatables';
+import { MarkdownModule } from 'ngx-markdown';
+import { BaseDemoComponent } from '../base-demo/base-demo.component';
+import { ZeroConfigComponent } from './zero-config.component';
+import { AppRoutingModule } from '../app.routing';
+import { By } from '@angular/platform-browser';
+
+let fixture: ComponentFixture<ZeroConfigComponent>, component: ZeroConfigComponent = null;
+
+describe('ZeroConfigComponent', () => {
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      declarations: [
+        BaseDemoComponent,
+        ZeroConfigComponent,
+        DataTableDirective
+      ],
+      imports: [
+        AppRoutingModule,
+        RouterTestingModule,
+        DataTablesModule.forRoot(),
+        HttpClientModule,
+        MarkdownModule.forRoot(
+          {
+            sanitize: SecurityContext.NONE
+          }
+        )
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).createComponent(ZeroConfigComponent);
+
+    component = fixture.componentInstance;
+
+    fixture.detectChanges(); // initial binding
+  });
+
+  it('should create the app', function(done) {
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+    done();
+  });
+
+  it('should have title "Zero configuration"', function(done) {
+    const app = fixture.debugElement.componentInstance as ZeroConfigComponent;
+    expect(app.pageTitle).toBe('Zero configuration');
+    done();
+  });
+
+  it('should create DataTables instance', function(done) {
+    const query = fixture.debugElement.query(By.directive(DataTableDirective));
+    const dir = query.injector.get(DataTableDirective);
+    expect(dir).toBeTruthy();
+    dir.dtInstance
+    .then(i => {
+      expect($.fn.dataTable.isDataTable(i)).toBeTruthy();
+      done();
+    })
+    .catch(e => {
+      done.fail(e);
+    });
+    done();
+  });
+
+});

demo/src/tsconfig.spec.json

@@ -5,9 +5,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [
-      "es2016"
-    ],
+    "resolveJsonModule": true,
     "outDir": "../out-tsc/spec",
     "module": "commonjs",
     "target": "es6",