Angular6 - как я могу проверить, что был применен [ngClass]?

Question

Как я могу написать тест, чтобы убедиться, что определенный [ngClass] был применен условно? Достаточно проверить, что был применен стиль или имя класса.

HTML:

    <li (click)="toggleTodo.emit(todo.id)"
        [ngClass]="todo.completed ? 'task-complete' : 'task-incomplete'">
        {{ todo.text }}
    </li>

CSS:

    .task-complete {
        text-decoration: line-through;
    }

    .task-incomplete {
      text-decoration: none;
    }

TEST:

    it('should style todo with no text decoration', () => {
    component.todo = todo;
    fixture.detectChanges();

    expect(li.style.textDecoration).toBe('none');
  });

    it('should style todo with text decoration', () => {
    component.todo.completed = true;
    fixture.detectChanges();

    expect(li.style.textDecoration).toBe('line-through');
  });

Ожидается - тесты пройдены.

Фактически - ожидаемо (получено) .toBeTruthy (), Получено: не определено.

Answer 1

Мое решение:

    it('should style todo with no text decoration', () => {
      component.todo = todo;
      fixture.detectChanges();

      const todoItem = fixture.debugElement.query(By.css('li'));
      expect(todoItem.classes['task-incomplete']).toBeTruthy();
  });

   it('should style todo with text decoration', () => {
     component.todo.completed = true;
     fixture.detectChanges();

     const todoItem = fixture.debugElement.query(By.css('li'));
     expect(todoItem.classes['task-complete']).toBeTruthy();
   });

Answer 2

Вы можете выбрать свой элемент с помощью селектора запросов и проверить класс.

    it('should have the "task-complete" CSS class applied', () => {
    // Do whatever you need for setting the task complete
    ...

    // If you have multiple 'li' to check
     const listRows = this.queueTable.queryAll(By.css('li'));
     const clickedList = listRows[1];
     //find your li that was clicked or needs to be inspected 

     expect(clickedList.classes['task-complete']).toBeTruthy();
    });