Question

我无法为元素悬停样式编写单元测试用例，在我的情况下，当悬停在片段上时，片段将获得左边框，阴影和子元素操作将可见。下面是我的代码并添加了 html 元素的屏幕截图。

// this is my component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-master-snippet',
  templateUrl: './master-snippet.component.html',
  styleUrls: ['./master-snippet.component.scss']
})
export class MasterSnippetComponent implements OnInit {

  @Input() master: Master = new Master();

  constructor() { }

  ngOnInit() { }

  editMaster = () => {
    //some code goes here
  }
}

// 这是我的 component.html

<div class="snippet primary-snippet">
  <div class="row">
    <div class="col-md-9">
      <div class="content">
        <div class="context-name text-truncate" title="{{master.name}}"> {{master.name}} </div>
        <div class="context-description text-truncate" *ngIf="master.description"
          title="Description: {{master.description}}">
          <span class="highlight">Description:</span> {{master.description}}
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="actions">
        <i (click)="editMaster(master)" class="fa fa-edit f-wt-600" title="Edit" aria-hidden="true"> </i>
        <i routerLink="/masters/{{master.id}}" routerLinkActiveMatch="{'test-class':'active'}"
          class="fa fa-eye goto-master" title="View" aria-hidden="true"> </i>
        <i routerLink="/service/{{master.serviceId}}" [queryParams]="{component_id: master.id}"
          routerLinkActiveMatch="{'test-class':'active'}" title="Goto Service" class="fa letter-icon goto-service"
          aria-hidden="true">S</i>
      </div>
    </div>
  </div>
</div>

// 这是组件styles.scss

.snippet {
    margin-bottom: 0.2rem;
    font-size: 1.4rem;
    background-color: #fff;
    border-radius: 0.4rem;
    border: 0.1rem solid #f5f5f5;
    -webkit-box-shadow: -0.1rem 0.1rem 0rem rgba(50, 50, 50, 0.1);
    -moz-box-shadow: -0.1rem 0.1rem 0rem rgba(50, 50, 50, 0.4);
    box-shadow: -0.1rem 0.1rem 0rem rgba(50, 50, 50, 0.1);
    border-left: 5px solid #fff;

    &:hover {
      border-left: 5px solid #71ce8f;
      -webkit-box-shadow: 0 2px 2px rgba(50, 50, 50, 0.4);
      -moz-box-shadow: 0 2px 2px rgba(50, 50, 50, 0.4);
      box-shadow: 0 2px 2px rgba(50, 50, 50, 0.4);
    }
}

.snippet .actions {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    visibility: hidden;
    margin-right: 1.5rem;
}

.snippet:hover .actions {
    visibility: visible;
}

// 我的组件规范文件

import { ComponentFixture, TestBed, waitForAsync } from @angular/core/testing';

describe('MasterSnippetComponent', () => {
  let com: MasterSnippetComponent;
  let fixture: ComponentFixture<MasterSnippetComponent>;
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [MasterSnippetComponent],
      providers: [],
      imports: []
    }).compileComponents();
  }));

  beforeEach(waitForAsync(() => {
    fixture = TestBed.createComponent(MasterSnippetComponent);
    com = fixture.componentInstance;
    fixture.detectChanges();
  }));
  
  it('should create', () => {
    expect(com).toBeTruthy();
  });

  it('should test hover styles', () => {
    let de = fixture.debugElement.query(By.css('.snippet'));
    de.triggerEventHandler('mouseover', {});
    fixture.detectChanges();
    let el = fixture.nativeElement.querySelector('.snippet');
    let st = getComputedStyle(el).borderLeft;
    expect(st).toEqual('5px solid rgb(113, 206, 143)');
    let childEl = fixture.nativeElement.querySelector('.snippet .actions');
    expect(getComputedStyle(childEl).visibility).toEqual('visible');
  });
});

“应该测试悬停样式”测试用例失败。请建议任何其他编写测试用例的方法。

Click to view my HTML elements which will show you the difference of before and after hover element.

如何为元素编写角度单元测试用例：悬停样式

0 个答案: