Angular 4 unit test does not render third party control

Viewed 1228

I'm trying to unit test an Angular 4 component that uses a third party control (from Clarity). I've setup the test module with the correct imports but the clarity elements in the html just stay as elements - they are not resolved and expanded into html as expected i.e. the control does not seem to go through the correct rendering cycle. Here is the setup:

import { ClarityModule } from 'clarity-angular';
import { Alert } from '../../shared/components/alert.component';
import { AlertMessage, AlertStatus } from '../../shared/types/alert.message.type';

describe('Alert component tests->', () => {
    let comp: Alert;
    let fixture: ComponentFixture<Alert>;
    let de: DebugElement;
    let el: HTMLElement;
    let deIcon: DebugElement;
    let elIcon: HTMLElement;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        imports: [ClarityModule],
        declarations: [Alert]
      });
    }));

When I inspect the fixture debugElement or nativeElement it is not transformed? and when I try and select an expected element its not there. Is there some trick I'm missing to get the control to render?

The components html template looks like this and stays like this:

<clr-alert [clrAlertType]="alertType" [clrAlertSizeSmall]="isSmall" [clrAlertAppLevel]="isAppLevel" [clrAlertClosable]="isCloseable">
  <div class="alert-item">
    <span class="alert-text">
      {{message}}
    </span>
  </div>
</clr-alert>

Edit: After some hair pulling I found that I need to call fixture.detectChanges() to get the test bed to render the components. In summary when testing a third party component:

  1. Make sure that you have imported the module containing the component into the test bed
  2. Do not just add CUSTOM_ELEMENTS_SCHEMA to testbed schemas if you get an error, try and find out why its happening and import correct modules (unless you doing a shallow test)
  3. Call fixture.detectChanges() before trying to select any elements rendered by the component (and then call it again after setting properties as in most examples on the angular documentation site).
0 Answers
Related