Модульный тест динамически добавляет класс к кнопке HTML Жасмин

Question

Я совершенно новичок в Jasmine и пытаюсь научиться писать модульные тесты для моих компонентов в Angular 4. Я добавляю класс в classList кнопки в ngOnInit () компонента. Теперь, когда я пытаюсь запустить тест, он говорит, что не может найти свойство 'classList' из null. Это то, что я пробовал до сих пор.

Component.ts

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

Это то, что я пытаюсь сделать в моем файле спецификаций.

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

Сегодня я столкнулся с похожей проблемой написания модульных тестов. Я придумал следующее решение:

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

Answer 2

Чтобы запустить тесты, когда у вас есть компонент, который должен искать вещи вне его, вам нужно создать тестовый комплект, который использует ваш компонент и имеет все необходимые элементы. В вашем случае вам понадобится тестовый компонент, содержащий узел DOM с примененным классом button-visible.

Вы можете создать тестовый компонент прямо в спецификации теста для использования:

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