Question

我们的车把文件中有一个按钮组件，看起来像这样。

{{some-button link="goes-to-here"}}

本质上与{{#link-to}}类似，只是它做得更多。我们最近在我们的网站上发现了一个按钮，由于缺少link参数而被破坏。我想知道是否有一种方法可以测试或强制执行我们的link参数始终填写。我不确定该如何进行临时测试，或者是否可行。

完整代码

component.js

import Component from '@ember/component';

export default Component.extend({
});

component.hbs

<div class="row c2a mt50px">
  <div class="col-md-12">
    {{#link-to "contact" link class="btn btn-primary btn-lg" }}{{this.buttonText}}{{/link-to}}
  </div>
</div>

Answer 1

最后，我通过使用@PatsyIssa所述的asserts以及didReceiveAttrs来使此方法正常工作。

import Component from '@ember/component';
import { assert } from '@ember/debug';

export default Component.extend({
  buttonText: 'REQUEST A SAMPLE',
  didReceiveAttrs() {
    assert('Component must contain link of some kind', this.link != null);
  },
});

我喜欢使用didReceiveAttrs而不是didRender之类的其他函数，因为我相信第一个函数在初始渲染时仅被调用一次。

如何测试余烬组件是否缺少参数？

1 个答案: