How do I test a computed property on a component in Ember? - ember.js

Question

I have a component, foo-table that I am passing a list of objects, called myList. I'm setting a computed property on the component that sorts the list. See below:
// app/components/foo-table.js
export default Component.extend({
sortedList: computed('myList', function foo() {
const myList = this.getWithDefault('myList', []);
return myList.sortBy('bar');
}),
});
How can I write a test to ensure the computed property is sorted? This is what I have so far:
// tests/integration/foo-table-test.js
const MY_LIST = ['foo', 'bar', 'baz']
test('it renders company industry component', function (assert) {
this.set('myList', MY_LIST);
this.render(hbs`
{{foo-table myList=myList}}
`);
// TODO
assert.equal(true, false);
});

Answer 1

In order to test a computed property, you will need to write a unit test.
A unit test does not render the DOM, but allows you to directly access the module under test.
// tests/unit/components/foo-table-test.js
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
module('Unit | Component | foo-table', function(hooks) {
setupTest(hooks);
test('property: #sortedList', function(assert) {
const component = this.owner.factoryFor('component:foo-table').create();
const inputs = [
{ bar: 'beta' },
{ bar: 'gamma' },
{ bar: 'alpha' }
];
component.set('myList', inputs);
const expected = [
{ bar: 'alpha' },
{ bar: 'beta' },
{ bar: 'gamma' }
];
assert.deepEqual(component.get('sortedList'), expected, 'list is sorted by bar');
});
});
You can generate a unit test like this: ember generate component-test foo-table --unit
This answer is current for Ember 3.5