代码之家 › 专栏 › 技术社区 › Display name

在qunit中,如何查询滚动条高度或检测元素上是否存在滚动条?

qunit ember.js testing

0

Display name · 技术社区 · 1 年前

我正在为我的Ember组件编写测试。一个更微妙的问题是让一个特定的元素滚动,而不在其他地方生成滚动条。

我正在尝试编写一个测试,它将告诉我代码何时破坏了我的滚动设置。我尝试了各种语法和策略。get不起作用,因为scrollHeight不是属性。qunit访问器没有get属性值。qunit hasProperty允许我检测一个属性是否具有特定值,但不能检测它是否超过或低于另一个属性,也不能检测它与另一个特性的任何比较。

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

var hasVerticalScrollbar = scrollElement.get('scrollHeight') > scrollElement.get('clientHeight');

assert.true(hasVerticalScrollbar);

更新以显示工作答案:

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

如何测试BODY元素是否没有滚动条:

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

1 回复 | 直到 1 年前

1

2

NullVoxPopuli 1 年前

你离得很近!!

assert.dom不返回元素,元素和没有 get 房产,所以你可能想看看 scrollHeight 和 clientHeight 直接:

例如,在 My ember-primitives project ,我计算滚动顶部位置如下:

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

  return element.scrollHeight - element.clientHeight;
}

所以你可以定义一个 hasScrollBar 这样地:

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;
}

这是 an example set of tests 用于使用滚动位置。

使用 @ember/test-helpers ,您可以通过选择器自信地获取元素(忽略测试容器外的元素)

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

// ...

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

// ...

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

参考文献: