mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-23 11:40:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve initialization tests

Browse Source
This commit is contained in:
Rene Haas
2022-10-30 20:58:14 +01:00
parent c162b8ae10
commit ec5a549202
1 changed files with 107 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts
+107 -58
View File
@@ -112,12 +112,13 @@ const assertCorrectDOMStructure = (
) => { ) => {
const { target, host, padding, viewport, content, children } = getElements(targetType); const { target, host, padding, viewport, content, children } = getElements(targetType);
const { _getDefaultInitialization } = env; const { _getDefaultInitialization } = env;
const { _viewportIsTarget, _viewportIsContent } = elements; const { _viewportIsTarget, _viewportIsContent, _viewport, _content } = elements;
expect(children).toBeDefined(); expect(children).toBeDefined();
expect(children!.closest(`[${dataAttributeHost}]`)).toBeTruthy(); expect((_content || _viewport).contains(children)).toBe(true);
if (_viewportIsTarget) { if (_viewportIsTarget) {
expect(host.getAttribute(dataAttributeHost)).toBe('viewport');
expect(_viewportIsContent).toBe(false); expect(_viewportIsContent).toBe(false);
expect(target).toBe(host); expect(target).toBe(host);
@@ -126,6 +127,8 @@ const assertCorrectDOMStructure = (
expect(viewport).toBeFalsy(); expect(viewport).toBeFalsy();
expect(content).toBeFalsy(); expect(content).toBeFalsy();
} else { } else {
expect(host.getAttribute(dataAttributeHost)).toBe('host');
expect(host).toBeTruthy(); expect(host).toBeTruthy();
expect(viewport).toBeTruthy(); expect(viewport).toBeTruthy();
expect(viewport.parentElement).toBe(padding || host); expect(viewport.parentElement).toBe(padding || host);
@@ -154,7 +157,7 @@ const assertCorrectDOMStructure = (
} }
if (_viewportIsContent) { if (_viewportIsContent) {
const { _target, _content, _viewport } = elements; const { _target } = elements;
const { elements: defaultInitElements } = _getDefaultInitialization(); const { elements: defaultInitElements } = _getDefaultInitialization();
const { content: defaultContentInit } = defaultInitElements; const { content: defaultContentInit } = defaultInitElements;
const resolvedDefaultContentInit = resolveInitialization([_target], defaultContentInit); const resolvedDefaultContentInit = resolveInitialization([_target], defaultContentInit);
@@ -333,7 +336,7 @@ const assertCorrectSetupElements = (
} }
}; };
if (_nativeScrollbarsHiding || _cssCustomProperties) { if (_nativeScrollbarsHiding || _cssCustomProperties || _viewportIsTarget) {
expect(styleElm).toBeFalsy(); expect(styleElm).toBeFalsy();
} else { } else {
expect(styleElm).toBeTruthy(); expect(styleElm).toBeTruthy();
@@ -588,7 +591,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: () => document.querySelector<HTMLElement>('#padding'), padding: () => document.querySelector<HTMLElement>('#padding'),
}, },
}), }),
@@ -609,7 +612,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: () => document.querySelector<HTMLElement>('#host'), host: () => document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
}, },
}), }),
@@ -630,7 +633,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
content: document.querySelector<HTMLElement>('#content'), content: document.querySelector<HTMLElement>('#content'),
}, },
}), }),
@@ -653,7 +656,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: document.querySelector<HTMLElement>('#padding'), padding: document.querySelector<HTMLElement>('#padding'),
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
content: () => document.querySelector<HTMLElement>('#content'), content: () => document.querySelector<HTMLElement>('#content'),
@@ -676,7 +679,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: () => document.querySelector<HTMLElement>('#host'), host: () => document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: document.querySelector<HTMLElement>('#padding'), padding: document.querySelector<HTMLElement>('#padding'),
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
}, },
@@ -698,7 +701,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: () => document.querySelector<HTMLElement>('#padding'), padding: () => document.querySelector<HTMLElement>('#padding'),
content: document.querySelector<HTMLElement>('#content'), content: document.querySelector<HTMLElement>('#content'),
}, },
@@ -720,7 +723,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
content: () => document.querySelector<HTMLElement>('#content'), content: () => document.querySelector<HTMLElement>('#content'),
}, },
@@ -850,7 +853,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: false, padding: false,
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
content: false, content: false,
@@ -873,7 +876,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: true, padding: true,
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
content: true, content: true,
@@ -896,7 +899,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: () => false, padding: () => false,
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
content: () => true, content: () => true,
@@ -919,7 +922,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: true, padding: true,
viewport: () => document.querySelector<HTMLElement>('#viewport'), viewport: () => document.querySelector<HTMLElement>('#viewport'),
content: false, content: false,
@@ -942,7 +945,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: false, padding: false,
content: document.querySelector<HTMLElement>('#content'), content: document.querySelector<HTMLElement>('#content'),
}, },
@@ -964,7 +967,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: true, padding: true,
content: document.querySelector<HTMLElement>('#content'), content: document.querySelector<HTMLElement>('#content'),
}, },
@@ -986,7 +989,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: () => false, padding: () => false,
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
}, },
@@ -1008,7 +1011,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: true, padding: true,
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
}, },
@@ -1030,7 +1033,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
padding: false, padding: false,
content: () => document.querySelector<HTMLElement>('#content'), content: () => document.querySelector<HTMLElement>('#content'),
@@ -1053,7 +1056,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: () => document.querySelector<HTMLElement>('#viewport'), viewport: () => document.querySelector<HTMLElement>('#viewport'),
padding: true, padding: true,
content: document.querySelector<HTMLElement>('#content'), content: document.querySelector<HTMLElement>('#content'),
@@ -1076,7 +1079,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: document.querySelector<HTMLElement>('#padding'), padding: document.querySelector<HTMLElement>('#padding'),
content: false, content: false,
}, },
@@ -1098,7 +1101,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: () => document.querySelector<HTMLElement>('#host'), host: () => document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: document.querySelector<HTMLElement>('#padding'), padding: document.querySelector<HTMLElement>('#padding'),
content: true, content: true,
}, },
@@ -1120,7 +1123,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: () => document.querySelector<HTMLElement>('#viewport'), viewport: () => document.querySelector<HTMLElement>('#viewport'),
content: false, content: false,
}, },
@@ -1142,7 +1145,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
content: true, content: true,
}, },
@@ -1164,7 +1167,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: () => document.querySelector<HTMLElement>('#padding'), padding: () => document.querySelector<HTMLElement>('#padding'),
viewport: document.querySelector<HTMLElement>('#viewport'), viewport: document.querySelector<HTMLElement>('#viewport'),
content: () => false, content: () => false,
@@ -1187,7 +1190,7 @@ describe('structureSetup.elements', () => {
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: { elements: {
host: () => document.querySelector<HTMLElement>('#host'), host: () => document.querySelector<HTMLElement>(`#${textareaHostId}`),
padding: document.querySelector<HTMLElement>('#padding'), padding: document.querySelector<HTMLElement>('#padding'),
viewport: () => document.querySelector<HTMLElement>('#viewport'), viewport: () => document.querySelector<HTMLElement>('#viewport'),
content: true, content: true,
@@ -1199,63 +1202,109 @@ describe('structureSetup.elements', () => {
assertCorrectDestroy(snapshot, destroy); assertCorrectDestroy(snapshot, destroy);
}); });
}); });
});
describe('viewport is content', () => { describe('viewport is content', () => {
[
{
testName: 'HTMLElement',
getInitializationElements: () => ({
host: () => document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: document.querySelector<HTMLElement>('#viewportOrContent'),
content: document.querySelector<HTMLElement>('#viewportOrContent'),
}),
},
{
testName: 'function',
getInitializationElements: () => ({
host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: () => document.querySelector<HTMLElement>('#viewportOrContent'),
content: () => document.querySelector<HTMLElement>('#viewportOrContent'),
}),
},
{
testName: 'mixed',
getInitializationElements: () => ({
host: () => document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: document.querySelector<HTMLElement>('#viewportOrContent'),
content: () => document.querySelector<HTMLElement>('#viewportOrContent'),
}),
},
].forEach(({ testName, getInitializationElements }) => {
test(testName, () => {
const snapshot = fillBody(
targetType,
(content, hostId) =>
`<div id="${hostId}"><div id="viewportOrContent">${content}</div></div>`
);
const [elements, destroy] = assertCorrectSetupElements(
targetType,
createStructureSetupElementsProxy({
target: getTarget(targetType),
elements: getInitializationElements(),
}),
currEnv
);
if (!elements._viewportIsTarget) {
expect(elements._viewportIsContent).toBe(true);
}
if (elements._viewportIsContent) {
expect(getElements(targetType).children!.parentElement).toBe(
document.querySelector(`#viewportOrContent`)
);
}
assertCorrectDOMStructure(targetType, currEnv, elements);
assertCorrectDestroy(snapshot, destroy);
});
});
});
// textarea can't ever be the viewport
if (targetType !== 'textarea') {
describe('viewport is target', () => {
[ [
{ {
testName: 'HTMLElements', testName: 'HTMLElement',
getInitializationElements: () => ({ getInitializationElements: (target: HTMLElement) => ({
host: () => document.querySelector<HTMLElement>('#host'), host: () => document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: document.querySelector<HTMLElement>('#viewportOrContent'), viewport: target,
content: document.querySelector<HTMLElement>('#viewportOrContent'),
}), }),
}, },
{ {
testName: 'functions', testName: 'function',
getInitializationElements: () => ({ getInitializationElements: (target: HTMLElement) => ({
host: document.querySelector<HTMLElement>('#host'), host: document.querySelector<HTMLElement>(`#${textareaHostId}`),
viewport: () => document.querySelector<HTMLElement>('#viewportOrContent'), viewport: () => target,
content: () => document.querySelector<HTMLElement>('#viewportOrContent'),
}),
},
{
testName: 'mixed',
getInitializationElements: () => ({
host: () => document.querySelector<HTMLElement>('#host'),
viewport: document.querySelector<HTMLElement>('#viewportOrContent'),
content: () => document.querySelector<HTMLElement>('#viewportOrContent'),
}), }),
}, },
].forEach(({ testName, getInitializationElements }) => { ].forEach(({ testName, getInitializationElements }) => {
test(testName, () => { test(testName, () => {
const snapshot = fillBody( const snapshot = fillBody(
targetType, targetType,
(content, hostId) => (content, hostId) => `<div id="${hostId}">${content}</div>`
`<div id="${hostId}"><div id="viewportOrContent">${content}</div></div>`
); );
const [elements, destroy] = assertCorrectSetupElements( const [elements, destroy] = assertCorrectSetupElements(
targetType, targetType,
createStructureSetupElementsProxy({ createStructureSetupElementsProxy({
target: getTarget(targetType), target: getTarget(targetType),
elements: getInitializationElements(), elements: getInitializationElements(getTarget(targetType)),
}), }),
currEnv currEnv
); );
if (!elements._viewportIsTarget) { expect(elements._viewportIsTarget).toBe(true);
expect(elements._viewportIsContent).toBe(true); expect(elements._host).toBe(elements._target);
} expect(elements._padding).toBeFalsy();
if (elements._viewportIsContent) { expect(elements._viewport).toBe(elements._target);
expect(getElements(targetType).children!.parentElement).toBe( expect(elements._content).toBeFalsy();
document.querySelector(`#viewportOrContent`)
);
}
assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDOMStructure(targetType, currEnv, elements);
assertCorrectDestroy(snapshot, destroy); assertCorrectDestroy(snapshot, destroy);
}); });
}); });
}); });
}); }
}); });
}); });
}); });