1. ホーム
  2. typescript

[解決済み] サービスにDocumentを挿入する方法は?

2022-03-01 03:39:33

質問

Angular 2のアプリケーションを持っています。をモックするために Document オブジェクトをテストするために、このようなサービスにインジェクトしたいと思います。

import { Document } from '??' 

@Injectable()
export class MyService {
  constructor(document: Document) {}
}

Title Angularのサービス は内部の getDOM() メソッド .

を注入する簡単な方法はありますか? Document をサービスに追加できますか?また providers の配列は?

どのように解決するのですか?

これは以前からAngularでサポートされています。

を使用することができます。 DOCUMENT で提供される定数 @angular/common パッケージを使用します。

の説明 DOCUMENT 定数(この定数は APIドキュメント ):

メインのレンダリングコンテキストを表すDIトークン。ブラウザでは、これはDOMドキュメントである。

以下に例を示す。

my-service.service.ts:

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable()
export class MyService {
  constructor(@Inject(DOCUMENT) private document: Document) {}
}

my-service.service.spec.ts

import { provide } from '@angular/core';
import { DOCUMENT } from '@angular/common';

import { MyService } from './my-service';

class MockDocument {}

describe('MyService', () => {
  beforeEachProviders(() => ([
    provide(DOCUMENT, { useClass: MockDocument }),
    MyService
  ]));

  ...
});