@dropins/tools 0.21.1-beta1 → 0.21.2-alpha1

package/lib/slot.test.jsx

@@ -0,0 +1,325 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,19 @@
+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

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

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

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

package/lib/tests.test.jsx

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1 @@
+{"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

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

package/lib/vcomponent.d.ts

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,27 @@
+/*
+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

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

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

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

package/lib/vcomponent.test.jsx

@@ -0,0 +1,51 @@
+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);
+    });
+});

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/tools", "version": "0.21.1-beta1"}
+{"name": "@dropins/tools", "version": "0.21.2-alpha1"}