Angular 2+中带有参数的单元测试指令

Dileep TP

我有一个指令,可以在鼠标悬停时更改元素的背景颜色,如下所示。

import {Directive, ElementRef, HostListener, Input} from '@angular/core';

@Directive({
  selector: '[appHighlightme]'
})
export class HighlightmeDirective {

  @Input('appHighlightme') color : string
  constructor(private el:ElementRef) { }

  @HostListener('mouseenter') onMouseEnter(){
    this.highlight(this.color || 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave(){
    this.highlight('inherit');
  }

  highlight(color){
    this.el.nativeElement.style.backgroundColor = color;
  }
}

我正在尝试为此指令编写单元测试用例,如下所示

import { HighlightmeDirective } from './highlightme.directive';
import {ChangeDetectionStrategy, Component, DebugElement, ViewChild} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';

@Component({
  selector: 'my-test-component',
  template: '<a [appHighlightme]="color" >test</a>'
})
export class TestComponent {
  color:string = 'blue';
}

describe('HighlightmeDirective', () => {

  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;
  let inputEl: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent,
        HighlightmeDirective
      ]
    })

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    inputEl = fixture.debugElement.query(By.directive(HighlightmeDirective));

  });

  it('detect hover changes', () => {
    inputEl.triggerEventHandler('mouseenter', {});
    fixture.detectChanges();
    expect(inputEl.nativeElement.style.backgroundColor).toBe(component.color);
    inputEl.triggerEventHandler('mouseleave', {});
    fixture.detectChanges();
    expect(inputEl.nativeElement.style.backgroundColor).toBe('inherit');
  });

  it('should create an instance', () => {
    const directive = new HighlightmeDirective(inputEl);
    expect(directive).toBeTruthy();
  });
});

该指令在其他组件中运行良好。它接受ts文件中定义的color参数变量,并在将元素悬停时用作bg颜色。但是,当我尝试对其进行单元测试时,伪指令未检测到从TestComponent传递的color参数,并且测试用例失败并显示以下错误消息。

错误:预期“黄色”为“蓝色”。-由于将黄色设置为默认的悬停颜色

王子

您无需通过指令跟踪事件处理程序。您需要在本机元素(在您的情况下为anchor标记)上发出一个事件,并且指令处理程序将被自动调用。这是测试指令的实际方法。

假设我们有一个带有类的锚标记,因此我们需要在该标记上创建一个事件。

@Component({
  selector: 'my-test-component',
  template: '<a class="mytag" [appHighlightme]="color" >test</a>'
})
export class TestComponent {
  color:string = 'blue';
}

describe('HighlightmeDirective', () => {

  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;
  let inputEl: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent,
        HighlightmeDirective
      ]
    })

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();   // trigger change detection so that UI renders and you can access element in next step.
    inputEl = fixture.debugElement.query(By.css('.mytag'));

  });

  it('detect hover changes', () => {
    inputEl.triggerEventHandler('mouseenter', {});
    fixture.detectChanges();
    expect(inputEl.nativeElement.style.backgroundColor).toBe(component.color);
    inputEl.triggerEventHandler('mouseleave', {});
    fixture.detectChanges();
    expect(inputEl.nativeElement.style.backgroundColor).toBe('inherit');
  });

  it('should create an instance', () => {
    const directive = new HighlightmeDirective(inputEl);
    expect(directive).toBeTruthy();
  });
});

希望对您有帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Angular 2中对指令进行单元测试?

来自分类Dev

Angular 2和带有服务的单元测试

来自分类Dev

Angular 2和带有服务的单元测试

来自分类Dev

Angular2 Final中带有提供程序依赖项的隔离单元测试

来自分类Dev

Angular 2单元测试

来自分类Dev

Angular指令中的单元测试$ formatters

来自分类Dev

Angular指令中的单元测试$ formatters

来自分类Dev

在Angular 2中对可观察对象进行单元测试

来自分类Dev

组件的 Angular 2 单元测试

来自分类Dev

Angular2-运行所有单元测试会使个别通过的某些测试失败

来自分类Dev

单元测试 Angular 属性指令

来自分类Dev

如何在 Angular 2 单元测试中测试共享组件的方法?

来自分类Dev

带有@ContentChild 的 Angular 单元测试失败

来自分类Dev

带有 Jest 的 Angular 单击事件 Dom 单元测试

来自分类Dev

单元测试时,无法解析Angular RC 5中Router:(?,?,?,?,?,?,?)的所有参数

来自分类Dev

具有第三方组件的Angular 2单元测试

来自分类Dev

具有第三方组件的Angular 2单元测试

来自分类Dev

Angular 2 - 单元测试 - “没有令牌翻译的提供者”错误

来自分类Dev

在Angular 2中测试routerLink指令

来自分类Dev

使用业力和Jasmin在Angular2单元测试中未加载TemplateUrl

来自分类Dev

Angular 2中兄弟姐妹之间的单元测试通信

来自分类Dev

带有指令的Angular 2测试组件并获得错误的路由器加载

来自分类Dev

使用angular 2添加Firebase的单元测试

来自分类常见问题

使用@Input()进行Angular2单元测试

来自分类Dev

Angular2单元测试+创建接口对象

来自分类Dev

Angular2在单元测试中注入ElementRef

来自分类Dev

Angular 2单元测试组件,模拟ContentChildren

来自分类Dev

对需要Electron的Angular2服务进行单元测试

来自分类Dev

Angular2 单元测试 Click() 与按键

Related 相关文章

  1. 1

    如何在Angular 2中对指令进行单元测试?

  2. 2

    Angular 2和带有服务的单元测试

  3. 3

    Angular 2和带有服务的单元测试

  4. 4

    Angular2 Final中带有提供程序依赖项的隔离单元测试

  5. 5

    Angular 2单元测试

  6. 6

    Angular指令中的单元测试$ formatters

  7. 7

    Angular指令中的单元测试$ formatters

  8. 8

    在Angular 2中对可观察对象进行单元测试

  9. 9

    组件的 Angular 2 单元测试

  10. 10

    Angular2-运行所有单元测试会使个别通过的某些测试失败

  11. 11

    单元测试 Angular 属性指令

  12. 12

    如何在 Angular 2 单元测试中测试共享组件的方法?

  13. 13

    带有@ContentChild 的 Angular 单元测试失败

  14. 14

    带有 Jest 的 Angular 单击事件 Dom 单元测试

  15. 15

    单元测试时,无法解析Angular RC 5中Router:(?,?,?,?,?,?,?)的所有参数

  16. 16

    具有第三方组件的Angular 2单元测试

  17. 17

    具有第三方组件的Angular 2单元测试

  18. 18

    Angular 2 - 单元测试 - “没有令牌翻译的提供者”错误

  19. 19

    在Angular 2中测试routerLink指令

  20. 20

    使用业力和Jasmin在Angular2单元测试中未加载TemplateUrl

  21. 21

    Angular 2中兄弟姐妹之间的单元测试通信

  22. 22

    带有指令的Angular 2测试组件并获得错误的路由器加载

  23. 23

    使用angular 2添加Firebase的单元测试

  24. 24

    使用@Input()进行Angular2单元测试

  25. 25

    Angular2单元测试+创建接口对象

  26. 26

    Angular2在单元测试中注入ElementRef

  27. 27

    Angular 2单元测试组件,模拟ContentChildren

  28. 28

    对需要Electron的Angular2服务进行单元测试

  29. 29

    Angular2 单元测试 Click() 与按键

热门标签

归档