@wix/design-system
Version:
@wix/design-system
92 lines • 3.83 kB
JavaScript
import { getByPredicate, getScrollParent } from './utils';
describe('utils', () => {
describe('getScrollParent', () => {
afterEach(() => {
document.body.innerHTML = '';
});
it('should return the nearest scrollable parent', () => {
document.body.innerHTML =
'<div data-hook="inner">' +
' <div data-hook="scrollable" style="overflow: auto;">' +
' <button id="button"></button>' +
' </div>' +
'</div>';
const button = document.getElementById('button');
const scrollableDiv = document.querySelector('[data-hook="scrollable"]');
const result = getScrollParent(button);
expect(result).toBe(scrollableDiv);
});
it('should return the body if no scrollable parent is found', () => {
document.body.innerHTML =
'<div data-hook="inner">' +
' <div data-hook="scrollable">' +
' <button id="button"></button>' +
' </div>' +
'</div>';
const button = document.getElementById('button');
const result = getScrollParent(button);
expect(result).toBe(document.body);
});
});
describe('getByPredicate', () => {
afterEach(() => {
document.body.innerHTML = '';
});
it('should return the element that matches the predicate', () => {
document.body.innerHTML = `
<div id="root">
<div class="child" id="child1"></div>
<div class="child" id="child2"></div>
<div class="child" id="child3"></div>
</div>
`;
const element = document.getElementById('child2');
const predicate = (el) => el.id === 'root';
const result = getByPredicate(predicate, element);
expect(result).not.toBeNull();
expect(result?.id).toBe('root');
});
it('should return null if no element matches the predicate', () => {
document.body.innerHTML = `
<div id="root">
<div class="child" id="child1"></div>
<div class="child" id="child2"></div>
<div class="child" id="child3"></div>
</div>
`;
const element = document.getElementById('child4');
const predicate = (el) => el.id === 'root';
const result = getByPredicate(predicate, element);
expect(result).toBeNull();
});
it('should return the root element if it matches the predicate', () => {
document.body.innerHTML = `
<div id="root">
<div class="child" id="child1"></div>
<div class="child" id="child2"></div>
<div class="child" id="child3"></div>
</div>
`;
const element = document.getElementById('child2');
const predicate = (el) => el.id === 'child2';
const result = getByPredicate(predicate, element);
expect(result).not.toBeNull();
expect(result?.id).toBe('child2');
});
it('should return the html element if no matches found', () => {
document.body.innerHTML = `
<div id="root">
<div class="child" id="child1"></div>
<div class="child" id="child2"></div>
<div class="child" id="child3"></div>
</div>
`;
const element = document.getElementById('child2');
const predicate = (el) => el.id === 'child4';
const result = getByPredicate(predicate, element);
expect(result).not.toBeNull();
expect(result?.nodeName).toBe('HTML');
});
});
});
//# sourceMappingURL=utils.spec.js.map