Ember 集成测试：每个助手的组件都未通过测试

Question

虽然按照 emberjs 教程，但我无法让我的组件通过测试
(https://guides.emberjs.com/release/tutorial/simple-component/).

tutorial 期望 each 助手被放置在
模板文件 (app/templates/rentals.hbs) 发送数组的每个元素。我没有将 each 助手放在模板文件中，而是将它放在组件文件中
(app/templates/component/rental-listing.hbs) 这样我就不用每次需要放置租赁清单时都写出来了。
测试错误是：
Promise rejected during "should display rental details": Cannot read property 'textContent' of null

这在测试中有效：

<article class="listing">
  <a
    onclick={{action "toggleImageSize"}}
    class="image {{if this.isWide "wide"}}"
    role="button"
  >
    <img src={{this.rental.image}} alt="">
    <small>View Larger</small>
  </a>
  <div class="details">
    <h3>{{this.rental.title}}</h3>
    <div class="detail owner">
      <span>Owner:</span> {{this.rental.owner}}
    </div>
    <div class="detail type">
      <span>Type:</span> {{this.rental.category}}
    </div>
    <div class="detail location">
      <span>Location:</span> {{this.rental.city}}
    </div>
    <div class="detail bedrooms">
      <span>Number of bedrooms:</span> {{this.rental.bedrooms}}
    </div>
  </div>
</article>

虽然用这个包装之前的代码不会：

{{#each @rentalListings as |rental|}}

{{/each}}

这是测试：

// @rental is correctly renamed to @rentalListings

module('Integration | Component | rental-listing', function (hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function () {
    this.rental = EmberObject.create({
      image: 'fake.png',
      title: 'test-title',
      owner: 'test-owner',
      type: 'test-type',
      city: 'test-city',
      bedrooms: 3
    });
  });

  test('should display rental details', async function(assert) {
    await render(hbs`<RentalListing @rental={{this.rental}} />`);
    assert.equal(this.element.querySelector('.listing h3').textContent.trim(), 'test-title', 'Title: test-title');
    assert.equal(this.element.querySelector('.listing .owner').textContent.trim(), 'Owner: test-owner', 'Owner: test-owner');
  });

  test('should toggle wide class on click', async function(assert) {
    await render(hbs`<RentalListing @rental={{this.rental}} />`);
    assert.notOk(this.element.querySelector('.image.wide'), 'initially rendered small');
    await click('.image');
    assert.ok(this.element.querySelector('.image.wide'), 'rendered wide after click');
    await click('.image');
    assert.notOk(this.element.querySelector('.image.wide'), 'rendered small after second click');
  });
});

我不应该在组件中放置一个 each 助手，还是我的测试文件设置不正确？

如果问题不够清楚，我可以尝试创建一个twiddle。

Answer 1

您在每个助手中传递的出租清单的计算值是多少。它应该是一个数组，但测试租金中传递的是一个对象。所以它不会运行在一个对象上因此没有输出

Ember 集成测试：每个助手的组件都未通过测试

Ember Integration Test: Component with each helper fails test

ember.js

ember-testing