集成测试观察ember条数据记录点击后不渲染
Integration test not rendering after click when observing ember data record
我似乎无法弄清楚为什么一个非常简单的集成测试没有通过
给定一个 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
class
{{#each @values as |value|}}
<div class="btn {{if (eq @value value) "active"}}" {{on "click" (fn @saveSetting @setting value)}}>
{{value}}
</div>
{{/each}}
我想写一个简单的测试,点击另一个按钮更新活动 class,但最后一个断言总是失败。活动 class 永远不会更新。在这个例子中,我使用了 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
- 模型上的值好像已经保存了
- 我试过使用
waitFor
测试助手
- 我试过了
await settled();
感谢任何帮助!谢谢!
您的 saveSettingFn
函数什么都不做。所以什么也没有发生。
我似乎无法弄清楚为什么一个非常简单的集成测试没有通过
给定一个 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
class
{{#each @values as |value|}}
<div class="btn {{if (eq @value value) "active"}}" {{on "click" (fn @saveSetting @setting value)}}>
{{value}}
</div>
{{/each}}
我想写一个简单的测试,点击另一个按钮更新活动 class,但最后一个断言总是失败。活动 class 永远不会更新。在这个例子中,我使用了 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
- 模型上的值好像已经保存了
- 我试过使用
waitFor
测试助手 - 我试过了
await settled();
感谢任何帮助!谢谢!
您的 saveSettingFn
函数什么都不做。所以什么也没有发生。