Components should be tested using integration tests. In this recipe, we'll look at a simple example of a component that changes the size of the text.
font-sizer
:$ ember g component font-sizer
This will generate a new component called font-sizer
. This component will be used to resize text.
font-sizer.js
file in the components
folder:// app/components/font-sizer.js import Ember from 'ember'; export default Ember.Component.extend({ textInfo: 'Hello World', attributeBindings: ['style'], style: Ember.computed('size',function() { const size = this.get('size'); return new Ember.Handlebars.SafeString("font-size: "+ size); }) });
All components render as div
tags inside of templates. We can add different attributes to these div
tags if needed. In this case, the attributeBindings
property will add a style
tag. The style
tag will be a computed property that updates whenever a size
value changes. Ember.Handlebars.SafeString
lets Ember know that the string should be displayed without escaping and that it is safe.
application.hbs
file with the new component:// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> {{#font-sizer size="38px" }} Test {{/font-sizer }} {{outlet}}
The font-sizer
component is in block form. The test text will be in the div
block.
font-sizer-test.js
file so that we can check to make sure that the attribute was added:// tests/integration/components/font-sizer-test.js import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; moduleForComponent('font-sizer', 'Integration | Component | font sizer', { integration: true }); test('check attributes', function(assert) { this.render(hbs`{{font-sizer size=val}}`); this.set('val','38px'); assert.equal(this.$('div').attr('style'),'font-size: 38px', 'size is set to 38px'); });
This code is automatically generated for us when we created the component. The moduleForComponent
helper is used for components. The integration
: true
tags this test as an integration test. By doing this, we have the ability to render the component and pass the size
property to it. The assert.equal
method is used to check whether font-size
is set correctly.
ember server
and check /tests
:We can simulate actions and test the results to verify the expected results.
font-sizer.js
file with a new action:// app/components/font-sizer.js … textInfo: 'Hello World', }), actions: { updateText(){ this.set('textInfo','Hi'); } } });
This new action will set the textInfo
property to 'Hi'
.
font-sizer.js
file in the components
folder:// app/templates/components/font-sizer.hbs <div id='info'>{{textInfo}}</div><br> {{yield}}<br> <button {{action 'updateText'}}>Update Text</button>
In this template, we created a new div
tag with an ID of info
surrounding the textInfo
property. A new updateText
action was added to the button
click. This action updates the textInfo
property.
font-sizer-test.js
file so that it can check the new action added:// tests/integration/components/font-sizer-test.js … test('check action', function(assert) { assert.expect(2); this.render(hbs`{{font-sizer}}`); assert.equal(this.$('#info').text(), 'Hello World', |'starting text is hello world'); this.$('button').click(); assert.equal(this.$('#info').text(),'Hi', 'text changed to hi'); });
By setting assert.expect(2)
, the test must have two asserts or it will fail. We first render the component using the this.render
helper. The next statement checks whether the value returned from this.$('#info').text()
equals Hello World
. We then simulate clicking the button. The last statement checks whether this.$('#info').text()
equals Hi
.
ember server
and navigate to /tests
. All the tests will pass: