From c162b8ae1037b74d4906c2a17e27019f6a84f63b Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Sun, 30 Oct 2022 19:04:33 +0100 Subject: [PATCH] improve structure setup tests, implement viewport is content functionality and fix body tabindex destroy --- .../overlayscrollbars/src/initialization.ts | 14 +- .../structureSetup/structureSetup.elements.ts | 53 ++- .../structureSetup.elements.test.ts | 313 +++++++++++++----- 3 files changed, 282 insertions(+), 98 deletions(-) diff --git a/packages/overlayscrollbars/src/initialization.ts b/packages/overlayscrollbars/src/initialization.ts index 5a30fda..058f7dd 100644 --- a/packages/overlayscrollbars/src/initialization.ts +++ b/packages/overlayscrollbars/src/initialization.ts @@ -101,8 +101,10 @@ export type InitializationTargetObject = PartialInitialization & { /** The initialization target. */ export type InitializationTarget = InitializationTargetElement | InitializationTargetObject; -const resolveInitialization = (value: any, args: any): T => - isFunction(value) ? value.apply(0, args) : value; +export const resolveInitialization = ( + args: any, + value: any +): T => (isFunction(value) ? value.apply(0, args) : value); export const staticInitializationElement = ( args: Args, @@ -114,8 +116,8 @@ export const staticInitializationElement = ( ? defaultStaticInitializationElement : staticInitializationElementValue; const resolvedInitialization = resolveInitialization( - staticInitialization, - args + args, + staticInitialization ); return resolvedInitialization || fallbackStaticInitializationElement.apply(0, args); }; @@ -130,8 +132,8 @@ export const dynamicInitializationElement = ( ? defaultDynamicInitializationElement : dynamicInitializationElementValue; const resolvedInitialization = resolveInitialization( - dynamicInitialization, - args + args, + dynamicInitialization ); return ( !!resolvedInitialization && diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts index d9f9c0b..de27550 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts +++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts @@ -36,6 +36,7 @@ import { getPlugins, scrollbarsHidingPluginName } from '~/plugins'; import { staticInitializationElement as generalStaticInitializationElement, dynamicInitializationElement as generalDynamicInitializationElement, + resolveInitialization as generalResolveInitialization, } from '~/initialization'; import type { ScrollbarsHidingPluginInstance } from '~/plugins/scrollbarsHidingPlugin'; import type { @@ -66,6 +67,7 @@ export interface StructureSetupElementsObj { _documentElm: Document; _targetIsElm: boolean; _viewportIsTarget: boolean; + _viewportIsContent: boolean; _viewportHasClass: (className: string, attributeClassName: string) => boolean; _viewportAddRemoveClass: (className: string, attributeClassName: string, add?: boolean) => void; } @@ -91,8 +93,8 @@ export const createStructureSetupElements = ( const { elements: defaultInitElements } = _getDefaultInitialization(); const { host: defaultHostInitialization, - viewport: defaultViewportInitialization, padding: defaultPaddingInitialization, + viewport: defaultViewportInitialization, content: defaultContentInitialization, } = defaultInitElements; const targetIsElm = isHTMLElement(target); @@ -113,13 +115,39 @@ export const createStructureSetupElements = ( const wnd = ownerDocument.defaultView as Window; const staticInitializationElement = generalStaticInitializationElement.bind(0, [targetElement]); const dynamicInitializationElement = generalDynamicInitializationElement.bind(0, [targetElement]); - const viewportElement = staticInitializationElement( + const resolveInitialization = generalResolveInitialization.bind(0, [targetElement]); + const generateViewportElement = staticInitializationElement.bind( + 0, createNewDiv, - defaultViewportInitialization, - viewportInitialization + defaultViewportInitialization ); - const viewportIsTarget = viewportElement === targetElement; + const generateContentElement = dynamicInitializationElement.bind( + 0, + createNewDiv, + defaultContentInitialization + ); + const possibleViewportElement = generateViewportElement(viewportInitialization); + const viewportIsTarget = possibleViewportElement === targetElement; const viewportIsTargetBody = viewportIsTarget && isBody; + const possibleContentElement = !viewportIsTarget && generateContentElement(contentInitialization); + // edge case if passed viewportElement is contentElement: + // check the default contentElement + // if truthy (so the element would be present in the DOM) the passed element is the final content element and viewport is generated + // if falsy the passed element is the final viewport element and the content element is generated + const viewportIsContent = + !viewportIsTarget && + isHTMLElement(possibleViewportElement) && + possibleViewportElement === possibleContentElement; + const defaultContentElementPresent = + viewportIsContent && !!resolveInitialization(defaultContentInitialization); + const viewportIstContentViewport = defaultContentElementPresent + ? generateViewportElement() + : possibleViewportElement; + const viewportIsContentContent = defaultContentElementPresent + ? possibleContentElement + : generateContentElement(); + const viewportElement = viewportIsContent ? viewportIstContentViewport : possibleViewportElement; + const contentElement = viewportIsContent ? viewportIsContentContent : possibleContentElement; const activeElm = ownerDocument.activeElement; const setViewportFocus = !viewportIsTarget && wnd.top === wnd && activeElm === targetElement; const evaluatedTargetObj: StructureSetupElementsObj = { @@ -135,13 +163,7 @@ export const createStructureSetupElements = ( defaultPaddingInitialization, paddingInitialization ), - _content: - !viewportIsTarget && - dynamicInitializationElement( - createNewDiv, - defaultContentInitialization, - contentInitialization - ), + _content: contentElement, _viewportArrange: !viewportIsTarget && !_nativeScrollbarsHiding && @@ -155,6 +177,7 @@ export const createStructureSetupElements = ( _isBody: isBody, _targetIsElm: targetIsElm, _viewportIsTarget: viewportIsTarget, + _viewportIsContent: viewportIsContent, _viewportHasClass: (className: string, attributeClassName: string) => viewportIsTarget ? hasAttrClass(viewportElement, dataAttributeHost, attributeClassName) @@ -246,10 +269,14 @@ export const createStructureSetupElements = ( attr(_viewport, tabIndexStr, '-1'); _viewport.focus(); - const off = on(ownerDocument, 'pointerdown keydown', () => { + const revertViewportTabIndex = () => ogTabindex ? attr(_viewport, tabIndexStr, ogTabindex) : removeAttr(_viewport, tabIndexStr); + const off = on(ownerDocument, 'pointerdown keydown', () => { + revertViewportTabIndex(); off(); }); + + push(destroyFns, [revertViewportTabIndex, off]); } else if (activeElm && (activeElm as HTMLElement).focus) { (activeElm as HTMLElement).focus(); } diff --git a/packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts b/packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts index 31b25d3..ffc4cf2 100644 --- a/packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts +++ b/packages/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts @@ -1,4 +1,5 @@ -import { hasClass, is, isFunction, isHTMLElement } from '~/support'; +import { hasClass, is, isHTMLElement } from '~/support'; +import { resolveInitialization } from '~/initialization'; import { dataAttributeHost, classNamePadding, @@ -35,7 +36,8 @@ type StructureDynamicInitializationElement = Initialization['elements']['content const textareaId = 'textarea'; const textareaHostId = 'host'; const elementId = 'target'; -const dynamicContent = 'text

paragraph

'; +const dynamicContentId = 'dynamicContent'; +const dynamicContent = `text

paragraph

`; const textareaContent = ``; const getSnapshot = () => document.documentElement.outerHTML; const getTarget = (targetType: TargetType) => { @@ -56,22 +58,30 @@ const fillBody = ( customDOM?: (content: string, hostId: string) => string ) => { const textarea = targetType === 'textarea'; + const hostId = textarea ? textareaHostId : elementId; const customDomResult = - customDOM && - customDOM(textarea ? textareaContent : dynamicContent, textarea ? textareaHostId : elementId); + customDOM && customDOM(textarea ? textareaContent : dynamicContent, hostId); const normalDom = textarea ? textareaContent : `
${dynamicContent}
`; - document.body.innerHTML = - targetType === 'body' - ? dynamicContent - : ` + document.body.innerHTML = ` ${customDomResult || normalDom}
`; + + // unwrap host if target is body + if (targetType === 'body') { + const target = document.querySelector(`#${hostId}`); + if (target) { + const { parentElement } = target; + parentElement!.append(...target.childNodes); + target.remove(); + } + } + return getSnapshot(); }; const clearBody = () => { - document.body.outerHTML = ''; + document.body.innerHTML = ''; }; const getElements = (targetType: TargetType) => { @@ -80,6 +90,10 @@ const getElements = (targetType: TargetType) => { const padding = document.querySelector(`.${classNamePadding}`)!; const viewport = document.querySelector(`.${classNameViewport}`)!; const content = document.querySelector(`.${classNameContent}`)!; + const children = + targetType === 'textarea' + ? document.querySelector(`#${textareaId}`) + : document.querySelector(`#${dynamicContentId}`); return { target, @@ -87,13 +101,25 @@ const getElements = (targetType: TargetType) => { padding, viewport, content, + children, }; }; -const assertCorrectDOMStructure = (targetType: TargetType, viewportIsTarget: boolean) => { - const { target, host, padding, viewport, content } = getElements(targetType); +const assertCorrectDOMStructure = ( + targetType: TargetType, + env: InternalEnvironment, + elements: StructureSetupElementsObj +) => { + const { target, host, padding, viewport, content, children } = getElements(targetType); + const { _getDefaultInitialization } = env; + const { _viewportIsTarget, _viewportIsContent } = elements; + + expect(children).toBeDefined(); + expect(children!.closest(`[${dataAttributeHost}]`)).toBeTruthy(); + + if (_viewportIsTarget) { + expect(_viewportIsContent).toBe(false); - if (viewportIsTarget) { expect(target).toBe(host); expect(host).toBeTruthy(); expect(padding).toBeFalsy(); @@ -123,7 +149,20 @@ const assertCorrectDOMStructure = (targetType: TargetType, viewportIsTarget: boo expect(contentElm.innerHTML).toBe(textareaContent); } else { expect(target).toBe(host); - expect(contentElm.innerHTML).toBe(dynamicContent); + expect(contentElm.innerHTML).toContain(dynamicContent); + } + } + + if (_viewportIsContent) { + const { _target, _content, _viewport } = elements; + const { elements: defaultInitElements } = _getDefaultInitialization(); + const { content: defaultContentInit } = defaultInitElements; + const resolvedDefaultContentInit = resolveInitialization([_target], defaultContentInit); + + if (resolvedDefaultContentInit) { + expect(children!.parentElement).toBe(_content || _viewport); + } else { + expect(children!.parentElement).toBe(_viewport); } } }; @@ -160,6 +199,7 @@ const assertCorrectSetupElements = ( _viewport, _content, _viewportIsTarget, + _viewportIsContent, _viewportHasClass, _viewportAddRemoveClass, } = elements; @@ -215,52 +255,64 @@ const assertCorrectSetupElements = ( const { _nativeScrollbarsHiding, _cssCustomProperties, _getDefaultInitialization } = environment; const { elements: defaultInitElements } = _getDefaultInitialization(); const { - host: hostInitStrategy, - viewport: viewportInitStrategy, - padding: paddingInitStrategy, - content: contentInitStrategy, + host: defaultHostInitStrategy, + padding: defaultPaddingInitStrategy, + viewport: defaultViewportInitStrategy, + content: defaultContentInitStrategy, } = defaultInitElements; const inputIsElement = isHTMLElement(input); const inputAsObj = input as InitializationTargetObject; const styleElm = document.querySelector('style'); const checkStrategyDependendElements = ( elm: Element | null, - inputStrategy: + initialization: | StructureStaticInitializationElement | StructureDynamicInitializationElement | undefined, - isStaticStrategy: boolean, - strategy: StructureStaticInitializationElement | StructureDynamicInitializationElement, + isStaticInitialization: boolean, + defaultInitialization: + | StructureStaticInitializationElement + | StructureDynamicInitializationElement, kind: 'padding' | 'viewport' | 'content' | 'host' ) => { - const resolvedInputStrategy = isFunction(inputStrategy) ? inputStrategy(target) : inputStrategy; - if (resolvedInputStrategy) { - if (!_viewportIsTarget) { + const resolvedInitialization = resolveInitialization([target], initialization); + const resolvedDefaultInitialization = resolveInitialization([target], defaultInitialization); + if (resolvedInitialization) { + if (!_viewportIsTarget && !_viewportIsContent) { expect(elm).toBeTruthy(); } + if (_viewportIsContent) { + if (kind === 'content') { + if (resolvedDefaultInitialization) { + expect(elm).toBeTruthy(); + } else { + expect(elm).toBeFalsy(); + } + } else { + expect(elm).toBeTruthy(); + } + } } else { - if (resolvedInputStrategy === false) { + if (resolvedInitialization === false) { expect(elm).toBeFalsy(); } - if (resolvedInputStrategy === undefined) { - if (isStaticStrategy) { - strategy = strategy as StructureStaticInitializationElement; - const resultingStrategy = typeof strategy === 'function' ? strategy(target) : strategy; + if (resolvedInitialization === undefined) { + if (isStaticInitialization) { + defaultInitialization = defaultInitialization as StructureStaticInitializationElement; if (_viewportIsTarget) { if (kind === 'host') { expect(elm).toBeTruthy(); } else { expect(elm).toBeFalsy(); } - } else if (resultingStrategy && !isTextarea) { - expect(resultingStrategy).toBe(elm); + } else if (resolvedDefaultInitialization && !isTextarea) { + expect(resolvedDefaultInitialization).toBe(elm); } else { expect(elm).toBeTruthy(); } } else { - strategy = strategy as StructureDynamicInitializationElement; - const resultingStrategy = typeof strategy === 'function' ? strategy(target) : strategy; - const resultIsBoolean = typeof resultingStrategy === 'boolean'; + defaultInitialization = defaultInitialization as StructureDynamicInitializationElement; + const resultIsBoolean = typeof resolvedDefaultInitialization === 'boolean'; if (_viewportIsTarget) { if (kind === 'host') { expect(elm).toBeTruthy(); @@ -268,13 +320,13 @@ const assertCorrectSetupElements = ( expect(elm).toBeFalsy(); } } else if (resultIsBoolean) { - if (resultingStrategy) { + if (resolvedDefaultInitialization) { expect(elm).toBeTruthy(); } else { expect(elm).toBeFalsy(); } - } else if (resultingStrategy) { - expect(elm).toBe(resultingStrategy); + } else if (resolvedDefaultInitialization) { + expect(elm).toBe(resolvedDefaultInitialization); } } } @@ -287,23 +339,70 @@ const assertCorrectSetupElements = ( expect(styleElm).toBeTruthy(); } + if (_viewportIsContent) { + const { content: defaultContentInit } = defaultInitElements; + const resolvedDefaultContentInit = resolveInitialization([_target], defaultContentInit); + + if (resolvedDefaultContentInit) { + expect(_content).toBeTruthy(); + } else { + expect(_content).toBeFalsy(); + } + } + if (inputIsElement) { - checkStrategyDependendElements(padding, undefined, false, paddingInitStrategy, 'padding'); - checkStrategyDependendElements(content, undefined, false, contentInitStrategy, 'content'); - checkStrategyDependendElements(viewport, undefined, true, viewportInitStrategy, 'viewport'); - checkStrategyDependendElements(host, undefined, true, hostInitStrategy, 'host'); + checkStrategyDependendElements( + padding, + undefined, + false, + defaultPaddingInitStrategy, + 'padding' + ); + checkStrategyDependendElements( + content, + undefined, + false, + defaultContentInitStrategy, + 'content' + ); + checkStrategyDependendElements( + viewport, + undefined, + true, + defaultViewportInitStrategy, + 'viewport' + ); + checkStrategyDependendElements(host, undefined, true, defaultHostInitStrategy, 'host'); } else { const { elements: inputElements } = inputAsObj; const { - padding: inputPadding, - content: inputContent, - viewport: inputViewport, - host: inputHost, + host: hostInitialization, + padding: paddingInitialization, + viewport: viewportInitialization, + content: contentInitialization, } = inputElements || {}; - checkStrategyDependendElements(padding, inputPadding, false, paddingInitStrategy, 'padding'); - checkStrategyDependendElements(content, inputContent, false, contentInitStrategy, 'content'); - checkStrategyDependendElements(viewport, inputViewport, true, viewportInitStrategy, 'viewport'); - checkStrategyDependendElements(host, inputHost, true, hostInitStrategy, 'host'); + checkStrategyDependendElements( + padding, + paddingInitialization, + false, + defaultPaddingInitStrategy, + 'padding' + ); + checkStrategyDependendElements( + content, + contentInitialization, + false, + defaultContentInitStrategy, + 'content' + ); + checkStrategyDependendElements( + viewport, + viewportInitialization, + true, + defaultViewportInitStrategy, + 'viewport' + ); + checkStrategyDependendElements(host, hostInitialization, true, defaultHostInitStrategy, 'host'); } const className = 'clazz'; @@ -460,7 +559,7 @@ describe('structureSetup.elements', () => { createStructureSetupElementsProxy(getTarget(targetType)), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -471,7 +570,7 @@ describe('structureSetup.elements', () => { createStructureSetupElementsProxy({ target: getTarget(targetType) }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); }); @@ -495,7 +594,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -516,7 +615,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -537,7 +636,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); }); @@ -562,7 +661,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -584,7 +683,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -606,7 +705,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -628,7 +727,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); }); @@ -646,7 +745,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -662,7 +761,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); }); @@ -680,7 +779,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -696,7 +795,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); }); @@ -715,7 +814,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); }); @@ -734,7 +833,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); }); @@ -759,7 +858,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -782,7 +881,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -805,7 +904,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -828,7 +927,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -850,7 +949,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -872,7 +971,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -894,7 +993,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -916,7 +1015,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -939,7 +1038,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -962,7 +1061,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -984,7 +1083,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -1006,7 +1105,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -1028,7 +1127,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -1050,7 +1149,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -1073,7 +1172,7 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); @@ -1096,10 +1195,66 @@ describe('structureSetup.elements', () => { }), currEnv ); - assertCorrectDOMStructure(targetType, elements._viewportIsTarget); + assertCorrectDOMStructure(targetType, currEnv, elements); assertCorrectDestroy(snapshot, destroy); }); }); + + describe('viewport is content', () => { + [ + { + testName: 'HTMLElements', + getInitializationElements: () => ({ + host: () => document.querySelector('#host'), + viewport: document.querySelector('#viewportOrContent'), + content: document.querySelector('#viewportOrContent'), + }), + }, + { + testName: 'functions', + getInitializationElements: () => ({ + host: document.querySelector('#host'), + viewport: () => document.querySelector('#viewportOrContent'), + content: () => document.querySelector('#viewportOrContent'), + }), + }, + { + testName: 'mixed', + getInitializationElements: () => ({ + host: () => document.querySelector('#host'), + viewport: document.querySelector('#viewportOrContent'), + content: () => document.querySelector('#viewportOrContent'), + }), + }, + ].forEach(({ testName, getInitializationElements }) => { + test(testName, () => { + const snapshot = fillBody( + targetType, + (content, hostId) => + `
${content}
` + ); + + 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); + }); + }); + }); }); }); });