How to resize chrome window for ember acceptance test?

Question

Simple case: hamburger menu for small displays, need to test it.

The question is: how to change display size for chrome browser in ember.js test env?

Addition: only for one test

Answer 1

To answer the question directly: as of writing there is no way to resize a Chrome window during an acceptance test.

The allowed Chrome APIs seem to always be in flux, but as of today I'm able to open a new popup window from a Chrome window and then make assertions against the popup.

this.popup = window.open('/index.html?inTestPopup', 'resizable', `resizable=yes`);
this.popup.resizeTo(200, 500);

You can see an example of this approach in my Ember addon, Ember Screen.

However this is an awkward and fragile way to approach an acceptance test for your application. I suggest that you decide whether a true "end-to-end" (black box) test is valuable enough to justify the cost over a cheaper, white box style, unit test.

For an end-to-end test you should consider running tests against real devices (phones, tablets, computers). Using a service like browserstack or using configuration options in a test runner like testem (as @jelhan suggested) is a more economical approach. Granted these approaches don't actually fulfill the requirement of changing the display size during a test. Still it's probably a good trade-off of expense vs value for testing.

If a unit-testing approach is more appropriate for your application you could investigate a library like ember-screen. It provides a layer between window APIs and your application that supports straightforward stubbing in unit tests. However this approach is coupled to the implementation details or your application: it requires that you handle the relevant display changes in JavaScript rather than CSS media queries.

Unfortunately there is no one-size-fits-all approach here. For an Ember acceptance test, my first move would be to make sure that the tests function for both "desktop" and "mobile" sizes. In other words, if the hamburger is there, click it before choosing a menu item. If it's not there, just pick the menu item directly. Then you can run your acceptance testing with different width configurations and make sure that all tests pass. If a unit testing approach seems more economical, reach for Ember Screen's unit testing approach. If device testing is mission critical, assess a service like Percy, BrowserStack, or a custom testing rig.