Stryker / Angular6：在模板應用程序中從標准@Component刪除突變體

Question

我已經使用Angular 6創建了一個基本的模板應用程序，並且試圖在其上進行Stryker Mutation測試。 在基本首頁上：

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內部重寫而更改。

展示此規格的StackBlitz

款式

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