Question

我有一个带有两个图像的简单按钮：一个默认情况下，另一个用于鼠标悬停时（在css中悬停）。该代码在运行ng test时运行良好，但是当我尝试在测试中测试背景图片时，backgroundimage始终相同。

<button id="google-sign-in" class="google-sign-in"></button>

.google-sign-in {
  border-style: none;
  outline: none;
  background: transparent url('/assets/images/signin/google/btn_google_signin_dark_normal_web.png');
  height: 46px;
  width: 191px;
}

.google-sign-in:hover {
  border-style: none;
  outline-style: none;
  background: transparent url('/assets/images/signin/google/btn_google_signin_dark_focus_web.pngtoto');
}

    let googleSignIntest = fixture.debugElement.query(By.css('.google-sign-in'));
    googleSignIntest.triggerEventHandler('mouseover', null);
    fixture.detectChanges();

    const h1 = fixture.debugElement.query(By.css('.google-sign-in'));
    const mouseenter = new MouseEvent('mouseover');
    h1.nativeElement.dispatchEvent(mouseenter);
    fixture.detectChanges();

    //expect(googleSignIntest.nativeElement.style.backgroundImage).toBe('red');
    let backgroundImage = window.getComputedStyle(document.getElementById('google-sign-in')).backgroundImage;
    console.log(backgroundImage);

背景图像从不改变，但查看日志，我发现在测试过程中确实发生了过度事件。此外，在运行ng run时，效果很好

为什么在进行mouseover或mouseenter事件测试时，我的css悬停背景图像没有更改？

0 个答案: