@spectrum-web-components/menu 1.0.1 → 1.0.2

package/test/menu-item.test.js

@@ -1,189 +0,0 @@
-"use strict";
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  html,
-  waitUntil
-} from "@open-wc/testing";
-import "@spectrum-web-components/action-menu/sp-action-menu.js";
-import "@spectrum-web-components/menu/sp-menu-item.js";
-import "@spectrum-web-components/menu/sp-menu.js";
-import { spy } from "sinon";
-import { sendMouse } from "../../../test/plugins/browser.js";
-describe("Menu item", () => {
-  it("renders", async () => {
-    const el = await fixture(html`
-            <sp-menu>
-                <sp-menu-item selected>Selected</sp-menu-item>
-            </sp-menu>
-        `);
-    await waitUntil(
-      () => el.childItems.length == 1,
-      "expected menu group to manage 1 child"
-    );
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  it("can be disabled", async () => {
-    const el = await fixture(html`
-            <sp-menu selects="single">
-                <sp-menu-item selected label="This is not disabled">
-                    Selected
-                </sp-menu-item>
-                <sp-menu-item disabled>Disabled</sp-menu-item>
-            </sp-menu>
-        `);
-    await elementUpdated(el);
-    expect(el.value).to.equal("Selected");
-    const disabled = el.querySelector("[disabled]");
-    const boundingRect = disabled.getBoundingClientRect();
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [
-            boundingRect.x + boundingRect.width / 2,
-            boundingRect.y + boundingRect.height / 2
-          ]
-        },
-        {
-          type: "down"
-        },
-        {
-          type: "up"
-        }
-      ]
-    });
-    await elementUpdated(el);
-    expect(el.value).to.equal("Selected");
-    disabled.click();
-    await elementUpdated(el);
-    expect(el.value).to.equal("Selected");
-    disabled.dispatchEvent(
-      new Event("click", {
-        bubbles: true,
-        composed: true
-      })
-    );
-    await elementUpdated(el);
-    expect(el.value).to.equal("Selected");
-  });
-  it("proxies `click()`", async () => {
-    const clickTargetSpy = spy();
-    const el = await fixture(html`
-            <sp-menu
-                @click=${(event) => {
-      clickTargetSpy(
-        event.composedPath()[0]
-      );
-      event.stopPropagation();
-      event.preventDefault();
-    }}
-            >
-                <sp-menu-item
-                    href="https://opensource.adobe.com/spectrum-web-components"
-                >
-                    Selected Text
-                </sp-menu-item>
-            </sp-menu>
-        `);
-    await elementUpdated(el);
-    const item = el.querySelector("sp-menu-item");
-    const { anchorElement } = item;
-    item.anchorElement.dispatchEvent(new FocusEvent("focus"));
-    await elementUpdated(item);
-    expect(el === document.activeElement).to.be.true;
-    item.click();
-    expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;
-  });
-  it("value attribute", async () => {
-    const el = await fixture(html`
-            <sp-menu-item value="selected" selected>Selected Text</sp-menu-item>
-        `);
-    expect(el.itemText).to.equal("Selected Text");
-    expect(el.value).to.equal("selected");
-  });
-  it("no value attribute", async () => {
-    const el = await fixture(html`
-            <sp-menu-item selected>Selected Text</sp-menu-item>
-        `);
-    expect(el.itemText).to.equal("Selected Text");
-    expect(el.value).to.equal("Selected Text");
-  });
-  it("value property", async () => {
-    const el = await fixture(html`
-            <sp-menu-item selected>Selected Text</sp-menu-item>
-        `);
-    expect(el.itemText).to.equal("Selected Text");
-    expect(el.value).to.equal("Selected Text");
-    expect(el.hasAttribute("value")).to.be.false;
-    el.value = "Selected Text";
-    await elementUpdated(el);
-    expect(el.value).to.equal("Selected Text");
-    expect(el.getAttribute("value")).to.equal("Selected Text");
-    el.value = "";
-    await elementUpdated(el);
-    expect(el.value).to.equal("Selected Text");
-    expect(el.hasAttribute("value")).to.be.false;
-  });
-  it("assigns content to the description slot", async () => {
-    const el = await fixture(html`
-            <sp-menu-item selected>
-                Menu Item Text
-                <span slot="description">Description for the Menu-Item</span>
-            </sp-menu-item>
-        `);
-    const descriptionElement = el.querySelector("span");
-    expect(descriptionElement.assignedSlot).to.not.be.null;
-  });
-  it("acualizes a submenu", async () => {
-    const test = await fixture(html`
-            <sp-menu>
-                <sp-menu-item selected>Selected</sp-menu-item>
-            </sp-menu>
-        `);
-    const el = test.querySelector("sp-menu-item");
-    expect(el.hasSubmenu).to.be.false;
-    const submenuItem = document.createElement("sp-menu-item");
-    const submenu = document.createElement("sp-menu");
-    submenuItem.textContent = "Test Submenu Item";
-    submenu.slot = "submenu";
-    submenu.append(submenuItem);
-    el.append(submenu);
-    await elementUpdated(el);
-    expect(el.hasSubmenu).to.be.true;
-    submenu.remove();
-    await elementUpdated(el);
-    expect(el.hasSubmenu).to.be.false;
-  });
-  it("should not allow text-align to cascade when used inside an overlay", async () => {
-    const element = await fixture(html`
-            <div style="text-align: center">
-                <p>
-                    The paragraph and the button are centered. Menu items are
-                    not.
-                </p>
-                <sp-action-menu label="Actions" selects="single">
-                    <sp-menu-item>One</sp-menu-item>
-                    <sp-menu-item>Two</sp-menu-item>
-                    <sp-menu-item>This is a long option</sp-menu-item>
-                    <sp-menu-item>
-                        More options
-                        <sp-menu slot="submenu">
-                            <sp-menu-item>Three</sp-menu-item>
-                            <sp-menu-item>Four</sp-menu-item>
-                            <sp-menu-item>Another long option</sp-menu-item>
-                        </sp-menu>
-                    </sp-menu-item>
-                </sp-action-menu>
-            </div>
-        `);
-    const menuItems = element.querySelectorAll(
-      "sp-menu-item"
-    );
-    for (const menuItem of menuItems)
-      expect(getComputedStyle(menuItem).textAlign).to.equal("start");
-  });
-});
-//# sourceMappingURL=menu-item.test.js.map

package/test/menu-item.test.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["menu-item.test.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    elementUpdated,\n    expect,\n    fixture,\n    html,\n    waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport { spy } from 'sinon';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\ndescribe('Menu item', () => {\n    it('renders', async () => {\n        const el = await fixture<Menu>(html`\n            <sp-menu>\n                <sp-menu-item selected>Selected</sp-menu-item>\n            </sp-menu>\n        `);\n        await waitUntil(\n            () => el.childItems.length == 1,\n            'expected menu group to manage 1 child'\n        );\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('can be disabled', async () => {\n        const el = await fixture<Menu>(html`\n            <sp-menu selects=\"single\">\n                <sp-menu-item selected label=\"This is not disabled\">\n                    Selected\n                </sp-menu-item>\n                <sp-menu-item disabled>Disabled</sp-menu-item>\n            </sp-menu>\n        `);\n        await elementUpdated(el);\n        expect(el.value).to.equal('Selected');\n\n        const disabled = el.querySelector('[disabled]') as MenuItem;\n        const boundingRect = disabled.getBoundingClientRect();\n        sendMouse({\n            steps: [\n                {\n                    type: 'move',\n                    position: [\n                        boundingRect.x + boundingRect.width / 2,\n                        boundingRect.y + boundingRect.height / 2,\n                    ],\n                },\n                {\n                    type: 'down',\n                },\n                {\n                    type: 'up',\n                },\n            ],\n        });\n        await elementUpdated(el);\n        expect(el.value).to.equal('Selected');\n\n        disabled.click();\n        await elementUpdated(el);\n        expect(el.value).to.equal('Selected');\n\n        disabled.dispatchEvent(\n            new Event('click', {\n                bubbles: true,\n                composed: true,\n            })\n        );\n        await elementUpdated(el);\n        expect(el.value).to.equal('Selected');\n    });\n    it('proxies `click()`', async () => {\n        const clickTargetSpy = spy();\n        const el = await fixture<Menu>(html`\n            <sp-menu\n                @click=${(event: Event) => {\n                    clickTargetSpy(\n                        event.composedPath()[0] as HTMLAnchorElement\n                    );\n                    event.stopPropagation();\n                    event.preventDefault();\n                }}\n            >\n                <sp-menu-item\n                    href=\"https://opensource.adobe.com/spectrum-web-components\"\n                >\n                    Selected Text\n                </sp-menu-item>\n            </sp-menu>\n        `);\n\n        await elementUpdated(el);\n\n        const item = el.querySelector('sp-menu-item') as MenuItem;\n        const { anchorElement } = item as unknown as {\n            anchorElement: HTMLAnchorElement;\n        };\n        (\n            item as unknown as { anchorElement: HTMLAnchorElement }\n        ).anchorElement.dispatchEvent(new FocusEvent('focus'));\n\n        await elementUpdated(item);\n        expect(el === document.activeElement).to.be.true;\n        item.click();\n\n        expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;\n    });\n    it('value attribute', async () => {\n        const el = await fixture<MenuItem>(html`\n            <sp-menu-item value=\"selected\" selected>Selected Text</sp-menu-item>\n        `);\n        expect(el.itemText).to.equal('Selected Text');\n        expect(el.value).to.equal('selected');\n    });\n    it('no value attribute', async () => {\n        const el = await fixture<MenuItem>(html`\n            <sp-menu-item selected>Selected Text</sp-menu-item>\n        `);\n        expect(el.itemText).to.equal('Selected Text');\n        expect(el.value).to.equal('Selected Text');\n    });\n    it('value property', async () => {\n        const el = await fixture<MenuItem>(html`\n            <sp-menu-item selected>Selected Text</sp-menu-item>\n        `);\n        expect(el.itemText).to.equal('Selected Text');\n        expect(el.value).to.equal('Selected Text');\n        expect(el.hasAttribute('value')).to.be.false;\n\n        el.value = 'Selected Text';\n        await elementUpdated(el);\n\n        expect(el.value).to.equal('Selected Text');\n        expect(el.getAttribute('value')).to.equal('Selected Text');\n\n        el.value = '';\n        await elementUpdated(el);\n\n        expect(el.value).to.equal('Selected Text');\n        expect(el.hasAttribute('value')).to.be.false;\n    });\n    it('assigns content to the description slot', async () => {\n        const el = await fixture<MenuItem>(html`\n            <sp-menu-item selected>\n                Menu Item Text\n                <span slot=\"description\">Description for the Menu-Item</span>\n            </sp-menu-item>\n        `);\n        const descriptionElement = el.querySelector('span') as HTMLElement;\n        expect(descriptionElement.assignedSlot).to.not.be.null;\n    });\n    it('acualizes a submenu', async () => {\n        const test = await fixture<Menu>(html`\n            <sp-menu>\n                <sp-menu-item selected>Selected</sp-menu-item>\n            </sp-menu>\n        `);\n\n        const el = test.querySelector('sp-menu-item') as MenuItem;\n\n        expect(el.hasSubmenu).to.be.false;\n\n        const submenuItem = document.createElement('sp-menu-item');\n        const submenu = document.createElement('sp-menu');\n        submenuItem.textContent = 'Test Submenu Item';\n        submenu.slot = 'submenu';\n        submenu.append(submenuItem);\n\n        el.append(submenu);\n        await elementUpdated(el);\n\n        expect(el.hasSubmenu).to.be.true;\n\n        submenu.remove();\n        await elementUpdated(el);\n\n        expect(el.hasSubmenu).to.be.false;\n    });\n\n    it('should not allow text-align to cascade when used inside an overlay', async () => {\n        const element = await fixture<HTMLDivElement>(html`\n            <div style=\"text-align: center\">\n                <p>\n                    The paragraph and the button are centered. Menu items are\n                    not.\n                </p>\n                <sp-action-menu label=\"Actions\" selects=\"single\">\n                    <sp-menu-item>One</sp-menu-item>\n                    <sp-menu-item>Two</sp-menu-item>\n                    <sp-menu-item>This is a long option</sp-menu-item>\n                    <sp-menu-item>\n                        More options\n                        <sp-menu slot=\"submenu\">\n                            <sp-menu-item>Three</sp-menu-item>\n                            <sp-menu-item>Four</sp-menu-item>\n                            <sp-menu-item>Another long option</sp-menu-item>\n                        </sp-menu>\n                    </sp-menu-item>\n                </sp-action-menu>\n            </div>\n        `);\n\n        const menuItems = element.querySelectorAll(\n            'sp-menu-item'\n        ) as NodeListOf<MenuItem>;\n\n        for (const menuItem of menuItems)\n            expect(getComputedStyle(menuItem).textAlign).to.equal('start');\n    });\n});\n"],
-  "mappings": "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",
-  "names": []
-}

package/test/menu-memory.test.js

@@ -1,5 +0,0 @@
-"use strict";
-import { singleSelect } from "../stories/menu.stories.js";
-import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
-testForMemoryLeaks(singleSelect());
-//# sourceMappingURL=menu-memory.test.js.map

package/test/menu-memory.test.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["menu-memory.test.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { singleSelect } from '../stories/menu.stories.js';\nimport { testForMemoryLeaks } from '../../../test/testing-helpers.js';\n\ntestForMemoryLeaks(singleSelect());\n"],
-  "mappings": ";AAYA,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAEnC,mBAAmB,aAAa,CAAC;",
-  "names": []
-}