Karma can't recognize angular directives

Question

Our project structure follows this: Angular2-webpack-starter.

Our project successfully compiles, build and can be seen in the browser. No problems here.

But when we try to run the test cases using karma and jasmine we are getting this error.

FAILED TESTS:
 XXXXXXComponent
   :heavy_multiplication_x: Should Match Current Tab as 1
     Chrome 55.0.2883 (Mac OS X 10.10.5)
   Error: Template parse errors:
   Can't bind to 'formgroup' since it isn't a known property of 'form'. ("                <div class="tab-pane active" role="tabpanel" id="step1">
                                           <form novalidate [ERROR ->][formgroup]="step1Form" class="height-full" >
                                               <div class="row" id="tabHeader1">
             "): XXXXXXComponent@38:27
   Can't bind to 'dividerColor' since it isn't a known property of 'md-input'.
   1. If 'md-input' is an Angular component and it has 'dividerColor' input, then verify that it is part of this module.
   2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
    ("ass = "col-md-8 col-lg-8 col-sm-8">
                                                           <div class="form-group">
                                                               <md-input [ERROR ->]dividerColor="{{getDividerColor(lexiconTitle)}}" placeholder="Lexicon Title" formControlName="lexicon"): XXXXXXComponent@52:25
   Can't bind to 'ngModel' since it isn't a known property of 'md-input'.
   1. If 'md-input' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
   2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
    ("olor="{{getDividerColor(lexiconTitle)}}" placeholder="Lexicon Title" formControlName="lexiconTitle" [ERROR ->][(ngModel)]="blogModel.lexiconTitle" name="lexiconTitle" class="md-form-control" required>
                                           "):

We have imported all these modules in the app.module.ts as required by new angular convention.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    ...
  ],
  imports: [ // import Angular's modules
    ...
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    ... ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    ENV_PROVIDERS,
    APP_PROVIDERS
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {
  constructor() {}
}

We have all the latest versions of packages installed.

"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.1",
"webpack": "2.2.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-dev-server": "2.2.0",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-md5-hash": "~0.0.5",
"webpack-merge": "~2.4.0"

TestBed Setup:

TestBed.configureTestingModule({
    imports: [ReactiveFormsModule, FormsModule],
    declarations: [ XXXXComponent ], // declare the test component
});

Any help in resolving this issue is appreciated.

That's odd -- both of the errors appear to be errors you would expect to be found at runtime. You mentioned it compiles and runs -- are the views in question being rendered during your manual testing? The html bindings are invalid in the errors. — chrispy, Jan 25 '17 at 19:16
How are you obtaining the XXXXComponent instance in the test (or are you yet)? — Will, Feb 28 '17 at 16:00

score 0 · Answer 1 · answered Mar 10 '17 at 20:50

0

Your error is because you need dividerColor directive inside your md-input-container tags instead of md-input.

answered Mar 10 '17 at 20:50

cport1

1,175
14
25

Karma can't recognize angular directives

1 Answers1