@dropins/tools 0.21.2-alpha2 → 0.21.2-alpha389

package/lib/slot.test.jsx

@@ -1,325 +0,0 @@
-import { useState } from 'preact/hooks';
-import { Render, Slot } from '.';
-import { render, waitFor } from '@adobe/elsie/lib/tests';
-describe('Slot', () => {
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-    afterAll(() => {
-        jest.clearAllMocks();
-        jest.resetAllMocks();
-    });
-    test('should render', () => {
-        const { container } = render(<Slot name="Test">
-        <div>Default</div>
-      </Slot>);
-        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div data-slot=\\"Test\\"><div>Default</div></div></div>"`);
-    });
-    test('should render using "render"', () => {
-        const { container } = render(<Slot name="Test" render={() => <div>Default Render</div>}/>);
-        expect(container.innerHTML).toMatchInlineSnapshot(`"<div class=\\"dropin-design\\"><div data-slot=\\"Test\\"><div>Default Render</div></div></div>"`);
-    });
-    test('should validate Slot has a "name"', () => {
-        const warnLog = jest.spyOn(console, 'warn').mockImplementation(() => { });
-        render(
-        // @ts-ignore
-        <Slot>
-        <div>Default</div>
-      </Slot>);
-        expect(warnLog).toHaveBeenCalledTimes(1);
-    });
-    test('should bound Slot errors during render', async () => {
-        const errorLog = jest.spyOn(console, 'error').mockImplementation(() => { });
-        const { container, findByText } = render(<div>
-        <Slot name="Test1" slot={function Test1() {
-                throw new Error('Error');
-            }}>
-          <div>Slot "Test1"</div>
-        </Slot>
-        <Slot name="Test2" slot={function Test2(next) {
-                const elem = document.createElement('div');
-                elem.innerHTML = 'Slot "Test2 Appended"';
-                next.appendChild(elem);
-            }}>
-          <div>Slot "Test2"</div>
-        </Slot>
-      </div>);
-        // await for Slot2 to be appended
-        await findByText('Slot "Test2 Appended"');
-        expect(errorLog).toHaveBeenCalledTimes(1);
-        expect(errorLog.mock.calls[0][0]).toMatchInlineSnapshot(`"Error in \\"Test1\\" Slot callback"`);
-        // expect elem to be appended to Slot2
-        expect(container.firstElementChild?.innerHTML).toMatchInlineSnapshot(`"<div><div data-slot=\\"Test1\\"><div>Slot \\"Test1\\"</div></div><div data-slot=\\"Test2\\"><div>Slot \\"Test2\\"</div><div data-slot-html-element=\\"div\\"><div>Slot \\"Test2 Appended\\"</div></div></div></div>"`);
-    });
-    test('should include context', async () => {
-        const provider = new Render(<div />);
-        const customMethod1 = jest.fn();
-        const customMethod2 = jest.fn();
-        const MyContainer = (props) => (<Slot name="Test" slot={props.slots.Test} context={{
-                foo: 'bar',
-                customMethod1,
-                customMethod2,
-            }}/>);
-        await provider.render(MyContainer, {
-            slots: {
-                Test: (ctx) => {
-                    ctx.customMethod1(ctx);
-                },
-            },
-        })(document.body);
-        await waitFor(() => {
-            expect(customMethod1).toHaveBeenCalledTimes(1);
-            expect(customMethod2).toHaveBeenCalledTimes(0);
-        });
-        expect(document.body.innerHTML).toMatchInlineSnapshot(`"<div><div data-slot=\\"Test\\"></div></div>"`);
-    });
-    test('should re-render on Slot Method state change', async () => {
-        const mockValueFn = jest.fn();
-        render(<Slot name="Test" slot={(ctx) => {
-                // @ts-ignore
-                ctx.doSomething((_, state) => {
-                    state.set('loading', true);
-                    return state.get('loading') ? 'loading' : 'default';
-                });
-            }} context={{
-                doSomething(callback) {
-                    this._registerMethod((...attrs) => {
-                        mockValueFn(callback(...attrs));
-                    });
-                },
-            }}/>);
-        await waitFor(() => {
-            expect(mockValueFn).toBeCalledTimes(2);
-            expect(mockValueFn.mock.calls).toMatchInlineSnapshot(`
-        Array [
-          Array [
-            "default",
-          ],
-          Array [
-            "loading",
-          ],
-        ]
-      `);
-        });
-    });
-    test('should include API', async () => {
-        render(<Slot name="Test" slot={(ctx) => {
-                expect(Object.keys(ctx)).toEqual([
-                    'dictionary',
-                    '_setProps',
-                    '_registerMethod',
-                    '_htmlElementToVNode',
-                    'getSlotElement',
-                    'onChange',
-                    'replaceWith',
-                    'appendChild',
-                    'prependChild',
-                    'appendSibling',
-                    'prependSibling',
-                ]);
-            }}/>);
-    });
-    test('_registerMethod should validate callback is a function', async () => {
-        const warnLog = jest.spyOn(console, 'warn').mockImplementation(() => { });
-        render(<Slot name="Test" slot={(ctx) => {
-                // @ts-ignore
-                ctx.doSomething();
-            }} context={{
-                doSomething() {
-                    this._registerMethod('fail');
-                },
-            }}/>);
-        expect(warnLog).toBeCalledTimes(1);
-    });
-    test('_htmlElementToVNode should append an HTML Element in the Virtual Tree', async () => {
-        const elem = document.createElement('button');
-        elem.textContent = 'Button';
-        const { container, findByText } = render(<Slot name="Test" slot={(ctx) => {
-                // @ts-ignore
-                ctx.doSomething(() => { });
-            }} context={{
-                doSomething(callback) {
-                    this._registerMethod((...attrs) => {
-                        callback(...attrs);
-                        const children = this._htmlElementToVNode(elem);
-                        this._setProps({ children });
-                    });
-                },
-            }}/>);
-        // await for element to be appended to the Slot
-        await findByText('Button');
-        const slot = container.querySelector('[data-slot]');
-        expect(slot?.outerHTML).toMatchInlineSnapshot(`"<div data-slot=\\"Test\\"><div data-slot-html-element=\\"button\\"><button>Button</button></div></div>"`);
-    });
-    test('getSlotElement should validate element', async () => {
-        const { container } = render(<Slot name="Test" slot={(ctx) => {
-                ctx.getSlotElement('invalid');
-            }}/>);
-        const slot = container.querySelector('[data-slot-key]');
-        expect(slot?.outerHTML).toMatchInlineSnapshot(`undefined`);
-    });
-    test('getSlotElement should append child', async () => {
-        const { container } = render(<Slot name="Test" slot={(ctx) => {
-                const foo = ctx.getSlotElement('foo');
-                const elem1 = document.createElement('span');
-                elem1.innerHTML = 'Foo';
-                foo.appendChild(elem1);
-            }}>
-        <div data-slot-key="foo">
-          <span>foo-original</span>
-        </div>
-      </Slot>);
-        const slot = container.querySelector('[data-slot-key]');
-        expect(slot?.outerHTML).toMatchInlineSnapshot(`"<div data-slot-key=\\"foo\\"><span>foo-original</span><span>Foo</span></div>"`);
-    });
-    test('getSlotElement should prepend child', async () => {
-        const { container } = render(<Slot name="Test" slot={(ctx) => {
-                const foo = ctx.getSlotElement('foo');
-                const elem1 = document.createElement('span');
-                elem1.innerHTML = 'Foo';
-                foo.prependChild(elem1);
-            }}>
-        <div data-slot-key="foo">
-          <span>foo-original</span>
-        </div>
-      </Slot>);
-        const slot = container.querySelector('[data-slot-key]');
-        expect(slot?.outerHTML).toMatchInlineSnapshot(`"<div data-slot-key=\\"foo\\"><span>Foo</span><span>foo-original</span></div>"`);
-    });
-    test('getSlotElement should append sibbling', async () => {
-        const { container } = render(<Slot name="Test" slot={(ctx) => {
-                const foo = ctx.getSlotElement('foo');
-                const elem1 = document.createElement('span');
-                elem1.innerHTML = 'Foo';
-                foo.appendSibling(elem1);
-            }}>
-        <div data-slot-key="foo">
-          <span>foo-original</span>
-        </div>
-      </Slot>);
-        const slot = container.querySelector('[data-slot-key]');
-        expect(slot?.parentElement?.outerHTML).toMatchInlineSnapshot(`"<div data-slot=\\"Test\\"><div data-slot-key=\\"foo\\"><span>foo-original</span></div><span>Foo</span></div>"`);
-    });
-    test('getSlotElement should prepend sibbling', async () => {
-        const { container } = render(<Slot name="Test" slot={(ctx) => {
-                const foo = ctx.getSlotElement('foo');
-                const elem1 = document.createElement('span');
-                elem1.innerHTML = 'Foo';
-                foo.prependSibling(elem1);
-            }}>
-        <div data-slot-key="foo">
-          <span>foo-original</span>
-        </div>
-      </Slot>);
-        const slot = container.querySelector('[data-slot-key]');
-        expect(slot?.parentElement?.outerHTML).toMatchInlineSnapshot(`"<div data-slot=\\"Test\\"><span>Foo</span><div data-slot-key=\\"foo\\"><span>foo-original</span></div></div>"`);
-    });
-    test('should listen to render changes', async () => {
-        const Component = () => {
-            const [data, setData] = useState('Initial');
-            return (<Slot name="Test" slot={(ctx) => {
-                    const elem = document.createElement('span');
-                    elem.innerHTML = ctx.data;
-                    ctx.appendChild(elem);
-                    ctx.onChange((next) => {
-                        elem.innerHTML = next.data;
-                    });
-                    setData('Updated');
-                }} context={{ data }}/>);
-        };
-        const { findByText } = render(<Component />);
-        const slot = await findByText('Updated');
-        expect(slot).toBeTruthy();
-    });
-    test('should replaceWith', async () => {
-        const { findByText } = render(<Slot name="Test" slot={(ctx) => {
-                const elem = document.createElement('span');
-                elem.innerHTML = 'Foo';
-                ctx.replaceWith(elem);
-            }}>
-        <div>Original</div>
-      </Slot>);
-        const slot = await findByText('Foo');
-        expect(slot?.parentElement?.parentElement?.innerHTML).toMatchInlineSnapshot(`"<div data-slot-html-element=\\"span\\"><span>Foo</span></div>"`);
-    });
-    test('should appendChild', async () => {
-        const { findByText } = render(<Slot name="Test" slot={(ctx) => {
-                const elem = document.createElement('span');
-                elem.innerHTML = 'Foo';
-                ctx.appendChild(elem);
-            }}>
-        <div>Original</div>
-      </Slot>);
-        const slot = await findByText('Foo');
-        expect(slot?.parentElement?.parentElement?.innerHTML).toMatchInlineSnapshot(`"<div>Original</div><div data-slot-html-element=\\"span\\"><span>Foo</span></div>"`);
-    });
-    test('should prependChild', async () => {
-        const { findByText } = render(<Slot name="Test" slot={(ctx) => {
-                const elem = document.createElement('span');
-                elem.innerHTML = 'Foo';
-                ctx.prependChild(elem);
-            }}>
-        <div>Original</div>
-      </Slot>);
-        const slot = await findByText('Foo');
-        expect(slot?.parentElement?.parentElement?.innerHTML).toMatchInlineSnapshot(`"<div data-slot-html-element=\\"span\\"><span>Foo</span></div><div>Original</div>"`);
-    });
-    test('should appendSibling', async () => {
-        const { findByText } = render(<Slot name="Test" slot={(ctx) => {
-                const elem = document.createElement('span');
-                elem.innerHTML = 'Foo';
-                ctx.appendSibling(elem);
-            }}>
-        <div>Original</div>
-      </Slot>);
-        const slot = await findByText('Foo');
-        expect(slot?.parentElement?.innerHTML).toMatchInlineSnapshot(`"<div data-slot=\\"Test\\"><div>Original</div></div><span>Foo</span>"`);
-    });
-    test('should prependSibling', async () => {
-        const { findByText } = render(<Slot name="Test" slot={(ctx) => {
-                const elem = document.createElement('span');
-                elem.innerHTML = 'Foo';
-                ctx.prependSibling(elem);
-            }}>
-        <div>Original</div>
-      </Slot>);
-        const slot = await findByText('Foo');
-        expect(slot?.parentElement?.innerHTML).toMatchInlineSnapshot(`"<span>Foo</span><div data-slot=\\"Test\\"><div>Original</div></div>"`);
-    });
-    test('should toggle debugging tools', async () => {
-        // @ts-ignore
-        window.DROPINS.showSlots(true);
-        expect(sessionStorage.getItem('dropin-debugger--show-slots')).toEqual('true');
-        expect(document.body.classList.contains('dropin-debugger--show-slots')).toBe(true);
-        // @ts-ignore
-        window.DROPINS.showSlots(false);
-        expect(sessionStorage.getItem('dropin-debugger--show-slots')).toEqual('false');
-        expect(document.body.classList.contains('dropin-debugger--show-slots')).toBe(false);
-    });
-    test('should persist debugging tools', async () => {
-        // @ts-ignore
-        const mockShowSlots = jest.spyOn(window.DROPINS, 'showSlots');
-        expect(mockShowSlots).toHaveBeenCalledTimes(0);
-    });
-    test('should re-render when context changes', async () => {
-        const mockFn = jest.fn();
-        const Component = () => {
-            const [data, setData] = useState(false);
-            return (<Slot name="Test" context={{ data }} slot={(ctx) => {
-                    expect(ctx.data).toEqual(false);
-                    ctx.onChange((next) => {
-                        mockFn(next.data);
-                    });
-                    setData(true);
-                }}>
-          <div>Original</div>
-        </Slot>);
-        };
-        render(<Component />);
-        await waitFor(() => {
-            expect(mockFn).toHaveBeenCalledTimes(2);
-            expect(mockFn.mock.calls[0][0]).toEqual(false);
-            expect(mockFn.mock.calls[1][0]).toEqual(true);
-        });
-    });
-});

package/lib/tests.d.ts

@@ -1,4 +0,0 @@
-import { RenderOptions, RenderResult } from '@testing-library/preact';
-export * from '@testing-library/preact';
-export declare const render: (ui: any, options?: Omit<RenderOptions, 'queries'>) => RenderResult;
-//# sourceMappingURL=tests.d.ts.map

package/lib/tests.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tests.d.ts","sourceRoot":"","sources":["../../src/lib/tests.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,aAAa,EACb,YAAY,EACb,MAAM,yBAAyB,CAAC;AAMjC,cAAc,yBAAyB,CAAC;AAexC,eAAO,MAAM,MAAM,OACb,GAAG,YACG,KAAK,aAAa,EAAE,SAAS,CAAC,KACvC,YAOF,CAAC"}

package/lib/tests.jsx

@@ -1,19 +0,0 @@
-import { render as originalRender, } from '@testing-library/preact';
-import fs from 'fs';
-import path from 'path';
-import { UIProvider } from '@adobe/elsie/components';
-export * from '@testing-library/preact';
-const directoryPath = path.relative(process.cwd(), 'src/i18n/'); // path to the JSON files (relative to this file
-const files = fs.readdirSync(directoryPath); // get a list of all files in the directory
-const jsonFiles = files.filter((file) => path.extname(file) === '.json'); // filter out only the JSON files
-const langDefinitions = jsonFiles.reduce((acc, file) => {
-    const filePath = path.join(directoryPath, file); // get the full path to the file
-    const rawData = fs.readFileSync(filePath); // read the file synchronously
-    const parsedData = JSON.parse(rawData); // parse the JSON data and return it
-    return { ...acc, [file.replace('.json', '')]: parsedData };
-}, {});
-export const render = (ui, options) => {
-    return originalRender(<UIProvider lang={'en_US'} langDefinitions={langDefinitions}>
-      {ui}
-    </UIProvider>, options);
-};

package/lib/tests.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=tests.test.d.ts.map

package/lib/tests.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tests.test.d.ts","sourceRoot":"","sources":["../../src/lib/tests.test.tsx"],"names":[],"mappings":""}

package/lib/tests.test.jsx

@@ -1,13 +0,0 @@
-import { render } from '@adobe/elsie/lib/tests';
-import { UIProvider } from '@adobe/elsie/components';
-describe('src/lib/tests', () => {
-    test('renders the UIProvider with langDefinitions', () => {
-        const { container } = render(<UIProvider lang={'en_US'} langDefinitions={{
-                en_US: {
-                    test: 'test',
-                },
-            }}/>);
-        const elem = container.querySelector('.dropin-design');
-        expect(!!elem).toEqual(true);
-    });
-});

package/lib/types.d.ts

@@ -1,9 +0,0 @@
-import { FunctionComponent } from 'preact';
-export type Container<T, D = {
-    [key: string]: any;
-}> = FunctionComponent<T & {
-    initialData?: D;
-}> & {
-    getInitialData?: (props: T) => Promise<D>;
-};
-//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C,MAAM,MAAM,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,IAAI,iBAAiB,CACtE,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,CAAC,CAAA;CAAE,CACxB,GAAG;IACF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;CAC3C,CAAC"}

package/lib/types.js

@@ -1 +0,0 @@
-export {};

package/lib/vcomponent.d.ts

@@ -1,8 +0,0 @@
-import { VNode, ComponentChildren } from 'preact';
-export type VComponentProps = {
-    node: VNode | VNode[];
-    children?: ComponentChildren;
-    [key: string]: any;
-};
-export declare function VComponent({ node, ...props }: VComponentProps): import("preact").JSX.Element | null;
-//# sourceMappingURL=vcomponent.d.ts.map

package/lib/vcomponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vcomponent.d.ts","sourceRoot":"","sources":["../../src/lib/vcomponent.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAGlD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,uCAuB7D"}

package/lib/vcomponent.jsx

@@ -1,27 +0,0 @@
-/*
-ADOBE CONFIDENTIAL
-Copyright 2023 Adobe
-All Rights Reserved.
-NOTICE: All information contained herein is, and remains
-the property of Adobe and its suppliers, if any. The intellectual
-and technical concepts contained herein are proprietary to Adobe
-and its suppliers and are protected by all applicable intellectual
-property laws, including trade secret and copyright laws.
-Dissemination of this information or reproduction of this material
-is strictly forbidden unless prior written permission is obtained
-from Adobe.
-*/
-import { classes } from '.';
-export function VComponent({ node, ...props }) {
-    if (!node)
-        return null;
-    if (Array.isArray(node)) {
-        return (<>
-        {node.map((n, key) => (<VComponent key={key} node={n} className={props.className} {...props}/>))}
-      </>);
-    }
-    // @ts-ignore
-    props.className = classes([node.props.className, props.className]);
-    // @ts-ignore
-    return <node.type ref={node.ref} key={node.key} {...node.props} {...props}/>;
-}

package/lib/vcomponent.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=vcomponent.test.d.ts.map

package/lib/vcomponent.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vcomponent.test.d.ts","sourceRoot":"","sources":["../../src/lib/vcomponent.test.tsx"],"names":[],"mappings":""}

package/lib/vcomponent.test.jsx

@@ -1,51 +0,0 @@
-import { render } from '@adobe/elsie/lib/tests';
-import { VComponent } from '.';
-describe('VComponent', () => {
-    test('renders empty div if node is empty', () => {
-        const { container } = render(
-        // @ts-ignore
-        <VComponent node={null}/>);
-        expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="dropin-design"
-        />
-      </div>
-    `);
-    });
-    test('render with type string component', () => {
-        const { container } = render(<VComponent node={<div className="vcomp-string"/>} className="vcomp-component">
-        <div className="vcomp-string-child"/>
-      </VComponent>);
-        const elem = container.querySelector('.vcomp-string.vcomp-component');
-        const child = container.querySelector('.vcomp-string-child');
-        expect(!!elem && !!child).toEqual(true);
-    });
-    test('render function component', () => {
-        const TestComponent = ({ children, }) => <span className="vcomp-function">{children}</span>;
-        const { container } = render(<VComponent node={<TestComponent />}>
-        <div className="vcomp-function-child"/>
-      </VComponent>);
-        const elem = container.querySelector('.vcomp-function');
-        const child = container.querySelector('.vcomp-function-child');
-        expect(!!elem && !!child).toEqual(true);
-    });
-    test('render array of elements', () => {
-        const TestComponent = ({ children, }) => <span className="vcomp-function-array">{children}</span>;
-        const elements = [
-            <TestComponent key={1}/>,
-            <div className="vcomp-string-array" key={2}/>,
-        ];
-        const { container } = render(<VComponent node={elements}/>);
-        const elem1 = container.querySelector('.vcomp-function-array');
-        const elem2 = container.querySelector('.vcomp-string-array');
-        expect(!!elem1 && !!elem2).toEqual(true);
-    });
-    test('render children from prop', () => {
-        const TestComponent = ({ children, }) => <span className="vcomp-parent">{children}</span>;
-        const { container } = render(<VComponent node={<TestComponent children={<div className="vcomp-child"/>}/>}/>);
-        const parent = container.querySelector('.vcomp-parent');
-        const child = container.querySelector('.vcomp-child');
-        expect(!!parent && !!child).toEqual(true);
-    });
-});