传递输入值后不更新属性

Question

我尝试测试我的组件是否会在传递输入值后正确更改背景颜色。当输入值更改时，将应用具有足够 class 的 ngClass。所以当@Input() type = 'red'时div的class会变成comp--red。我已经到达应用 class 的地方并且测试正常工作但是当我检查 div.style.backgroundColor 时的下一个测试没有通过。

测试

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({
    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;}

输出为：

Expected '' to be '#ff0000'.

但是当我检查一个元素时它有 class comp--red。你能帮我处理一下吗？

Answer 1

element.style 是指元素上的内联样式，而不是通过 CSS 样式表应用于元素的样式。要获取浏览器当前应用于元素的样式，请使用：

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

注意：我认为测试应该只涵盖应用了 css class，而不是测试颜色值本身

传递输入值后不更新属性

Attributes aren't updated after passing an Input value

testing

jasmine

angular