@sitecore-feaas/clientside 0.1.14 → 0.1.16

package/test/render.js

@@ -1,688 +0,0 @@
-import { JSDOM } from 'jsdom';
-import * as FEAAS from '../src/dom.js';
-import { describe, it, assert } from 'vitest';
-const { renderDOMElement } = FEAAS;
-function assertScriptLoaded(element, src) {
-    var _a;
-    console.log(element.closest('html').innerHTML);
-    assert.equal((_a = Array.prototype.find.call(element.closest('html').querySelectorAll('script'), (s) => s.src == src)) === null || _a === void 0 ? void 0 : _a.src, src);
-}
-function assertRendered(input, data, expected, scripts, customizations) {
-    var _a;
-    function normalize(str) {
-        return str
-            .replace(/>\s*</g, '><')
-            .replace(/^\s+|\n/gm, '')
-            .replace(/>/g, '>\n')
-            .replace(/\n+/g, '\n')
-            .replace(/<\//g, '\n</')
-            .trim();
-    }
-    const rendered = (_a = renderDOMElement(new JSDOM(input).window.document.body.firstElementChild, data, customizations)) === null || _a === void 0 ? void 0 : _a.parentElement;
-    assert.equal(normalize(rendered === null || rendered === void 0 ? void 0 : rendered.innerHTML), normalize(new JSDOM(expected).window.document.body.innerHTML));
-    if (scripts) {
-        scripts.map((s) => assertScriptLoaded(rendered, s));
-    }
-}
-function assertRenderedContent(input, data, expected, scripts, customizations) {
-    function normalize(str) {
-        return str
-            .replace(/>\s*</g, '><')
-            .replace(/^\s+|\n/gm, '')
-            .replace(/>/g, '>\n')
-            .replace(/\n+/g, '\n')
-            .replace(/<\//g, '\n</')
-            .trim();
-    }
-    const doc = new JSDOM('').window.document;
-    const element = doc.createElement('div');
-    doc.body.appendChild(element);
-    const rendered = FEAAS.renderDOMContent(element, input, data, customizations);
-    assert.equal(normalize(rendered === null || rendered === void 0 ? void 0 : rendered.innerHTML), normalize(new JSDOM(expected).window.document.body.innerHTML));
-    if (scripts) {
-        scripts.map((s) => assertScriptLoaded(rendered, s));
-    }
-}
-describe('DOM Clientside', function () {
-    describe('render without data', function () {
-        it('should render element', function () {
-            assertRendered(`<div></div>`, null, '<div></div>');
-        });
-        it('should render nested', function () {
-            assertRendered(`<div><img /></div>`, null, '<div><img /></div>');
-        });
-    });
-    describe('render with data', function () {
-        it('should render mapped attribute', function () {
-            assertRendered(`<div><img data-path-src="image" /></div>`, { image: 'a.jpg' }, '<div><img data-path-src="image" src="a.jpg" /></div>');
-        });
-        it('should render custom attribute', function () {
-            assertRendered(`<div data-path-custom-attribute="test"></div>`, { test: 'a.jpg' }, '<div data-path-custom-attribute="test" custom-attribute="a.jpg"></div>');
-            assertRendered(`<div data-path-custom-attribute="test"></div>`, { missing: 'a.jpg' }, '<div data-path-custom-attribute="test"></div>');
-        });
-        it('should render attributes object', function () {
-            assertRendered(`<div data-path-attributes="test"></div>`, { test: { a: 'a.jpg', b: 2, c: { user: 'yarik' } } }, '<div data-path-attributes="test" a="a.jpg" b="2" c="{&quot;user&quot;:&quot;yarik&quot;}" data-attributes-keys="a,b,c"></div>');
-        });
-        it('should render attributes in dynamic html', function () {
-            assertRendered(`<div data-path="html"></div>`, { html: '<img data-path-src="image" />', image: '1.jpg' }, '<div data-path="html"><img data-path-src="image" src="1.jpg" /></div>');
-            assertRendered(`<div data-path-custom-attribute="test"></div>`, { missing: 'a.jpg' }, '<div data-path-custom-attribute="test"></div>');
-        });
-        it('should fill parent link via attribute', function () {
-            assertRendered(`<div><a><var data-path-href="image" data-path="image"></var></a></div>`, { image: 'a.jpg' }, '<div><a href="a.jpg"><var data-path-href="image" data-path="image">a.jpg</a></div>');
-        });
-        it('should fill child element via attribute', function () {
-            assertRendered(`<div data-path-href="image"><a><var data-path="image"></var></a></div>`, { image: 'a.jpg' }, '<div data-path-href="image"><a href="a.jpg"><var data-path="image">a.jpg</a></div>');
-        });
-        it('should fill image element via attribute', function () {
-            assertRendered(`<div data-path-href="image"><a><var data-path="image"></var></a></div>`, { image: 'a.jpg' }, '<div data-path-href="image"><a href="a.jpg"><var data-path="image">a.jpg</a></div>');
-        });
-    });
-    describe('render with arrays', () => {
-        it('should repeat element for primitive value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"></h1></div>`, { outside: [{ items: ['a', 'b'] }] }, '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>');
-        });
-        it('should repeat and fill element for primitive value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*"></var></h1></div>`, { outside: [{ items: ['a', 'b'] }] }, `<div>
-                    <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">a</var></h1>
-                    <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">b</var></h1>
-                </div>`);
-        });
-        it('should repeat element for object value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"></h1></div>`, { outside: [{ items: [{ a: '1' }, { a: '2' }] }] }, '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>');
-        });
-        it('should repeat element for object value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`, { outside: [{ items: [{ title: '1' }, { title: '2' }] }] }, `<div>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">1</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">2</var>
-                </h1>
-            </div>`);
-        });
-        it('should repeat element for object value thrice', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`, { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }] }, `<div>
-            <h1 data-path-scope="outside.*.items.*">
-                <var data-path="outside.*.items.*.title">0</var>
-            </h1>
-            <h1 data-path-scope="outside.*.items.*">
-                <var data-path="outside.*.items.*.title">1</var>
-            </h1>
-            <h1 data-path-scope="outside.*.items.*">
-                <var data-path="outside.*.items.*.title">2</var>
-            </h1>
-        </div>`);
-        });
-        it('should repeat element for jsonpath', function () {
-            assertRendered(`<div><h1 data-path-scope="items[1:3]"><var data-path="items.*.title"></var></h1></div>`, { items: [{ title: '0' }, { title: '1' }, { title: '2' }] }, `<div>
-                <h1 data-path-scope="items[1:3]">
-                    <var data-path="items.*.title">1</var>
-                </h1>
-                <h1 data-path-scope="items[1:3]">
-                    <var data-path="items.*.title">2</var>
-                </h1>
-            </div>`);
-        });
-    });
-    describe('render with nested arrays', () => {
-        it('should repeat element for primitive value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"></h1></div>`, { outside: [{ items: ['a', 'b'] }] }, '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>');
-        });
-        it('should repeat and fill element for primitive value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*"></var></h1></div>`, { outside: [{ items: ['a', 'b'] }] }, `<div>
-                    <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">a</var></h1>
-                    <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">b</var></h1>
-                </div>`);
-        });
-        it('should repeat element for object value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"></h1></div>`, { outside: [{ items: [{ a: '1' }, { a: '2' }] }] }, '<div><h1 data-path-scope="outside.*.items.*"></h1><h1 data-path-scope="outside.*.items.*"></h1></div>');
-        });
-        it('should repeat element for object value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`, { outside: [{ items: [{ title: '1' }, { title: '2' }] }] }, `<div>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">1</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">2</var>
-                </h1>
-            </div>`);
-        });
-        it('should repeat element for object value thrice', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`, { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }] }, `<div>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">0</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">1</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">2</var>
-                </h1>
-            </div>`);
-        });
-        it('should repeat element for jsonpath', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items[1:3]"><var data-path="outside.*.items.*.title"></var></h1></div>`, { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }] }, `<div>
-                <h1 data-path-scope="outside.*.items[1:3]">
-                    <var data-path="outside.*.items.*.title">1</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items[1:3]">
-                    <var data-path="outside.*.items.*.title">2</var>
-                </h1>
-            </div>`);
-        });
-    });
-    describe('render multiplied with nested arrays and without parent context', () => {
-        it('should repeat element for primitive value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"></h1></div>`, { outside: [{ items: ['a', 'b'] }, { items: ['a', 'b', 'c'] }] }, `<div>
-                <h1 data-path-scope="outside.*.items.*"></h1>
-                <h1 data-path-scope="outside.*.items.*"></h1>
-                <h1 data-path-scope="outside.*.items.*"></h1>
-                <h1 data-path-scope="outside.*.items.*"></h1>
-                <h1 data-path-scope="outside.*.items.*"></h1>
-                </div>`);
-        });
-        it('should repeat and fill element for primitive value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*"></var></h1></div>`, { outside: [{ items: ['a', 'b'] }, { items: ['a', 'b', 'c'] }] }, `<div>
-                    <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">a</var></h1>
-                    <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">b</var></h1>
-                    <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">a</var></h1>
-                    <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">b</var></h1>
-                    <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">c</var></h1>
-                </div>`);
-        });
-        it('should repeat element for object value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"></h1></div>`, { outside: [{ items: [{ a: '1' }, { a: '2' }] }, { items: [{ a: '1' }, { a: '2' }, { c: '3' }] }] }, `<div>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                </div>`);
-        });
-        it('should repeat element for object value', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`, {
-                outside: [
-                    { items: [{ title: '1' }, { title: '2' }] },
-                    { items: [{ title: '1' }, { title: '2' }, { title: '3' }] }
-                ]
-            }, `<div>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">1</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">2</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">1</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">2</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">3</var>
-                </h1>
-            </div>`);
-        });
-        it('should repeat element for object value thrice', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*.title"></var></h1></div>`, { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }, { items: [{ title: '0' }] }] }, `<div>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">0</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">1</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">2</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items.*">
-                    <var data-path="outside.*.items.*.title">0</var>
-                </h1>
-            </div>`);
-        });
-        it('should repeat element for jsonpath', function () {
-            assertRendered(`<div><h1 data-path-scope="outside.*.items[1:3]"><var data-path="outside.*.items.*.title"></var></h1></div>`, { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }, { items: [{ title: '0' }] }] }, `<div>
-                <h1 data-path-scope="outside.*.items[1:3]">
-                    <var data-path="outside.*.items.*.title">1</var>
-                </h1>
-                <h1 data-path-scope="outside.*.items[1:3]">
-                    <var data-path="outside.*.items.*.title">2</var>
-                </h1>
-            </div>`);
-        });
-    });
-    describe('render multiplied with nested arrays and with parent context', () => {
-        it('should repeat element for primitive value', function () {
-            ;
-            [
-                `<div>
-                <section data-path-scope="outside.*">
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                </section>
-            </div>`,
-                `<div>
-                <section data-path-scope="outside.*">
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                </section>
-            </div>`,
-                `<div>
-                <section data-path-scope="outside.*">
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                </section>
-                <section data-path-scope="outside.*">
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                </section>
-            </div>`,
-                `<div>
-                <section data-path-scope="outside.*">
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                </section>
-                <section data-path-scope="outside.*">
-                    <h1 data-path-scope="outside.*.items.*" style="display: none;"></h1>
-                </section>
-                <section data-path-scope="outside.*">
-                    <h1 data-path-scope="outside.*.items.*"></h1>
-                </section>
-            </div>`
-            ].forEach((input) => {
-                assertRendered(input, { outside: [{ items: ['a', 'b'] }, { items: ['a', 'b', 'c'] }] }, `<div>
-                        <section data-path-scope="outside.*">
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                        </section>
-                        <section data-path-scope="outside.*">
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                        </section>
-                    </div>`);
-            });
-        });
-        it('should repeat and fill element for primitive value', function () {
-            ;
-            [
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*"></var>
-                        </h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*"></var>
-                        </h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*" style="display: none">
-                            <var data-path="outside.*.items.*"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*"></var>
-                        </h1>
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*"></var>
-                        </h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*"></var>
-                        </h1>
-                    </section>
-                </div>`
-            ].forEach((input) => {
-                assertRendered(input, { outside: [{ items: ['a', 'b'] }, { items: ['a', 'b', 'c'] }] }, `<div>
-                        <section data-path-scope="outside.*">
-                            <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">a</var></h1>
-                            <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">b</var></h1>
-                        </section>
-                        <section data-path-scope="outside.*">
-                            <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">a</var></h1>
-                            <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">b</var></h1>
-                            <h1 data-path-scope="outside.*.items.*"><var data-path="outside.*.items.*">c</var></h1>
-                        </section>
-                    </div>`);
-            });
-        });
-        it('should repeat element for object value', function () {
-            ;
-            [
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*"></h1>
-                        <h1 data-path-scope="outside.*.items.*"></h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*"></h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*"></h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*"></h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*"></h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*"></h1>
-                    </section>
-                </div>`
-            ].forEach((input) => {
-                assertRendered(input, { outside: [{ items: [{ a: '1' }, { a: '2' }] }, { items: [{ a: '1' }, { a: '2' }, { c: '3' }] }] }, `<div>
-                        <section data-path-scope="outside.*">
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                        </section>
-                        <section data-path-scope="outside.*">
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                            <h1 data-path-scope="outside.*.items.*"></h1>
-                        </section>
-                    </div>`);
-            });
-        });
-        it('should repeat element for object value', function () {
-            ;
-            [
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*" style="display: none;">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*" style="display: none;">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`
-            ].forEach((input) => {
-                assertRendered(input, {
-                    outside: [
-                        { items: [{ title: '1' }, { title: '2' }] },
-                        { items: [{ title: '1' }, { title: '2' }, { title: '3' }] }
-                    ]
-                }, `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title">1</var>
-                        </h1>
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title">2</var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title">1</var>
-                        </h1>
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title">2</var>
-                        </h1>
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title">3</var>
-                        </h1>
-                    </section>
-                </div>`);
-            });
-        });
-        it('should repeat element for object value thrice', function () {
-            ;
-            [
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*" style="display: none;">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*" style="display: none;">
-                        <h1 data-path-scope="outside.*.items.*" style="display: none;">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`
-            ];
-            assertRendered(`<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items.*">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`, { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }, { items: [{ title: '0' }] }] }, `<div>
-                <section data-path-scope="outside.*">
-                    <h1 data-path-scope="outside.*.items.*">
-                        <var data-path="outside.*.items.*.title">0</var>
-                    </h1>
-                    <h1 data-path-scope="outside.*.items.*">
-                        <var data-path="outside.*.items.*.title">1</var>
-                    </h1>
-                    <h1 data-path-scope="outside.*.items.*">
-                        <var data-path="outside.*.items.*.title">2</var>
-                    </h1>
-                </section>
-                <section data-path-scope="outside.*">
-                    <h1 data-path-scope="outside.*.items.*">
-                        <var data-path="outside.*.items.*.title">0</var>
-                    </h1>
-                </section>
-            </div>`);
-        });
-        it('should repeat element for jsonpath', function () {
-            ;
-            [
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items[1:3]">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items[1:3]">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items[1:3]">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`,
-                `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items[1:3]">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                        <h1 data-path-scope="outside.*.items[1:3]">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`
-            ].forEach((input) => {
-                assertRendered(input, { outside: [{ items: [{ title: '0' }, { title: '1' }, { title: '2' }] }, { items: [{ title: '0' }] }] }, `<div>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items[1:3]">
-                            <var data-path="outside.*.items.*.title">1</var>
-                        </h1>
-                        <h1 data-path-scope="outside.*.items[1:3]">
-                            <var data-path="outside.*.items.*.title">2</var>
-                        </h1>
-                    </section>
-                    <section data-path-scope="outside.*">
-                        <h1 data-path-scope="outside.*.items[1:3]" style="display: none;">
-                            <var data-path="outside.*.items.*.title"></var>
-                        </h1>
-                    </section>
-                </div>`);
-            });
-        });
-    });
-    describe('Scripts', () => {
-        it('should autoload scripts initially', () => {
-            assertRendered(`<div data-embed-src="http://example.com/script.js"></div>`, {}, `<div data-embed-src="http://example.com/script.js"></div>`, ['http://example.com/script.js']);
-        });
-        it('should autoload scripts via observer', async () => {
-            const element = new JSDOM('<div><h1></h1></div>').window.document.body.firstElementChild;
-            FEAAS.observeDOMElement(element);
-            element.firstElementChild.setAttribute('data-embed-src', 'http://example.com/script.js');
-            return new Promise((resolve) => {
-                setTimeout(() => {
-                    assertScriptLoaded(element, 'http://example.com/script.js');
-                    resolve();
-                }, 50);
-            });
-        });
-    });
-    describe('Various examples', () => {
-        it('should render custom web components', () => {
-            assertRendered(`<bx-accordion class='-embed' data-embed-src="https://1.www.s81c.com/common/carbon/web-components/version/v1.21.0/accordion.min.js">
-          <bx-accordion-item data-path-scope="dominatorData.items.*" data-path-attributes="dominatorData.items.*">
-          </bx-accordion-item>
-        </bx-accordion>`, {
-                dominatorData: {
-                    name: 'YarikZ',
-                    goal: 'Explode the planet',
-                    status: 'progressing',
-                    items: [
-                        {
-                            'title-text': 'Hello world',
-                            html: 'Hola',
-                            open: true
-                        },
-                        {
-                            'title-text': 'Bye world',
-                            html: 'Mystical island'
-                        }
-                    ]
-                }
-            }, `<bx-accordion class='-embed' data-embed-src="https://1.www.s81c.com/common/carbon/web-components/version/v1.21.0/accordion.min.js">
-        <bx-accordion-item data-path-scope="dominatorData.items.*" data-path-attributes="dominatorData.items.*" title-text="Hello world" open data-attributes-keys="title-text,html,open">
-        Hola
-        </bx-accordion-item>
-        <bx-accordion-item data-path-scope="dominatorData.items.*" data-path-attributes="dominatorData.items.*" title-text="Bye world" data-attributes-keys="title-text,html">
-        Mystical island
-        </bx-accordion-item>
-      </bx-accordion>`);
-        });
-    });
-    describe('customizations', function () {
-        it('processTemplate', function () {
-            assertRenderedContent(`<div></div>`, null, '<h1>123</h1>', [], {
-                processTemplate: (element, template, data) => {
-                    return '<h1>123</h1>';
-                }
-            });
-            assertRenderedContent(`<div></div>`, null, '<div></div>', [], {
-                processTemplate: (element, template, data) => {
-                    return null;
-                }
-            });
-            assertRenderedContent(`<div><h1></h1></div>`, null, '<div><h1></h1></div>', [], {
-                processTemplate: (element, template, data) => {
-                    return null;
-                }
-            });
-        });
-        it('processData', function () {
-            assertRenderedContent(`<div data-path-custom-attribute="test"></div>`, { test: 'a.jpg' }, '<div data-path-custom-attribute="test" custom-attribute="b.jpg"></div>', [], {
-                processData(element, data) {
-                    return {
-                        test: 'b.jpg'
-                    };
-                }
-            });
-            assertRenderedContent(`<div data-path-custom-attribute="test"></div>`, { test: 'a.jpg' }, '<div data-path-custom-attribute="test" custom-attribute="a.jpg.gz"></div>', [], {
-                processData(element, data) {
-                    return {
-                        test: data.test + '.gz'
-                    };
-                }
-            });
-        });
-    });
-});