Модульное тестирование angular и жасмин

Question

Как можно go о модульном тестировании в angular что-то в индексе. html файл?

Например: я хочу создать модульный тест, который проверяет, что тег body имеет Speci c присвоенный ему класс. Возможно ли это?

Большинство файлов unit test или spe c созданы для компонентов, но я не могу получить доступ к тегу body.

это рабочий css unit test для всего, что находится внутри компонент, просто не знаю, как получить доступ к тегу тела index. html page.

  it('should have class-name in body class tag', () => {
    const fixture = TestBed.createComponent(AppComponent);

    fixture.detectChanges();
    const compiled = fixture.debugElement;

    expect(compiled.query(By.css('.class-name'))).toBeTruthy();
  });

Answer 1

Вы можете получить доступ к элементу body через document, а затем проверить, что атрибут elements className имеет ожидаемое имя класса.

Вот stackblitz, показывающий функциональный пример .

describe("Integration::AppComponent", () => {
  let component;
  let fixture;

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

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

  it("should set a class on the body element", () => {
    const body = document.body;
    expect(body.className).toContain('my-class');
  });
});

Вот как мой маленький примерный компонент устанавливает стиль тела.

export class AppComponent  {
  ngOnInit(){
    document.body.className += ' my-class';
  }
}

Предупреждение - если вы используете что-то вроде Angular Universal, document выиграно не будет доступен, когда ваш компонент запущен на сервере.