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

Questions

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

July 22, 2024

I’m writing tests for my Ember components. Once 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 code breaks my scrolling setup. 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);

>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: