Как Unit Test Директива В Angular 2?

Проблема: Я хотел бы иметь возможность unit test директивы в Angular 2, чтобы убедиться, что она правильно компилируется.

В Angular 1 после этого можно было использовать службу $compile(angular.element(myElement) и вызвать $scope.$digest(). Я специально хочу иметь возможность сделать это в модульных тестах, чтобы проверить, когда Angular заканчивается на <div my-attr-directive/> в коде, который my-attr-directive компилируется.

Ограничения:

Angular 2 с помощью JAVASCRIPT. Кажется, что все источники имеют несколько взаимосвязей. Возможно, этот ресурс действительно решает проблему, и мое понимание TS просто слабое
Unit Test в Жасмине
Должно быть, это не так опасно, что мои юнит-тесты в конечном итоге сломаются. См. связанной записи SO при компиляции HTML вручную в Angular 2

Ответ 1

Тестирование скомпилированной директивы с использованием TestBed

Скажем, у вас есть следующая директива:

@Directive({
  selector: '[my-directive]',
})
class MyDirective {
  public directiveProperty = 'hi!';
}

Что вам нужно сделать, это создать компонент, который использует директиву (он может быть только для целей тестирования):

@Component({
  selector: 'my-test-component',
  template: ''
})
class TestComponent {}

Теперь вам нужно создать модуль, в котором они объявлены:

describe('App', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent,
        MyDirective
      ]
    });
  });

  // ...

});

Вы можете добавить шаблон (содержащий директиву) к компоненту, но его можно обрабатывать динамически, перезаписывая шаблон в тесте:

it('should be able to test directive', async(() => {
  TestBed.overrideComponent(TestComponent, {
    set: {
      template: '<div my-directive></div>'
    }
  });

  // ...      

}));

Теперь вы можете попытаться скомпилировать компонент и запросить его с помощью By.directive. В самом конце есть возможность получить экземпляр директивы с помощью injector:

TestBed.compileComponents().then(() => {
  const fixture = TestBed.createComponent(TestComponent);
  const directiveEl = fixture.debugElement.query(By.directive(MyDirective));
  expect(directiveEl).not.toBeNull();

  const directiveInstance = directiveEl.injector.get(MyDirective);
  expect(directiveInstance.directiveProperty).toBe('hi!');
});

# Старый ответ:

Чтобы проверить директиву, вам нужно создать поддельный компонент:

@Component({
  selector: 'test-cmp',
  directives: [MyAttrDirective],
  template: ''
})
class TestComponent {}

Вы можете добавить шаблон в самом компоненте, но его можно обрабатывать динамически, перезаписывая шаблон в тесте:

it('Should setup with conversation', inject([TestComponentBuilder], (testComponentBuilder: TestComponentBuilder) => {
    return testComponentBuilder
      .overrideTemplate(TestComponent, `<div my-attr-directive></div>`)
      .createAsync(TestComponent)
      .then((fixture: ComponentFixture<TestComponent>) => {
        fixture.detectChanges();
        const directiveEl = fixture.debugElement.query(By.css('[my-attr-directive]'));
        expect(directiveEl.nativeElement).toBeDefined();
      });
  }));

Обратите внимание, что вы можете проверить, какие директивы визуализуются, но я не смог найти способ проверить директиву таким образом, чтобы компоненты (для директив не существует TestComponentBuilder).

Ответ 2

Пришло время найти хороший пример, хороший человек на канале angular gitter указал мне посмотреть на репозиторий angular Material Design 2 для примеров. Вы можете найти пример примера директивы здесь. Это тестовый файл для директивы tooltip Material Design 2. Похоже, вам нужно протестировать его как часть компонента.