Ember Test Case for a CRUD Application with mirage

RAJA S
RAJA S
Mar 4 · 4 min read

I have been working in emberjs since 2018. I felt, Ember does not have enough documentation and contributions to open source communities such as StackOverflow, Github compare with other javascript frameworks.

I realized many developers are looking for examples of ember tests. In this tutorial, I have covered how to write UNIT, Acceptance and Integration test for an ember application. I will demonstrate with a CRUD application example. I have assumed that you are already familiar with the mirage and basics of ember testing. So this tutorial will have only examples rather than theoretical explanations.

Required Dependencies:

  • ember install ember-cli-mirage (Used to mock the back end API call)
  • ember install ember-cli-code-coverage
  • qunit-dom
  • ember-qunit

ember-cli-mirage

If you are going to write the test case for any ember addons, the mirage should be residing inside the tests folder dummy app.

ember-cli-code-coverage

This addon will be useful to see the result of your code coverage. After installing this addon you will have to change the testem.js file of your application in the following way. Click this link testem.js

Coverage will only be generated when an environment variable is true (by default COVERAGE) and running your test command like normal.

COVERAGE=true ember test -s

After tunning this command, the coverage folder will be created in the root folder of your application. open coverage/index.html in your browser and you can see the coverage of all files as in the below screenshot.

CRUD Application

To get started clone the following application from my GitHub . Click the link CRUD Application. Run the below command to see the test cases

COVERAGE=true ember test -s

Once you run the application and you will see the app as in the below screenshot

ember s

Our Application has two routes(#/users-list and #/create-user). Let's start to write the test case.

Acceptance Test

We should test the application flow from user’s perception, which is called the acceptance test. Following items are our application flow

  1. When a user opens the application, he will be redirected to the /users-list page from the index route.

routes/index.js

beforeModel() {  this.replaceWith('users-list');}

2. When a user clicks on the Create User button in /users-list, It will be redirected to /create-user page.

3. After the user fills the form, clicks on the “Create User” button, we should redirect to /users-list page.

These three flows are covered in our Acceptance test. Please refer the following files

acceptance/users-list.js

acceptance/create-user-test.js

We have covered all the flows in our application test. Next we are going to see, UNIT test.

UNIT Test for routes:

routes unit test should be covered the following items.

  1. Check whether the route model has been loaded or not.
  2. Test all the actions of routes
  3. Test all the functions of routes.

unit/routes/users-list-test.js

unit/routes/create-user-test.js

unit test for adapters

In our CRUD application, user model’s adapter is using the different endpoint for urlForFindAll() and urlForDeleteRecord().

app/adapters/user.js

urlForFindAll() {  return this._super(...arguments) + '/findAll';},urlForDeleteRecord() {  return this._super(...arguments) + '/destroy';}

We should test this in the following way.

unit/adapters/user-test.js

Integration Test

The following items should be covered in the integration test of a component.

  1. All actions should be tested.
  2. Test any conditional rendering in the templates. Refer to our textbox-input.hbs
{{#if showError}}  <div class="field-error">    {{v-get model errorProp "message"}} </div>{{/if}}

3. All the private functions of the component.

I have a calculator component in our application for the learning purpose of integration testing.

integration/components/calc-test.js

Conclusion:

I have finished my tutorial. I hope, you enjoyed this tutorial. Thanks for reading!

Example Source Code https://github.com/srajas0/ember-test-cases

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade