@salesforcedevs/arch-components 1.20.17-alpha8 → 1.25.0

package/src/common/reflectedElement/__tests__/modules/test/selectTransform/selectTransform.ts

@@ -1,18 +0,0 @@
-import { ReflectedElement } from '../../../../reflectedElement';
-
-export default class extends ReflectedElement {
-    get contentElement() {
-        return this.template.querySelector('select') as HTMLSelectElement;
-    }
-
-    innerHTMLSetCallback() {
-        this.contentElement.setAttribute(
-            'data-count',
-            String(this.contentElement.querySelectorAll('option').length)
-        );
-    }
-
-    transformHTML(html: string) {
-        return `${html}  <option value="last">Last</option>`;
-    }
-}

package/src/common/reflectedElement/__tests__/reflectedElement.test.ts

@@ -1,75 +0,0 @@
-import { html, renderIntoBody } from 'shared/testutils';
-
-import Select from './modules/test/select/select';
-import SelectTransform from './modules/test/selectTransform/selectTransform';
-
-customElements.define('test-select', Select.CustomElementConstructor);
-customElements.define(
-    'test-select-transform',
-    SelectTransform.CustomElementConstructor
-);
-
-describe('reflected-element', () => {
-    afterEach(() => {
-        document.body.innerHTML = '';
-    });
-
-    // Skip these snapshot tests as LWC slot content doesn't render consistently in tests
-    it.skip('reflects the innerHTML', async () => {
-        let element = renderIntoBody(
-            html`
-                <test-select>
-                    <option value="a">A</option>
-                    <option value="b">B</option>
-                </test-select>
-            `
-        );
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        expect(
-            element.shadowRoot!.querySelector('select')!.innerHTML
-        ).toMatchHTMLSnapshot();
-    }, 10000);
-
-    it.skip('transforms the innerHTML', async () => {
-        let element = renderIntoBody(
-            html`
-                <test-select-transform>
-                    <option value="a">A</option>
-                    <option value="b">B</option>
-                </test-select-transform>
-            `
-        );
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        expect(
-            element.shadowRoot!.querySelector('select')!.innerHTML
-        ).toMatchHTMLSnapshot();
-    }, 10000);
-
-    it('renders components with reflected innerHTML', async () => {
-        let element = renderIntoBody(html`<test-select></test-select>`);
-        await new Promise((resolve) => setTimeout(resolve, 50));
-        expect(element).toBeTruthy();
-        expect(element.shadowRoot!.querySelector('select')).toBeTruthy();
-    }, 10000);
-
-    it('calls innerHTMLSetCallback', async () => {
-        let element = renderIntoBody(
-            html`
-                <test-select-transform>
-                    <option value="a">A</option>
-                    <option value="b">B</option>
-                    <option value="b">C</option>
-                </test-select-transform>
-            `
-        );
-        await new Promise((resolve) => setTimeout(resolve, 100));
-
-        const select = element.shadowRoot!.querySelector('select')!;
-        const count = select.getAttribute('data-count');
-
-        // Due to LWC slot limitations, the count might be 1 or 4
-        // Just verify the callback was called (count attribute exists)
-        expect(select).toHaveAttribute('data-count');
-        expect(parseInt(count!)).toBeGreaterThan(0);
-    }, 10000);
-});

package/src/common/slot/__tests__/slot.test.ts

@@ -1,96 +0,0 @@
-import { html, renderIntoBody } from 'shared/testutils';
-
-import { assignedSlotNames, isSlotAssigned } from '../slot';
-
-customElements.define(
-    'test-a',
-    class extends HTMLElement {
-        connectedCallback() {
-            this.attachShadow({ mode: 'open' });
-            this.shadowRoot!.innerHTML = `
-        <test-b>
-          <slot></slot>
-          <slot name="header" slot="header"></slot>
-          <slot name="footer" slot="footer"></slot>
-        </test-b>
-      `;
-        }
-    }
-);
-
-customElements.define(
-    'test-b',
-    class extends HTMLElement {
-        connectedCallback() {
-            this.attachShadow({ mode: 'open' });
-            this.shadowRoot!.innerHTML = `
-        <slot></slot>
-        <slot name="header"></slot>
-        <slot name="footer"></slot>
-      `;
-        }
-    }
-);
-
-describe('isSlotAssigned', () => {
-    describe('false', () => {
-        it('test-a', () => {
-            let element = renderIntoBody(html` <test-a></test-a> `);
-            let slot = element.shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(false);
-        });
-        it('test-b', () => {
-            let element = renderIntoBody(html` <test-a></test-a> `);
-            let slot = element
-                .shadowRoot!.querySelector('test-b')!
-                .shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(false);
-        });
-    });
-    describe('true', () => {
-        it('test-a', () => {
-            let element = renderIntoBody(html`
-                <test-a>
-                    <h1>Hello</h1>
-                </test-a>
-            `);
-            let slot = element.shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(true);
-        });
-        it('test-b', () => {
-            let element = renderIntoBody(html`
-                <test-a>
-                    <h1>Hello</h1>
-                </test-a>
-            `);
-            let slot = element
-                .shadowRoot!.querySelector('test-b')!
-                .shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(true);
-        });
-    });
-});
-
-describe('assignedSlotNames', () => {
-    it('test-a', () => {
-        let element = renderIntoBody(html`
-            <test-a>
-                <h1>Hello</h1>
-                <header slot="header"></header>
-            </test-a>
-        `);
-        let shadowRoot = element.shadowRoot!;
-        expect(assignedSlotNames(shadowRoot)).toEqual(['default', 'header']);
-    });
-    it('test-b', () => {
-        let element = renderIntoBody(html`
-            <test-a>
-                <h1>Hello</h1>
-                <header slot="header"></header>
-            </test-a>
-        `);
-        let shadowRoot =
-            element.shadowRoot!.querySelector('test-b')!.shadowRoot!;
-        expect(assignedSlotNames(shadowRoot)).toEqual(['default', 'header']);
-    });
-});

package/src/common/slot/slot.ts

@@ -1,20 +0,0 @@
-export function assignedSlotNames(template: {
-    querySelectorAll(selector: string): NodeList;
-}) {
-    let slots = Array.from(
-        template.querySelectorAll('slot')
-    ) as HTMLSlotElement[];
-    return slots
-        .filter(isSlotAssigned)
-        .map((slot) => slot.getAttribute('name') || 'default');
-}
-
-export function isSlotAssigned(slot: HTMLSlotElement): boolean {
-    let [element] = slot.assignedElements();
-    if (element) {
-        if (element.tagName === 'SLOT')
-            return isSlotAssigned(element as HTMLSlotElement);
-        return true;
-    }
-    return slot.children.length > 0;
-}