Question

我是Jasmine的新手并且正在尝试学习如何在Angular 4中为我的组件编写单元测试。我在Component的ngOnInit（）上的按钮的classList中添加了一个类。现在，当我尝试运行测试时，它说，找不到属性＆＃39; classList＆＃39;为null。这是我到目前为止所尝试过的。

Component.ts

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

这就是我在我的spec ts文件中尝试做的事情。

Component.spec.ts

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();
});
});

我无法弄清楚如何测试。任何帮助表示赞赏。

Answer 1

为了在有一个需要查找其外部组件的组件时运行测试，您需要创建一个使用您的组件并具有所有所需项目的测试工具。在您的情况下，您需要一个包含应用了button-visible类的DOM节点的测试组件。

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

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

然后，您需要更改测试设置以包含并使用此新组件：

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(TestHostComponent);
    testHostComponent = fixture.componentInstance;
    component = fixture.debugElement.query(By.directive(AppComponent)).componentInstance;
    fixture.detectChanges();
  });
});

然后，您可以运行测试以查看测试组件中的按钮是否已应用该类：

it('should add "hidden" class to HTML elements with "button-visible" class', () => {
  const buttonElement = fixture.debugElement.query(By.css('.button-visible.hidden'));
  expect(buttonElement).toBeTruthy();
});

Answer 2

我今天遇到了一个类似的问题，编写单元测试。我想出了以下解决方案：

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();
  });
});

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

2 个答案: