Angular 2 fixture不包含單元測試中的組件樣式

這是一個指令的單元測試，指令本身應該簡單地改變其所在元素的height樣式屬性。我正在使用測試組件作爲此測試的上下文。麻煩的是，無論我做什麼，樣式似乎都是空的。

我設置background-color明確的成分只是爲了看它是否在另一端的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) 
    }); 
});

輸出來，雖然是

LOG: undefined 
LOG: Object{}

如果是在定義的樣式零件？

來源

2016-11-23 m.fox

根據我的測試，DebugElement.styles總是返回一個空對象。不知道爲什麼。對於你的情況，如果你的模板是象下面這樣：

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

然後當你調用：

console.log(divWithDirective.nativeElement.backgroundColor)

你應該能夠獲得價值white。

來源

2017-09-13 23:08:44

Angular 2 fixture不包含單元測試中的組件樣式

回答

相關問題