Angular 组件Dom测试

2023-10-03 20:56:58

文章目录

组件Dom测试
createComponent()
ComponentFixture
nativeElement
DebugElement
By.css()

组件Dom测试

组件不仅仅是一个类，它还会与 DOM 以及其它组件进行交互。我们要知道组件是否能正确渲染、是否响应用户输入和手势，或者是否集成到它的父组件和子组件中，我们需要借助TestBed的其它特性和其它的测试辅助函数。

describe('BannerComponent (with beforeEach)', () => {
  let component: BannerComponent; // 要测试的组件BannerComponent
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
    	// 声明要测试的组件
    	declarations: [BannerComponent]
    });
    
    // TestBed.createComponent 创建BannerComponent组件实例，返回一个`ComponentFixture` 对象
    fixture = TestBed.createComponent(BannerComponent);

    // ComponentFixture.componentInstance 拿到 BannerComponent实例
    component = fixture.componentInstance;
  });

  it('should create', () => {
    // 断言组件被定义了
    expect(component).toBeDefined();
  });

  // ComponentFixture.nativeElement 获取组件的元素，并查找预期的文本。
  it('should contain "banner works!"', () => {
    const bannerElement: HTMLElement = fixture.nativeElement;
    expect(bannerElement.textContent).toContain('banner works!');
  });
});

createComponent()

TestBed.createComponent() 会创建 BannerComponent 的实例，它把一个对应元素添加到了测试运行器的 DOM 中，并返回一个ComponentFixture 对象。

const fixture: ComponentFixture<BannerComponent> = TestBed.createComponent(BannerComponent);

ComponentFixture

ComponentFixture 是一个测试挽具，用于与所创建的组件及其对应的元素进行交互。
可以通过测试夹具（fixture）访问组件实例，并用 Jasmine 的期望断言来确认它是否存在：

const component = fixture.componentInstance;
expect(component).toBeDefined();

ComponentFixture类提供了很多特别有用的属性和方法供我们在测试中使用。

class ComponentFixture<T> {
  constructor(componentRef: ComponentRef<T>, ngZone: NgZone, _autoDetect: boolean)

  // 与该组件的根元素关联的 DebugElement。【常用】
  debugElement: DebugElement

  // 根组件类的实例。【常用】
  componentInstance: T
  
  // 组件根部的原生元素。
  nativeElement: any

  // 组件的根部元素的ElementRef
  elementRef: ElementRef

  // 组件的 ChangeDetectorRef
  changeDetectorRef: ChangeDetectorRef
  componentRef: ComponentRef<T>
  ngZone: NgZone | null

  // 触发组件的变更检测周期。【常用】
  detectChanges(checkNoChanges: boolean = true): void
   
  // 进行变更检测以确保没有更改。
  checkNoChanges(): void

  // 设置夹具(fixture)是否应自动检测变化。(还运行一次detectChanges，以便检测到任何现有的更改。)
  autoDetectChanges(autoDetect: boolean = true)

  // 返回此夹具(fixture)当前是否稳定或者是否具有尚未完成的异步任务。
  isStable(): boolean

  // Get a promise that resolves when the fixture is stable.
  // 返回值类型：Promise<any>。
  // 当事件已触发异步活动或异步变更检测后，可用此方法继续执行测试。
  whenStable(): Promise<any>

  // Get a promise that resolves when the ui state is stable following animations.
  whenRenderingDone(): Promise<any>

  // 触发组件的销毁。
  destroy(): void
}

nativeElement

ComponentFixture.nativeElement 用于获取组件根部的原生元素。当它的类型是HTMLElement 或其派生类之一时，我们可以用标准的 HTML querySelector 深入了解元素树。

it('should have <p> with "banner works!"', () => {
  const bannerElement: HTMLElement = fixture.nativeElement;
  const p = bannerElement.querySelector('p')!;
  expect(p.textContent).toEqual('banner works!');
});

DebugElement

nativeElement的属性依赖于其运行时环境。在非浏览器平台上运行这些测试时，那些平台上可能没有 DOM，或者其模拟的 DOM 不支持完整的 HTMLElement API。

Angular 依靠 DebugElement抽象来在其支持的所有平台上安全地工作。 Angular 不会创建 HTML 元素树，而会创建一个 DebugElement 树来封装运行时平台上的原生元素。使用nativeElement 属性解包(unwrap) DebugElement 并返回特定于平台的元素对象。

const bannerElement: HTMLElement = fixture.nativeElement;

// 上面

码农公寓