How to unit test an Angular component which uses CarouselModule

Viewed 209

I've created a custom component TorsoComponent which uses another custom component SponcerComponent which uses a carousel. I need to test TorsoComponent and not the carousel (Carousel is a dependency I installed from NPM). So I'm not concerned with that but it is blocking my Torso testing. Here is my code.

package.json

"dependencies": { ... "ngx-owl-carousel-o": "^2.0.3" }

app.module.ts

import { CarouselModule } from 'ngx-owl-carousel-o';
...
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    CarouselModule,
    ...
  ]})

sponcers.component.ts

import { Component, OnInit } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
  ...
})
export class SponcersComponent {
  customOptions: OwlOptions = {
    ...
}

sponcers.component.html

<owl-carousel-o [options]="customOptions">
    <ng-template carouselSlide>
        <div id="template"><img class="....png"></div>
    </ng-template> 
    <ng-template carouselSlide>
    <div id="template"><img class="...png"></div>
        </ng-template>  
    <ng-template carouselSlide>
    ...
</owl-carousel-o>

Now comes the spec file where I need help.

torso.component.html

<app-sponcers></app-sponcers>

torso.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { SponcersComponent } from '../sponcers/sponcers.component';
import { TorsoComponent } from './torso.component';

fdescribe('TorsoComponent', ()=> {

  
  beforeEach(async()=> {
    TestBed.configureTestingModule({
      declarations: [TorsoComponent, SponcersComponent, CarouselModule ],
      imports: [TranslateModule.forRoot()]
    }).compileComponents();
  })

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

I've been told strictly to avoid using CUSTOM_ELEMENTS_SCHEMA. Right now I'm getting this error:

enter image description here

Please point out my mistakes.

1 Answers

You should use imports to import the CarouselModule as below

import { TestBed, async } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { SponcersComponent } from '../sponcers/sponcers.component';
import { TorsoComponent } from './torso.component';

fdescribe('TorsoComponent', ()=> {

  
  beforeEach(async()=> {
    TestBed.configureTestingModule({
      imports: [CarouselModule], // <-- should be added here
      declarations: [TorsoComponent, SponcersComponent ],
      imports: [TranslateModule.forRoot()]
    }).compileComponents();
  })

  it('should create', () => {
    const fixture = TestBed.createComponent(TorsoComponent);
    const app = fixture.debugElement.componentInstance;
  })
})
Related