1

When passing the JQuery selector to the click() method in emberjs, while testing, the element doesn't get clicked. I'm trying to write a simple acceptance test where an element with an id and an href gets clicked and the URL changes, and then I assert that the page changed.

I added the id to the <a> element id="sidebar-user-profile" and when I try click($('#sidebar-user-profile')) I get the error "Error: Element [object Object] not found.". I tried doing the same, while on the page, in Chrome's console by typing $('#sidebar-user-profile') and it selected that exact element.

I've been trying to get this to work for the past 2 weeks and I'm out of options.

edit: Here's the test that has the error:

test('exists and works /home/user-profile', function(assert) {
  assert.expect(1);
  click('#sidebar-user-profile');
  andThen(function() {
    assert.equal(currentURL(), '/home/user-profile');
  });
});

<li>{{#link-to 'home.user-profile' id="sidebar-user-profile"}}User Profile{{/link-to}}</li>
Miroslav Eremić
  • 11
  • 2
  • `click('#sidebar-user-profile');` – Patsy Issa Jun 05 '15 at 09:31
  • Remember to have the assert wrapped in an `andThen` – Patsy Issa Jun 05 '15 at 09:32
  • Ok, now the error isn't "Error: Element [object Object] not found.", now it's "Error: Element #sidebar-user-profile not found." – Miroslav Eremić Jun 05 '15 at 09:33
  • 1
    Can you add the template code? Also are you on the correct route when the test is running? add a `return pauseTest();` before the click and check that you're in the right place – Patsy Issa Jun 05 '15 at 09:36
  • You might need to add a `visit('/home')` at the start of the test if that's where the link is. – Patsy Issa Jun 05 '15 at 09:38
  • Hmm. I seems that I actually might not be at the right place. Nice catch. Even after I added visit('/home'); I still wasn't at the right place. Looks like the login page takes a bit to go through before it actually lands on the /home page. I need to find a way to skip login. – Miroslav Eremić Jun 05 '15 at 09:45
  • You will need a login helper, or you ll need yo re-open the login route and have it return true – Patsy Issa Jun 05 '15 at 09:50
  • Thank you very much. I was banging my head on the wall trying to figure this out. – Miroslav Eremić Jun 05 '15 at 09:56
  • No problem, If you get stuck on the login helper ping me here ^^ – Patsy Issa Jun 05 '15 at 10:13
  • @Kitler, The login helper only needs to "manually" log me in, before every test, right? My login consists only of two separate clicks on two separate pages. Start page has a "Login" button and the next page has "Login with Google" button which opens a popup which logs you in with your current google account. How do I go about writing the helper so that he waits for the popup to disappear after you click on the button? Because right now i get the error "Error: Popup could not open or was closed". – Miroslav Eremić Jun 05 '15 at 11:18
  • You should stub the signing in with google part and the helper should be an async helper. – Patsy Issa Jun 05 '15 at 11:30
  • I'm afraid I don't know how to stub. The helper is async. I used ember generate to generate it. Is there any resource online that you can point me towards that would help me with stubbing this? – Miroslav Eremić Jun 05 '15 at 11:59
  • The ember room on IRC would be a more suitable place for this. – Patsy Issa Jun 05 '15 at 12:40

1 Answers1

1

Click takes a selector not a jquery object, your test would look something like:

click('#sidebar-user-profile');
andThen(() => {
  assert.equal(currentURL(), `/myurl/new`, 'Should go to new route');
});

Edit: 

test('exists and works /home/user-profile', function(assert) {
  visit('/home'); // route where your link-to is located
  click('#sidebar-user-profile');
  andThen(function() {
    assert.equal(currentURL(), '/home/user-profile');
  });
});
Patsy Issa
  • 11,113
  • 4
  • 55
  • 74