enhetstesting - Angular 2/4 - Hvordan teste Directive @Input-verdier?

Så jeg har en direktiv som tar et input:

@Directive({
    selector: '[my-directive]'
})
export class MyDirective {

    @Input('some-input')
    public someInput: string;
}

Som du kan se, bør inndata være en string-verdi. Nå vil jeg skrive en test for denne direktiven, og jeg vil teste om inndataene tilfredsstiller string-typen:

describe('MyDirective', () => {

    let fixture: ComponentFixture<DummyComponent>;
    let dummy: DummyComponent;
    let directive: DebugElement;

    beforeEach(async(() => {

        TestBed
            .configureTestingModule({
                imports: [
                    MyModule.forRoot()
                ],
                declarations: [
                    DummyComponent
                ]
            })
            .compileComponents();

        fixture = TestBed.createComponent(DummyComponent);
        dummy = fixture.componentInstance;
        directive = fixture.debugElement.query(By.directive(MyDirective));

        fixture.detectChanges();
    }));

    it('should satisfy only a string input and error on other inputs', () => {
        // How to test?
    });
});

@Component({
    selector: 'dummy',
    template: `
        <div my-directive [some-input]="'just-a-string-value'"></div>
    `
})
export class DummyComponent implements OnInit {
}

Hvordan kan jeg teste om @Input-verdien(e) har riktig type?

Svar #1

Så det er litt sent, men jeg kom hit på jakt etter det samme problemet, så jeg vil poste løsningen min. Her er hva jeg gjorde for å teste verdier for direktiveinnganger (eller andre egenskaper):

describe('MyDirective', () => {

    let fixture: ComponentFixture<DummyComponent>;
    let dummy: DummyComponent;
    let directive: DebugElement;

    beforeEach(async(() => {

        TestBed
            .configureTestingModule({
                imports: [
                    MyModule.forRoot()
                ],
                declarations: [
                    DummyComponent
                ]
            })
            .compileComponents();

        fixture = TestBed.createComponent(DummyComponent);
        dummy = fixture.componentInstance;
        directive = fixture.debugElement.query(By.directive(MyDirective));

        fixture.detectChanges();
    }));

    it('should satisfy only a string input and error on other inputs', () => {
        
        // needed so template is processed, inputs are updated
        fixture.detectChanges();
        
        // since we declared a ViewChild on the directive, we can access
        // and test directive properties values
        expect(component.directive.someInput).toEqual('just-a-string-value');
        // to test the input type :
        expect(component.directive.someInput).toEqual(Jasmine.any(String));
        // I thought TypeScript would complain when providing a wrong type input to a directive, but no...so I guess I'll test the input type too !
    });
});

@Component({
    selector: 'dummy',
    template: `
        <div my-directive [some-input]="'just-a-string-value'"></div>
    `
})
export class DummyComponent implements OnInit {

  // add a reference to the directive in template
  // so in your component you can access : this.directive, this.directive.someInput
  ViewChild(MyDirective) directive: MyDirective;
}

Så: endre testkomponenten din til å holde en referanse til direktivinstansen, og deretter få tilgang til direktivegenskapene gjennom component.directive.[property-name]. Forresten, hvis du gir standardverdier for direktivegenskapene dine (som kan overstyres ved å gi en verdi i malen), kan du teste dem før du kaller fixture.detectChanges().

Relaterte artikler