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

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

qunit ember.js testing

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 年前

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');

参考文献:

推荐文章

Shawn · 如何在组件内部完成余烬操作后重定向

8 年前

Sow Hari · 使用余烬计算属性(过滤器)过滤模型,并使用余烬模型表2以表格格式显示。没有可显示的记录

8 年前

AmazingDayToday · Ember:如何获取在Route->Model返回的文件的值

8 年前

Nikolay Shcherba · 在模型挂钩之前使用ember simple auth-in进行身份验证

8 年前

Alexandro · 使用Express和Ember启动web应用程序

8 年前

pbanka · 我的Typescript/Ember 3.1应用程序中有一个枚举,运行时出现导入错误。发生什么事了?

8 年前

Vikrant Siwach · 是否在验收测试中覆盖幻影响应?

8 年前

Androidicus · 余烬/把手:带参数数组的本地化辅助对象

8 年前

Thomas Anuragh27crony · 在余烬组件的生成上下文上测试属性

8 年前

Michel Fernandes · 部署EmberJS前端应用程序[已关闭]

8 年前