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

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

  •  0
  • Display name  · 技术社区  · 10 月前

    我正在为我的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);
    

    graphic showing desired item to test

    1 回复  |  直到 10 月前
        1
  •  2
  •   NullVoxPopuli    10 月前

    你离得很近!!

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

    参考文献: