CODEWITHSUNDEEP
angularangular-clikarma-jasminejasmine-jquery
Pascal
Pascal

Reputation: 2405

Angular 5 karma jasmine-jquery matches

How to integrate karma jasmine jquery matches with angular 5

please give detail answer

i have succesfully loaded jquery in karma config like so 

module.exports = function (config) {
  config.set({
    basePath: '',

    frameworks: [ 'jasmine-jquery', 'jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-jasmine-jquery'),
    ],

But i have no clue on how to import it into the spec runner

Here is my current import working fine 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent} from './my.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { exec } from 'child_process';
import { DebugElement } from '@angular/core/src/debug/debug_node';
import { By } from '@angular/platform-browser';

using fixtures are fine 

  beforeEach(() => {
    fixture = TestBed.createComponent( MyComponent );
    component = fixture.componentInstance;
    contenTitleEL = fixture.
      debugElement.query( By.css('.contenTitle') ) ;
    fixture.detectChanges();
  });

test is fine using 

  it('Should Display contenTitle', () => {
    expect( contenTitleEL ).toContain( contentTitle ) ;
  });

what i want to do is 

  it('Should Display contenTitle', () => {
    expect( contenTitleEL ).toHaveText( contentTitle ) ;
  });

Note that i used angular-cli to generate the project

Update

Looks like it is working even thought i am having

error TS2339: Property 'toHaveText' does not exist on type 'Matchers'.

Any idea of how to get arround this error and have the function in code completion

From time to time the ng test refuses to load because of this typescript related error

Upvotes: 0

Views: 839

Answers (1)

Pascal
Pascal

Reputation: 2405

Finnaly find the answer looks like you need to add this npm package

jasmine-jquery-matchers

configure typestript package with 

{
  ....
  "compileOnSave": false,
  "compilerOptions": { 
    "types": [
      "jasmine",
      "jasmine-jquery-matchers"
    ], 
  ....
  }
}

Then last import the package in spec.ts 

import {  } from 'jasmine-jquery/lib/jasmine-jquery';
import {  } from 'jasmine-jquery-matchers';

Upvotes: 1

Related Questions