jQWidgets Forums

jQuery UI Widgets Forums Angular Angular karma / jasmine unit tests

This topic contains 4 replies, has 2 voices, and was last updated by  Ivo Zhulev 6 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Angular karma / jasmine unit tests #100746

    caseybelcher543
    Participant

    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.

    Angular karma / jasmine unit tests #100748

    caseybelcher543
    Participant

    I should also note that using a mock grid within the declarations array works – so I do believe this is something jqx related.

    Angular karma / jasmine unit tests #100751

    caseybelcher543
    Participant

    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:

    https://www.jqwidgets.com/angular-components-documentation/documentation/create-jqwidgets-angular-app/index.htm?search=test

    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.

    Angular karma / jasmine unit tests #100768

    caseybelcher543
    Participant

    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.

    Angular karma / jasmine unit tests #100795

    Ivo Zhulev
    Participant

    Hi caseybelcher543,

    For start, this test is done on a fresh install of create-jqwidgets-angular-app.
    Modifications:

    1. In tsconfig.spec in the include 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,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.