typescript 测试DOM中属性的存在

Posted 2021-05-21

import {
  ViewChild,
  Component,
} from '@angular/core';
import {
  async,
  ComponentFixture,
  TestBed,
} from '@angular/core/testing';
import {
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { TsInputModule } from './input.module';
import { TsInputComponent } from './input.component';


@Component({
  template: `
    <ts-input [isRequired]="myRequired"></ts-input>
  `,
})
class TestHostComponent {
  myRequired = true;
}


describe(`TsInputComponent-integration`, () => {
  let fixture;
  let testHost;
  let inputEl;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        NoopAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        TsInputModule,
      ],
      declarations: [
        TestHostComponent,
      ],
    }).compileComponents();
    fixture = TestBed.createComponent(TestHostComponent);
    testHost = fixture.componentInstance;
    inputEl = document.getElementsByClassName('c-input__text')[0];
    fixture.detectChanges();
  }));


  test(`should set the required attr`, () => {
    expect(inputEl.hasAttribute('required')).toEqual(true);
  });


  test(`should remove the required attr`, () => {
    testHost.myRequired = false;
    fixture.detectChanges();
    expect(inputEl.hasAttribute('required')).toEqual(false);
  });

});