将材料组件作为子组件进行测试

Question

我有一些组件TestComponent，在它的模板中，它使用<mat-stepper>。由于步进器的上下文，我必须以编程方式前进到下一步，而不是在按钮上使用matStepperNext指令。所以我的组件看起来是这样的：

测试组件.ts

import { MatStepper } from '@angular/material/stepper'; //module loaded elsewhere, but is accesible
@Component({
selector: 'app-test',
template: '<mat-stepper #stepper>
<mat-step>
<button (click)="completeStep()">Next</button>
</mat-step>
<mat-step></mat-step> <!-- etc. -->
</mat-stepper>',
})
export class TestComponent {
@ViewChild('stepper') stepper!: MatStepper;
completeStep() {
this.stepper.next();
}
}

现在的诀窍是，我必须测试是否调用了stepper.next()。因为我只是在使用<mat-dialog>指令，所以我从来没有在类中创建过它的对象，也不是构造函数中的提供者，所以我真的不知道如何测试它

测试组件规范

describe('TestComponent', () => {
let component: TestComponent,
let fixture: ComponentFixture<TestCompnent>;
beforeEach(async () => {
await TestBed.ConfigureTestingModule({
declarations: [TestComponent],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
describe('completeStep', () => {
it('should call stepper.next', () => {
const stepperSpy = jasmine.createSpyObj('MatStepper', ['next']);
component.stepper = stepperSpy;
component.completeStep();
expect(stepperSpy.next).toHaveBeenCalled();
});
});
});

但我刚刚得到错误

预期间谍MatStepper.next将被称为

Answer 1

在每次将MatStepper添加到声明数组之前：

beforeEach(async () => {
await TestBed.ConfigureTestingModule({
declarations: [TestComponent, MatStepper],
}).compileComponents();
});

测试用例应该看起来像：

it('completeStep should call stepper.next', () => {     
jest.spyOn(component.stepper, 'next');
component.completeStep();
expect(component.stepper.next).toHaveBeenCalled();
});