How to prepare an Angular14 component unit test, which includes a "mat-slide-toggle" component

Viewed 18

This is the basic unit-test, for my StatusComponent containing the Angular material component < mat-slide-toggle >. As generated by the ngCli command.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { StatusComponent } from './status.component';

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

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [StatusComponent],
        }).compileComponents();

        fixture = TestBed.createComponent(StatusComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        (<any>expect(component)).toBeTruthy(); // See Jasmine MATCHERS
    });
});

The application works, with no compilation errors!
But running ng test, it complains that 'mat-slide-toggle' is not a known element.

Message of the testrun:

ERROR: 'NG0303: Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle' (used in the 'StatusComponent' component template).

  1. If 'mat-slide-toggle' is an Angular component and it has the 'ngModel' input, then verify that it is a part of an @NgModule where this component is declared.
  2. If 'mat-slide-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.'

The "StatusComponent" is declared in the user.module, containing (in my opinion) all the necessary configurations. Complying with the given hint (1.)

UserModule:

import { BannerModule } from '../banner/banner.module';
import { CommonModule } from '@angular/common';
import { EqualToDirective } from './equal-to.directive';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MaterialModule } from '../material.module';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { NgModule } from '@angular/core';
import { PasswordEntryFormComponent } from './password-entry-form/password-entry-form.component';
import { PasswordRequestComponent } from './password-request/password-request.component';
import { PasswordResetComponent } from './password-reset/password-reset.component';
import { ProfileComponent } from './profile/profile.component';
import { RouterModule } from '@angular/router';
import { StatusComponent } from './status/status.component';
import { UpdateComponent } from './update/update.component';
import { UserDetails } from 'generated-sources';
import { UserDetailsComponent } from './user-details/user-details.component';
import { UserViewComponent } from './user-view/user-view.component';

export interface Employee extends UserDetails {
    organizationId?: number;
    organizationName?: string;
}

@NgModule({
    declarations: [
        EqualToDirective,
        PasswordEntryFormComponent,
        PasswordRequestComponent,
        PasswordResetComponent,
        ProfileComponent,
        StatusComponent,
        UpdateComponent,
        UserDetailsComponent,
        UserViewComponent,
    ],
    imports: [
        BannerModule,
        CommonModule,
        FormsModule,
        MatCheckboxModule,
        MaterialModule,
        MatGridListModule,
        MatSlideToggleModule,
        RouterModule,
    ],
    exports: [StatusComponent, UserViewComponent],
})
export class UserModule {}

What kind of declaration I am missing?

1 Answers

Finally, looking at the code examples of others, I found my mistake. I completely overlooked the special declaration part of the unit test for a component.

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [
                MatSlideToggle,
                StatusComponent,
            ],
            imports: [
                FormsModule,
                MaterialModule,
            ],
        }).compileComponents();

I added an extra declaration for 'MatSlideToggle', and imported 'FormsModule' (ngModel).

Related