I have some code where I am creating a PerformanceObserver in a constructor and I am trying to figure out how to mock it so I can assert both that observe is being called on the observer, and also emulate a performance entry being generated, which would cause the callback to be called, and assert that the callback was in fact called. The code in the constructor looks like this:
const { _tracking } = props;
this.resourceObserver = new PerformanceObserver((list) => {
const resourceEntries = list.getEntriesByType(
'resource',
) as PerformanceResourceTiming[];
for (const resource of resourceEntries) {
resourceObserverCallback(_tracking, resource);
}
performance.clearResourceTimings();
});
this.resourceObserver.observe({ entryTypes: ['resource'] });
Does anyone have any suggestions?
EDIT:
I can assert that observe is called on the observer by creating a createResourceObserver function that either returns a passed-in mock or a real PerformanceObserver, which solves part of the problem, but I'm still not sure how to exercise the observer in a test.
Here's what the function looks like:
createResourceObserver() {
const { _mockObserver, _tracking } = this.props;
if (_mockObserver) {
return _mockObserver;
}
const observer = new PerformanceObserver((list) => {
const resourceEntries = list.getEntriesByType(
'resource',
) as PerformanceResourceTiming[];
for (const resource of resourceEntries) {
resourceObserverCallback(_tracking, resource);
}
performance.clearResourceTimings();
});
return observer;
}