In an Ember.js Octane Acceptance Test, how do I query and/or set the test window height?

Question

I have an acceptance test to ensure that a PDF viewer on a specific route isn’t accidentally sized incorrectly. Due to a convergence of prior choices and the way the embed tag works, the viewer can sometimes become truncated when seemingly unrelated elements are restyled. This is there to warn me that this has occurred, and it works.

EXCEPT, on some test machines, with really small displays, the test will fail. Trying to reproduce the problem, when running with the --server option, I can make the test fail by making the test window very narrow.

How do I control/test for this?

I don’t see any method to either get the screen size or set it. The ember forum states that I should ask these kinds of questions here.

Thanks in advance!

The variance represents all the cumulative borders, margins, etc. between the outer element and the actual viewer. This remains consistent except when the display is very, very narrow and some elements need to wrap.

    await visit('/code-nav');
    await fillIn('[data-test-code-nav-selector]', 'PDF_I10_PCS_REFERENCE_MANUAL');

    let applicationYieldWrapper = find('[data-test-application-yield-wrapper]');
    let applicationYieldWrapperHeight = applicationYieldWrapper.offsetHeight;

    await waitFor('[data-test-pdf-viewer]');
    let pdfViewer = find('[data-test-pdf-viewer]')
    let pdfViewerHeight = pdfViewer.offsetHeight;
    
    let variance = 136; // borders, margins, etc.

    assert.equal(pdfViewerHeight + variance, applicationYieldWrapperHeight);

Answer 1

There are a few different ways to change the height:

browser arguments, configured in testem.js: https://github.com/ember-cli/ember-new-output/blob/v5.8.1/testem.js#L19 default in ember 5.8 is --window-size=1440,900

And then you have the #qunit-fixture and #ember-testing elements on the page where the app is rendered in to -- these can be changed with CSS

In a default ember-app, the #ember-testing element half-scale of a real app. And its dimensions are determined by the containing element: which, by default, should be half the width and half the height passed to testem.

At runtime, you can manually query these elements and change their height -- but since you'd also need to be worried about cleanup, my preference is to use the hooks pattern, much like setupRenderingTest(hooks) or setupApplicationTest(hooks) -- that would look something like this:

setupRenderingTest(hooks);

module('1080p', function (hooks) {
  setContainerSize(hooks, 1920, 1080);

  test('...', );
  // ...

module('720p', function (hooks) {
  setContainerSize(hooks, 1280, 720);

  test('...', );
  // ...

function setContainerSize(hooks, width, height) {
  let initialWidth;
  let initialHeight;

  hooks.beforeEach(function () {
    let container = document.querySelector('#ember-testing-container');    
    initialWidth = container.style.width;
    initialHeight = container.style.height;

    Object.assign(container.style, {
      width: `${width}px`,
      height: `${height}px`,
    };
  });

  hooks.afterEach(function () { 
    let container = document.querySelector('#ember-testing-container');    

    Object.assign(container.style, {
      width: `${initialWidth}px`,
      height: `${initialHeight}px`,
    };
  })
}

Note that this code isn't tested and may have bugs, but this "should be" this gist of the strategy