观察ember数据记录时点击后集成测试不渲染

Question

我似乎无法弄清楚为什么一个非常简单的集成测试没有通过

给定一个 ember 数据模型setting.js

export default class SettingModel extends Model {
  @attr('string') name;
  @attr('number') value;
}

我正在用一个组件渲染这个模型

<MyComponent @setting={{setting}}
             @name={{setting.name}}
             @value={{setting.value}}
             @values={{array 0 1 2}}
             @saveSetting={{saveSetting}} />

组件呈现所有可能的值 (@values) 并在等于当前值的那个上应用 active 类

{{#each @values as |value|}}
  <div class="btn {{if (eq @value value) "active"}}" {{on "click" (fn @saveSetting @setting value)}}>
    {{value}}
  </div>
{{/each}}

我想写一个简单的测试，点击另一个按钮更新活动类，但最后一个断言总是失败。活动类永远不会更新。在这个例子中，我使用了 ember-cli mirage

  test('updates new saved value', async function(assert) {
    this.server.get('/settings/:id', () => ({ settings: { id: 1, name: "settingName", value: 1 }}), 200);
    let setting = await this.owner.lookup('service:store').findRecord('setting', 1);
    this.set('setting', setting);
    this.set('name', setting.get('name'));
    this.set('value', setting.get('value'));
    this.set('values', [0, 1, 2]);
    this.set('saveSettingFn', (setting, newValue) => {
      setting.set('value', newValue);
      setting.save().then(() => console.log('also saved!'));
      console.log('saved!');
    });

    await render(hbs`<MyComponent @setting={{this.setting}}
                                  @name={{this.name}}
                                  @value={{this.value}}
                                  @values={{this.values}}
                                  @saveSetting={{this.saveSettingFn}} />`);

    // middle option active
    assert.ok(this.element.querySelectorAll('.btn')[1].getAttribute('class').includes('active'), 'second button active');
    // set up save handler
    this.server.put('/settings/:id', () => ({ settings: { id: 1, name: "settingName", value: 1 }}), 200);
    // click the first button
    await click('.btn');
    // first option active
    assert.ok(this.element.querySelectorAll('.btn')[0].getAttribute('class').includes('active'), 'first button active');

我在这里创建了一个测试失败的示例项目 https://github.com/spicalous/component-test-example/blob/master/tests/integration/components/my-component-test.js#L55

1. 模型上的值似乎已保存
2. 我尝试过使用waitFor 测试助手
3. 我试过await settled();

感谢任何帮助！谢谢！

Answer 1

你的saveSettingFn 函数什么都不做。所以什么都没有发生。