A PHP Error was encountered

Severity: Warning

Message: filemtime(): stat failed for D:\xampp_old\htdocs\ebookreading.net\application\writable1/ci_session4f8860efd318820939b21623e1ac2a08hn9mjucdnd2et24uba0rmojucjela5eo

Filename: controllers/Base.php

Line Number: 44

Backtrace:

File: D:\xampp_old\htdocs\ebookreading.net\application\controllers\Base.php
Line: 44
Function: filemtime

File: D:\xampp_old\htdocs\ebookreading.net\application\controllers\View.php
Line: 10
Function: __construct

File: D:\xampp_old\htdocs\ebookreading.net\index.php
Line: 380
Function: require_once

Testing components

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 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.

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

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

  5. Run ember server and check /tests:
    How to do it...

    The test case passed

Testing actions in the font-sizer component

We can simulate actions and test the results to verify the expected results.

  1. Using the existing application, update the 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'.

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

  3. Add a new test to the 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.

  4. Run ember server and navigate to /tests. All the tests will pass:
    Testing actions in the font-sizer component

How it works...

Components use integration tests by way of the moduleForComponent helper. This feature of Ember's QUnit takes advantage of how Ember actually sees your components. You can test bound values as well as the returning actions.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.223.119.155