Angular utility to mock any component in unit tests
npm install @codernr/ngx-mock-componentTestBed.configureTestingModule declarations without creating new mock classes.
npm i -D @codernr/ngx-mock-component
`
Usage
* mockComponent(obj: Component, interfaceImplementations: { [key: string]: any }[])
The first parameter is the component metadata (that you normally use in @Component decorator, the second one is an array of objects that mock the interfaces implemented by the component.
Example
Real world example with a component using ngx-captcha in its template.
app.component.html
`html
Welcome!
`
app.component.ts
`typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
public siteKey = 'mySiteKey';
public exampleForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.exampleForm = this.fb.group({
captcha: ['', [Validators.required]]
});
}
}
`
app.component.spec.ts
`typescript
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { mockComponent } from '@codernr/ngx-mock-component';
import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [
AppComponent,
mockComponent({
selector: 'ngx-recaptcha2',
template: '',
inputs: ['siteKey', 'useGlobalDomain'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
// providing ControlValueAccessor interface mock here to avoid using useExisting with anonymous type
useValue: { writeValue: (obj: any) => { }, registerOnChange: (fn: any) => { }, registerOnTouched: (fn: any) => { } },
multi: true
}
]
})
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
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!');
});
});
``