In qunit, how to query the scrollbar height or detect if a scroll bar is present on an element?

I'm writing tests for my Ember components. One of the more delicate issues is getting a specific element to scroll while not generating scroll bars elsewhere.

I'm trying to write a test that will tell me when my scrolling setup becomes broken. I've tried a variety of syntaxes and strategies. get doesn't work as scrollHeight is not a property. The qunit accessors don't have a get property value. qunit hasProperty lets me detect if a property has a specific value, but not if it's over or under or any comparison to another property.

    const scrollElement = assert.dom('[data-test-user-list-ul-element]');
    var hasVerticalScrollbar = scrollElement.get('scrollHeight') > scrollElement.get('clientHeight');
    assert.true(hasVerticalScrollbar);

UPDATE TO SHOW WORKING ANSWER:

    const element = find('[data-test-user-list-ul-element]');
    const isThereADifference = element.scrollHeight - element.clientHeight;
    assert.true(isThereADifference > 0);

HOW TO TEST THE BODY ELEMENT FOR NO SCROLL BARS:

    const element = this.element;
    const isThereADifference = element.scrollHeight - element.clientHeight;
    assert.true(isThereADifference === 0);

Solution

you're very close!!

assert.dom doesn't return an element, and elements and don't have a get property, so you probably want to look at scrollHeight and clientHeight directly:

For example in My ember-primitives project, I calculate the scroll-top position like this:

function getTop(element?: Element | null | undefined) {
  assert('Could not find scroller', element);

  return element.scrollHeight - element.clientHeight;
}

so you could define a hasScrollBar like this:

function hasScrollbar(element?: Element | null | undefined) {
  assert(`Can't check if a scrollbar exists on an element, if the element doesn't exist`, element);

  return element.scrollHeight === element.clientHeight;
}

Here is an example set of tests for working with scroll position.

Using @ember/test-helpers, you can confidently acquire the element via selector (ignoring elements outside of your test container) via

import { find } from '@ember/test-helpers';

// ...

const scrollElement = find('[data-test-user-list-ul-element]');

// ...

assert.true(hasScrollbar(scrollElement), 'element has a scrollbar');

References: