Stryker / Angular6：在模板应用程序中从标准@Component删除突变体

Question

我已经使用Angular 6创建了一个基本的模板应用程序，并且我正在尝试进行Stryker突变测试。在基本首页上：

import { Component } from '@angular/core';

/**
* Home Page Definition
*/
@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss']
})
export class HomePage {}

我有此页面的基本测试文件：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HomePage } from './home.page';

/**
* Home Page Test File
*/
describe('HomePage', () => {
    let component: HomePage;
    let fixture: ComponentFixture<HomePage>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [HomePage],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(HomePage);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeDefined();
        expect(component).toBeTruthy();
    });

    it('should be proper component', () => {
        expect(component).toBeInstanceOf(HomePage);
    });
});

尽管通过并测试了将创建“主页”，但我仍然拥有 。

在基本主页上，@ Component具有3个字段，由于它们是文字文本，它们均生成突变幸存者。我不确定如何编写测试来杀死这些突变幸存者。

如果我无法编写测试条件来处理这种情况，那么Stryker似乎没有一种方法可以忽略一部分代码。

Answer 1

您可以测试组件实例的组件元数据批注，这在进行TDD（测试驱动开发）时可以很好地作为起点，但是您应该很快就能用验证实际行为的适当测试来代替它。

请注意，运行时组件元数据将随即将进行的Angular Ivy内部重写而更改。

A StackBlitz demonstrating this spec

样式

/* host.page.scss */
:host {
  display: block;

  font-family: Georgia, serif;
}

模板

<!-- host.page.html -->
<p>app-home works!</p>

测试套件

// home.page.spec.ts
import { Component, DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { HomePage } from './home.page';

type Diff<T extends string, U extends string> = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T]
type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>

type ComponentMetadata = Omit<Component, 'styleUrls' | 'templateUrl'>

@Component({
  template: '<app-home></app-home>'
})
class TestHostComponent {}

/**
* Home Page Test File
*/
describe('HomePage', () => {
  let component: HomePage;
  let debugElement: DebugElement;
  let hostFixture: ComponentFixture<TestHostComponent>;
  let metadata: ComponentMetadata;
  let nativeElement: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        HomePage,
        TestHostComponent,
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    hostFixture = TestBed.createComponent(TestHostComponent);
    debugElement = hostFixture.debugElement.query(By.css('app-home'));
    component = debugElement.componentInstance;
    nativeElement = debugElement.nativeElement;
    metadata = component['__proto__'].constructor.__annotations__[0];
    hostFixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeDefined();
    expect(component).toBeTruthy();
  });

  it('should be proper component', () => {
    expect(component instanceof HomePage).toBe(true, 'it must be a HomePage');
  });

  describe('metadata inspection', () => {
    it('should have proper selector', () => {
      const { selector } = metadata;

      expect(selector).toBe('app-home');
    });

    it('should have template', () => {
      const { template } = metadata;

      expect(template).toContain('app-home works!');
    });

    it('should have styles', () => {
      const { styles: [style] } = metadata;

      expect(style).toContain('display:block');
      expect(style).toContain('font-family:Georgia');
    });
  });

  describe('shallow tests with host component', () => {
    it('should have proper selector', () => {
      expect(nativeElement.tagName).toMatch(/app\-home/i);
    });

    it('should have template', () => {
      expect(nativeElement.innerText).toContain('app-home works!');
    });

    it('should have styles', () => {
      const styles: CSSStyleDeclaration = getComputedStyle(nativeElement);
      expect(styles.display).toBe('block');
      expect(styles.fontFamily.startsWith('Georgia'))
        .toBe(true, 'it should use the expected font family')
    });
  });
});