Угловое 2 приспособление не содержит стилей компонента в модульном тесте

Question

У меня возникли проблемы со следующим.

Это единичный тест для директивы, сама директива должна просто изменить свойство стиля 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{} 

Где стили, определенные в компонент?

Answer 1

Основываясь на моем тестировании, DebugElement.styles всегда возвращает пустой объект. Не знаю, почему. В вашем случае, если ваш шаблон, как показано ниже:

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

Затем, когда вы звоните:

console.log(divWithDirective.nativeElement.backgroundColor) 

Вы должны быть в состоянии получить значение white.