我嘗試測驗我的組件在傳遞輸入值后是否會正確更改背景顏色。當輸入值更改時，將應用具有足夠類的 ngClass。所以當@Input() type = 'red'div 的類會變成comp--red. 我已經到了應用課程的地方，并且測驗按預期作業，但是我檢查時的下一個測驗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;
}班級
.comp--red {background-color: #ff0000;}
輸出是：
Expected '' to be '#ff0000'.
但是當我檢查一個元素時，它有 class comp--red。你能幫我處理一下嗎？
uj5u.com熱心網友回復：
element.style指元素上的行內樣式，而不是通過 CSS 樣式表應用于元素的樣式。要獲取瀏覽器當前應用于元素的樣式，請使用：
expect(getComputedStyle(div).backgroundColor).toEqual('#ff0000');
注意：我認為測驗應該只涵蓋css class已應用的，而不是測驗顏色值本身
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/350403.html