1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import { contentTop } from '~/lib/utils/common_utils';
import { scrollToTargetOnResize } from '~/lib/utils/resize_observer';
jest.mock('~/lib/utils/common_utils');
function mockStickyHeaderSize(val) {
contentTop.mockReturnValue(val);
}
describe('ResizeObserver Utility', () => {
let observer;
const triggerResize = () => {
const entry = document.querySelector('#content-body');
entry.dispatchEvent(new CustomEvent(`ResizeUpdate`, { detail: { entry } }));
};
beforeEach(() => {
mockStickyHeaderSize(90);
jest.spyOn(document.documentElement, 'scrollTo');
setFixtures(`<div id="content-body"><div class="target">element to scroll to</div></div>`);
const target = document.querySelector('.target');
jest.spyOn(target, 'getBoundingClientRect').mockReturnValue({ top: 200 });
observer = scrollToTargetOnResize({
target: '.target',
container: '#content-body',
});
});
afterEach(() => {
contentTop.mockReset();
});
describe('Observer behavior', () => {
it('returns null for empty target', () => {
observer = scrollToTargetOnResize({
target: '',
container: '#content-body',
});
expect(observer).toBe(null);
});
it('returns ResizeObserver instance', () => {
expect(observer).toBeInstanceOf(ResizeObserver);
});
it('scrolls body so anchor is just below sticky header (contentTop)', () => {
triggerResize();
expect(document.documentElement.scrollTo).toHaveBeenCalledWith({ top: 110 });
});
const interactionEvents = ['mousedown', 'touchstart', 'keydown', 'wheel'];
it.each(interactionEvents)('does not hijack scroll after user input from %s', (eventType) => {
const event = new Event(eventType);
document.dispatchEvent(event);
triggerResize();
expect(document.documentElement.scrollTo).not.toHaveBeenCalledWith();
});
});
});
|
