debian-mirror-gitlab/spec/frontend/lib/utils/dom_utils_spec.js

212 lines
5.3 KiB
JavaScript
Raw Normal View History

2020-07-28 23:09:34 +05:30
import {
addClassIfElementExists,
canScrollUp,
canScrollDown,
parseBooleanDataAttributes,
2021-01-29 00:20:46 +05:30
isElementVisible,
isElementHidden,
2021-11-11 11:23:49 +05:30
getParents,
2020-07-28 23:09:34 +05:30
} from '~/lib/utils/dom_utils';
2019-02-15 15:39:39 +05:30
const TEST_MARGIN = 5;
2017-09-10 17:25:29 +05:30
describe('DOM Utils', () => {
describe('addClassIfElementExists', () => {
const className = 'biology';
const fixture = `
<div class="parent">
<div class="child"></div>
</div>
`;
let parentElement;
beforeEach(() => {
setFixtures(fixture);
parentElement = document.querySelector('.parent');
});
it('adds class if element exists', () => {
const childElement = parentElement.querySelector('.child');
2018-12-13 13:39:08 +05:30
2017-09-10 17:25:29 +05:30
expect(childElement).not.toBe(null);
addClassIfElementExists(childElement, className);
2020-01-01 13:55:28 +05:30
expect(childElement.classList).toContainEqual(className);
2017-09-10 17:25:29 +05:30
});
it('does not throw if element does not exist', () => {
const childElement = parentElement.querySelector('.other-child');
2018-12-13 13:39:08 +05:30
2017-09-10 17:25:29 +05:30
expect(childElement).toBe(null);
addClassIfElementExists(childElement, className);
});
});
2019-02-15 15:39:39 +05:30
describe('canScrollUp', () => {
2021-03-08 18:12:59 +05:30
[1, 100].forEach((scrollTop) => {
2019-02-15 15:39:39 +05:30
it(`is true if scrollTop is > 0 (${scrollTop})`, () => {
2020-01-01 13:55:28 +05:30
expect(
canScrollUp({
scrollTop,
}),
).toBe(true);
2019-02-15 15:39:39 +05:30
});
});
2021-03-08 18:12:59 +05:30
[0, -10].forEach((scrollTop) => {
2019-02-15 15:39:39 +05:30
it(`is false if scrollTop is <= 0 (${scrollTop})`, () => {
2020-01-01 13:55:28 +05:30
expect(
canScrollUp({
scrollTop,
}),
).toBe(false);
2019-02-15 15:39:39 +05:30
});
});
it('is true if scrollTop is > margin', () => {
2020-01-01 13:55:28 +05:30
expect(
canScrollUp(
{
scrollTop: TEST_MARGIN + 1,
},
TEST_MARGIN,
),
).toBe(true);
2019-02-15 15:39:39 +05:30
});
it('is false if scrollTop is <= margin', () => {
2020-01-01 13:55:28 +05:30
expect(
canScrollUp(
{
scrollTop: TEST_MARGIN,
},
TEST_MARGIN,
),
).toBe(false);
2019-02-15 15:39:39 +05:30
});
});
describe('canScrollDown', () => {
let element;
beforeEach(() => {
2020-01-01 13:55:28 +05:30
element = {
scrollTop: 7,
offsetHeight: 22,
scrollHeight: 30,
};
2019-02-15 15:39:39 +05:30
});
it('is true if element can be scrolled down', () => {
expect(canScrollDown(element)).toBe(true);
});
it('is false if element cannot be scrolled down', () => {
element.scrollHeight -= 1;
expect(canScrollDown(element)).toBe(false);
});
it('is true if element can be scrolled down, with margin given', () => {
element.scrollHeight += TEST_MARGIN;
expect(canScrollDown(element, TEST_MARGIN)).toBe(true);
});
it('is false if element cannot be scrolled down, with margin given', () => {
expect(canScrollDown(element, TEST_MARGIN)).toBe(false);
});
});
2020-07-28 23:09:34 +05:30
describe('parseBooleanDataAttributes', () => {
let element;
beforeEach(() => {
setFixtures('<div data-foo-bar data-baz data-qux="">');
element = document.querySelector('[data-foo-bar]');
});
it('throws if not given an element', () => {
expect(() => parseBooleanDataAttributes(null, ['baz'])).toThrow();
});
it('throws if not given an array of dataset names', () => {
expect(() => parseBooleanDataAttributes(element)).toThrow();
});
it('returns an empty object if given an empty array of names', () => {
expect(parseBooleanDataAttributes(element, [])).toEqual({});
});
it('correctly parses boolean-like data attributes', () => {
expect(
parseBooleanDataAttributes(element, [
'fooBar',
'foobar',
'baz',
'qux',
'doesNotExist',
'toString',
]),
).toEqual({
fooBar: true,
foobar: false,
baz: true,
qux: true,
doesNotExist: false,
// Ensure prototype properties aren't false positives
toString: false,
});
});
});
2021-01-29 00:20:46 +05:30
describe.each`
offsetWidth | offsetHeight | clientRectsLength | visible
${0} | ${0} | ${0} | ${false}
${1} | ${0} | ${0} | ${true}
${0} | ${1} | ${0} | ${true}
${0} | ${0} | ${1} | ${true}
`(
'isElementVisible and isElementHidden',
({ offsetWidth, offsetHeight, clientRectsLength, visible }) => {
const element = {
offsetWidth,
offsetHeight,
getClientRects: () => new Array(clientRectsLength),
};
const paramDescription = `offsetWidth=${offsetWidth}, offsetHeight=${offsetHeight}, and getClientRects().length=${clientRectsLength}`;
describe('isElementVisible', () => {
it(`returns ${visible} when ${paramDescription}`, () => {
expect(isElementVisible(element)).toBe(visible);
});
});
describe('isElementHidden', () => {
it(`returns ${!visible} when ${paramDescription}`, () => {
expect(isElementHidden(element)).toBe(!visible);
});
});
},
);
2021-11-11 11:23:49 +05:30
describe('getParents', () => {
it('gets all parents of an element', () => {
const el = document.createElement('div');
el.innerHTML = '<p><span><strong><mark>hello world';
expect(getParents(el.querySelector('mark'))).toEqual([
el.querySelector('strong'),
el.querySelector('span'),
el.querySelector('p'),
el,
]);
});
});
2017-09-10 17:25:29 +05:30
});