指令绑定在规范文件中不起作用

Posted

技术标签:

【中文标题】指令绑定在规范文件中不起作用【英文标题】:Directive binding not working in a spec file 【发布时间】:2017-12-28 14:37:14 【问题描述】:

我有一个突出显示文本的指令:

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

@Directive( selector: '[appHighlight]' )
export class HighlightDirective 
  @Input('appHighlight') // tslint:disable-line no-input-rename
  highlightColor: string;

  constructor(private el: ElementRef)  

  @HostListener('mouseenter')
  onMouseEnter() 
    this.highlight(this.highlightColor || 'yellow');
  

  @HostListener('mouseleave')
  onMouseLeave() 
    this.highlight(null);
  

  private highlight(color: string) 
    this.el.nativeElement.style.backgroundColor = color;
  

在我的应用 html 中,我有:

This <span [appHighlight]="'pink'">is nice</span>!

它有效

然后我开始构建一些测试,在一个测试中我尝试绑定不同的颜色(就像上面的示例一样),但它没有绑定值,字段是undefined

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

import  Component  from '@angular/core';
import  HighlightDirective  from './highlight.directive';

@Component(
  selector: 'app-test-container',
  template: `
    <div>
      <span id="red" appHighlight>red text</span>
      <span id="green" [appHighlight]="'green'">green text</span>
      <span id="no">no color</span>
    </div>
  `
)
class ContainerComponent  

const mouseEvents = 
  get enter() 
    const mouseenter = document.createEvent('MouseEvent');
    mouseenter.initEvent('mouseenter', true, true);
    return mouseenter;
  ,
  get leave() 
    const mouseleave = document.createEvent('MouseEvent');
    mouseleave.initEvent('mouseleave', true, true);
    return mouseleave;
  ,
;

fdescribe('HighlightDirective', () => 
  let fixture: ComponentFixture<ContainerComponent>;
  let container: ContainerComponent;
  let element: HTMLElement;

  beforeEach(() => 
    TestBed.configureTestingModule(
      declarations: [ContainerComponent, HighlightDirective],
    );

    fixture = TestBed.createComponent(ContainerComponent);
    container = fixture.componentInstance;
    element = fixture.nativeElement;
  );

  fit('should set background-color green when passing green parameter', () => 
    const targetElement = <HTMLSpanElement>element.querySelector('#green');

    targetElement.dispatchEvent(mouseEvents.enter);
    expect(targetElement.style.backgroundColor).toEqual('green');
  );
);

测试输出显示

我做错了吗?为什么不绑定green颜色?

【问题讨论】:

【参考方案1】:

我发现默认情况下,Angular 在测试期间不会在模板上运行绑定。除非您让它运行绑定和生命周期事件,否则即使是简单的 myVar 也无法正常工作,如 Angular detectchanges documentation 中所述。

这个场景有两个选项,我可以手动调用

fixture.detectChanges();

就在我拿到我的固定装置之后。

或者我可以包含一个提供程序,将其设置为自动运行

providers: [
   provide: ComponentFixtureAutoDetect, useValue: true ,
],

【讨论】:

providers: [ provide: ComponentFixtureAutoDetect, useValue: true , ], 是个好答案

以上是关于指令绑定在规范文件中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

D3 生成的线性渐变在 Firefox/IE 中不起作用

指令在子模块中不起作用

ngMessages 在指令模板中不起作用

为啥此模型绑定在 Razor 页面中不起作用

Shell BackButtonBehavior 命令绑定在 UWP 中不起作用

淘汰赛类绑定在组件中不起作用