☰

コンポーネントテストにボディまたはモックRenderer2を作成する質問する

tag-icon • tag-icon angular jasmine
コンポーネントテストにボディまたはモックRenderer2を作成する質問する

コンポーネントの 1 つでは、Renderer2body 要素にいくつかの CSS クラス/スタイルを追加および削除するために使用します。これを実現するには、次のようにするだけです。

this.renderer.setStyle(document.body, 'padding-left', '10px');
this.renderer.addClass(document.body, 'modal-container--opened');

テストを実行するとすぐにエラーが発生します。

未定義のプロパティ「add」を読み取ることができません

未定義のプロパティ 'padding-left' を設定できません

したがって、Angular TestBed はbody要素を作成しないようです。

テスト構成で、モック化された body 要素を作成するにはどうすればよいでしょうか。その要素に対してテストを実行し、レンダラーによってスタイル/クラスが適切に適用されたかどうかを確認できます。

Renderer2 をモックすることもできないようです。

スパイを作成しようとしました:

let renderer: jasmine.SpyObj<Renderer2>;
renderer = jasmine.createSpyObj('renderer', ['addClass', 'removeClass', 'setStyle']);

次にTestBed.configureTestingModule（でもテストしましたがoverrideProviders、成功しませんでした）：

{ provide: Renderer2, useValue: renderer }

しかし、Angular はこのオーバーライドを完全に無視します。

コンポーネントの動作をテストするにはどうすればよいでしょうかdocument.body?

ベストアンサー1

レンダラーをモックする代わりに、それをハイジャックしてみてください。これは Angular 6 以降で動作するはずです。

component.spec.ts 内:

let renderer2: Renderer2;
...
beforeEach(async () => {
    await TestBed.configureTestingModule({
        ...
        providers: [Renderer2]
    }).compileComponents();
});

beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    // grab the renderer
    renderer2 = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
    // and spy on it
    spyOn(renderer2, 'addClass').and.callThrough();
    // or replace
    // spyOn(renderer2, 'addClass').and.callFake(..);
    // etc
});

it('should call renderer', () => {
    expect(renderer2.addClass).toHaveBeenCalledWith(jasmine.any(Object), 'css-class');
});

おすすめ記事