Тестирование фонового изображения класса CSS с использованием Angular Karma

Question

У меня есть div, для которого я создал класс, скажем, .open-banner что-то вроде:

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

с классами CSS как:

.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;
}

В моемspec-файл, я пытаюсь получить доступ к 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:' ', 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);