Angular 2 Fixture enthält keine Arten von Komponenten im Komponententest

Question

Ich habe Probleme mit dem folgenden.

Dies ist ein Komponententest für eine Direktive, die Direktive sollte einfach die height Stileigenschaft für das Element ändern, auf dem sie sich befindet. Ich verwende eine Testkomponente als Kontext für diesen Test. Das Problem ist, die Stile scheinen immer leer zu sein, egal was ich mache.

ich background-color ausdrücklich nur in der Komponente bin Einstellung zu sehen, ob es aber am anderen Ende in dem fixture.debugElement

@Component({ 
    template: ` 
    <style> 
     .test { 
     background-color: white; 
     } 
    </style> 
    <div class="test" appExpandSidebarToBottom></div>` 
}) 
class TestComponent { 
    constructor(){} 
} 



fdescribe('Directive: ExpandSidebarToBottom',() => { 

    let fixture; 
    let divWithDirective; 

    beforeEach(() => { 
    fixture = TestBed.configureTestingModule({ 
     declarations: [ ExpandSidebarToBottomDirective, TestComponent ] 
    }) 
     .createComponent(TestComponent); 
    fixture.detectChanges(); // initial binding 

    divWithDirective = fixture.debugElement.query(By.css('.test')); 
    }); 

    it('should...',() => { 
    console.log(divWithDirective.nativeElement.backgroundColor) 
    console.log(divWithDirective.styles) 
    }); 
}); 

Der Ausgang kommt, ist

LOG: undefined 
LOG: Object{} 

Wo sind die Stile in der definiert Komponente?

Answer 1

Basierend auf meinen Tests gibt DebugElement.styles immer ein leeres Objekt zurück. Nicht sicher warum. Für Ihren Fall, wenn Ihre Vorlage ist wie unten:

<div class="test" style="background-color:white;" appExpandSidebarToBottom></div> 

Dann, wenn Sie anrufen:

console.log(divWithDirective.nativeElement.backgroundColor) 

sollten Sie in der Lage sein, um Wert white zu bekommen.