Lessons
- The purpose of automated testing
- Use generator in
Ember CLI
1 - Write an acceptance test
- Test with QUnit
2
testing framework - Work with
Ember
3
test helpers - 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 forgenerate
- 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:
- Visit
/
URL (same as visiting localhost:4200) - Assert current URL is similar with visited URL (
/
) - Assert heading contains
Welcome to Super Rentals
text - Assert anchor tag with class
button
insidejumbo
class containsAbout Us
text - Click anchor tag with class
button
insidejumbo
class - 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 codeassert
keyword asserts what and how things should behave (alerts if not)test
andmodule
are QUnit keywordsclick
,visit
andcurrentURL
are Ember test helper keywords
3-5.2. Run super-rentals
acceptance test
NOTE
t -s
is a shorthand fortest --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