jQWidgets Forums
jQuery UI Widgets › Forums › Angular › Angular karma / jasmine unit tests
Tagged: Angular, Jasmine, karma, testing, unit tests
This topic contains 4 replies, has 2 voices, and was last updated by Ivo Zhulev 6 years, 8 months ago.
-
Author
-
I am able to ng serve the app fine, but my .spec unit test for a component throws this error in karma:
Failed: Unexpected value ‘undefined’ declared by the module ‘DynamicTestModule’
Within my spec file:
describe('JobQueueComponent', () => { let component: JobQueueComponent; let fixture: ComponentFixture<JobQueueComponent>; let store: Store<AppState>; let researchService: ResearchIndexerService; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ jqxGridComponent, JobQueueComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule, SuiModule, StoreModule.forRoot(reducers, {}) ], providers: [ ResearchIndexerService ] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(JobQueueComponent); component = fixture.componentInstance; researchService = TestBed.get(ResearchIndexerService); store = TestBed.get(Store); spyOn(store, 'dispatch').and.callThrough(); }); it('should create', () => { expect(component).toBeDefined(); });
I think this has something to do with my karma configuration file: karma.conf.js :
module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], include: ['src/**/*'], files: [ "../src/app/app.module.ts", '../node_modules/myfilepath/jqwidgets-ts/angular_jqxgrid.ts' ], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular-devkit/build-angular/plugins/karma') ], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser// }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../coverage'), reports: ['html', 'lcovonly'], fixWebpackSourcePaths: true }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); };
fixture = TestBed.createComponent(JobQueueComponent) results in fixture being undefined, leading to the karma error.
Any help or examples of .spec files that work would be appreciated.I should also note that using a mock grid within the declarations array works – so I do believe this is something jqx related.
Also, when first running “ng test” I get the “missing from Typescript compilation” error that others have complained about. When ng serving this is fixed by all the tsconfig changes mentioned here:
When I edit and re-save app.module.ts, the tests try to build themselves again – but this time I get
Uncaught ReferenceError: Zone is not defined at http://localhost:9876/
It is only after I edit and re-save app.module.ts again (and sometimes multiple times after that – with same “Zone is not defined” problem) that the tests will run – but with the problem in original post.
I will make this simpler: I have made a new angular project which does nothing other than load a single jqxGrid:
app.component.spec.ts :
import { TestBed, async, ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app.component'; import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid'; describe('AppComponent', () => { let component: AppComponent; let fixture: ComponentFixture<AppComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [jqxGridComponent, AppComponent] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(AppComponent); component = fixture.componentInstance; }) it('app dummy test', () => { expect(1).toBe(2); }); });
app.component.ts :
import { Component } from '@angular/core'; import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor() {} }
app.modules.ts :
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid'; @NgModule({ declarations: [AppComponent, jqxGridComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
Same behavior as before.
Hi caseybelcher543,
For start, this test is done on a fresh install of
create-jqwidgets-angular-app
.
Modifications:1. In
tsconfig.spec
in theinclude
property you must add"../node_modules/jqwidgets-scripts/jqwidgets-ts"
.
Should look like that:.... "include": [ "**/*.spec.ts", "**/*.d.ts", "../node_modules/jqwidgets-scripts/jqwidgets-ts" ] ....
2. Write a test(
app.component.spec.ts
file):import { TestBed, ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app.component'; import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid'; describe('AppComponent', () => { let fixture: ComponentFixture<AppComponent>; beforeEach(() => { TestBed.configureTestingModule({ declarations: [AppComponent, jqxGridComponent] }); fixture = TestBed.createComponent(AppComponent); }) it('should columngroups text be Product Details', () => { expect(fixture.componentInstance.columngroups[0].text).toBe('Product Details'); }); });
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.