I' trying to write an integration test that checks to see if an item is added to the DOM when a button is clicked. Here is the user interaction I'm trying to test:
- The user clicks a button on
foos#index. That marks the individual foo as a "favorite," and adds a class to the button to reflect that. - The user can then go to a quickmenu at the top to see a list of favorited foos. The current foo should be present in that list.
Currently, the assertion for 1 works just fine. However, when I try to write an assertion for 2, it fails.
This is the test:
test('user can navigate between favorited foos', function() {
visit('/');
click('table > tbody > tr > td > i');
andThen(function() {
equal(find('table > tbody > tr > td > i.fa-star').length, 1);
click('ul.navbar-nav > li#favorites-list > a.dropdown-toggle > i.fa-star');
andThen(function() {
equal(find('li#favorites-list > ul.dropdown-menu > li').length, 1); // fails here
});
});
});
When I run this test, the final test fails with this error: Error: Element li#favorites-list > ul.dropdown-menu li not found. li#favorites-list > ul.dropdown-menu is present, so I'm not sure why it wasn't added to the favorites list. I logged various variables in the action that is fired when the favorites button is pressed, and everything looked fine. When I try it myself in development and production, it also works fine.
I should probably mention that the menu is populated by looping through a property in the controller:
userFavorites: function() {
return this.get('session.account.favorites');
}.property('session.account.favorites')
In this property, I logged this.get('session.account.favorites') to check that the favorites are updating, and they contain the foos that were favorited in the test. Basically, it works fine until it actually inserts the new foos into the menu.
Why would this work all right everywhere except the test environment? The button is clicked, the action does fire, but it doesn't recognize that the DOM was updated.
Aucun commentaire:
Enregistrer un commentaire