如何对浏览器平台库中的元标记进行Angular 2单元测试？

我正在用Jasmine为Angular 2组件编写单元测试。我想测试在实例化组件时，是否将文档元标记设置为特定值。 我的组成部分：

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

  constructor (
    private meta: Meta
  ) {
    // Only 2 objects of metatag for example
    this.meta.addTags([
      {httpEquiv: 'X-UA-Compatible', content: 'IE=edge', title: '123'},
      {name: 'keywords', content: 'My keywords'}
    ], true)
  }  
}

这里是我为测试写的东西，但它不起作用

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { Meta } from '@angular/platform-browser';
import { AppComponent } from './app.component';

describe('AppComponent', () => {

  let meta: Meta;
  let metatags: HTMLMetaElement[];
  let comp: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AppComponent ],
      providers: [ { provide: Meta } ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
    fixture.detectChanges();
  });

  it(`should have a metatag name=keywords with content='My keywords'`, () => {
    meta = TestBed.get(Meta);
    expect(meta.getTag('name=keywords')).toBe('My keywords');
  });

  it(`should have a metatag httpEquiv=X-UA-Compatible with content: 'IE=edge' and title: '123'`, () => {
    metatags = TestBed.get(Meta);
    expect(metatags.getTags('httpEquiv=X-UA-Compatible').content).toBe('IE=edge');
    expect(metatags.getTags('httpEquiv=X-UA-Compatible').title).toBe('123');
  });
});

从'@angular/core/testing'导入{TestBed，async，ComponentFixture}；
从“@angular/platform browser”导入{Meta}”；
从“./app.component”导入{AppComponent}；
描述（'AppComponent'，（）=>{
让meta:meta；
let元标记：HTMLMetaElement[]；
让comp:AppComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[AppComponent]，
提供者：[{provide:Meta}]，
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（AppComponent）；
comp=夹具。组件状态；
fixture.detectChanges（）；
});
它（`应该有一个metatagname=keywords和content='mykeywords'`，（）=>{
meta=TestBed.get（meta）；
expect（meta.getTag（'name=keywords'））.toBe（'My keywords'）；
});
它（`应该有一个元标记httpEquiv=X-UA-Compatible，内容：'IE=edge'和标题：'123'`，（）=>{
metatags=TestBed.get（Meta）；
expect（metatags.getTags（'httpEquiv=X-UA-Compatible'）.content）.toBe（'IE=edge'）；
expect（metatags.getTags（'httpEquiv=X-UA-Compatible'）.title）.toBe（'123'）；
});
});

当我启动测试时，它会在控制台中显示一些错误：

src/app/app.component.spec.ts:27:47中出错-错误TS2345:类型为“My keywords”的参数不能分配给类型为“Expected”的参数。

27expect（meta.getTag（'name=keywords'））.toBe（'My keywords'）

src/app/app.component.spec.ts:32:21-错误TS2339:类型“HTMLMetaElement[]”上不存在属性“getTags”。

32expect（metatags.getTags（'httpEquiv=X-UA-Compatible'）.content）.toBe（'IE=edge'）

src/app/app.component.spec.ts:33:21-错误TS2339:类型“HTMLMetaElement[]”上不存在属性“getTags”。

33expect（metatags.getTags（'httpEquiv=X-UA-Compatible'）.title）.toBe（'123'）

---

我找到了解决这个问题的办法。这是我的新代码：

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { Meta } from '@angular/platform-browser';
import { AppComponent } from './app.component';

describe('AppComponent', () => {

  let meta: Meta;
  let metatags: HTMLMetaElement[];
  let comp: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AppComponent ],
      providers: [
        { provide: Meta, useClass: Meta }
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    comp = fixture.componentInstance;
    fixture.detectChanges();
  });

  it(`should have a metatag name=keywords with content='My keywords'`, () => {
    meta = TestBed.get(Meta);
    expect(meta.getTag('name=keywords').content).toBe('My keywords');
  });

  it(`should have a metatag httpEquiv=X-UA-Compatible with content: 'IE=edge', title: '123'`, () => {
    metatags = TestBed.get(Meta).getTags('httpEquiv=X-UA-Compatible');
    metatags.forEach(el => {
      expect(el.content).toBe('IE=edge');
      expect(el.title).toBe('123');
    });    
  });
});

从'@angular/core/testing'导入{TestBed，async，ComponentFixture}；
从“@angular/platform browser”导入{Meta}”；
从“./app.component”导入{AppComponent}；
描述（'AppComponent'，（）=>{
让meta:meta；
let元标记：HTMLMetaElement[]；
让comp:AppComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[AppComponent]，
供应商：[
{provide:Meta，useClass:Meta}
],
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（AppComponent）；
comp=夹具。组件状态；
fixture.detectChanges（）；
});
它（`应该有一个metatagname=keywords和content='mykeywords'`，（）=>{
meta=TestBed.get（meta）；
expect（meta.getTag（'name=keywords'）.content）.toBe（'My keywords'）；
});
它（`应该有一个元标记httpEquiv=X-UA-与内容'IE=edge'，标题'123'`，（）=>{
metatags=TestBed.get（Meta.getTags（'httpEquiv=X-UA-Compatible'）；
metatags.forEach（el=>{
expect（el.content）.toBe（'IE=edge'）；
expect（el.title）.toBe（'123'）；
});    
});
});