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

Question

我正在用 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');
  });
});

当我启动测试时，它在控制台中给出了一些错误：

ERROR in src/app/app.component.spec.ts:27:47 - error TS2345: Argument of type '"My keywords"' is not assignable to parameter of type 'Expected'.

27   expect(meta.getTag('name=keywords')).toBe('My keywords');

src/app/app.component.spec.ts:32:21 - error TS2339: Property 'getTags' does not exist on type 'HTMLMetaElement[]'.

32   expect(metatags.getTags('httpEquiv=X-UA-Compatible').content).toBe('IE=edge');

src/app/app.component.spec.ts:33:21 - error TS2339: Property 'getTags' does not exist on type 'HTMLMetaElement[]'.

33   expect(metatags.getTags('httpEquiv=X-UA-Compatible').title).toBe('123');

Answer 1

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

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');
    });    
  });
});

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

How to make the Angular 2 unit tests for Meta tags from the browser-platform library?

karma-jasmine

angular2-testing

angular

angular-unit-test