@spectrum-web-components/action-group 0.9.0 → 0.10.1-devmode.7

package/test/action-group.test.js

@@ -1,46 +1,48 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-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, } from '../../../test/testing-helpers';
-import { sendKeys } from '@web/test-runner-commands';
-import '../sp-action-group.js';
+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
+} 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 `
+  render() {
+    return html`
             <sp-action-group quiet>
                 <slot name="first"></slot>
                 <slot name="second"></slot>
             </sp-action-group>
         `;
-    }
+  }
 }
-customElements.define('quiet-action-group', QuietActionGroup);
+customElements.define("quiet-action-group", QuietActionGroup);
 class EmphasizedActionGroup extends LitElement {
-    render() {
-        return html `
+  render() {
+    return html`
             <sp-action-group emphasized>
                 <slot name="first"></slot>
                 <slot name="second"></slot>
             </sp-action-group>
         `;
-    }
+  }
 }
-customElements.define('emphasized-action-group', EmphasizedActionGroup);
+customElements.define("emphasized-action-group", EmphasizedActionGroup);
 async function singleSelectedActionGroup(selected) {
-    const el = await fixture(html `
+  const el = await fixture(html`
             <sp-action-group
                 label="Selects User-Chosen Buttons"
                 selects="single"
@@ -54,10 +56,10 @@ async function singleSelectedActionGroup(selected) {
                 </sp-action-button>
             </sp-action-group>
         `);
-    return el;
+  return el;
 }
 async function multipleSelectedActionGroup(selected) {
-    const el = await fixture(html `
+  const el = await fixture(html`
             <sp-action-group
                 label="Selects User-Chosen Buttons"
                 selects="multiple"
@@ -71,47 +73,47 @@ async function multipleSelectedActionGroup(selected) {
                 </sp-action-button>
             </sp-action-group>
         `);
-    return el;
+  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 el = await fixture(html`
                 <sp-action-group></sp-action-group>
             `);
-        await elementUpdated(el);
-        await expect(el).to.be.accessible();
-    });
-    it('loads default action-group accessibly', async () => {
-        const el = await fixture(html `
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("loads default action-group accessibly", async () => {
+    const el = await fixture(html`
                 <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 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`
                 <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 `
+    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`
                 <quiet-action-group>
                     <sp-action-button slot="first" id="first">
                         First
@@ -121,16 +123,16 @@ describe('ActionGroup', () => {
                     </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 `
+    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`
                 <emphasized-action-group>
                     <sp-action-button slot="first" id="first">
                         First
@@ -140,16 +142,16 @@ describe('ActionGroup', () => {
                     </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 `
+    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`
                 <quiet-action-group>
                     <overlay-trigger slot="first">
                         <sp-action-button slot="trigger" id="first">
@@ -163,16 +165,16 @@ describe('ActionGroup', () => {
                     </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 `
+    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`
                 <emphasized-action-group>
                     <overlay-trigger slot="first">
                         <sp-action-button slot="trigger" id="first">
@@ -186,41 +188,41 @@ describe('ActionGroup', () => {
                     </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 `
+    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`
                 <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 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`
                 <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 elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it('loads [selects="multiple"] action-group accessibly', async () => {
+    const el = await fixture(html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -230,14 +232,14 @@ describe('ActionGroup', () => {
                     <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 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`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -247,35 +249,35 @@ describe('ActionGroup', () => {
                     <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 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`
                 <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 `
+    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`
                 <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 elementUpdated(el);
+    expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
+  });
+  it('surfaces [selects="multiple"] selection', async () => {
+    const el = await fixture(html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -285,29 +287,29 @@ describe('ActionGroup', () => {
                     <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 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`
                 <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 `
+    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`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <sp-action-button value="first">First</sp-action-button>
                     <sp-action-button value="second" selected>
@@ -318,17 +320,17 @@ describe('ActionGroup', () => {
                     </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 `
+    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`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -340,92 +342,90 @@ describe('ActionGroup', () => {
                     <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 `
+    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`
                 <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 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`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
                     @change=${(event) => {
-            event.preventDefault();
-        }}
+      event.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 `
+    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`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
-                    .selected=${['first', 'second']}
+                    .selected=${["first", "second"]}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -438,33 +438,33 @@ describe('ActionGroup', () => {
                     </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 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`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
-                    .selected=${['first', 'second']}
+                    .selected=${["first", "second"]}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -477,55 +477,55 @@ describe('ActionGroup', () => {
                     </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 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`
                 <sp-action-group
                     label="Selects User-Chosen Buttons"
-                    .selected=${['first']}
+                    .selected=${["first"]}
                 >
                     <sp-action-button value="first" class="first">
                         First
@@ -535,23 +535,23 @@ describe('ActionGroup', () => {
                     </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 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`
                 <sp-action-group
                     label="Selects User-Chosen Buttons"
-                    .selected=${['first', 'second']}
+                    .selected=${["first", "second"]}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -561,27 +561,27 @@ describe('ActionGroup', () => {
                     </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 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`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
-                    .selected=${['first', 'second']}
+                    .selected=${["first", "second"]}
                     @change=${(event) => {
-            event.preventDefault();
-        }}
+      event.preventDefault();
+    }}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -594,34 +594,30 @@ describe('ActionGroup', () => {
                     </sp-action-button>
                 </sp-action-group>
             `);
-        const firstElement = el.querySelector('.first');
-        const secondElement = el.querySelector('.second');
-        const thirdElement = el.querySelector('.third');
-        // checking if the first and second are selected
-        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;
-        // making sure third element isn't selected
-        thirdElement.click();
-        await elementUpdated(el);
-        expect(thirdElement.selected, 'third child not selected').to.be.false;
-        expect(el.selected.length).to.equal(2);
-        // making sure already-selected elements are not de-selected
-        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 `
+    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`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
-                    .selected=${['first']}
+                    .selected=${["first"]}
                     @change=${(event) => {
-            event.preventDefault();
-        }}
+      event.preventDefault();
+    }}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -631,31 +627,27 @@ describe('ActionGroup', () => {
                     </sp-action-button>
                 </sp-action-group>
             `);
-        const firstElement = el.querySelector('.first');
-        const secondElement = el.querySelector('.second');
-        // checking if the first element is selected
-        await elementUpdated(el);
-        expect(el.selected.length).to.equal(1);
-        expect(firstElement.selected, 'first child selected').to.be.true;
-        // making sure third element isn't selected
-        secondElement.click();
-        await elementUpdated(el);
-        expect(secondElement.selected, 'second child not selected').to.be.false;
-        expect(el.selected.length).to.equal(1);
-        // making sure already-selected elements are not de-selected
-        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 `
+    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`
                 <sp-action-group
                     label="Selects Single Group"
-                    .selected=${['first']}
+                    .selected=${["first"]}
                     @change=${(event) => {
-            event.preventDefault();
-        }}
+      event.preventDefault();
+    }}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -665,21 +657,19 @@ describe('ActionGroup', () => {
                     </sp-action-button>
                 </sp-action-group>
             `);
-        const firstElement = el.querySelector('.first');
-        const secondElement = el.querySelector('.second');
-        // checking if the first element is selected
-        await elementUpdated(el);
-        expect(el.selected.length).to.equal(1);
-        expect(firstElement.selected, 'first child selected').to.be.true;
-        secondElement.click();
-        await elementUpdated(el);
-        // state should be exactly the same
-        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 `
+    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`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
@@ -693,60 +683,59 @@ describe('ActionGroup', () => {
                     </sp-action-button>
                 </sp-action-group>
             `);
-        // checking if the first element is selected
-        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 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`
                 <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 acceptKeyboardInput(el);
+  });
+  it("accepts keybord input with tooltip", async () => {
+    const el = await fixture(html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <overlay-trigger>
                         <sp-action-button slot="trigger">
@@ -772,10 +761,10 @@ describe('ActionGroup', () => {
                     </overlay-trigger>
                 </sp-action-group>
             `);
-        await acceptKeyboardInput(el);
-    });
-    it('accepts keybord input when [dir="ltr"]', async () => {
-        const el = await fixture(html `
+    await acceptKeyboardInput(el);
+  });
+  it('accepts keybord input when [dir="ltr"]', async () => {
+    const el = await fixture(html`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
@@ -786,23 +775,23 @@ describe('ActionGroup', () => {
                     <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');
-    });
+    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");
+  });
 });
-//# sourceMappingURL=action-group.test.js.map
+//# sourceMappingURL=action-group.test.js.map