84 lines
2.3 KiB
JavaScript
84 lines
2.3 KiB
JavaScript
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 id="note_1234">note to scroll to</div></div>`);
|
|
|
|
const target = document.querySelector('#note_1234');
|
|
|
|
jest.spyOn(target, 'getBoundingClientRect').mockReturnValue({ top: 200 });
|
|
});
|
|
|
|
afterEach(() => {
|
|
contentTop.mockReset();
|
|
});
|
|
|
|
describe('Observer behavior', () => {
|
|
it('returns null for empty target', () => {
|
|
observer = scrollToTargetOnResize({
|
|
targetId: '',
|
|
container: '#content-body',
|
|
});
|
|
|
|
expect(observer).toBe(null);
|
|
});
|
|
|
|
it('does not scroll if target does not exist', () => {
|
|
observer = scrollToTargetOnResize({
|
|
targetId: 'some_imaginary_id',
|
|
container: '#content-body',
|
|
});
|
|
|
|
triggerResize();
|
|
|
|
expect(document.documentElement.scrollTo).not.toHaveBeenCalled();
|
|
});
|
|
|
|
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();
|
|
});
|
|
|
|
describe('with existing target', () => {
|
|
beforeEach(() => {
|
|
observer = scrollToTargetOnResize({
|
|
targetId: 'note_1234',
|
|
container: '#content-body',
|
|
});
|
|
});
|
|
|
|
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 });
|
|
});
|
|
});
|
|
});
|
|
});
|