@spectrum-web-components/action-group 0.10.2-devmode.0 → 0.11.0

package/test/action-group.test.js

@@ -1,53 +1,18 @@
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  html,
-  waitUntil
-} from "@open-wc/testing";
-import "@spectrum-web-components/action-button/sp-action-button.js";
-import { LitElement } from "@spectrum-web-components/base";
-import "@spectrum-web-components/overlay/overlay-trigger.js";
-import "@spectrum-web-components/tooltip/sp-tooltip.js";
-import {
-  arrowDownEvent,
-  arrowLeftEvent,
-  arrowRightEvent,
-  arrowUpEvent,
-  endEvent,
-  homeEvent,
-  testForLitDevWarnings
-} from "../../../test/testing-helpers";
-import { sendKeys } from "@web/test-runner-commands";
-import "@spectrum-web-components/action-group/sp-action-group.js";
-class QuietActionGroup extends LitElement {
-  render() {
-    return html`
+import{elementUpdated as n,expect as e,fixture as i,html as c,waitUntil as d}from"@open-wc/testing";import"@spectrum-web-components/action-button/sp-action-button.js";import{LitElement as p}from"@spectrum-web-components/base";import"@spectrum-web-components/overlay/overlay-trigger.js";import"@spectrum-web-components/tooltip/sp-tooltip.js";import{arrowDownEvent as f,arrowLeftEvent as w,arrowRightEvent as b,arrowUpEvent as g,endEvent as q,homeEvent as S,testForLitDevWarnings as y}from"../../../test/testing-helpers";import{sendKeys as u}from"@web/test-runner-commands";import"@spectrum-web-components/action-group/sp-action-group.js";class A extends p{render(){return c`
             <sp-action-group quiet>
                 <slot name="first"></slot>
                 <slot name="second"></slot>
             </sp-action-group>
-        `;
-  }
-}
-customElements.define("quiet-action-group", QuietActionGroup);
-class EmphasizedActionGroup extends LitElement {
-  render() {
-    return html`
+        `}}customElements.define("quiet-action-group",A);class m extends p{render(){return c`
             <sp-action-group emphasized>
                 <slot name="first"></slot>
                 <slot name="second"></slot>
             </sp-action-group>
-        `;
-  }
-}
-customElements.define("emphasized-action-group", EmphasizedActionGroup);
-async function singleSelectedActionGroup(selected) {
-  const el = await fixture(html`
+        `}}customElements.define("emphasized-action-group",m);async function r(a){return await i(c`
             <sp-action-group
                 label="Selects User-Chosen Buttons"
                 selects="single"
-                .selected=${selected}
+                .selected=${a}
             >
                 <sp-action-button value="first" class="first">
                     First
@@ -56,15 +21,11 @@ async function singleSelectedActionGroup(selected) {
                     Second
                 </sp-action-button>
             </sp-action-group>
-        `);
-  return el;
-}
-async function multipleSelectedActionGroup(selected) {
-  const el = await fixture(html`
+        `)}async function v(a){return await i(c`
             <sp-action-group
                 label="Selects User-Chosen Buttons"
                 selects="multiple"
-                .selected=${selected}
+                .selected=${a}
             >
                 <sp-action-button value="first" class="first">
                     First
@@ -73,55 +34,26 @@ async function multipleSelectedActionGroup(selected) {
                     Second
                 </sp-action-button>
             </sp-action-group>
-        `);
-  return el;
-}
-describe("ActionGroup", () => {
-  it("loads empty action-group accessibly", async () => {
-    const el = await fixture(html`
+        `)}describe("ActionGroup",()=>{it("loads empty action-group accessibly",async()=>{const t=await i(c`
                 <sp-action-group></sp-action-group>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  testForLitDevWarnings(async () => await fixture(html`
+            `);await n(t),await e(t).to.be.accessible()}),y(async()=>await i(c`
                     <sp-action-group aria-label="Default Group">
                         <sp-action-button>First</sp-action-button>
                         <sp-action-button>Second</sp-action-button>
                         <sp-action-button>Third</sp-action-button>
                     </sp-action-group>
-                `));
-  it("loads default action-group accessibly", async () => {
-    const el = await fixture(html`
+                `)),it("loads default action-group accessibly",async()=>{const t=await i(c`
                 <sp-action-group aria-label="Default Group">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button>Third</sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-    expect(el.getAttribute("aria-label")).to.equal("Default Group");
-    expect(el.hasAttribute("role")).to.be.false;
-    expect(el.children[0].getAttribute("role")).to.equal("button");
-  });
-  it("applies `quiet` attribute to its children", async () => {
-    const el = await fixture(html`
+            `);await n(t),await e(t).to.be.accessible(),e(t.getAttribute("aria-label")).to.equal("Default Group"),e(t.hasAttribute("role")).to.be.false,e(t.children[0].getAttribute("role")).to.equal("button")}),it("applies `quiet` attribute to its children",async()=>{const t=await i(c`
                 <sp-action-group quiet>
                     <sp-action-button id="first">First</sp-action-button>
                     <sp-action-button id="second">Second</sp-action-button>
                 </sp-action-group>
-            `);
-    const firstButton = el.querySelector("#first");
-    const secondButton = el.querySelector("#second");
-    await elementUpdated(el);
-    expect(firstButton.hasAttribute("quiet")).to.be.true;
-    expect(firstButton.quiet).to.be.true;
-    expect(secondButton.hasAttribute("quiet")).to.be.true;
-    expect(secondButton.quiet).to.be.true;
-  });
-  it("applies `quiet` attribute to its slotted children", async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("quiet")).to.be.true,e(o.quiet).to.be.true,e(s.hasAttribute("quiet")).to.be.true,e(s.quiet).to.be.true}),it("applies `quiet` attribute to its slotted children",async()=>{const t=await i(c`
                 <quiet-action-group>
                     <sp-action-button slot="first" id="first">
                         First
@@ -130,17 +62,7 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </quiet-action-group>
-            `);
-    const firstButton = el.querySelector("#first");
-    const secondButton = el.querySelector("#second");
-    await elementUpdated(el);
-    expect(firstButton.hasAttribute("quiet")).to.be.true;
-    expect(firstButton.quiet).to.be.true;
-    expect(secondButton.hasAttribute("quiet")).to.be.true;
-    expect(secondButton.quiet).to.be.true;
-  });
-  it("applies `emphasized` attribute to its slotted children", async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("quiet")).to.be.true,e(o.quiet).to.be.true,e(s.hasAttribute("quiet")).to.be.true,e(s.quiet).to.be.true}),it("applies `emphasized` attribute to its slotted children",async()=>{const t=await i(c`
                 <emphasized-action-group>
                     <sp-action-button slot="first" id="first">
                         First
@@ -149,17 +71,7 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </emphasized-action-group>
-            `);
-    const firstButton = el.querySelector("#first");
-    const secondButton = el.querySelector("#second");
-    await elementUpdated(el);
-    expect(firstButton.hasAttribute("emphasized")).to.be.true;
-    expect(firstButton.emphasized).to.be.true;
-    expect(secondButton.hasAttribute("emphasized")).to.be.true;
-    expect(secondButton.emphasized).to.be.true;
-  });
-  it("applies `quiet` attribute to slotted children with overlays", async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("emphasized")).to.be.true,e(o.emphasized).to.be.true,e(s.hasAttribute("emphasized")).to.be.true,e(s.emphasized).to.be.true}),it("applies `quiet` attribute to slotted children with overlays",async()=>{const t=await i(c`
                 <quiet-action-group>
                     <overlay-trigger slot="first">
                         <sp-action-button slot="trigger" id="first">
@@ -172,17 +84,7 @@ describe("ActionGroup", () => {
                         </sp-action-button>
                     </overlay-trigger>
                 </quiet-action-group>
-            `);
-    const firstButton = el.querySelector("#first");
-    const secondButton = el.querySelector("#second");
-    await elementUpdated(el);
-    expect(firstButton.hasAttribute("quiet")).to.be.true;
-    expect(firstButton.quiet).to.be.true;
-    expect(secondButton.hasAttribute("quiet")).to.be.true;
-    expect(secondButton.quiet).to.be.true;
-  });
-  it("applies `emphasized` attribute to slotted children with overlays", async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("quiet")).to.be.true,e(o.quiet).to.be.true,e(s.hasAttribute("quiet")).to.be.true,e(s.quiet).to.be.true}),it("applies `emphasized` attribute to slotted children with overlays",async()=>{const t=await i(c`
                 <emphasized-action-group>
                     <overlay-trigger slot="first">
                         <sp-action-button slot="trigger" id="first">
@@ -195,42 +97,19 @@ describe("ActionGroup", () => {
                         </sp-action-button>
                     </overlay-trigger>
                 </emphasized-action-group>
-            `);
-    const firstButton = el.querySelector("#first");
-    const secondButton = el.querySelector("#second");
-    await elementUpdated(el);
-    expect(firstButton.hasAttribute("emphasized")).to.be.true;
-    expect(firstButton.emphasized).to.be.true;
-    expect(secondButton.hasAttribute("emphasized")).to.be.true;
-    expect(secondButton.emphasized).to.be.true;
-  });
-  it('loads [selects="single"] action-group accessibly', async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector("#first"),s=t.querySelector("#second");await n(t),e(o.hasAttribute("emphasized")).to.be.true,e(o.emphasized).to.be.true,e(s.hasAttribute("emphasized")).to.be.true,e(s.emphasized).to.be.true}),it('loads [selects="single"] action-group accessibly',async()=>{const t=await i(c`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button>Third</sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-    expect(el.getAttribute("aria-label")).to.equal("Selects Single Group");
-    expect(el.getAttribute("role")).to.equal("radiogroup");
-    expect(el.children[0].getAttribute("role")).to.equal("radio");
-  });
-  it('loads [selects="single"] action-group w/ selection accessibly', async () => {
-    const el = await fixture(html`
+            `);await n(t),await e(t).to.be.accessible(),e(t.getAttribute("aria-label")).to.equal("Selects Single Group"),e(t.getAttribute("role")).to.equal("radiogroup"),e(t.children[0].getAttribute("role")).to.equal("radio")}),it('loads [selects="single"] action-group w/ selection accessibly',async()=>{const t=await i(c`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button selected>Third</sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  it('loads [selects="multiple"] action-group accessibly', async () => {
-    const el = await fixture(html`
+            `);await n(t),await e(t).to.be.accessible()}),it('loads [selects="multiple"] action-group accessibly',async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -239,15 +118,7 @@ describe("ActionGroup", () => {
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button>Third</sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-    expect(el.getAttribute("aria-label")).to.equal("Selects Multiple Group");
-    expect(el.getAttribute("role")).to.equal("group");
-    expect(el.children[0].getAttribute("role")).to.equal("checkbox");
-  });
-  it('loads [selects="multiple"] action-group w/ selection accessibly', async () => {
-    const el = await fixture(html`
+            `);await n(t),await e(t).to.be.accessible(),e(t.getAttribute("aria-label")).to.equal("Selects Multiple Group"),e(t.getAttribute("role")).to.equal("group"),e(t.children[0].getAttribute("role")).to.equal("checkbox")}),it('loads [selects="multiple"] action-group w/ selection accessibly',async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -256,36 +127,19 @@ describe("ActionGroup", () => {
                     <sp-action-button selected>Second</sp-action-button>
                     <sp-action-button selected>Third</sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  it('sets tab stop when [selects="single"] and the initial button is [disabled]', async () => {
-    const el = await fixture(html`
+            `);await n(t),await e(t).to.be.accessible()}),it('sets tab stop when [selects="single"] and the initial button is [disabled]',async()=>{const t=await i(c`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button disabled>First</sp-action-button>
                     <sp-action-button class="second">Second</sp-action-button>
                     <sp-action-button>Third</sp-action-button>
                 </sp-action-group>
-            `);
-    const secondButton = el.querySelector(".second");
-    await elementUpdated(el);
-    expect(secondButton.hasAttribute("tabindex"));
-    expect(secondButton.getAttribute("tabindex")).to.equal("0");
-  });
-  it('surfaces [selects="single"] selection', async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector(".second");await n(t),e(o.hasAttribute("tabindex")),e(o.getAttribute("tabindex")).to.equal("0")}),it('surfaces [selects="single"] selection',async()=>{const t=await i(c`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button selected>Third</sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
-  });
-  it('surfaces [selects="multiple"] selection', async () => {
-    const el = await fixture(html`
+            `);await n(t),e(t.selected,'"Third" selected').to.deep.equal(["Third"])}),it('surfaces [selects="multiple"] selection',async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -294,30 +148,13 @@ describe("ActionGroup", () => {
                     <sp-action-button selected>Second</sp-action-button>
                     <sp-action-button selected>Third</sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    expect(el.selected, '"Second" and "Third" selected').to.deep.equal([
-      "Second",
-      "Third"
-    ]);
-  });
-  it("does not select without [selects]", async () => {
-    const el = await fixture(html`
+            `);await n(t),e(t.selected,'"Second" and "Third" selected').to.deep.equal(["Second","Third"])}),it("does not select without [selects]",async()=>{const t=await i(c`
                 <sp-action-group label="No Selects Group">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button selected>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `);
-    const thirdElement = el.querySelector(".third");
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    thirdElement.click();
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-  });
-  it('selects via `click` while [selects="single"]', async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(1),o.click(),await n(t),e(t.selected.length).to.equal(1)}),it('selects via `click` while [selects="single"]',async()=>{const t=await i(c`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button value="first">First</sp-action-button>
                     <sp-action-button value="second" selected>
@@ -327,18 +164,7 @@ describe("ActionGroup", () => {
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);
-    const thirdElement = el.querySelector(".third");
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected.includes("second"));
-    thirdElement.click();
-    await elementUpdated(el);
-    expect(thirdElement.selected, "third child selected").to.be.true;
-    await waitUntil(() => el.selected.length === 1 && el.selected.includes("third"), "Updates value of `selected`");
-  });
-  it('selects via `click` while  [selects="multiple"] selection', async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(1),e(t.selected.includes("second")),o.click(),await n(t),e(o.selected,"third child selected").to.be.true,await d(()=>t.selected.length===1&&t.selected.includes("third"),"Updates value of `selected`")}),it('selects via `click` while  [selects="multiple"] selection',async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -349,91 +175,27 @@ describe("ActionGroup", () => {
                     <sp-action-button class="second">Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `);
-    const firstElement = el.querySelector(".first");
-    const secondElement = el.querySelector(".second");
-    const thirdElement = el.querySelector(".third");
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected.includes("First"));
-    firstElement.click();
-    secondElement.click();
-    thirdElement.click();
-    await elementUpdated(el);
-    expect(secondElement.selected, "second child selected").to.be.true;
-    expect(thirdElement.selected, "third child selected").to.be.true;
-    await waitUntil(() => el.selected.length === 2 && el.selected.includes("Second") && el.selected.includes("Third"), "Updates value of `selected`");
-  });
-  it("does not respond to clicks on itself", async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector(".first"),s=t.querySelector(".second"),l=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(1),e(t.selected.includes("First")),o.click(),s.click(),l.click(),await n(t),e(s.selected,"second child selected").to.be.true,e(l.selected,"third child selected").to.be.true,await d(()=>t.selected.length===2&&t.selected.includes("Second")&&t.selected.includes("Third"),"Updates value of `selected`")}),it("does not respond to clicks on itself",async()=>{const t=await i(c`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(0);
-    el.click();
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(0);
-  });
-  it("selection can be prevented", async () => {
-    const el = await fixture(html`
+            `);await n(t),e(t.selected.length).to.equal(0),t.click(),await n(t),e(t.selected.length).to.equal(0)}),it("selection can be prevented",async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
-                    @change=${(event) => {
-      event.preventDefault();
-    }}
+                    @change=${s=>{s.preventDefault()}}
                 >
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `);
-    const thirdElement = el.querySelector(".third");
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(0);
-    thirdElement.click();
-    await elementUpdated(el);
-    expect(thirdElement.selected, "third child not selected").to.be.false;
-    expect(el.selected.length).to.equal(0);
-  });
-  it('selects user-passed value while [selects="single"]', async () => {
-    const el = await singleSelectedActionGroup(["first"]);
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    const firstButton = el.querySelector(".first");
-    const secondButton = el.querySelector(".second");
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button not selected").to.be.false;
-    secondButton.click();
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(firstButton.selected, "first button not selected").to.be.false;
-    expect(secondButton.selected, "second button selected").to.be.true;
-  });
-  it('selects can be updated while [selects="single"]', async () => {
-    const el = await singleSelectedActionGroup(["first"]);
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    const firstButton = el.querySelector(".first");
-    const secondButton = el.querySelector(".second");
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button not selected").to.be.false;
-    el.selected = ["second"];
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(firstButton.selected, "first button not selected").to.be.false;
-    expect(secondButton.selected, "second button selected").to.be.true;
-  });
-  it('selects user-passed value while [selects="multiple"]', async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(0),o.click(),await n(t),e(o.selected,"third child not selected").to.be.false,e(t.selected.length).to.equal(0)}),it('selects user-passed value while [selects="single"]',async()=>{const t=await r(["first"]);await n(t),e(t.selected.length).to.equal(1);const o=t.querySelector(".first"),s=t.querySelector(".second");e(o.selected,"first button selected").to.be.true,e(s.selected,"second button not selected").to.be.false,s.click(),await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first button not selected").to.be.false,e(s.selected,"second button selected").to.be.true}),it('selects can be updated while [selects="single"]',async()=>{const t=await r(["first"]);await n(t),e(t.selected.length).to.equal(1);const o=t.querySelector(".first"),s=t.querySelector(".second");e(o.selected,"first button selected").to.be.true,e(s.selected,"second button not selected").to.be.false,t.selected=["second"],await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first button not selected").to.be.false,e(s.selected,"second button selected").to.be.true}),it('selects user-passed value while [selects="multiple"]',async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
-                    .selected=${["first", "second"]}
+                    .selected=${["first","second"]}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -445,34 +207,11 @@ describe("ActionGroup", () => {
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    const firstButton = el.querySelector(".first");
-    const secondButton = el.querySelector(".second");
-    const thirdButton = el.querySelector(".third");
-    expect(el.selected.length).to.equal(2);
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button selected").to.be.true;
-    expect(thirdButton.selected, "third button not selected").to.be.false;
-    thirdButton.click();
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(3);
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button selected").to.be.true;
-    expect(thirdButton.selected, "third button selected").to.be.true;
-    firstButton.click();
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(2);
-    expect(firstButton.selected, "first button not selected").to.be.false;
-    expect(secondButton.selected, "second button selected").to.be.true;
-    expect(thirdButton.selected, "third button selected").to.be.true;
-  });
-  it('selects can be updated while [selects="multiple"]', async () => {
-    const el = await fixture(html`
+            `);await n(t);const o=t.querySelector(".first"),s=t.querySelector(".second"),l=t.querySelector(".third");e(t.selected.length).to.equal(2),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button not selected").to.be.false,l.click(),await n(t),e(t.selected.length).to.equal(3),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button selected").to.be.true,o.click(),await n(t),e(t.selected.length).to.equal(2),e(o.selected,"first button not selected").to.be.false,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button selected").to.be.true}),it('selects can be updated while [selects="multiple"]',async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
-                    .selected=${["first", "second"]}
+                    .selected=${["first","second"]}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -484,53 +223,7 @@ describe("ActionGroup", () => {
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    const firstButton = el.querySelector(".first");
-    const secondButton = el.querySelector(".second");
-    const thirdButton = el.querySelector(".third");
-    expect(el.selected.length).to.equal(2);
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button selected").to.be.true;
-    expect(thirdButton.selected, "third button not selected").to.be.false;
-    el.selected = ["first", "second", "third"];
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(3);
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button selected").to.be.true;
-    expect(thirdButton.selected, "third button selected").to.be.true;
-    el.selected = ["second", "third"];
-    await elementUpdated(el);
-    expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2);
-    expect(firstButton.selected, "first button not selected").to.be.false;
-    expect(secondButton.selected, "second button selected").to.be.true;
-    expect(thirdButton.selected, "third button selected").to.be.true;
-  });
-  it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality', async () => {
-    const el = await singleSelectedActionGroup(["first", "second"]);
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(2);
-    const firstButton = el.querySelector(".first");
-    const secondButton = el.querySelector(".second");
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button selected").to.be.true;
-    secondButton.click();
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(firstButton.selected, "first button selected").to.be.false;
-    expect(secondButton.selected, "second button selected").to.be.true;
-  });
-  it('only selects user-passed buttons if present in action-group while [selects="multiple"]', async () => {
-    const el = await multipleSelectedActionGroup(["second", "fourth"]);
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    const secondButton = el.querySelector(".second");
-    expect(secondButton.selected, "second button selected").to.be.true;
-    const firstButton = el.querySelector(".first");
-    expect(firstButton.selected, "first button selected").to.be.false;
-  });
-  it("selects user-passed values with no .selects value, but does not allow interaction afterwards", async () => {
-    const el = await fixture(html`
+            `);await n(t);const o=t.querySelector(".first"),s=t.querySelector(".second"),l=t.querySelector(".third");e(t.selected.length).to.equal(2),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button not selected").to.be.false,t.selected=["first","second","third"],await n(t),e(t.selected.length).to.equal(3),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button selected").to.be.true,t.selected=["second","third"],await n(t),e(t.selected.length,JSON.stringify(t.selected)).to.equal(2),e(o.selected,"first button not selected").to.be.false,e(s.selected,"second button selected").to.be.true,e(l.selected,"third button selected").to.be.true}),it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality',async()=>{const t=await r(["first","second"]);await n(t),e(t.selected.length).to.equal(2);const o=t.querySelector(".first"),s=t.querySelector(".second");e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true,s.click(),await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first button selected").to.be.false,e(s.selected,"second button selected").to.be.true}),it('only selects user-passed buttons if present in action-group while [selects="multiple"]',async()=>{const t=await v(["second","fourth"]);await n(t),e(t.selected.length).to.equal(1);const o=t.querySelector(".second");e(o.selected,"second button selected").to.be.true;const s=t.querySelector(".first");e(s.selected,"first button selected").to.be.false}),it("selects user-passed values with no .selects value, but does not allow interaction afterwards",async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects User-Chosen Buttons"
                     .selected=${["first"]}
@@ -542,24 +235,10 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    const firstButton = el.querySelector(".first");
-    const secondButton = el.querySelector(".second");
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button selected").to.be.false;
-    secondButton.click();
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button selected").to.be.false;
-  });
-  it("selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards", async () => {
-    const el = await fixture(html`
+            `);await n(t),e(t.selected.length).to.equal(1);const o=t.querySelector(".first"),s=t.querySelector(".second");e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.false,s.click(),await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.false}),it("selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards",async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects User-Chosen Buttons"
-                    .selected=${["first", "second"]}
+                    .selected=${["first","second"]}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -568,28 +247,12 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(2);
-    const firstButton = el.querySelector(".first");
-    expect(firstButton.selected, "first button selected").to.be.true;
-    const secondButton = el.querySelector(".second");
-    expect(secondButton.selected, "second button selected").to.be.true;
-    firstButton.click();
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(2);
-    expect(firstButton.selected, "first button selected").to.be.true;
-    expect(secondButton.selected, "second button selected").to.be.true;
-  });
-  it('will not change .selected state if event is prevented while [selects="multiple"]', async () => {
-    const el = await fixture(html`
+            `);await n(t),e(t.selected.length).to.equal(2);const o=t.querySelector(".first");e(o.selected,"first button selected").to.be.true;const s=t.querySelector(".second");e(s.selected,"second button selected").to.be.true,o.click(),await n(t),e(t.selected.length).to.equal(2),e(o.selected,"first button selected").to.be.true,e(s.selected,"second button selected").to.be.true}),it('will not change .selected state if event is prevented while [selects="multiple"]',async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
-                    .selected=${["first", "second"]}
-                    @change=${(event) => {
-      event.preventDefault();
-    }}
+                    .selected=${["first","second"]}
+                    @change=${h=>{h.preventDefault()}}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -601,31 +264,12 @@ describe("ActionGroup", () => {
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);
-    const firstElement = el.querySelector(".first");
-    const secondElement = el.querySelector(".second");
-    const thirdElement = el.querySelector(".third");
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(2);
-    expect(firstElement.selected, "first child selected").to.be.true;
-    expect(secondElement.selected, "second child selected").to.be.true;
-    thirdElement.click();
-    await elementUpdated(el);
-    expect(thirdElement.selected, "third child not selected").to.be.false;
-    expect(el.selected.length).to.equal(2);
-    secondElement.click();
-    await elementUpdated(el);
-    expect(secondElement.selected, "second element still selected").to.be.true;
-  });
-  it('will not change .selected state if event is prevented while [selects="single"]', async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector(".first"),s=t.querySelector(".second"),l=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(2),e(o.selected,"first child selected").to.be.true,e(s.selected,"second child selected").to.be.true,l.click(),await n(t),e(l.selected,"third child not selected").to.be.false,e(t.selected.length).to.equal(2),s.click(),await n(t),e(s.selected,"second element still selected").to.be.true}),it('will not change .selected state if event is prevented while [selects="single"]',async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
                     .selected=${["first"]}
-                    @change=${(event) => {
-      event.preventDefault();
-    }}
+                    @change=${l=>{l.preventDefault()}}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -634,28 +278,11 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
-    const firstElement = el.querySelector(".first");
-    const secondElement = el.querySelector(".second");
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(firstElement.selected, "first child selected").to.be.true;
-    secondElement.click();
-    await elementUpdated(el);
-    expect(secondElement.selected, "second child not selected").to.be.false;
-    expect(el.selected.length).to.equal(1);
-    firstElement.click();
-    await elementUpdated(el);
-    expect(firstElement.selected, "first element still selected").to.be.true;
-  });
-  it("will not change .selected state if event is prevented while selects is undefined", async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector(".first"),s=t.querySelector(".second");await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first child selected").to.be.true,s.click(),await n(t),e(s.selected,"second child not selected").to.be.false,e(t.selected.length).to.equal(1),o.click(),await n(t),e(o.selected,"first element still selected").to.be.true}),it("will not change .selected state if event is prevented while selects is undefined",async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Single Group"
                     .selected=${["first"]}
-                    @change=${(event) => {
-      event.preventDefault();
-    }}
+                    @change=${l=>{l.preventDefault()}}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -664,20 +291,7 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
-    const firstElement = el.querySelector(".first");
-    const secondElement = el.querySelector(".second");
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(firstElement.selected, "first child selected").to.be.true;
-    secondElement.click();
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(firstElement.selected, "first child selected").to.be.true;
-    expect(secondElement.selected, "second child not selected").to.be.false;
-  });
-  it("will accept selected as a JSON string", async () => {
-    const el = await fixture(html`
+            `),o=t.querySelector(".first"),s=t.querySelector(".second");await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first child selected").to.be.true,s.click(),await n(t),e(t.selected.length).to.equal(1),e(o.selected,"first child selected").to.be.true,e(s.selected,"second child not selected").to.be.false}),it("will accept selected as a JSON string",async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
@@ -690,60 +304,13 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
-    await elementUpdated(el);
-    const firstElement = el.querySelector(".first");
-    const secondElement = el.querySelector(".second");
-    expect(el.selected.length).to.equal(1);
-    expect(firstElement.selected, "first child selected").to.be.true;
-    expect(secondElement.selected, "second child selected").to.be.false;
-  });
-  const acceptKeyboardInput = async (el) => {
-    const thirdElement = el.querySelector(".third");
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("Second");
-    thirdElement.click();
-    await elementUpdated(el);
-    expect(thirdElement.selected, "third child selected").to.be.true;
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("Third");
-    el.dispatchEvent(arrowRightEvent());
-    await sendKeys({ press: "Enter" });
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("First");
-    el.dispatchEvent(arrowLeftEvent());
-    el.dispatchEvent(arrowUpEvent());
-    await sendKeys({ press: "Enter" });
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("Second");
-    el.dispatchEvent(endEvent());
-    await sendKeys({ press: "Enter" });
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("Third");
-    await sendKeys({ press: "Enter" });
-    el.dispatchEvent(homeEvent());
-    await sendKeys({ press: "Enter" });
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("First");
-    el.dispatchEvent(arrowDownEvent());
-    await sendKeys({ press: "Enter" });
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("Second");
-  };
-  it("accepts keybord input", async () => {
-    const el = await fixture(html`
+            `);await n(t);const o=t.querySelector(".first"),s=t.querySelector(".second");e(t.selected.length).to.equal(1),e(o.selected,"first child selected").to.be.true,e(s.selected,"second child selected").to.be.false});const a=async t=>{const o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Second"),o.click(),await n(t),e(o.selected,"third child selected").to.be.true,e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Third"),t.dispatchEvent(b()),await u({press:"Enter"}),await n(t),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("First"),t.dispatchEvent(w()),t.dispatchEvent(g()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Second"),t.dispatchEvent(q()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Third"),await u({press:"Enter"}),t.dispatchEvent(S()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("First"),t.dispatchEvent(f()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Second")};it("accepts keybord input",async()=>{const t=await i(c`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button>First</sp-action-button>
                     <sp-action-button selected>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `);
-    await acceptKeyboardInput(el);
-  });
-  it("accepts keybord input with tooltip", async () => {
-    const el = await fixture(html`
+            `);await a(t)}),it("accepts keybord input with tooltip",async()=>{const t=await i(c`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <overlay-trigger>
                         <sp-action-button slot="trigger">
@@ -768,11 +335,7 @@ describe("ActionGroup", () => {
                         <sp-tooltip slot="hover-content">Select me.</sp-tooltip>
                     </overlay-trigger>
                 </sp-action-group>
-            `);
-    await acceptKeyboardInput(el);
-  });
-  it('accepts keybord input when [dir="ltr"]', async () => {
-    const el = await fixture(html`
+            `);await a(t)}),it('accepts keybord input when [dir="ltr"]',async()=>{const t=await i(c`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
@@ -782,24 +345,5 @@ describe("ActionGroup", () => {
                     <sp-action-button disabled>Second</sp-action-button>
                     <sp-action-button class="third">Third</sp-action-button>
                 </sp-action-group>
-            `);
-    const thirdElement = el.querySelector(".third");
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(0);
-    thirdElement.click();
-    await elementUpdated(el);
-    expect(thirdElement.selected, "third child selected").to.be.true;
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("Third");
-    el.dispatchEvent(arrowRightEvent());
-    await sendKeys({ press: "Enter" });
-    await elementUpdated(el);
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("First");
-    el.dispatchEvent(arrowUpEvent());
-    await sendKeys({ press: "Enter" });
-    expect(el.selected.length).to.equal(1);
-    expect(el.selected[0]).to.equal("Third");
-  });
-});
+            `),o=t.querySelector(".third");await n(t),e(t.selected.length).to.equal(0),o.click(),await n(t),e(o.selected,"third child selected").to.be.true,e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Third"),t.dispatchEvent(b()),await u({press:"Enter"}),await n(t),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("First"),t.dispatchEvent(g()),await u({press:"Enter"}),e(t.selected.length).to.equal(1),e(t.selected[0]).to.equal("Third")})});
 //# sourceMappingURL=action-group.test.js.map