Angular Component的DOM级别的单元测试方法
生活随笔
收集整理的這篇文章主要介紹了
Angular Component的DOM级别的单元测试方法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
HTMLElement
<span [textContent] = "AText"></span> export class AComponent {AText = 'Some' }Angular編譯器在解析模板時,遇到簡單DOM元素比如span,就去查找該元素是否定義在dom element schema registry, 從而知道它是HTMLElement子類,textContent是其中一個屬性。
如果遇到組件或者指令,就去查看其裝飾器@Component,@Directive的元數(shù)據(jù)@Input屬性里是否有該綁定屬性。
目標(biāo)
you have to create the DOM elements associated with the components, you must examine the DOM to confirm that component state displays properly at the appropriate times, and you must simulate user interaction with the screen to determine whether those interactions cause the component to behave as expected.
一個例子:
describe('BannerComponent (with beforeEach)', () => {let component: BannerComponent;let fixture: ComponentFixture<BannerComponent>;beforeEach(() => {TestBed.configureTestingModule({declarations: [BannerComponent]});fixture = TestBed.createComponent(BannerComponent);component = fixture.componentInstance;});it('should create', () => {expect(component).toBeDefined();}); });it('should contain "banner works!"', () => {const bannerElement: HTMLElement = fixture.nativeElement;expect(bannerElement.textContent).toContain('banner works!'); });如果是在瀏覽器環(huán)境下運行,可以使用常規(guī)的DOM操作API訪問HTML元素:
it('should have <p> with "banner works!"', () => {const bannerElement: HTMLElement = fixture.nativeElement;const p = bannerElement.querySelector('p');expect(p.textContent).toEqual('banner works!'); }); 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的Angular Component的DOM级别的单元测试方法的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 下载量超 3500 万次,谷歌 Play
- 下一篇: Angular单元测试框架karma-j