JS-使用IntersectionObserver的测试代码 [英] JS - Testing code that uses an IntersectionObserver

问题描述

我的应用程序中有一个(写得不好)的javascript组件，可以处理无限滚动分页，并且我正尝试将其重写为使用IntersectionObserver，如

I have a (rather poorly written) javascript component in my application that handles infinite scroll pagination, and i'm trying to rewrite it to use the IntersectionObserver, as described here, however i'm having issues in testing it.

是否有一种方法可以驱动QUnit测试中观察者的行为，即使用测试中描述的某些条目来触发观察者回调?

Is there a way to drive the behavior of the observer in a QUnit test, i.e. to trigger the observer callback with some entries described in my tests?

我想出的一个可能的解决方案是在组件的原型中公开回调函数，并在我的测试中直接调用它，如下所示:

A possible solution I have come up with is to expose the callback function in the component's prototype and to invoke it directly in my test, something like this:

InfiniteScroll.prototype.observerCallback = function(entries) {
    //handle the infinite scroll
}

InfiniteScroll.prototype.initObserver = function() {
    var io = new IntersectionObserver(this.observerCallback);
    io.observe(someElements);
}

//In my test
var component = new InfiniteScroll();
component.observerCallback(someEntries);
//Do some assertions about the state after the callback has been executed

我不太喜欢这种方法，因为它暴露了组件内部使用IntersectionObserver的事实，这是我认为客户端代码不应该看到的实现细节，因此有什么更好的方法可以测试这个吗?

I don't really like this approach since it's exposing the fact that the component uses an IntersectionObserver internally, which is an implementation detail that in my opinion should not be visible to client code, so is there any better way to test this?

对不使用jQuery的解决方案的热爱:

Bonus love for solutions not using jQuery :)

推荐答案

这里是基于先前答案的另一种替代方法，您可以在beforeEach方法中或在.test.js文件的开头运行它.

Here's another alternative based on previous answers, you can run it inside the beforeEach methods, or at the beginning of the .test.js file.

您还可以将参数传递给setupIntersectionObserverMock以模拟observe和/或unobserve方法，以使用jest.fn()模拟功能对其进行监视.

You could also pass parameters to the setupIntersectionObserverMock to mock the observe and/or unobserve methods to spy on them with a jest.fn() mock function.

/**
 * Utility function that mocks the `IntersectionObserver` API. Necessary for components that rely
 * on it, otherwise the tests will crash. Recommended to execute inside `beforeEach`.
 * @param {object} intersectionObserverMock - Parameter that is sent to the `Object.defineProperty`
 *      overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
 *      mock the intersection observer, but its methods.
 */
export function setupIntersectionObserverMock({
  observe = () => null,
  unobserve = () => null,
} = {}) {
  class IntersectionObserver {
    observe = observe;
    unobserve = unobserve;
  }
  Object.defineProperty(
    window,
    'IntersectionObserver',
    { writable: true, configurable: true, value: IntersectionObserver }
  );
  Object.defineProperty(
    global,
    'IntersectionObserver',
    { writable: true, configurable: true, value: IntersectionObserver }
  );
}

这篇关于JS-使用IntersectionObserver的测试代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！