Angular 2 fixture does not contain styles of component in unit test

Question

I'm having trouble with the following.

This is a unit test for a directive, the directive itself should simply change the height style property for the element it's on. I am using a test component as a context for this test. The trouble is the styles seem to always be empty no matter what I do.

I am setting background-color explicitly in the component just to see if it comes though at the other end in the 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)
  });
});

The output is

LOG: undefined
LOG: Object{}

Where are the styles defined in the component?

score 0 · Answer 1 · answered Sep 13 '17 at 23:08

Based on my testing, the DebugElement.styles always return an empty object. Not sure why. For your case, if your template is like below:

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

Then when you call:

console.log(divWithDirective.nativeElement.backgroundColor)

You should be able to get value white.

Angular 2 fixture does not contain styles of component in unit test

1 Answers1