业力/茉莉花测试未通过角度材料工具提示答案

【问题标题】：Karma/Jasmine test not passing with angular material tooltip业力/茉莉花测试未通过角度材料工具提示
【发布时间】：2017-05-23 13:53:17
【问题描述】：

我正在使用最新版本的 Angular Material Design（Beta 5）的 Material Design 工具提示。

我以这种方式将工具提示附加到按钮上：

<button id="{{module.action}}" md-raised-button (click)="onClick($event)" [mdTooltip] [disabled]="buttonDisabledState">
  {{module.text}}
</button>

我有一个 Input 属性传递给组件：

export class ButtonComponent implements OnInit {
  @Input() module: ButtonModule;
  @Input() mdTooltip;

运行本地服务器时一切正常，但如果我运行我的测试套件，我不断收到此错误：

Can't bind to 'mdTooltip' since it isn't a known property of 'button'. ("th Dealflo Limited.
    -->
    <button id="{{module.action}}" md-raised-button (click)="onClick($event)" [ERROR ->][mdTooltip] [disabled]="buttonDisabledState">
      {{module.text}}
    </button>
    "): ng:///DynamicTestModule/ButtonComponent.html@13:74
    Error: Template parse errors:
    Can't bind to 'mdTooltip' since it isn't a known property of 'button'. ("th Dealflo Limited.
    -->
    <button id="{{module.action}}" md-raised-button (click)="onClick($event)" [ERROR ->][mdTooltip] [disabled]="buttonDisabledState">
      {{module.text}}
    </button>

我对这里的任何想法都持开放态度。

【问题讨论】：

标签： javascript angular jasmine karma-runner angular-material

【解决方案1】：

我认为您的按钮与默认的 html5 按钮冲突。默认确实没有工具提示。尝试更改您的按钮选择器。

【讨论】：

我尝试了一个干净的角度和材料设计安装并且测试通过了。我认为它来自我的不规则架构。当我找到它时，我会环顾它并发布解决方案。

【解决方案2】：

所以经过一些调查和尝试不同的事情后，我找到了一个可行的解决方案！在这里分享给遇到同样问题的人。

我尝试使用这种方式创建条件属性：

[attr.mdTooltip]="module.tooltip? module.mdtooltip : ''"

测试通过，但工具提示未显示。

我尝试单独使用来自父组件的输入，并且效果很好：

[mdTooltip]

【讨论】：