Ember.js Cookbook

Testing components

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.

How to do it...

1. In a new application, create a new component called font-sizer:

   $ ember g component font-sizer
   

   This will generate a new component called font-sizer. This component will be used to resize text.

2. Update the 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 ...