Angular PrimeNg UI library conflict with Jasmine DynamicTestModule

Question

I am using Angular CLI. It implements Karma Jasmine with WebPack. I have a component that contains a number of PrimeNg UI library controls. It has p-dataTable (grid), p-confirmDialog (delete confirmation dialog) and a child component that contains a p-dialog (window). My test fails because of the following:

Failed: Type Header is part of the declarations of 2 modules: SharedModule and DynamicTestModule! Please consider moving Header to a higher module that imports SharedModule and DynamicTestModule. You can also create a new NgModule that exports and includes Header then import that NgModule in SharedModule and DynamicTestModule.

Header is declared in primeng/components/common/shared and also in DynamicTestModule. I did not create either of these. What am I to do?

Phil Huhn Phil Huhn · Accepted Answer · 2017-11-08T17:53:35

Solved it! I removed the Header and Footer from the declarations in the TestBed.configureTestingModule.

// ===========================================================================
import { async, ComponentFixture, TestBed, inject, fakeAsync, tick } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule, NgForm } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Http, ConnectionBackend, BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { Observable } from 'rxjs/Rx';
//
import { DataTableModule } from '../../../../node_modules/primeng/components/datatable/datatable'; //primeng/components/datatable/datatable';
import { DataTable } from '../../../../node_modules/primeng/components/datatable/datatable';
import { Dialog } from '../../../../node_modules/primeng/components/dialog/dialog';
import { ConfirmDialog } from '../../../../node_modules/primeng/components/confirmdialog/confirmdialog';
import { Header, Footer } from '../../../../node_modules/primeng/components/common/shared';
import { ButtonModule } from '../../../../node_modules/primeng/components/button/button';
import { ConfirmationService } from '../../../../node_modules/primeng/components/common/confirmationservice';
//
import { AlertsService } from '../../global/alerts/alerts.service';
import { ProductService } from '../product.service';
import { IProduct, Product } from '../product';
import { ProductGridComponent } from './product-grid.component';
import { ProductDetailWindowComponent } from '../product-detail-window/product-detail-window.component';
import { ConfirmationServiceMock } from '../../public/Testing/ConfirmationService.mock';
//
describe( 'ProductGridComponent', ( ) => {
    let sut: ProductGridComponent;
    let fixture: ComponentFixture<ProductGridComponent>;
    let alertService: AlertsService;
    let productService: ProductService;
    //
    const mockDatum = [
        new Product( 1,'p 1',1,'p 1','p 1',1,1,1,1,true ),
        new Product( 2,'p 2',2,'p 2','p 2',2,2,2,2,false ),
        new Product( 3,'p 3',3,'p 3','p 3',3,3,3,3,true )
    ];
    //
    beforeEach( async( ( ) => {
        TestBed.configureTestingModule(  {
            imports: [ 
                FormsModule,
                DataTableModule,
                ButtonModule,
                BrowserAnimationsModule
            ],
            declarations: [
                ProductGridComponent,
                ProductDetailWindowComponent,
                Dialog,
                ConfirmDialog
            ],
            providers: [
                AlertsService,
                ProductService,
                {
                    provide: Http, useFactory: ( backend: ConnectionBackend, defaultOptions: BaseRequestOptions ) => {
                        return new Http( backend, defaultOptions );
                    }, deps: [MockBackend, BaseRequestOptions]
                },
                { provide: MockBackend, useClass: MockBackend },
                { provide: BaseRequestOptions, useClass: BaseRequestOptions },
                { provide: ConfirmationService, useClass: ConfirmationServiceMock }
            ]
        })
        .compileComponents( );
    }));
    //
    beforeEach( inject( [ProductService, AlertsService],
        ( srvMock: ProductService, srvc: AlertsService ) => {
            productService = srvMock;
            alertService = srvc;
        }
    ) );
    //
    beforeEach( ( ) => {
        fixture = TestBed.createComponent( ProductGridComponent );
        sut = fixture.componentInstance;
        fixture.detectChanges( ); // trigger initial data binding
        fixture.whenStable( );
    } );
    //  Component instantiates
    it( 'should be created ...', ( ) => {
        expect( sut ).toBeTruthy( );
    } );
    //
} );
// ===========================================================================

My confirmation service mock is here.

Angular PrimeNg UI library conflict with Jasmine DynamicTestModule

1 Answers