Topic: ng test: mdbCollapse error

quepasso free asked 4 years ago


Expected behavior When I use mdbcollapse I expect that tests also works.

Actual behavior When I run ng test I have this error: ]#nComment="bs-collapse"> There is no directive with "exportAs" set to "bs-collapse" (" ]#nComment="bs-collapse"> ") Resources (screenshots, code snippets etc.)

spec file: import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { PostComponent } from './post.component'; import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';

describe('PostComponent', () => { let component: PostComponent; let fixture: ComponentFixture;

beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ PostComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ], }) .compileComponents(); }));

beforeEach(() => { fixture = TestBed.createComponent(PostComponent); component = fixture.componentInstance; fixture.detectChanges(); });

it('should create', () => { expect(component).toBeTruthy(); }); });


quepasso free answered 4 years ago


Hi Damian,

Thank you for the answer. It works perfectly!

Best Regards Philippe


Damian Gemza staff answered 4 years ago


Dear @quepasso

Did you import the MDBBootstrapModules in your .spec.ts file?

I tried to reproduce your problem - without importing the main MDB module in .spec.ts file, there was a similar problem to yours. But when I have imported the MDB module, everything looks fine.

Please take a look at the below .spec.ts code for AppComponent:

import {TestBed, async} from '@angular/core/testing';
import {AppComponent} from './app.component';
import { MDBBootstrapModulesPro} from "../../projects/ng-uikit-pro-standard/src/lib/mdb.module";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserAnimationsModule,
        MDBBootstrapModulesPro.forRoot()
      ]
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'ng-uikit-pro-standard-compile-app'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('ng-uikit-pro-standard-compile-app');
  });

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to ng-uikit-pro-standard-compile-app!');
  });
});

Best Regards,

Damian


Damian Gemza staff answered 4 years ago


Dear @quepasso

If you want to test features built with our MDB Angular, in .spec.ts file you have to import the MDBootstrap module.

Please try to add it, and check if the problem is gone. If not - let me know.

Best Regards,

Damian


quepasso free commented 4 years ago

Hi, Thank you for yor answer.The test works for all the other components (card, btn,..), but the error just happens for this one => mdbCollapse. Why?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: iMac
  • Browser: Chrome
  • OS: High Sierra
  • Provided sample code: No
  • Provided link: No