Pause test

In this video we'll take a look at Ember's pauseTest() helper. With two short exercises you'll learn how to debug test failures and quickly setup your application with transient state.

Today I want to show you pauseTest, which is one of my favorite test helpers in Ember. As that name suggests, pauseTest let's you pause your tests as they are running, which is helpful for debugging test failures.

So on EmberMap.com when a user is logged into their account they should see their avatar in the header. We've got a test for this, but it's failing. Looking at the test code there's nothing obvious to why it's failing, so I'll use pauseTest to see what's going on.

Now if I go back to the runner I see it's stopped when it hits pauseTest. I can interact with the application and even run commands in the developer console. If I try searching for the CSS selector my tests are using I can see that it can't be found.

I can dig a little deeper by inspecting the user's avatar element and right away I can see that my test is using the wrong class name. The test is looking for the avatar, but the element has the user-avatar class. Once I update the test it starts passing.

Another use case for using pauseTest is to put your application into various states by using test code. Here let me show you what I mean.

I've got a subscription form where I want to display an error if the credit card number is invalid. In order to work on this I have to open up the subscription page, fill out the form, and enter a bad credit card. Since ember-cli live reloads every time a file is changed I'll be repeating these steps a handful of times as I work on this feature.

To start I've written a test for this behavoir. It simply fills out the form with a bad card number and assert there's an error. It passes, so I know the code is working corretly, but the test runs so fast I can't see any UI.

What I can do is use pauseTest to freeze the the runner as soon as it fills out the form. This way I can see the invalid credit card message without having to manually fill anythign out. I can adjust styling, text, change my components, and each time I save a file ember-cli will automatically reload and put my application in this state.