Angular 单元测试动态地将类添加到HTML按钮Jasmine中

我对Jasmine是个新手，正在尝试学习如何在Angular 4中为我的组件编写单元测试。我正在将一个类添加到组件的ngOnInit（）按钮的类列表中。现在，当我尝试运行测试时，它说，找不到null的属性“classList”。这就是我迄今为止所尝试的

组件。ts

ngOnInit() {
  document.querySelector('.button-visible').classList.add('hidden');
}

describe('AppComponent', () => {
 let component = AppComponent;
 let fixture: ComponentFixture<AppComponent>;
 let compiledElement;
});

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

beforeEach(() => {
 fixture = TestBed.createComponent(AppComponent);
 component = fixture.componentInstance;
 compiledElement = fixture.debugElement.nativeElement;
 fixture.detectChanges();
});

it('should create component', () => {
 expect(compiledElement.querySelector('button.button-visible').classList).toContain('hidden');
 expect(component).toBeTruthy();
});
});

这就是我试图在我的spec ts文件中执行的操作

组件规格ts

ngOnInit() {
  document.querySelector('.button-visible').classList.add('hidden');
}

describe('AppComponent', () => {
 let component = AppComponent;
 let fixture: ComponentFixture<AppComponent>;
 let compiledElement;
});

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

beforeEach(() => {
 fixture = TestBed.createComponent(AppComponent);
 component = fixture.componentInstance;
 compiledElement = fixture.debugElement.nativeElement;
 fixture.detectChanges();
});

it('should create component', () => {
 expect(compiledElement.querySelector('button.button-visible').classList).toContain('hidden');
 expect(component).toBeTruthy();
});
});

description（'AppComponent'，（）=>{
设component=AppComponent；
let夹具：组件夹具；
让我们来讨论这个问题；
});
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[AppComponent]
.....
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（AppComponent）；
组件=fixture.componentInstance；
compiledElement=fixture.debugElement.nativeElement；
fixture.detectChanges（）；
});
它（'应该创建组件'，（）=>{
expect（compiledElement.querySelector（'button.button-visible'）.classList）.toContain（'hidden'）；
expect（component.toBeTruthy（）；
});
});

---

我不知道如何测试。非常感谢您的帮助。

为了在您有一个组件需要查找它以外的内容时运行测试，您需要创建一个使用您的组件并具有所有所需项目的测试线束。在本例中，您需要一个测试组件，该组件包含一个DOM节点，该节点应用了

按钮可见的
类

您可以在测试规范中创建测试组件以使用：

@Component({
  template: `
    <button class="button-visible">Test Button</button>
    <app-component></app-component>
  `,
})
class TestHostComponent {
}

今天我在编写单元测试时遇到了类似的问题。我提出了以下解决方案：

describe('AppComponent', () => {
  let component = AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let compiledElement;


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

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    compiledElement = fixture.debugElement.nativeElement;
    compiledElement.innerHTML += "<button class='button-visible'>Test Button</button>";
    fixture.detectChanges();
  });

  it('should create component', () => {
    expect(compiledElement.querySelector('button.button-visible').classList).toContain('hidden');
    expect(component).toBeTruthy();
  });
});

description（'AppComponent'，（）=>{
设component=AppComponent；
let夹具：组件夹具；
让我们来讨论这个问题；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[AppComponent]
.....
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（AppComponent）；
组件=fixture.componentInstance；
compiledElement=fixture.debugElement.nativeElement；
compiledElement.innerHTML+=“测试按钮”；
fixture.detectChanges（）；
});
它（'应该创建组件'，（）=>{
expect（compiledElement.querySelector（'button.button-visible'）.classList）.toContain（'hidden'）；
expect（component.toBeTruthy（）；
});
});
带有
按钮的元素是否可见组件模板的类部分？基于您的组件代码在
ngOnInit（）
方法中，它似乎在它之外。@DanielWStrimpel-没错，Daniel！！！按钮实际上位于另一个组件上。这正是我要找的Daniel。。谢谢