Testing UI and Device Media Types

Testing
1

Hello Everyone,

Is there a way to manipulate the testing ui generated by ember test --server to simulate a mobile device, to validate the responsiveness of my application?
I’m using ember-responsive and even if I choose an iphone in the device emulator in google chrome, the media service of ember-responsive does not report a mobile device. Furthermore manually printing the device viewport dimensions from my application test with:

    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
    console.log("vw here: ", vw);
    console.log("vh here: ", vh);

reports different dimensions than the chrome emulator. The Iphone 6/7/8 dimensions are 375 by 667 while the code above generates device dimensions of 640 by 1139.
See the attached screenshot below.

Screenshot from 2020-09-28 10-29-52
Screenshot from 2020-09-28 10-29-521920×1080 204 KB

2

The QUnit browser UI isn’t necessarily reflective of what QUnit is doing behind the scenes. @ijlee2 had a recent blog post which sums this up way better than I could: Container Queries: Cross-Resolution Testing – crunchingnumbers(a)live

Hopefully that helps point you in the right direction

1 Like
3

That BlogPost is great.
I haven’t gotten the chance to try it out yet but the idea of dynamically setting the window of the test robot with an environment variable in testem.js seems right.

I’ll confirm this works for me when I do try this out.
Thanks

1 Like
4

Thanks, @dknutsen!

@zinhart I’m glad to hear that the blog post helped. Look forward to hear how your implementation went!

5

Like you said in your article it would be nice to have testing support for multiple resolutions.
Even though Percy is outside of my needs at this time, the most enabling part of your article was simply pointing out how ember-qunit scales the test window with the #ember-testing style.
From there it was pretty easy to write my own hack to modify the testing window as needed.