Andular測(cè)試相關(guān)

Andular測(cè)試相關(guān)

https://blog.51cto.com/7308310/2325925?source=dra

常用斷言以及方法

  • Jasmine 提供非常豐富的API，一些常用的Matchers：
toBe() 等同 ===
toNotBe() 等同 !==
toBeDefined() 等同 !== undefined
toBeUndefined() 等同 === undefined
toBeNull() 等同 === null
toBeTruthy() 等同 !!obj
toBeFalsy() 等同 !obj
toBeLessThan() 等同 <
toBeGreaterThan() 等同 >
toEqual() 相當(dāng)于 ==
toNotEqual() 相當(dāng)于 !=
toContain() 相當(dāng)于 indexOf
toBeCloseTo() 數(shù)值比較時(shí)定義精度，先四舍五入后再比較。
toHaveBeenCalled() 檢查function是否被調(diào)用過(guò)
toHaveBeenCalledWith() 檢查傳入?yún)?shù)是否被作為參數(shù)調(diào)用過(guò)
toMatch() 等同 new RegExp().test()
toNotMatch() 等同 !new RegExp().test()
toThrow() 檢查function是否會(huì)拋出一個(gè)異常

而這些API之前用 not 來(lái)表示負(fù)值的判斷。

expect(true).not.toBe(false);

angular cli使用karma進(jìn)行單元測(cè)試.

  • 使用 ng test進(jìn)行測(cè)試。

    端對(duì)端測(cè)試的命令是 ng e2e

    常用參數(shù)：
--browsers 指定使用的瀏覽器
--code-coverage 輸出覆蓋率報(bào)告
--code-coverage-exclude 排除文件或路徑
--karma-config 指定Karma配置文件
--prod 啟用production環(huán)境
--progress 默認(rèn)為true，將編譯進(jìn)度輸出到控制臺(tái)
--watch 默認(rèn)為true，代碼修改后會(huì)重新運(yùn)行測(cè)試

  • 默認(rèn)的測(cè)試文件擴(kuò)展名為.spec.ts。

  • import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { StudyBarComponent } from './study-bar/study-bar.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule   // 有路由的測(cè)試項(xiàng)需要用到
      ],
      declarations: [
        AppComponent,
        StudyBarComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'my-app'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('my-app');
  });
});

  • 測(cè)試結(jié)構(gòu)

    • describe函數(shù)中包含了beforeEach和it兩類函數(shù)。describe相當(dāng)于Java測(cè)試中的suite，也就是測(cè)試組，其中可以包含多個(gè)測(cè)試用例it。
    • 一般一個(gè)測(cè)試文件含有一個(gè)describe，當(dāng)然也可以有多個(gè)。
    • beforeEach相當(dāng)于Java測(cè)試中的@Before方法，每個(gè)測(cè)試用例執(zhí)行前調(diào)用一次。同樣，還有afterEach、beforeAll、afterAll函數(shù)，afterEach在每個(gè)測(cè)試用例執(zhí)行后調(diào)用一次，beforeAll、afterAll相當(dāng)于Java測(cè)試中的@BeforeClass、@AfterClass方法，每個(gè)describe執(zhí)行前后調(diào)用一次。
    • **describe和it的第一個(gè)參數(shù)是測(cè)試說(shuō)明。一個(gè)it中可以包含一個(gè)或多個(gè)expect來(lái)執(zhí)行測(cè)試驗(yàn)證。 **

  • TestBed

    • TestBed.configureTestingModule()方法動(dòng)態(tài)構(gòu)建TestingModule來(lái)模擬Angular @NgModule，支持@NgModule的大多數(shù)屬性。
    • 測(cè)試中需導(dǎo)入測(cè)試的組件及依賴。例如在AppComponent頁(yè)面中使用了router-outlet，因此我們導(dǎo)入了RouterTestingModule來(lái)模擬RouterModule。Test Module預(yù)配置了一些元素，比如BrowserModule，不需導(dǎo)入。
    • TestBed.createComponent()方法創(chuàng)建組件實(shí)例，返回ComponentFixture。ComponentFixture是一個(gè)測(cè)試工具(test harness)，用于與創(chuàng)建的組件和相應(yīng)元素進(jìn)行交互。

  • nativeElement和DebugElement

  • 示例中使用了fixture.debugElement.nativeElement，也可以寫成fixture.nativeElement。實(shí)際上，fixture.nativeElement是fixture.debugElement.nativeElement的一種簡(jiǎn)化寫法。nativeElement依賴于運(yùn)行時(shí)環(huán)境，Angular依賴DebugElement抽象來(lái)支持跨平臺(tái)。Angular創(chuàng)建DebugElement tree來(lái)包裝native element，nativeElement返回平臺(tái)相關(guān)的元素對(duì)象。我們的測(cè)試樣例僅運(yùn)行在瀏覽器中，因此nativeElement總為HTMLElement，可以使用querySelector()、querySelectorAll()方法來(lái)查詢?cè)亍?/p> 

    element.querySelector('p');
element.querySelector('input');
element.querySelector('.welcome');
element.querySelectorAll('span');
  • detectChanges

  • createComponent() 函數(shù)不會(huì)綁定數(shù)據(jù)，必須調(diào)用fixture.detectChanges()來(lái)執(zhí)行數(shù)據(jù)綁定，才能在組件元素中取得內(nèi)容：

    it('should render title in a h1 tag', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  expect(compiled.querySelector('h1').textContent).toContain('Welcome to hello!');
});

    當(dāng)數(shù)據(jù)模型值改變后，也需調(diào)用fixture.detectChanges()方法：

    it('should render title in a h1 tag', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
  app.title = 'china';
  fixture.detectChanges();
  const compiled = fixture.nativeElement;
  expect(compiled.querySelector('h1').textContent).toContain('Welcome to china!');
});

    可以配置自動(dòng)檢測(cè)，增加ComponentFixtureAutoDetect provider：

    import { ComponentFixtureAutoDetect } from '@angular/core/testing';
...
TestBed.configureTestingModule({
  providers: [
    { provide: ComponentFixtureAutoDetect, useValue: true }
  ]
});

    啟用自動(dòng)檢測(cè)后僅需在數(shù)值改變后調(diào)用detectChanges()：

    it('should display original title', () => {
  // Hooray! No `fixture.detectChanges()` needed
  expect(h1.textContent).toContain(comp.title);
});

it('should still see original title after comp.title change', () => {
  const oldTitle = comp.title;
  comp.title = 'Test Title';
  // Displayed title is old because Angular didn't hear the change :(
  expect(h1.textContent).toContain(oldTitle);
});

it('should display updated title after detectChanges', () => {
  comp.title = 'Test Title';
  fixture.detectChanges(); // detect changes explicitly
  expect(h1.textContent).toContain(comp.title);
});

  • 依賴注入

    • 對(duì)簡(jiǎn)單對(duì)象進(jìn)行測(cè)試可以用new創(chuàng)建實(shí)例：

      describe('ValueService', () => {
  let service: ValueService;
  beforeEach(() => { service = new ValueService(); });
    ...
});

      不過(guò)大多數(shù)Service、Component等有多個(gè)依賴項(xiàng)，使用new很不方便。若用DI來(lái)創(chuàng)建測(cè)試對(duì)象，當(dāng)依賴其他服務(wù)時(shí)，DI會(huì)找到或創(chuàng)建依賴的服務(wù)。要測(cè)試某個(gè)對(duì)象，在configureTestingModule中配置測(cè)試對(duì)象本身及依賴項(xiàng)，然后調(diào)用TestBed.get()注入測(cè)試對(duì)象：

      beforeEach(() => {
  TestBed.configureTestingModule({ providers: [ValueService] });
  service = TestBed.get(ValueService);
});

      單元測(cè)試的原則之一：僅對(duì)要測(cè)試對(duì)象本身進(jìn)行測(cè)試，而不對(duì)其依賴項(xiàng)進(jìn)行測(cè)試，依賴項(xiàng)通過(guò)mock方式注入，而不使用實(shí)際的對(duì)象，否則測(cè)試不可控。

      Mock優(yōu)先使用Spy方式：

      let masterService: MasterService;

beforeEach(() => {
  const spy = jasmine.createSpyObj('ValueService', ['getValue']);
    spy.getValue.and.returnValue('stub value');

  TestBed.configureTestingModule({
    // Provide both the service-to-test and its (spy) dependency
    providers: [
      MasterService,
      { provide: ValueService, useValue: spy }
    ]
  });

  masterService = TestBed.get(MasterService);
});

    • HttpClient、Router、Location

      同測(cè)試含其它依賴的對(duì)象一樣，可以mock HttpClient、Router、Location：

      beforeEach(() => {
  const httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);

  TestBed.configureTestingModule({
    providers: [
      {provide: HttpClient, useValue: httpClientSpy}
    ]
  });
});
beforeEach(async(() => {
  const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
  const locationSpy = jasmine.createSpyObj('Location', ['back']);

  TestBed.configureTestingModule({
    providers: [
      {provide: Router, useValue: routerSpy},
      {provide: Location, useValue: locationSpy}
    ]
  })
    .compileComponents();
}));

    • Component測(cè)試

      • 僅測(cè)試組件類

    測(cè)試組件類就像測(cè)試服務(wù)那樣簡(jiǎn)單：
    組件類

      export class WelcomeComponent  implements OnInit {
    welcome: string;
    constructor(private userService: UserService) { }
  
    ngOnInit(): void {
      this.welcome = this.userService.isLoggedIn ?
        'Welcome, ' + this.userService.user.name : 'Please log in.';
    }
  }

    Mock類

      class MockUserService {
    isLoggedIn = true;
    user = { name: 'Test User'};
  };

    測(cè)試

      ...
  beforeEach(() => {
    TestBed.configureTestingModule({
      // provide the component-under-test and dependent service
      providers: [
        WelcomeComponent,
        { provide: UserService, useClass: MockUserService }
      ]
    });
    // inject both the component and the dependent service.
    comp = TestBed.get(WelcomeComponent);
    userService = TestBed.get(UserService);
  });
  ...
  it('should ask user to log in if not logged in after ngOnInit', () => {
    userService.isLoggedIn = false;
    comp.ngOnInit();
    expect(comp.welcome).not.toContain(userService.user.name);
    expect(comp.welcome).toContain('log in');
  });
    • 組件DOM測(cè)試

    只涉及類的測(cè)試可以判斷組件類的行為是否正常，但不能確定組件是否能正常渲染和交互。
    進(jìn)行組件DOM測(cè)試，需要使用TestBed.createComponent()等方法，第一個(gè)測(cè)試即為組件DOM測(cè)試。

      TestBed.configureTestingModule({
    declarations: [ BannerComponent ]
  });
  const fixture = TestBed.createComponent(BannerComponent);
  const component = fixture.componentInstance;
  expect(component).toBeDefined();
  ```

**dispatchEvent**
  為模擬用戶輸入，比如為input元素輸入值，要找到input元素并設(shè)置它的 value 屬性。Angular不知道你設(shè)置了input元素的value屬性，需要調(diào)用 dispatchEvent() 觸發(fā)輸入框的 input 事件，再調(diào)用 detectChanges():

```typescript
  it('should convert hero name to Title Case', () => {
    // get the name's input and display elements from the DOM
    const hostElement = fixture.nativeElement;
    const nameInput: HTMLInputElement = hostElement.querySelector('input');
    const nameDisplay: HTMLElement = hostElement.querySelector('span');
  
    nameInput.value = 'quick BROWN  fOx';
  
    // dispatch a DOM event so that Angular learns of input value change.
    nameInput.dispatchEvent(newEvent('input'));
  
    fixture.detectChanges();
  
    expect(nameDisplay.textContent).toBe('Quick Brown  Fox');
  });
  ```

- 嵌套組件

組件中常常使用其他組件：

```html
<app-banner></app-banner>
<app-welcome></app-welcome>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

    對(duì)于無(wú)害的內(nèi)嵌組件可以直接將其添加到declarations中，這是最簡(jiǎn)單的方式：

    describe('AppComponent & TestModule', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        BannerComponent,
        WelcomeComponent
      ]
    })
    .compileComponents().then(() => {
      fixture = TestBed.createComponent(AppComponent);
      comp    = fixture.componentInstance;
    });
  }));
  ...
});

    也可為無(wú)關(guān)緊要的組件創(chuàng)建一些測(cè)試樁：

    @Component({selector: 'app-banner', template: ''})
class BannerStubComponent {}

@Component({selector: 'router-outlet', template: ''})
class RouterOutletStubComponent { }

@Component({selector: 'app-welcome', template: ''})
class WelcomeStubComponent {}

    然后在TestBed的配置中聲明它們：

    TestBed.configureTestingModule({
  declarations: [
    AppComponent,
    BannerStubComponent,
    RouterOutletStubComponent,
    WelcomeStubComponent
  ]
})

    另一種辦法是使用NO_ERRORS_SCHEMA，要求 Angular編譯器忽略那些不認(rèn)識(shí)的元素和屬性：

    TestBed.configureTestingModule({
  declarations: [
    AppComponent,
    RouterLinkDirectiveStub
  ],
  schemas: [ NO_ERRORS_SCHEMA ]
})

    NO_ERRORS_SCHEMA方法比較簡(jiǎn)單，但不要過(guò)度使用。NO_ERRORS_SCHEMA 會(huì)阻止編譯器因疏忽或拼寫錯(cuò)誤而缺失的組件和屬性，如人工找出這些 bug會(huì)很費(fèi)時(shí)。
    RouterLinkDirectiveStub

    import { Directive, Input, HostListener } from '@angular/core';

@Directive({
  selector: '[routerLink]'
})
export class RouterLinkDirectiveStub {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  @HostListener('click')
  onClick() {
    this.navigatedTo = this.linkParams;
  }
}

    • 屬性指令測(cè)試

      import { Directive, ElementRef, Input, OnChanges } from '@angular/core';

@Directive({ selector: '[highlight]' })
/** Set backgroundColor for the attached element to highlight color and set the element's customProperty to true */
export class HighlightDirective implements OnChanges {

  defaultColor =  'rgb(211, 211, 211)'; // lightgray

  @Input('highlight') bgColor: string;

  constructor(private el: ElementRef) {
    el.nativeElement.style.customProperty = true;
  }

  ngOnChanges() {
    this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
  }
}

      屬性型指令肯定要操縱 DOM，如只針對(duì)類測(cè)試不能證明指令的有效性。若通過(guò)組件來(lái)測(cè)試，單一的用例一般無(wú)法探索指令的全部能力。因此，更好的方法是創(chuàng)建一個(gè)能展示該指令所有用法的人造測(cè)試組件：

      @Component({
  template: `
  <h2 highlight="yellow">Something Yellow</h2>
  <h2 highlight>The Default (Gray)</h2>
  <h2>No Highlight</h2>
  <input #box [highlight]="box.value" value="cyan"/>`
})
class TestComponent { }

      測(cè)試程序：

      beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [ HighlightDirective, TestComponent ]
  })
  .createComponent(TestComponent);

  fixture.detectChanges(); // initial binding

  // all elements with an attached HighlightDirective
  des = fixture.debugElement.queryAll(By.directive(HighlightDirective));

  // the h2 without the HighlightDirective
  bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])'));
});

// color tests
it('should have three highlighted elements', () => {
  expect(des.length).toBe(3);
});

it('should color 1st <h2> background "yellow"', () => {
  const bgColor = des[0].nativeElement.style.backgroundColor;
  expect(bgColor).toBe('yellow');
});

it('should color 2nd <h2> background w/ default color', () => {
  const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
  const bgColor = des[1].nativeElement.style.backgroundColor;
  expect(bgColor).toBe(dir.defaultColor);
});

it('should bind <input> background to value color', () => {
  // easier to work with nativeElement
  const input = des[2].nativeElement as HTMLInputElement;
  expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor');

  // dispatch a DOM event so that Angular responds to the input value change.
  input.value = 'green';
  input.dispatchEvent(newEvent('input'));
  fixture.detectChanges();

  expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
});

it('bare <h2> should not have a customProperty', () => {
  expect(bareH2.properties['customProperty']).toBeUndefined();
});

    • Pipe測(cè)試

      describe('TitleCasePipe', () => {
  // This pipe is a pure, stateless function so no need for BeforeEach
  let pipe = new TitleCasePipe();

  it('transforms "abc" to "Abc"', () => {
    expect(pipe.transform('abc')).toBe('Abc');
  });

  it('transforms "abc def" to "Abc Def"', () => {
    expect(pipe.transform('abc def')).toBe('Abc Def');
  });

  ...
});

    • Testing Module

      RouterTestingModule
      在前面的測(cè)試中我們使用了測(cè)試樁RouterOutletStubComponent，與Router有關(guān)的測(cè)試還可以使用RouterTestingModule：

      beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      RouterTestingModule
    ],
    declarations: [
      AppComponent
    ],
  }).compileComponents();
}));

      RouterTestingModule還可以模擬路由：

      beforeEach(() => {
  TestBed.configureTestModule({
    imports: [
      RouterTestingModule.withRoutes(
        [{path: '', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]
      )
    ]
  });
});

      HttpClientTestingModule

      describe('HttpClient testing', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ]
    });

    // Inject the http service and test controller for each test
    httpClient = TestBed.get(HttpClient);
    httpTestingController = TestBed.get(HttpTestingController);
  });

  afterEach(() => {
    // After every test, assert that there are no more pending requests.
    httpTestingController.verify();
  });

  it('can test HttpClient.get', () => {
    const testData: Data = {name: 'Test Data'};

    // Make an HTTP GET request
    httpClient.get<Data>(testUrl)
      .subscribe(data =>
        // When observable resolves, result should match test data
        expect(data).toEqual(testData)
      );

    // The following `expectOne()` will match the request's URL.
    // If no requests or multiple requests matched that URL
    // `expectOne()` would throw.
    const req = httpTestingController.expectOne('/data');

    // Assert that the request is a GET.
    expect(req.request.method).toEqual('GET');

    // Respond with mock data, causing Observable to resolve.
    // Subscribe callback asserts that correct data was returned.
    req.flush(testData);

    // Finally, assert that there are no outstanding requests.
    httpTestingController.verify();
  });

    ...
});

  • 在Mock的時(shí)候，優(yōu)先推薦使用Spy

    使用方式簡(jiǎn)介：

    spyOn(obj, 'functionName').and.returnValue(returnValue);

    spyOn(storeStub, 'select').and.callFake(func => {
        func();
        return returnValue;
});

    在需要模擬返回值的地方使用spy監(jiān)視對(duì)象以及其調(diào)用的函數(shù)，按上述兩種方式可以自定義返回值。

    更詳細(xì)的用法參照

    https://jasmine.github.io/2.5/introduction#section-Spies

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容