Ember.js: Tutorial — Part 1: Automated Testing

Lessons

1. The purpose of automated testing
2. Use generator in
   Ember CLI
   ¹
3. Write an acceptance test
4. Test with QUnit
   ²
   testing framework
5. Work with
   Ember
   ³
   test helpers
6. Practice testing workflow

1. The purpose of automated testing

• Know at least that everything is actually working
• Give confidence that other pages still work after a change
• Make sure that a change in one area did not break other areas
• Acts like a checklist that computer checks

2. Use generator in Ember CLI

2.1. Generate super-rentals acceptance test

NOTE

• generate is Ember CLI's generator command
  • g is a shorthand for generate
  • It consists of <type> and <name>
    • <type> is what blueprint to generate
    • <name> is what to call it

3-5. Write an acceptance test

IMPORTANT

This section include lessons for:

• 4. Test with QUnit testing framework
• 5. Work with Ember test helpers

3-5.1. Edit super-rentals acceptance test

The acceptance test above does the following:

1. Visit / URL (same as visiting localhost:4200)
2. Assert current URL is similar with visited URL (/)
3. Assert heading contains Welcome to Super Rentals text
4. Assert anchor tag with class button inside jumbo class contains About Us text
5. Click anchor tag with class button inside jumbo class
6. Assert current URL is similar with clicked anchor URL (/about)

NOTE

• Acceptance test is also known as application test
  • It is one of Ember's few types of automated tests
  • It tests from a user's perspective (click then see if it works)
• await keyword waits until page fully loads before executing its code
• assert keyword asserts what and how things should behave (alerts if not)
• test and module are QUnit keywords
• click, visit and currentURL are Ember test helper keywords

3-5.2. Run super-rentals acceptance test

NOTE

• t -s is a shorthand for test --server
  • test --server runs all tests with a browser and directs to test UI
  • --server runs test server with a browser that directs to test UI
  • Test UI can be visited manually at localhost:7357
• t without other options runs all tests in console
  • e.g. ember t
• -f runs a specific test case
  • e.g. ember t -f 'visiting /'
• -m runs a specific test module
  • e.g. ember t -m 'Acceptance | super rentals'
• -f -m combination runs a specific test case in a specific test module
  • e.g. ember t -s -f 'visiting /' -m 'Acceptance | super rentals'

6. Practice testing workflow

6.1. Add /about route acceptance test

6.2. Add /getting-in-touch route acceptance test

6.3. Run all tests

NOTE

• Tests do not affect app's functionalities but prevents regressions
• Test UI auto-reloads and re-runs entire test suite on file change
  • It is recommended to keep it open while developing the app

References

• Automated Testing
• Ember CLI
  ¹
• QUnit
  ²
• Ember
  ³