diff --git a/packages/-ember-data/tests/acceptance/relationships/has-many-test.js b/packages/-ember-data/tests/acceptance/relationships/has-many-test.js index b98d8f051de..37ab9245c75 100644 --- a/packages/-ember-data/tests/acceptance/relationships/has-many-test.js +++ b/packages/-ember-data/tests/acceptance/relationships/has-many-test.js @@ -1,4 +1,5 @@ import { action } from '@ember/object'; +import { sort } from '@ember/object/computed'; import { inject as service } from '@ember/service'; import { click, render } from '@ember/test-helpers'; import Component from '@glimmer/component'; @@ -674,4 +675,56 @@ module('autotracking has-many', function(hooks) { names = domListToArray(items).map(e => e.textContent); assert.deepEqual(names, ['RGB', 'RGB'], 'rendered 2 children'); }); + + test('We can re-render hasMany with sort computed macro', async function(assert) { + class ChildrenList extends Component { + @service store; + + sortProperties = ['name']; + @sort('args.person.children', 'sortProperties') sortedChildren; + + @action + createChild() { + const parent = this.args.person; + const name = 'RGB'; + this.store.createRecord('person', { name, parent }); + } + } + + let layout = hbs` + + +

{{this.sortedChildren.length}}

+ + `; + this.owner.register('component:children-list', ChildrenList); + this.owner.register('template:components/children-list', layout); + + store.createRecord('person', { id: '1', name: 'Doodad' }); + let person = store.peekRecord('person', '1'); + this.person = person; + + await render(hbs``); + + let items = this.element.querySelectorAll('li'); + let names = domListToArray(items).map(e => e.textContent); + + assert.deepEqual(names, [], 'rendered no children'); + + await click('#createChild'); + + items = this.element.querySelectorAll('li'); + names = domListToArray(items).map(e => e.textContent); + assert.deepEqual(names, ['RGB'], 'rendered 1 child'); + + await click('#createChild'); + + items = this.element.querySelectorAll('li'); + names = domListToArray(items).map(e => e.textContent); + assert.deepEqual(names, ['RGB', 'RGB'], 'rendered 2 children'); + }); });