Acceptance tests with ember-paper


#1

Hi,

I try to write an acceptance test for our login. When I try to use the test method click(myButtonElement) nothing happens.

My tests:

click(myButtonElement)
click(find('[data-test-submit]"))

What is the correct way to make a click on an element? This is the snippet from my test:

...

andThen(function() {
    assert.equal(find('[data-test-loggedin-profile]').length, 0);
    click(find('[data-test-login-form-submit]')); // After this line nothing happens ...?!?
});

andThen(function() {
    assert.equal(currentURL(), '/');
    assert.equal(find('[data-test-loggedin-profile]').length, 1);
});

...

Greetings, Mario


#2

Hey Mario, one thing I noticed just looking at the code you posted is that a click helper is asynchronous, so you should always use it outside of any andThen block. So I would rewrite the one snippet like so:

andThen(function() {
    assert.equal(find('[data-test-loggedin-profile]').length, 0);
});

click(find('[data-test-login-form-submit]'));

andThen(function() {
    assert.equal(currentURL(), '/');
    assert.equal(find('[data-test-loggedin-profile]').length, 1);
});

Another thing which I’d highly recommend is using ember-cli-page-object. The examples on their docs site are really the best way to get a handle on how it’s used, but… essentially you create these “Page Objects” which are an abstract representation of the page and all the jquery selectors and test selectors, then give them functions. Then in your test instead of writing ‘find’ and ‘click’ a bunch along with a lot of repeated jquery selectors, you just reference the page object. It saves code repetition, makes the tests look a lot cleaner, and the page objects are reusable across tests. It’s a great addon and I can’t recommend it highly enough.


#3

Hi @dknutsen

Thanks again for this tipp. I have adapt my test by your tipp with the async methods.

Greetings Mario


#4

Awesome! Glad you got it working. Good luck with all your embering!