1

TestComponentテンプレートで . を使用するコンポーネントがあり<mat-stepper>ます。matStepperNextステッパーのコンテキストのため、ボタンでディレクティブを使用するのではなく、プログラムで次のステップに進む必要があります。したがって、私のコンポーネントは次のようになります。

test.component.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>、クラスで実際にそのオブジェクトを作成したり、コンストラクターでプロバイダーを作成したりすることはありません。そのため、テスト方法がよくわかりません。私は成功せずにさまざまなことを試しましたが、私の最新のテストは次のとおりです。

test.component.spec.ts

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 が呼び出されることが予想されます

4

0 に答える 0