CODEWITHSUNDEEP
ember.jsember-testing
Keo
Keo

Reputation: 1153

How to get property from component when testing?

How can I check component's property value when component doesn't have template? In application the component is extended and template is provided that way.

//my-component.js
export default Ember.Component.extend({
    foo: 'bar'
});

//my-component-test.hbs
integration: true;
test('it renders', function(assert) {
  this.set('foo2', 'foo2');
  this.render(hbs`{{my-component foo=foo2}}`);
  assert.equal(/* ??? */, 'foo2');
});

I am not able to use this.render(hbs'{{#my-component foo=foo2}}{{foo}}{{/my-component}}'); because foo is not yielded. Accessing component directly is not possible either.

Upvotes: 3

Views: 2076

Answers (2)

ykaragol
ykaragol

Reputation: 6221

In an integration test, think a component as a box. Assign values to it and retrieve notifications/events from that component. For example, bind a value to a component and use it (push a button/enter a value etc.) then check the value.

Also in an integration test, you can check component's rendering with jquery. Such as:

  assert.equal(this.$("td").length, 6);

In your case maybe a unit test suitable for you. Ember Unit Testing

Upvotes: 0

Keo
Keo

Reputation: 1153

And the solution is to use unit test instead.

import { moduleForComponent, test } from 'ember-qunit';

moduleForComponent('forms/base-form', 'Unit | Component | forms/base-form field', {
  unit: true
});

test('it renders', function(assert) {
  const foo2 = 'foo2';
  const component = this.subject({foo: foo2});
  assert.equal(component.get('foo'), 'foo2');
});

Upvotes: 4

Related Questions