How To: CRUD with Validation in Ember.js Using ember-easyForm, ember-validations, and Boostrap

Step 5. Show Product Details

Next, we will create the products/show template to show the details of a given product. The template will also include buttons to edit or delete the product, and a link to return to the products index page.

Add to index.html:

<script type="text/x-handlebars" data-template-name="products/show">
  <h2><span class="name">{{name}}</span></h2>
  <p>By <span class="author">{{author}}</span></p>
  <p><strong>$<span class="price">{{price}}</span></strong></p>
  <p><span class="description">{{description}}</span></p>
  <p class="action-buttons"><button type="button" class="btn btn-default edit-button" {{action "edit" model}}><span class="glyphicon glyphicon-pencil"></span></button>
      <button type="button" class="btn btn-default delete-button" {{action "delete" model}}><span class="glyphicon glyphicon-remove"></button></p>
  <p>{{#link-to 'products' class="index-link"}}Back to products index{{/link-to}}</p>
</script>

Since we have already defined the delete action in ProductsRoute, it can also be used by ProductsShowRoute (automatically generated by Ember.js) because the action will bubble up from ProductsShowRoute to ProductsRoute. So the delete button in this template will already work without writing any additional code.

Now, let us write some tests. First, let us test that the “Show” links in /products work.

Add to tests.js under the “Integration: Products Index” module:

test('show link works', function() {
  expect(3);
  var productID = 3;

  visit('/products').then(function() {
    click('#product' + productID + ' td.name a').then(function() {
      equal(currentRouteName(), 'products.show');
      equal(currentPath(), 'products.show');
      equal(currentURL(), '/products/' + productID);
    });
  });
});

Next, we will add three tests to test the product display page. The first test will check that the product information is displayed accurately and matches what is in the data store. The second test will verify that the “Delete” button on the product detail page works, and that the user is redirected back to the index page where the deleted item is not displayed. The third test will ensure that the index link works and brings the user back to the index page.

Append to tests.js

module('Integration: Products Show', {
  setup: function() {
    App.reset();
    App.resetFixtures();
  }
});

test('product renders', function() {
  expect(7);
  var productID = 1;

  visit('/products/' + productID).then(function() {
    equal(currentRouteName(), 'products.show');
    equal(currentPath(), 'products.show');
    equal(currentURL(), '/products/' + productID);
    var product = App.Product.FIXTURES.findBy('id', productID.toString());
    equal(find('h2').text(), product.name);
    equal(find('.author').text(), product.author);
    equal(find('.price').text(), product.price);
    equal(find('.description').text(), product.description);
  });
});

test('delete button works', function() {
  expect(4);
  var productID = 2;

  visit('/products/' + productID).then(function() {
    click('.delete-button').then(function() {
      equal(currentRouteName(), 'products.index');
      equal(currentPath(), 'products.index');
      equal(currentURL(), '/products');
      equal(find('#product' + productID).length, 0);
    });
  });
});

test('index link works', function() {
  expect(3);
  var productID = 4;

  visit('/products/' + productID).then(function() {
    click('.index-link').then(function() {
      equal(currentRouteName(), 'products.index');
      equal(currentPath(), 'products.index');
      equal(currentURL(), '/products');
    });
  });
});

You can get the code for this step by running:

git checkout step-5
Advertisements

5 thoughts on “How To: CRUD with Validation in Ember.js Using ember-easyForm, ember-validations, and Boostrap

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s