Ember Test Case for a CRUD Application with mirage

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

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

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

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

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

routes/index.js

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.

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

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.

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!

Related posts:

The first steps in optimizing your SaaS product photography (or any image on your website) is to first begin with creating stellar photos. After that, the majority of the optimization process is done…

Aristotle was right when he said, “There is nothing in the intellect that has not been in the senses before.” Our senses serve as the conduit for getting information to the brain. As sensory input…

The installation of ccmake has been bothering me for a long time. And I finally get the concise way to solve this problem gracefully. When googling the solution to install ccmake, most of the answers…