@omicronenergy/oscd-shell 0.0.13 → 0.0.15

package/dist/side-panel/editor-plugins-panel.spec.js

@@ -3,8 +3,30 @@ import '../oscd-shell.js';
 import { createTestDocs } from '../utils/testing/test-doc-helpers.js';
 import { sampleEditorPlugins } from '../utils/testing/plugin-helpers.js';
 import { TestMenuPlugin1 } from '../utils/testing/test-plugins.js';
+import { OscdOutlinedSearchField } from '@omicronenergy/oscd-ui/search-field/OscdOutlinedSearchField.js';
+import sinon from 'sinon';
+// A grouped editor fixture, used to exercise the collapsed rail's group
+// flyout (rendered only when `editors` contains a `PluginGroup`).
+const groupedEditorPlugins = [
+    {
+        name: 'Grouped Editors',
+        icon: 'folder',
+        plugins: [
+            {
+                name: 'Grouped Editor 1',
+                tagName: 'test-grouped-editor-1',
+                icon: 'coronavirus',
+            },
+            {
+                name: 'Grouped Editor 2',
+                tagName: 'test-grouped-editor-2',
+                icon: 'coronavirus',
+            },
+        ],
+    },
+];
 const findPanelToggleButton = (pluginsMenu) => {
-    const toggleButton = pluginsMenu.shadowRoot?.querySelector('oscd-icon-button.toggle-button');
+    const toggleButton = pluginsMenu.shadowRoot?.querySelector('.toggle-button');
     expect(toggleButton).to.exist;
     return toggleButton;
 };
@@ -15,6 +37,27 @@ describe('editor-plugins-panel', () => {
     let oscdShell;
     let editorPluginsPanel;
     let docs;
+    const extraShells = [];
+    const LS_KEYS = {
+        expanded: 'editor-plugins-panel:expanded',
+        expandedIds: 'editor-plugins-panel:expandedIds',
+        pinnedPluginIds: 'editor-plugins-panel:pinnedPluginIds',
+        pinnedExpanded: 'editor-plugins-panel:pinnedExpanded',
+    };
+    // Mounts a brand-new shell + panel, simulating a page reload. Any pre-seeded
+    // localStorage is therefore read by a freshly constructed panel.
+    const mountFreshPanel = async () => {
+        const shell = (await fixture(html `<oscd-shell
+          .docs=${docs}
+          docName=${Object.keys(docs)[0]}
+        ></oscd-shell>`));
+        shell.plugins = { editor: sampleEditorPlugins };
+        const panel = shell.shadowRoot.querySelector('editor-plugins-panel');
+        await shell.updateComplete;
+        await panel.updateComplete;
+        extraShells.push(shell);
+        return panel;
+    };
     beforeEach(async () => {
         docs = createTestDocs(1);
         oscdShell = (await fixture(html `<oscd-shell
@@ -33,7 +76,10 @@ describe('editor-plugins-panel', () => {
     });
     afterEach(() => {
         oscdShell.remove();
-        localStorage.removeItem('editorsPanel.expanded');
+        while (extraShells.length) {
+            extraShells.pop().remove();
+        }
+        Object.values(LS_KEYS).forEach(key => localStorage.removeItem(key));
     });
     it('collapses on toggle button click when already expanded ', async () => {
         const toggleButton = findPanelToggleButton(editorPluginsPanel);
@@ -43,12 +89,11 @@ describe('editor-plugins-panel', () => {
         expect(isPanelExpanded(editorPluginsPanel)).to.be.false;
     });
     it('expands on toggle button click when already collapsed', async () => {
-        const toggleButton = findPanelToggleButton(editorPluginsPanel);
-        expect(isPanelExpanded(editorPluginsPanel)).to.be.true;
-        toggleButton.click();
+        findPanelToggleButton(editorPluginsPanel).click();
         await editorPluginsPanel.updateComplete;
         expect(isPanelExpanded(editorPluginsPanel)).to.be.false;
-        toggleButton.click();
+        // The control is a different element in the collapsed rail, so re-query it.
+        findPanelToggleButton(editorPluginsPanel).click();
         await editorPluginsPanel.updateComplete;
         expect(isPanelExpanded(editorPluginsPanel)).to.be.true;
     });
@@ -56,32 +101,432 @@ describe('editor-plugins-panel', () => {
         expect(isPanelExpanded(editorPluginsPanel)).to.be.true;
     });
     it('uses value stored in localstorage initially', async () => {
-        localStorage.setItem('editorsPanel.expanded', 'false');
-        const oscdShell2 = (await fixture(html `<oscd-shell
-          .docs=${docs}
-          docName=${Object.keys(docs)[0]}
-        ></oscd-shell>`));
-        oscdShell2.plugins = {
-            editor: sampleEditorPlugins,
-        };
-        const editorPluginsPanel2 = oscdShell2.shadowRoot.querySelector('editor-plugins-panel');
-        await oscdShell2.updateComplete;
-        await editorPluginsPanel2.updateComplete;
+        localStorage.setItem(LS_KEYS.expanded, JSON.stringify(false));
+        const editorPluginsPanel2 = await mountFreshPanel();
         expect(isPanelExpanded(editorPluginsPanel2)).to.be.false;
-        oscdShell2.remove();
     });
     it('saves expanded/collapsed state (when toggled) in localStorage', async () => {
-        const toggleButton = findPanelToggleButton(editorPluginsPanel);
-        expect(localStorage.getItem('editorsPanel.expanded')).to.be.null;
         expect(isPanelExpanded(editorPluginsPanel)).to.be.true;
-        toggleButton.click();
+        findPanelToggleButton(editorPluginsPanel).click();
         await editorPluginsPanel.updateComplete;
         expect(isPanelExpanded(editorPluginsPanel)).to.be.false;
-        expect(localStorage.getItem('editorsPanel.expanded')).to.equal('false');
-        toggleButton.click();
+        expect(localStorage.getItem(LS_KEYS.expanded)).to.equal(JSON.stringify(false));
+        // Re-query: the collapsed rail renders a different toggle element.
+        findPanelToggleButton(editorPluginsPanel).click();
         await editorPluginsPanel.updateComplete;
         expect(isPanelExpanded(editorPluginsPanel)).to.be.true;
-        expect(localStorage.getItem('editorsPanel.expanded')).to.equal('true');
+        expect(localStorage.getItem(LS_KEYS.expanded)).to.equal(JSON.stringify(true));
+    });
+    describe('restores persisted state on reload (fresh mount)', () => {
+        it('hydrates expandedIds from localStorage and does not clobber it', async () => {
+            const seeded = ['group:0:Communication', 'group:1:Advanced'];
+            localStorage.setItem(LS_KEYS.expandedIds, JSON.stringify(seeded));
+            const panel = await mountFreshPanel();
+            expect(panel.expandedIds).to.deep.equal(seeded);
+            expect(localStorage.getItem(LS_KEYS.expandedIds)).to.equal(JSON.stringify(seeded));
+        });
+        it('hydrates pinnedPluginIds from localStorage and does not clobber it', async () => {
+            const seeded = ['oscd-example-editor', 'oscd-other-editor'];
+            localStorage.setItem(LS_KEYS.pinnedPluginIds, JSON.stringify(seeded));
+            const panel = await mountFreshPanel();
+            expect(panel.pinnedPluginIds).to.deep.equal(seeded);
+            expect(localStorage.getItem(LS_KEYS.pinnedPluginIds)).to.equal(JSON.stringify(seeded));
+        });
+        it('hydrates pinnedExpanded from localStorage and does not clobber it', async () => {
+            const seeded = ['pinned'];
+            localStorage.setItem(LS_KEYS.pinnedExpanded, JSON.stringify(seeded));
+            const panel = await mountFreshPanel();
+            expect(panel.pinnedExpanded).to.deep.equal(seeded);
+            expect(localStorage.getItem(LS_KEYS.pinnedExpanded)).to.equal(JSON.stringify(seeded));
+        });
+        it('hydrates expanded (collapsed) state from localStorage and does not clobber it', async () => {
+            localStorage.setItem(LS_KEYS.expanded, JSON.stringify(false));
+            const panel = await mountFreshPanel();
+            expect(panel.expanded).to.be.false;
+            expect(localStorage.getItem(LS_KEYS.expanded)).to.equal(JSON.stringify(false));
+        });
+    });
+    const getSearchField = () => editorPluginsPanel.shadowRoot.querySelector('oscd-outlined-search-field');
+    const setSearch = async (value) => {
+        const field = getSearchField();
+        field.value = value;
+        field.dispatchEvent(new Event('input'));
+        await editorPluginsPanel.updateComplete;
+    };
+    it('filters editors by their (source) name when searching', async () => {
+        await setSearch('Plugin 2');
+        expect(editorPluginsPanel.editorTreeNodes).to.have.lengthOf(1);
+        expect(editorPluginsPanel.editorTreeNodes[0].name).to.equal('Test Editor Plugin 2');
+    });
+    it('filters editors by their localized label when a locale is set', async () => {
+        editorPluginsPanel.locale = 'de';
+        await editorPluginsPanel.updateComplete;
+        await setSearch('Erweiterung');
+        // Both sample editors share the German label "…Erweiterung" only on the
+        // first entry; searching the German term must still match it.
+        const names = editorPluginsPanel.editorTreeNodes.map(n => n.name);
+        expect(names).to.include('Test Editor Plugin');
+    });
+    it('highlights editor nodes with arrow navigation without selecting them', async () => {
+        const field = getSearchField();
+        field.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'ArrowDown',
+            bubbles: true,
+            composed: true,
+        }));
+        await editorPluginsPanel.updateComplete;
+        expect(editorPluginsPanel.focusedTree).to.equal('pinned');
+        expect(editorPluginsPanel.shadowRoot.querySelector('.pinned-tree')
+            .activeId).to.equal('pinned');
+        expect(editorPluginsPanel.selectedEditor).to.exist;
+    });
+    it('preserves the search query when the field is refocused', async () => {
+        await setSearch('Plugin 2');
+        const field = getSearchField();
+        editorPluginsPanel.focusSearch();
+        await editorPluginsPanel.updateComplete;
+        expect(field.value).to.equal('Plugin 2');
+        expect(editorPluginsPanel.editorTreeNodes).to.have.lengthOf(1);
+    });
+    it('hands search-field arrow navigation to the editor tree when searching', async () => {
+        await setSearch('Plugin');
+        const field = getSearchField();
+        field.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'ArrowDown',
+            bubbles: true,
+            composed: true,
+        }));
+        await editorPluginsPanel.updateComplete;
+        const editorsTree = editorPluginsPanel.shadowRoot.querySelector('.editors-tree');
+        expect(editorPluginsPanel.focusedTree).to.equal('editors');
+        expect(editorsTree.activeId).to.equal(editorsTree.getFirstNodeId());
+    });
+    it('starts search navigation at the last editor for ArrowUp', async () => {
+        await setSearch('Plugin');
+        const field = getSearchField();
+        field.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'ArrowUp',
+            bubbles: true,
+            composed: true,
+        }));
+        await editorPluginsPanel.updateComplete;
+        const editorsTree = editorPluginsPanel.shadowRoot.querySelector('.editors-tree');
+        expect(editorsTree.activeId).to.equal(editorsTree.getLastNodeId());
+    });
+    it('selects the only search result when Enter is pressed in the search field', async () => {
+        await setSearch('Plugin 2');
+        const field = getSearchField();
+        let selected;
+        editorPluginsPanel.addEventListener('editor-select', (event) => {
+            selected = event.detail.editor;
+        });
+        field.focus();
+        field.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'Enter',
+            bubbles: true,
+            composed: true,
+        }));
+        await editorPluginsPanel.updateComplete;
+        expect(selected).to.exist;
+    });
+    it('does nothing on search-field Enter when multiple results remain', async () => {
+        await setSearch('Plugin');
+        const field = getSearchField();
+        let selected = false;
+        editorPluginsPanel.addEventListener('editor-select', () => {
+            selected = true;
+        });
+        field.focus();
+        field.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'Enter',
+            bubbles: true,
+            composed: true,
+        }));
+        await editorPluginsPanel.updateComplete;
+        expect(selected).to.be.false;
+    });
+    it('updates the focused tree when the tree emits active-changed or receives focus', async () => {
+        const editorsTree = editorPluginsPanel.shadowRoot.querySelector('.editors-tree');
+        editorsTree.dispatchEvent(new Event('focusin', { bubbles: true }));
+        expect(editorPluginsPanel.focusedTree).to.equal('editors');
+        editorsTree.dispatchEvent(new CustomEvent('active-changed', {
+            detail: { activeId: editorsTree.activeId },
+            bubbles: true,
+        }));
+        expect(editorPluginsPanel.focusedTree).to.equal('editors');
+    });
+    it('does not focus a tree when the handoff has no active node', () => {
+        // @ts-expect-error focusTree is private; exercise its null-node guard.
+        expect(editorPluginsPanel.focusTree('editors', null)).to.be.false;
+    });
+    it('transfers focus from the pinned tree to the editor tree at its boundary', async () => {
+        const pinnedTree = editorPluginsPanel.shadowRoot.querySelector('.pinned-tree');
+        const editorsTree = editorPluginsPanel.shadowRoot.querySelector('.editors-tree');
+        pinnedTree.activeId = pinnedTree.getLastNodeId();
+        const focusSpy = sinon.spy(editorsTree, 'focus');
+        pinnedTree.dispatchEvent(new CustomEvent('navigation-boundary', {
+            detail: { direction: 'last' },
+            bubbles: true,
+            composed: true,
+        }));
+        await editorPluginsPanel.updateComplete;
+        expect(editorPluginsPanel.focusedTree).to.equal('editors');
+        expect(editorsTree.activeId).to.equal(editorsTree.getFirstNodeId());
+        expect(focusSpy.called).to.be.true;
+        focusSpy.restore();
+    });
+    it('transfers focus back to the pinned tree at the editor boundary', async () => {
+        const pinnedTree = editorPluginsPanel.shadowRoot.querySelector('.pinned-tree');
+        const editorsTree = editorPluginsPanel.shadowRoot.querySelector('.editors-tree');
+        editorPluginsPanel.focusedTree = 'editors';
+        editorsTree.activeId = editorsTree.getFirstNodeId();
+        editorsTree.dispatchEvent(new CustomEvent('navigation-boundary', {
+            detail: { direction: 'first' },
+            bubbles: true,
+            composed: true,
+        }));
+        await editorPluginsPanel.updateComplete;
+        expect(editorPluginsPanel.focusedTree).to.equal('pinned');
+        expect(pinnedTree.activeId).to.equal(pinnedTree.getLastNodeId());
+    });
+    it('does not transfer across the editor boundary while searching', async () => {
+        await setSearch('Plugin');
+        const editorsTree = editorPluginsPanel.shadowRoot.querySelector('.editors-tree');
+        editorPluginsPanel.focusedTree = 'editors';
+        editorsTree.dispatchEvent(new CustomEvent('navigation-boundary', {
+            detail: { direction: 'first' },
+            bubbles: true,
+        }));
+        await editorPluginsPanel.updateComplete;
+        expect(editorPluginsPanel.focusedTree).to.equal('editors');
+    });
+    it('pins and unpins an editor, persisting the ids to localStorage', async () => {
+        const tagName = oscdShell.plugins.editor[0].tagName;
+        editorPluginsPanel.togglePin(tagName);
+        await editorPluginsPanel.updateComplete;
+        expect(editorPluginsPanel.pinnedPluginIds).to.include(tagName);
+        expect(localStorage.getItem('editor-plugins-panel:pinnedPluginIds')).to.contain(tagName);
+        editorPluginsPanel.togglePin(tagName);
+        await editorPluginsPanel.updateComplete;
+        expect(editorPluginsPanel.pinnedPluginIds).to.not.include(tagName);
+    });
+    it('reflects the selected editor into the pinned tree selectedIds', async () => {
+        const editor = oscdShell.plugins.editor[0];
+        editorPluginsPanel.togglePin(editor.tagName);
+        editorPluginsPanel.selectedEditor = editor;
+        await editorPluginsPanel.updateComplete;
+        const pinnedTree = editorPluginsPanel.shadowRoot.querySelector('.tree-container oscd-tree:not(.editors-tree)');
+        expect(pinnedTree.selectedIds).to.deep.equal([editor.tagName]);
+    });
+    it('selects an editor chosen from the pinned tree', async () => {
+        const editor = oscdShell.plugins.editor[0];
+        editorPluginsPanel.togglePin(editor.tagName);
+        await editorPluginsPanel.updateComplete;
+        let selected;
+        editorPluginsPanel.addEventListener('editor-select', (event) => {
+            selected = event.detail.editor;
+        });
+        const pinnedTree = editorPluginsPanel.shadowRoot.querySelector('.tree-container oscd-tree:not(.editors-tree)');
+        pinnedTree.dispatchEvent(new CustomEvent('selected-ids-changed', {
+            detail: { selectedIds: [editor.tagName] },
+        }));
+        await editorPluginsPanel.updateComplete;
+        expect(selected?.tagName).to.equal(editor.tagName);
+    });
+    it('ignores an editor selection with no id', async () => {
+        let dispatched = false;
+        editorPluginsPanel.addEventListener('editor-select', () => {
+            dispatched = true;
+        });
+        editorPluginsPanel.selectEditor([]);
+        expect(dispatched).to.be.false;
+    });
+    it('ignores an unknown editor selection id', async () => {
+        let dispatched = false;
+        editorPluginsPanel.addEventListener('editor-select', () => {
+            dispatched = true;
+        });
+        editorPluginsPanel.selectEditor(['unknown-editor']);
+        expect(dispatched).to.be.false;
+    });
+    describe('transient search mode (collapsed rail)', () => {
+        const collapse = async (panel) => {
+            findPanelToggleButton(panel).click();
+            await panel.updateComplete;
+            expect(isPanelExpanded(panel)).to.be.false;
+        };
+        const findRailSearchButton = (panel) => panel.shadowRoot.querySelector('.rail oscd-icon-button.rail-item');
+        it('opens the panel without persisting `expanded` when the rail search icon is clicked', async () => {
+            await collapse(editorPluginsPanel);
+            expect(localStorage.getItem('editor-plugins-panel:expanded')).to.equal(JSON.stringify(false));
+            findRailSearchButton(editorPluginsPanel).click();
+            await editorPluginsPanel.updateComplete;
+            expect(editorPluginsPanel.hasAttribute('search-mode')).to.be.true;
+            expect(editorPluginsPanel.shadowRoot.querySelector('.tree-container')).to
+                .exist;
+            // Still collapsed as far as persisted state is concerned.
+            expect(editorPluginsPanel.expanded).to.be.false;
+            expect(localStorage.getItem('editor-plugins-panel:expanded')).to.equal(JSON.stringify(false));
+        });
+        it('focuses the search field on entering search mode', async () => {
+            await collapse(editorPluginsPanel);
+            const focusSpy = sinon.spy(OscdOutlinedSearchField.prototype, 'focus');
+            findRailSearchButton(editorPluginsPanel).click();
+            await editorPluginsPanel.updateComplete;
+            // The focus() call is chained off `updateComplete.then(...)`; await it
+            // again so that microtask has a chance to run.
+            await editorPluginsPanel.updateComplete;
+            expect(focusSpy.called).to.be.true;
+            focusSpy.restore();
+        });
+        it('exits search mode (and clears the query) on Escape', async () => {
+            await collapse(editorPluginsPanel);
+            findRailSearchButton(editorPluginsPanel).click();
+            await editorPluginsPanel.updateComplete;
+            await setSearch('Plugin 2');
+            expect(editorPluginsPanel.searchValue).to.equal('Plugin 2');
+            editorPluginsPanel.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            await editorPluginsPanel.updateComplete;
+            expect(editorPluginsPanel.hasAttribute('search-mode')).to.be.false;
+            expect(editorPluginsPanel.searchValue).to.equal('');
+        });
+        it('ignores Escape when not in search mode', async () => {
+            await collapse(editorPluginsPanel);
+            editorPluginsPanel.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            await editorPluginsPanel.updateComplete;
+            expect(isPanelExpanded(editorPluginsPanel)).to.be.false;
+        });
+        it('exits search mode on selecting an editor, without persisting expanded', async () => {
+            await collapse(editorPluginsPanel);
+            findRailSearchButton(editorPluginsPanel).click();
+            await editorPluginsPanel.updateComplete;
+            let selected;
+            editorPluginsPanel.addEventListener('editor-select', (event) => {
+                selected = event.detail.editor;
+            });
+            const tagName = oscdShell.plugins.editor[0].tagName;
+            editorPluginsPanel.selectEditor([tagName]);
+            await editorPluginsPanel.updateComplete;
+            expect(selected?.tagName).to.equal(tagName);
+            expect(editorPluginsPanel.hasAttribute('search-mode')).to.be.false;
+            expect(editorPluginsPanel.expanded).to.be.false;
+        });
+        it('selects a root editor from the collapsed rail', async () => {
+            await collapse(editorPluginsPanel);
+            const editor = oscdShell.plugins.editor[0];
+            const railEditors = editorPluginsPanel.shadowRoot.querySelectorAll('.rail > oscd-icon-button.rail-item');
+            const railEditor = railEditors[2];
+            expect(!!railEditor).to.be.true;
+            let selected;
+            editorPluginsPanel.addEventListener('editor-select', (event) => {
+                selected = event.detail.editor;
+            });
+            railEditor.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+            await editorPluginsPanel.updateComplete;
+            expect(selected?.tagName).to.equal(editor.tagName);
+        });
+    });
+    describe('pinned/editors tree expand-state persistence', () => {
+        it('persists the pinned tree expanded ids on `expanded-ids-changed`', async () => {
+            const tagName = oscdShell.plugins.editor[0].tagName;
+            editorPluginsPanel.togglePin(tagName);
+            await editorPluginsPanel.updateComplete;
+            const pinnedTree = editorPluginsPanel.shadowRoot.querySelector('.tree-container oscd-tree:not(.editors-tree)');
+            pinnedTree.dispatchEvent(new CustomEvent('expanded-ids-changed', {
+                detail: { expandedIds: ['pinned'] },
+            }));
+            await editorPluginsPanel.updateComplete;
+            expect(editorPluginsPanel.pinnedExpanded).to.deep.equal(['pinned']);
+        });
+        it('persists the editors tree expanded ids on `expanded-ids-changed`', async () => {
+            const editorsTree = editorPluginsPanel.shadowRoot.querySelector('.tree-container oscd-tree.editors-tree');
+            editorsTree.dispatchEvent(new CustomEvent('expanded-ids-changed', {
+                detail: { expandedIds: ['group:0:Communication'] },
+            }));
+            await editorPluginsPanel.updateComplete;
+            expect(editorPluginsPanel.expandedIds).to.deep.equal([
+                'group:0:Communication',
+            ]);
+        });
+    });
+    describe('collapsed rail group flyout', () => {
+        let groupedShell;
+        let groupedPanel;
+        beforeEach(async () => {
+            groupedShell = (await fixture(html `<oscd-shell
+            .docs=${docs}
+            docName=${Object.keys(docs)[0]}
+          ></oscd-shell>`));
+            groupedShell.plugins = { editor: groupedEditorPlugins };
+            groupedPanel = groupedShell.shadowRoot.querySelector('editor-plugins-panel');
+            await groupedShell.updateComplete;
+            await groupedPanel.updateComplete;
+            // Start from the collapsed rail, where the group flyout lives.
+            findPanelToggleButton(groupedPanel).click();
+            await groupedPanel.updateComplete;
+            extraShells.push(groupedShell);
+        });
+        const findGroupRailButton = () => groupedPanel.shadowRoot.querySelector('#rail-group-0');
+        const findGroupFlyoutMenu = () => groupedPanel.shadowRoot.querySelector('oscd-menu.rail-flyout[data-flyout="group-0"]');
+        it('shows a disabled placeholder in the empty pinned flyout', () => {
+            const pinnedFlyout = groupedPanel.shadowRoot.querySelector('oscd-menu.rail-flyout[data-flyout="pinned"]');
+            const placeholder = pinnedFlyout?.querySelector('oscd-menu-item');
+            expect(placeholder?.hasAttribute('disabled')).to.be.true;
+            expect(placeholder?.textContent).to.contain('Items you pin will appear here');
+        });
+        it('opens the group flyout menu on rail icon click', async () => {
+            const menu = findGroupFlyoutMenu();
+            expect(menu.open).to.be.false;
+            findGroupRailButton().click();
+            await groupedPanel.updateComplete;
+            expect(menu.open).to.be.true;
+        });
+        it('closes the group flyout menu on a second rail icon click', async () => {
+            findGroupRailButton().click();
+            await groupedPanel.updateComplete;
+            expect(findGroupFlyoutMenu().open).to.be.true;
+            findGroupRailButton().click();
+            await groupedPanel.updateComplete;
+            expect(findGroupFlyoutMenu().open).to.be.false;
+        });
+        it('does nothing when toggling a flyout with no matching anchor', () => {
+            expect(() => 
+            // @ts-expect-error toggleFlyout is private; exercised directly to
+            // cover the defensive "no matching anchor" guard.
+            groupedPanel.toggleFlyout('unknown-group')).to.not.throw();
+        });
+        it('dispatches editor-select when a flyout item is clicked', async () => {
+            findGroupRailButton().click();
+            await groupedPanel.updateComplete;
+            let selected;
+            groupedPanel.addEventListener('editor-select', (event) => {
+                selected = event.detail.editor;
+            });
+            const flyoutItem = findGroupFlyoutMenu().querySelector('oscd-menu-item');
+            flyoutItem.dispatchEvent(new Event('click', { bubbles: true }));
+            await groupedPanel.updateComplete;
+            expect(selected?.tagName).to.equal('test-grouped-editor-1');
+        });
+        it('toggles a group when its tree selection is committed', async () => {
+            findPanelToggleButton(groupedPanel).click();
+            await groupedPanel.updateComplete;
+            const editorsTree = groupedPanel.shadowRoot.querySelector('.editors-tree');
+            editorsTree.dispatchEvent(new CustomEvent('selected-ids-changed', {
+                detail: { selectedIds: ['group:0:Grouped Editors'] },
+                bubbles: true,
+            }));
+            await groupedPanel.updateComplete;
+            expect(editorsTree.expandedIds).to.include('group:0:Grouped Editors');
+        });
+        it('marks the rail group icon active when one of its plugins is selected', async () => {
+            groupedPanel.selectedEditor = {
+                name: 'Grouped Editor 1',
+                tagName: 'test-grouped-editor-1',
+                icon: 'coronavirus',
+            };
+            await groupedPanel.updateComplete;
+            expect(findGroupRailButton().classList.contains('active')).to.be.true;
+        });
     });
 });
 //# sourceMappingURL=editor-plugins-panel.spec.js.map