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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。