There is no directive with "exportAs" set to "mfDataTable"

[oaverkov]

Running Karma/Jasmine test on component that has mfDataTable in the template and getting following error There is no directive with "exportAs" set to "mfDataTable" ("s--> <table class="table table-condensed table-striped" *ngIf="results" [mfData]="results" [ERROR ->]#mf="mfDataTable" [mfRowsOnPage]="10">

Page works fine on its own. I think test breaks in TestBed.configureTestingModule() when im declaring the component. If i comment out mfDataTablehtml, all the tests that test other html parts work fine.

[mariuszfoltak]

Ok, I'll check it. Can you post example of yours test code?

[oaverkov]

import {DataTableModule} from 'angular2-datatable'; TestBed.configureTestingModule({declarations: [CustomerSearchComponent], imports: [RouterTestingModule, FormsModule, HttpModule], providers: [CustomerSearchService], schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]}).compileComponents()

If i put DataTableModule in imports or providers or declarations im getting following error

Chrome 54.0.2840 (Windows 10 0.0.0) ERROR { "originalErr": {} }

if i dont put in any of the properties, i get this error

 There is no directive with "exportAs" set to "mfDataTable" ("
 </div> 
 <table class="table table-condensed table-striped"  [mfData]="customerResults" [ERROR ->]#mf="mfDataTable" [mfRowsOnPage]="10">
             <thead>
                 <tr>
 "): CustomerSearchComponent@33:79
 Error: Uncaught (in promise): Error: Template parse errors:
 Failed: Cannot read property 'componentInstance' of undefined

As you can see it didnt even create my fixture or component in TestBed setup

TestBed.configureTestingModule({declarations: [CustomerSearchComponent], imports: [RouterTestingModule, FormsModule, HttpModule], providers: [CustomerSearchService], schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]}).compileComponents() .then(() => { csFixture = TestBed.createComponent(CustomerSearchComponent); csFixture.detectChanges(); csComp = csFixture.componentInstance; // CustomerSearchService actually injected into the component csService = csFixture.debugElement.injector.get(CustomerSearchService); });

[oaverkov]

Actually, .then() is never fired, it breakes in compileComponent() or before that. and have this error in browser

zone.js?b187feb…:1382 GET http://localhost:9876/base/node_modules/angular2-datatable/index.js 404 (Not Found)

[mariuszfoltak]

You need to put DataTableModule to imports

TestBed.configureTestingModule({
  imports: [DataTableModule, ...],
  declarations: [TestedComponent],
  ...
}).compileComponents()

and you need to add js files in karma.conf.js

module.exports = function(config) {
  ...
  config.set({
    ...
    files: [
      ...
      { pattern: 'node_modules/angular2-datatable/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/angular2-datatable/**/*.js.map', included: false, watched: false },

      { pattern: 'node_modules/lodash/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/lodash/**/*.js.map', included: false, watched: false },
      ...
    ]
  ]
}

and then tests should works. If you don't add js files to karma, then you get 404 error in chrome but console writes some weird originalErr.

[oaverkov]

Ugh, i needed lodash, because i did try to add to karma.conf.js, but i didnt add lodash.

Thank you

[amellnik]

Why does lodash need to be added here?

Even making the changes above I'm seeing a template parse error of

Can't bind to 'ngModel' since it isn't a known property of 'md-checkbox'

error, but it may be gated by #49 if I'm reading that correctly.

[sabb123]

I have brought in both lodash and angular2-datatable in karma.conf.js like below

` { pattern: 'node_modules/angular2-datatable/*/.js', included: false, watched: false }, { pattern: 'node_modules/angular2-datatable/*/.js.map', included: false, watched: false },

  { pattern: 'node_modules/lodash/**/*.js', included: false, watched: false },
  { pattern: 'node_modules/lodash/**/*.js.map', included: false, watched: false },

` Also have imported the DataTableModule in the component. But running the test gives the below error.

25 04 2017 15:27:09.606:INFO [launcher]: Starting browser Chrome 25 04 2017 15:27:12.613:INFO [Chrome 57.0.2987 (Windows 7 0.0.0)]: Connected on socket 0J_kHvwIwbNM7mpPAAAA with id 7159345 25 04 2017 15:27:14.547:WARN [web-server]: 404: /base/node_modules/angular2-datatable Chrome 57.0.2987 (Windows 7 0.0.0) ERROR { "__zone_symbol__error": { "originalStack": "Error: (SystemJS) XHR error (404 Not Found) loading node_modules/angular2-datatable\n\tError: XHR error (404 Not Found) loading node_modules/angular2-datatable\n\tError loading node_modules/angular2-datatable as \"angular2-datatable\" from wwwroot/lib/spa/cases/uploaddocument.component.spec.js"

What am I doing wrong?