How to test style.background-color attribute

Question

I want to create a test that checks that there is binding between background color and component property.

Component template snippet

<div
    class="colored-div"
    [style.background-color]="color"
</div>

Test

it('background should have correct color', () => {
    component.color = '#000000';
    fixture.detectChanges();
    const colorEl: HTMLElement = fixture.debugElement.query(By.css('.colored-div')).nativeElement;
    expect(colorEl.style.backgroundColor).toBe('#000000');
});

I expect to pass this test, but angular converts background color to rgb and test fails with error: "Expected 'rgb(0, 0, 0)' to be '#000000'". So the question is: is there a way to stop angular from converting value to rgb or should I change my test assertion to

expect(colorEl.style.backgroundColor).toBe('rgb(0, 0, 0)');

https://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value — Hsuan Lee, Sep 18 '19 at 10:53

score 1 · Answer 1 · answered Sep 26 '19 at 12:48

Actually it is not Angular but the browsers: they return RGB when using backgroundColor. You can either change your assertion to be RGB (as you wrote) or just use an additional function which converts RGB into HEX (pick any you like function example)

score 0 · Answer 2 · answered Jan 29 '20 at 06:04

As browser returns rgb, you can provide the input as rgb and test the assertion as below:

it('background should have correct color', () => {
let customColor = 'rgb(0,0,0)';
    component.color = customColor;
    fixture.detectChanges();
    const colorEl: HTMLElement = fixture.debugElement.query(By.css('.colored-div')).nativeElement;
    expect(colorEl.style.backgroundColor).toBe(customColor);
});

How to test style.background-color attribute

2 Answers2