Karma / Jasmine测试不通过角度材料工具提示

Question

I am using a material design tooltip with the latest version of angular material design (beta 5).

I attach the tooltip to a button this way:

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

And I have an Input property passed to the component:

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

Everything goes well when running the local server, but if I run my test suites I keep receiving this error:

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>

I'm open to any idea here.

Answer 1

I think your button conflicts with the default html5 button. The default has indeed no tooltip. Try changing your button selector.

Answer 2

So after some investigation and trying different things, I came to a working solution! Sharing it here for anybody that would experience the same issue.

I tried using creating a conditionnal attribute this way:

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

Test passed but the tooltip was not showing.

I tried using an Input coming from the parent component alone and it worked perfectly:

[mdTooltip]