Ember.js 在余烬质量测试中如何超越组件在集成测试中的功能

我在这里写我的第一个问题，抱歉有任何歧义

我为

updatepw

组件编写了一个集成测试，该组件简单地呈现

updatepw

，然后用

fillIn

填充输入字段，然后单击save按钮，触发

updatepw.js

中的操作

savePW

。我只传递

电子邮件

（我们要为其更改密码）和

新密码

savePW（）

函数还有一个函数调用

self.store.updateSingleUserPw（email，newPw）

，它是在service

store.js

中编写的

updateSingleUserPw（email，newPw）

在服务器处理API调用后返回承诺。在履行或拒绝承诺的基础上，我展示了一种模式。 我只想在测试中实现或拒绝承诺，而不是服务器响应承诺

// integration/component/update-pw-test.js

import { module, test } from 'qunit';
import EmberObject from '@ember/object';
import { setupRenderingTest } from 'ember-qunit';
import { render, fillIn, click } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import Service from '@ember/service';

module('Integration | Component | update-pw', function(hooks) {
  setupRenderingTest(hooks);

  const store = Service.extend({
    savePW() {
      self.store.updateSingleUserPw(email, newPw, function() {
          console.log('this is function overriding', email, newPw);
          return true;
        })
        .then(function() {
          // Reset controller fields
          self.set('password', '');
          self.set('updateModal', false);
          swal({
            title: 'Das hat geklappt',
            type: 'success'
          });
        }, function() {
          self.set('updateModal', false);
          swal({
            title: 'problems with setting new pw.',
            type: 'error'
          });
        })
        .finally(function() {
          self.set('changingPassword', false);
        });
    }
  });

  test('it renders', async function(assert) {
    this.application.register('service:store', store);
    this.application.inject.service('store', { as: 'store' });
    assert.expect(2);
    this.set('updateModal', true);
    this.set('testing', true);
    let currentUpdateAdmin = EmberObject.create({
      username: 'steinauer',
      email: 'lala@test.at'
    });
    this.set('currentUpdateAdmin', currentUpdateAdmin);
    await render(hbs`{{update-pw updateModal=updateModal currentUpdateAdmin=currentUpdateAdmin testing=testing store=store}}`);

    assert.equal(this.element.querySelector('h4').textContent.trim(), 'set new PW for steinauer');
    await fillIn('#password', 'test123456');
    await click('.save-button');
    // Template block usage:
    await render(hbs`
      {{#update-pw}}
        template block text
      {{/update-pw}}
    `);

    // assert.equal(this.element.textContent.trim(), 'what is this');
  });
});    

//组件/update-pw.js
从“@ember/Component”导入组件；
导出默认组件。扩展({
更改密码：false，
行动：{
savePW（）{
让自我=这个；
如果（！self.get（'currentUpdateAdmin.email'））
返回；
让newPw=self.get（'password'）；
让email=self.get（'currentUpdateAdmin.email'）；
self.set（'changingPassword'，true）；
如果（！电子邮件）
返回；
self.store.updateSingleUserPw（电子邮件，newPw）
.然后（函数（）{
//重置控制器字段
self.set（'密码'，''）；
self.set（'updateModal'，false）；
游泳({
标题：“Das hat geklappt”，
类型：“成功”
});
}，函数（）{
self.set（'updateModal'，false）；
游泳({
标题：“设置新pw的问题”，
键入：“错误”
});
})
.最后（函数（）{
self.set（'changingPassword'，false）；
});
}
}
});

Service/store.js中的函数

：

updateSingleUserPw(email, newPw) {
  let headers = this.get('headers');

  return new Promise(function(resolve, reject) {
    $.ajax({
      type: 'POST',
      url: ENV.api + '/accounts/updateSingleUserPw',
      data: {
        email: email,
        pwNew: newPw
      },
      headers,
      dataType: 'json'
    }).then(function(success) {
      if (success) {
        resolve(newPw);
      } else {
        reject('password change failed');
      }
    }, function(xhr, status, error) {
      reject(error);
    });
  });
}

在尝试重写函数之前，我只得到了拒绝的承诺模式，但在尝试重写函数之后，我得到：

---

承诺在“它呈现”期间被拒绝：无法读取未定义的属性

注册表
。
谢谢您的问题谢谢您的问题应该是
this.owner.register（）
。您可能必须先取消注册现有服务。“应该不需要注射。”杰汉感谢你的指导。现在，它的1步，但我得到了一个错误。未捕获的TypeError:无法读取未定义的属性“updateSingleUserPw”。更深入地说，它仍然在我的组件js（updatepw.js）self.store.updateSingleUserPw（email，newPw）中执行这一行。虽然我想执行我在test
setupRenderingTest（hooks）
中编写的一个，但它已经注册了存储。因此，您不能在测试中的该点重新注册。这里的一些注释应该是
this.owner.register（）
。您可能必须先取消注册现有服务。“应该不需要注射。”杰汉感谢你的指导。现在，它的1步，但我得到了一个错误。未捕获的TypeError:无法读取未定义的属性“updateSingleUserPw”。更深入地说，它仍然在我的组件js（updatepw.js）self.store.updateSingleUserPw（email，newPw）中执行这一行。虽然我想执行我在test
setupRenderingTest（hooks）
中编写的一个，但它已经注册了存储。因此，您不能在测试中的该点重新注册。这里有一些注释-@real-ate非常感谢你的回答，我明白你的意思，只是更新了我的测试代码，它现在正在工作。现在我实际上向前移动了，现在我得到了一个更棘手的问题，那就是如何点击一个模式按钮。基本上，我得到了一个确认模式（sweet模式），它根据指示（return-Promise.resolve（）；或return-Promise.reject（）；）显示成功或拒绝的消息。现在我想点击sweet模式上的ok按钮，这个sweet模式来自外部，用于=>wait click（.confirm）；它不起作用了。如何从dom中获取该元素并单击它？我很高兴能够提供帮助！如果这个答案确实解决了你的问题，你能确保你接受它而不是只是投票，这样其他看到这个问题的人就会知道是什么帮助了你。此外，我发现很难理解您在第二期中所说的内容，我很乐意提供帮助，但可能值得再写一个问题（带示例），或者我们可以在Ember社区Discord上讨论it@real-ate非常感谢你的回答，我明白你的意思，只是更新了我的测试代码，它现在正在工作。现在我实际上向前移动了，现在我得到了一个更棘手的问题，那就是如何点击一个模式按钮。基本上，我得到了一个确认模式（sweet模式），它根据指示（return-Promise.resolve（）；或return-Promise.reject（）；）显示成功或拒绝的消息。现在我想点击sweet模式上的ok按钮，这个sweet模式来自外部，用于=>wait click（.confirm）；它不起作用了。如何从dom中获取该元素并单击它？我很高兴能够提供帮助！如果这个答案确实解决了你的问题，你能确保你接受它而不是只是投票，这样其他看到这个问题的人就会知道是什么帮助了你。此外，我发现很难理解您在第二期中所说的内容，我很乐意提供帮助，但可能值得再写一个问题（带示例），或者我们可以在Ember社区讨论这个问题