@internetarchive/modal-manager 2.0.4 → 2.0.5-webdev-8155.1

package/dist/test/modal-manager.test.js

@@ -1,310 +1,307 @@
-import { __awaiter } from "tslib";
-import { fixture, expect, oneEvent, elementUpdated, nextFrame, } from '@open-wc/testing';
-import { html } from 'lit';
-import '../src/modal-manager';
-import { ModalConfig } from '../src/modal-config';
-import { ModalManagerMode } from '../src/modal-manager-mode';
-import { getTabbableElements } from '../src/shoelace/tabbable';
-describe('Modal Manager', () => {
-    it('defaults to closed', () => __awaiter(void 0, void 0, void 0, function* () {
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        expect(el.mode).to.equal('closed');
-    }));
-    it('can be closed by calling closeModal', () => __awaiter(void 0, void 0, void 0, function* () {
-        const el = (yield fixture(html `
-      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
-    `));
-        el.customModalContent = 'foo';
-        yield elementUpdated(el);
-        expect(el.customModalContent).to.equal('foo');
-        el.closeModal();
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-        expect(el.customModalContent).to.equal(undefined);
-    }));
-    it('can be closed by clicking on the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        const el = (yield fixture(html `
-      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
-    `));
-        const backdrop = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.backdrop');
-        const clickEvent = new MouseEvent('click');
-        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-    }));
-    it('emits a modeChanged event when opening', () => __awaiter(void 0, void 0, void 0, function* () {
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        setTimeout(() => {
-            el.showModal({ config });
-        });
-        const response = yield oneEvent(el, 'modeChanged', false);
-        expect(response.detail.mode).to.equal(ModalManagerMode.Open);
-    }));
-    it('emits a modeChanged event when closing', () => __awaiter(void 0, void 0, void 0, function* () {
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        setTimeout(() => {
-            el.closeModal();
-        });
-        const response = yield oneEvent(el, 'modeChanged', false);
-        expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
-    }));
-    it('can show a modal', () => __awaiter(void 0, void 0, void 0, function* () {
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal(ModalManagerMode.Open);
-    }));
-    it('sets the --containerHeight CSS property when the window resizes', () => __awaiter(void 0, void 0, void 0, function* () {
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        const event = new Event('resize');
-        const propBefore = el.style.getPropertyValue('--containerHeight');
-        expect(propBefore).to.equal('');
-        window.dispatchEvent(event);
-        yield elementUpdated(el);
-        const propAfter = el.style.getPropertyValue('--containerHeight');
-        expect(propAfter).to.not.equal('');
-    }));
-    it('calls the userClosedModalCallback when the user taps the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        let callbackCalled = false;
-        const callback = () => {
-            callbackCalled = true;
-        };
-        el.showModal({
-            config,
-            userClosedModalCallback: callback,
-        });
-        yield elementUpdated(el);
-        const backdrop = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.backdrop');
-        const clickEvent = new MouseEvent('click');
-        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(callbackCalled).to.equal(true);
-    }));
-    it('does not call the userClosedModalCallback when the modal just closes', () => __awaiter(void 0, void 0, void 0, function* () {
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        let callbackCalled = false;
-        const callback = () => {
-            callbackCalled = true;
-        };
-        el.showModal({
-            config,
-            userClosedModalCallback: callback,
-        });
-        yield elementUpdated(el);
-        el.closeModal();
-        yield elementUpdated(el);
-        expect(callbackCalled).to.equal(false);
-    }));
-    it('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        config.showLeftNavButton = true;
-        let callbackCalled = false;
-        const callback = () => {
-            callbackCalled = true;
-        };
-        el.showModal({
-            config,
-            userPressedLeftNavButtonCallback: callback,
-        });
-        yield elementUpdated(el);
-        const modalTemplate = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('modal-template');
-        expect(modalTemplate).to.exist;
-        modalTemplate === null || modalTemplate === void 0 ? void 0 : modalTemplate.dispatchEvent(new Event('leftNavButtonPressed'));
-        yield elementUpdated(el);
-        expect(callbackCalled).to.equal(true);
-    }));
-    it('mode is set to closed when close button is pressed', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e;
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-        const modal = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('modal-template');
-        const closeButton = (_e = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.close-button');
-        const clickEvent = new MouseEvent('click');
-        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-    }));
-    it('mode is set to closed when close button gets spacebar pressed', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g;
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-        const modal = (_f = el.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('modal-template');
-        const closeButton = (_g = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelector('.close-button');
-        // Close with keyboard
-        const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });
-        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(spacebarEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-    }));
-    it('mode remains open when close button gets non-button keypress', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _h, _j;
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-        const modal = (_h = el.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('modal-template');
-        const closeButton = (_j = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('.close-button');
-        // Close with keyboard
-        const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });
-        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(keyboardEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-    }));
-    it('allows the user to close by clicking on the backdrop if configured to', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _k;
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        config.closeOnBackdropClick = true;
-        el.showModal({ config });
-        yield elementUpdated(el);
-        const backdrop = (_k = el.shadowRoot) === null || _k === void 0 ? void 0 : _k.querySelector('.backdrop');
-        const clickEvent = new MouseEvent('click');
-        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-    }));
-    it("doesn't allow the user to close by clicking on the backdrop if configured to", () => __awaiter(void 0, void 0, void 0, function* () {
-        var _l;
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        config.closeOnBackdropClick = false;
-        el.showModal({ config });
-        yield elementUpdated(el);
-        const backdrop = (_l = el.shadowRoot) === null || _l === void 0 ? void 0 : _l.querySelector('.backdrop');
-        const clickEvent = new MouseEvent('click');
-        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(el.getMode()).to.equal('open');
-    }));
-    it('ia logo should not visible on modal', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _m;
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        config.showHeaderLogo = false;
-        el.showModal({ config });
-        yield elementUpdated(el);
-        const logoIcon = (_m = el.shadowRoot) === null || _m === void 0 ? void 0 : _m.querySelector('.logo-icon');
-        expect(logoIcon).to.not.exist;
-    }));
-    it('should trap Tab key', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _o, _p, _q, _r, _s;
-        const el = (yield fixture(html `
-      <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-        // Tab once to focus
-        const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
-        document.dispatchEvent(tabEvent);
-        yield elementUpdated(el);
-        // Should be only one tabbable element
-        const modal = (_o = el.shadowRoot) === null || _o === void 0 ? void 0 : _o.querySelector('modal-template');
-        const tabbableElements = getTabbableElements(modal);
-        expect(tabbableElements === null || tabbableElements === void 0 ? void 0 : tabbableElements.length).to.equal(1);
-        const closeButton = (_p = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _p === void 0 ? void 0 : _p.querySelector('.close-button');
-        expect((_q = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _q === void 0 ? void 0 : _q.activeElement).to.equal(closeButton);
-        // Tab again
-        el.dispatchEvent(tabEvent);
-        yield elementUpdated(el);
-        // Should be only one tabbable element
-        expect((_r = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _r === void 0 ? void 0 : _r.activeElement).to.equal(closeButton);
-        // Shift + Tab
-        const shiftTabEvent = new KeyboardEvent('keydown', {
-            key: 'Tab',
-            shiftKey: true,
-        });
-        document.dispatchEvent(shiftTabEvent);
-        yield elementUpdated(el);
-        // Should be only one tabbable element
-        expect((_s = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _s === void 0 ? void 0 : _s.activeElement).to.equal(closeButton);
-    }));
-    it('returns keyboard focus to the triggering element on close', () => __awaiter(void 0, void 0, void 0, function* () {
-        const config = new ModalConfig();
-        const el = (yield fixture(html `
-      <div>
-        <button>Another button</button>
-        <button
-          id="open-modal-btn"
-          @click=${() => {
-            const modal = el.querySelector('modal-manager');
-            modal.showModal({ config });
-        }}
-        >
-          Open modal
-        </button>
-        <modal-manager></modal-manager>
-      </div>
-    `));
-        const openBtn = el.querySelector('#open-modal-btn');
-        const modal = el.querySelector('modal-manager');
-        // Focus is initially on the Open button
-        openBtn.focus();
-        expect(document.activeElement).to.equal(openBtn);
-        // Focus enters the modal when it is opened
-        openBtn.click();
-        yield nextFrame();
-        expect(document.activeElement).to.equal(modal);
-        // With the modal already open, simulate showing different content.
-        // This step is to ensure that even if showModal is called multiple times, we still
-        // maintain the originally-focused element (subsequent calls do not overwrite it).
-        modal.showModal({ config: new ModalConfig() });
-        yield nextFrame();
-        // Focus returns to the Open button when the modal closes
-        modal.closeModal();
-        yield modal.updateComplete;
-        expect(document.activeElement).to.equal(openBtn);
-    }));
-});
+import { fixture, oneEvent, elementUpdated, nextFrame, fixtureCleanup, } from '@open-wc/testing-helpers';
+import { describe, test, expect, afterEach } from 'vitest';
+import { html } from 'lit';
+import '../src/modal-manager';
+import { ModalConfig } from '../src/modal-config';
+import { ModalManagerMode } from '../src/modal-manager-mode';
+import { getTabbableElements } from '../src/shoelace/tabbable';
+describe('Modal Manager', () => {
+    afterEach(() => {
+        fixtureCleanup();
+    });
+    test('defaults to closed', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        expect(el.mode).to.equal('closed');
+    });
+    test('can be closed by calling closeModal', async () => {
+        const el = (await fixture(html `
+      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
+    `));
+        el.customModalContent = 'foo';
+        await elementUpdated(el);
+        expect(el.customModalContent).to.equal('foo');
+        el.closeModal();
+        await elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+        expect(el.customModalContent).to.equal(undefined);
+    });
+    test('can be closed by clicking on the backdrop', async () => {
+        const el = (await fixture(html `
+      <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
+    `));
+        const backdrop = el.shadowRoot?.querySelector('.backdrop');
+        const clickEvent = new MouseEvent('click');
+        backdrop?.dispatchEvent(clickEvent);
+        await elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+    });
+    test('emits a modeChanged event when opening', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        setTimeout(() => {
+            el.showModal({ config });
+        });
+        const response = await oneEvent(el, 'modeChanged');
+        expect(response.detail.mode).to.equal(ModalManagerMode.Open);
+    });
+    test('emits a modeChanged event when closing', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        await el.showModal({ config });
+        await elementUpdated(el);
+        await nextFrame();
+        setTimeout(() => {
+            el.closeModal();
+        });
+        const response = await oneEvent(el, 'modeChanged');
+        expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
+    });
+    test('can show a modal', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        await elementUpdated(el);
+        expect(el.mode).to.equal(ModalManagerMode.Open);
+    });
+    test('sets the --containerHeight CSS property when the window resizes', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        await elementUpdated(el);
+        const event = new Event('resize');
+        const propBefore = el.style.getPropertyValue('--containerHeight');
+        expect(propBefore).to.equal('');
+        window.dispatchEvent(event);
+        await elementUpdated(el);
+        const propAfter = el.style.getPropertyValue('--containerHeight');
+        expect(propAfter).to.not.equal('');
+    });
+    test('calls the userClosedModalCallback when the user taps the backdrop', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        let callbackCalled = false;
+        const callback = () => {
+            callbackCalled = true;
+        };
+        el.showModal({
+            config,
+            userClosedModalCallback: callback,
+        });
+        await elementUpdated(el);
+        const backdrop = el.shadowRoot?.querySelector('.backdrop');
+        const clickEvent = new MouseEvent('click');
+        backdrop?.dispatchEvent(clickEvent);
+        await elementUpdated(el);
+        expect(callbackCalled).to.equal(true);
+    });
+    test('does not call the userClosedModalCallback when the modal just closes', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        let callbackCalled = false;
+        const callback = () => {
+            callbackCalled = true;
+        };
+        el.showModal({
+            config,
+            userClosedModalCallback: callback,
+        });
+        await elementUpdated(el);
+        el.closeModal();
+        await elementUpdated(el);
+        expect(callbackCalled).to.equal(false);
+    });
+    test('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        config.showLeftNavButton = true;
+        let callbackCalled = false;
+        const callback = () => {
+            callbackCalled = true;
+        };
+        el.showModal({
+            config,
+            userPressedLeftNavButtonCallback: callback,
+        });
+        await elementUpdated(el);
+        const modalTemplate = el.shadowRoot?.querySelector('modal-template');
+        expect(modalTemplate).to.exist;
+        modalTemplate?.dispatchEvent(new Event('leftNavButtonPressed'));
+        await elementUpdated(el);
+        expect(callbackCalled).to.equal(true);
+    });
+    test('mode is set to closed when close button is pressed', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        await elementUpdated(el);
+        expect(el.mode).to.equal('open');
+        const modal = el.shadowRoot?.querySelector('modal-template');
+        const closeButton = modal?.shadowRoot?.querySelector('.close-button');
+        const clickEvent = new MouseEvent('click');
+        closeButton?.dispatchEvent(clickEvent);
+        await elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+    });
+    test('mode is set to closed when close button gets spacebar pressed', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        await elementUpdated(el);
+        expect(el.mode).to.equal('open');
+        const modal = el.shadowRoot?.querySelector('modal-template');
+        const closeButton = modal?.shadowRoot?.querySelector('.close-button');
+        // Close with keyboard
+        const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });
+        closeButton?.dispatchEvent(spacebarEvent);
+        await elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+    });
+    test('mode remains open when close button gets non-button keypress', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        await elementUpdated(el);
+        expect(el.mode).to.equal('open');
+        const modal = el.shadowRoot?.querySelector('modal-template');
+        const closeButton = modal?.shadowRoot?.querySelector('.close-button');
+        // Close with keyboard
+        const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });
+        closeButton?.dispatchEvent(keyboardEvent);
+        await elementUpdated(el);
+        expect(el.mode).to.equal('open');
+    });
+    test('allows the user to close by clicking on the backdrop if configured to', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        config.closeOnBackdropClick = true;
+        el.showModal({ config });
+        await elementUpdated(el);
+        const backdrop = el.shadowRoot?.querySelector('.backdrop');
+        const clickEvent = new MouseEvent('click');
+        backdrop?.dispatchEvent(clickEvent);
+        await elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+    });
+    test("doesn't allow the user to close by clicking on the backdrop if configured to", async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        config.closeOnBackdropClick = false;
+        el.showModal({ config });
+        await elementUpdated(el);
+        const backdrop = el.shadowRoot?.querySelector('.backdrop');
+        const clickEvent = new MouseEvent('click');
+        backdrop?.dispatchEvent(clickEvent);
+        await elementUpdated(el);
+        expect(el.getMode()).to.equal('open');
+    });
+    test('ia logo should not visible on modal', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        config.showHeaderLogo = false;
+        el.showModal({ config });
+        await elementUpdated(el);
+        const logoIcon = el.shadowRoot?.querySelector('.logo-icon');
+        expect(logoIcon).to.not.exist;
+    });
+    test('should trap Tab key', async () => {
+        const el = (await fixture(html `
+      <modal-manager></modal-manager>
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        await elementUpdated(el);
+        expect(el.mode).to.equal('open');
+        // Tab once to focus
+        const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
+        document.dispatchEvent(tabEvent);
+        await elementUpdated(el);
+        await nextFrame();
+        // Should be only one tabbable element
+        const modal = el.shadowRoot?.querySelector('modal-template');
+        const tabbableElements = getTabbableElements(modal);
+        expect(tabbableElements?.length).to.equal(1);
+        const closeButton = modal?.shadowRoot?.querySelector('.close-button');
+        expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
+        // Tab again
+        el.dispatchEvent(tabEvent);
+        await elementUpdated(el);
+        await nextFrame();
+        // Should be only one tabbable element
+        expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
+        // Shift + Tab
+        const shiftTabEvent = new KeyboardEvent('keydown', {
+            key: 'Tab',
+            shiftKey: true,
+        });
+        document.dispatchEvent(shiftTabEvent);
+        await elementUpdated(el);
+        await nextFrame();
+        // Should be only one tabbable element
+        expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
+    });
+    test('returns keyboard focus to the triggering element on close', async () => {
+        const config = new ModalConfig();
+        const el = (await fixture(html `
+      <div>
+        <button>Another button</button>
+        <button
+          id="open-modal-btn"
+          @click=${() => {
+            const modal = el.querySelector('modal-manager');
+            modal.showModal({ config });
+        }}
+        >
+          Open modal
+        </button>
+        <modal-manager></modal-manager>
+      </div>
+    `));
+        const openBtn = el.querySelector('#open-modal-btn');
+        const modal = el.querySelector('modal-manager');
+        // Focus is initially on the Open button
+        openBtn.focus();
+        expect(document.activeElement).to.equal(openBtn);
+        // Focus enters the modal when it is opened
+        openBtn.click();
+        await nextFrame();
+        expect(document.activeElement).to.equal(modal);
+        // With the modal already open, simulate showing different content.
+        // This step is to ensure that even if showModal is called multiple times, we still
+        // maintain the originally-focused element (subsequent calls do not overwrite it).
+        modal.showModal({ config: new ModalConfig() });
+        await nextFrame();
+        // Focus returns to the Open button when the modal closes
+        modal.closeModal();
+        await modal.updateComplete;
+        expect(document.activeElement).to.equal(openBtn);
+    });
+});
 //# sourceMappingURL=modal-manager.test.js.map