使用 Angular Karma 测试 css class 的背景图像

Question

我有一个 div，为此我创建了一个 class 让我们说 .open-banner 类似于 :

<div class="banner-section open-banner"
     [ngClass]="{'banner-closed' : !isOpen}">
</div>

和cssclass是：

.open-banner {
    background-image: url("/assets/images/image1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.banner-closed {
    background-image: url("/assets/images/image2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

在我的规范文件中，我试图访问图像的 url 并测试它是否使用以下方法加载正确的图像：

fit('should set banner background',()=>{
    component.isOpen = true;
    fixture.detectChanges();
    const ele = fixture.debugElement.query(By.css('.open-banner')).nativeElement;
    console.log(ele.style.backgroundImage)
});

但它是空的。我究竟做错了什么？

实际上，console.log(ele.style) 会给出如下所有空值：

LOG: CSSStyleDeclaration{alignContent: '', alignItems: '', alignSelf: '', alignmentBaseline: '', all: '', animation: '', animationDelay: '', animationDirection: '', animationDuration: '', animationFillMode: '', animationIterationCount: '', animationName: '', animationPlayState: '', animationTimingFunction: '', backfaceVisibility: '', background: '', backgroundAttachment: '', backgroundBlendMode: '', backgroundClip: '', backgroundColor: '', backgroundImage: '', backgroundOrigin: '', backgroundPosition: '', backgroundPositionX: '', backgroundPositionY: '', backgroundRepeat: '', backgroundRepeatX: '', backgroundRepeatY: '', backgroundSize: '', baselineShift: '', blockSize: '', border: '', borderBlockEnd: '', borderBlockEndColor: '', borderBlockEndStyle: '', borderBlockEndWidth: '', borderBlockStart: '', borderBlockStartColor: '', borderBlockStartStyle: '', ......

Answer 1

当您尝试访问 ele.style 时，它仅提供通过 style 属性在元素上定义的样式。要获得通过类和所有定义的样式，您可以使用 getComputedStyle 方法 - https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

所以这应该可以为您提供您正在寻找的样式值

console.log(getComputedStyle(ele).backgroundImage);

使用 Angular Karma 测试 css class 的背景图像

Testing background-image of a css class using Angular Karma

unit-testing

karma-runner

karma-jasmine

angular