¿Cómo Probar Unitariamente una Directiva En Angular 2?

Problema: Me gustaría ser capaz de probar unitariamente una directiva en Angular 2 para asegurarme de que se compila correctamente.

En Angular 1, era posible usar$compile(angular.element(myElement) servicio y llamar $scope.$digest() después de eso. Quiero específicamente poder hacer esto en pruebas unitarias para poder probar eso cuando Angular termina corriendo a través de <div my-attr-directive/> en el código que my-attr-directive compila.

Limitaciones:

Author: Community, 2016-04-05
Source

2 answers

Testing compiled directive using TestBed

Digamos que tienes una siguiente directiva: 

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

Lo que tienes que hacer es crear un componente que use la directiva (puede ser solo para fines de prueba): 

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

Ahora necesita crear un módulo que los declare: {[12]]} 

describe('App', () => {

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

  // ...

});

Puede agregar la plantilla (que contiene la directiva) al componente, pero se puede manejar dinámicamente sobrescribiendo la plantilla en test: 

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

  // ...      

}));

Ahora usted puede intentar compilar el componente, y consultarlo usando By.directive. Al final, existe la posibilidad de obtener una instancia de directiva usando 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!');
});

# Respuesta antigua:

Para probar una directiva necesitas crear un componente falso con ella: 

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

Puede agregar la plantilla en el propio componente, pero se puede manejar dinámicamente sobrescribiendo la plantilla en test: 

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

Tenga en cuenta que usted es capaz de probar lo que la directiva representa, pero no pude encontrar el camino para probar una directiva de una manera que los componentes son (no hay TestComponentBuilder para directivas).

 56
Author: Wojciech Kwiatek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-18 22:57:07

Me llevó un tiempo encontrar un buen ejemplo, una buena persona en angular gitter channel me señaló para mirar el repositorio Angular Material Design 2 para ejemplos. Puede encontrar un ejemplo de prueba de Directiva aquí. Este es el archivo de prueba para la directiva tooltip de Material Design 2. Parece que tienes que probarlo como parte de un componente.

 2
Author: Jusef,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-07 23:44:35