Attributes aren't updated after passing an Input value

user_16559690 0
Viewed 45

I try to test if my component will change background color properly after passing an Input value. When input value changes the ngClass with adequate class is applied. So when the @Input() type = 'red'the class of div will change to comp--red. I've got to the place where the class is applied and the test works as it should but the next test when I check div.style.backgroundColor doesn't pass.

Test

describe('TestComponent', () => {
    let component: TestComponent;
    let fixture: ComponentFixture<TestComponent>;

    beforeEach(
        waitForAsync(() => {
            TestBed.configureTestingModule({ declarations: [TestComponent] }).compileComponents();
        })
    );

    describe('with template', () => {
        beforeEach(() => {
            fixture = TestBed.createComponent(TestComponent);
            component = fixture.componentInstance;
        });

        it('should have red background when type is red', () => {
            fixture.componentInstance.type = 'red';
            fixture.detectChanges();
            const div = fixture.debugElement.query(By.css('.comp--red')).nativeElement;
            expect(div.style.backgroundColor).toBe('#ff0000');
        });
    });

    
});

Component

@Component({
    selector: 'test-comp',
    template: `
        <div [ngClass]="'comp--' + type">
            <ng-content></ng-content>
        </div>
    `,
    styleUrls: ['./test.component.scss'],
    encapsulation: ViewEncapsulation.None,
})
export class TestComponent {
    @Input() type;
}

Class

.comp--red {background-color: #ff0000;}

The output is:

Expected '' to be '#ff0000'.

But when I inspect an element it has class comp--red. Could you give me a hand with this?

jasmine angular testing
1 Answers

element.style refers to the inline styles on an element, not the styles that are applied to an element via CSS stylesheets. To get the styles currently applied to an element by the browser use:

expect(getComputedStyle(div).backgroundColor).toEqual('#ff0000');

Note: I would think that the test should just cover that the css class has been applied, rather than testing the color value itself

user_2710120
Related