@spectrum-web-components/action-group 0.10.2-devmode2.0 → 0.11.1

package/test/action-group.test.js

@@ -1,3 +1,4 @@
+"use strict";
 import {
   elementUpdated,
   expect,
@@ -43,7 +44,8 @@ class EmphasizedActionGroup extends LitElement {
 }
 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"
@@ -56,11 +58,13 @@ async function singleSelectedActionGroup(selected) {
                     Second
                 </sp-action-button>
             </sp-action-group>
-        `);
+        `
+  );
   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"
@@ -73,32 +77,41 @@ 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`
+    const el = await fixture(
+      html`
                 <sp-action-group></sp-action-group>
-            `);
+            `
+    );
     await elementUpdated(el);
     await expect(el).to.be.accessible();
   });
-  testForLitDevWarnings(async () => await fixture(html`
+  testForLitDevWarnings(
+    async () => 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>
-                `));
+                `
+    )
+  );
   it("loads default action-group accessibly", async () => {
-    const el = await fixture(html`
+    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");
@@ -106,12 +119,14 @@ describe("ActionGroup", () => {
     expect(el.children[0].getAttribute("role")).to.equal("button");
   });
   it("applies `quiet` attribute to its children", async () => {
-    const el = await fixture(html`
+    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);
@@ -121,7 +136,8 @@ describe("ActionGroup", () => {
     expect(secondButton.quiet).to.be.true;
   });
   it("applies `quiet` attribute to its slotted children", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <quiet-action-group>
                     <sp-action-button slot="first" id="first">
                         First
@@ -130,7 +146,8 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </quiet-action-group>
-            `);
+            `
+    );
     const firstButton = el.querySelector("#first");
     const secondButton = el.querySelector("#second");
     await elementUpdated(el);
@@ -140,7 +157,8 @@ describe("ActionGroup", () => {
     expect(secondButton.quiet).to.be.true;
   });
   it("applies `emphasized` attribute to its slotted children", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <emphasized-action-group>
                     <sp-action-button slot="first" id="first">
                         First
@@ -149,7 +167,8 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </emphasized-action-group>
-            `);
+            `
+    );
     const firstButton = el.querySelector("#first");
     const secondButton = el.querySelector("#second");
     await elementUpdated(el);
@@ -159,7 +178,8 @@ describe("ActionGroup", () => {
     expect(secondButton.emphasized).to.be.true;
   });
   it("applies `quiet` attribute to slotted children with overlays", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <quiet-action-group>
                     <overlay-trigger slot="first">
                         <sp-action-button slot="trigger" id="first">
@@ -172,7 +192,8 @@ describe("ActionGroup", () => {
                         </sp-action-button>
                     </overlay-trigger>
                 </quiet-action-group>
-            `);
+            `
+    );
     const firstButton = el.querySelector("#first");
     const secondButton = el.querySelector("#second");
     await elementUpdated(el);
@@ -182,7 +203,8 @@ describe("ActionGroup", () => {
     expect(secondButton.quiet).to.be.true;
   });
   it("applies `emphasized` attribute to slotted children with overlays", async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <emphasized-action-group>
                     <overlay-trigger slot="first">
                         <sp-action-button slot="trigger" id="first">
@@ -195,7 +217,8 @@ describe("ActionGroup", () => {
                         </sp-action-button>
                     </overlay-trigger>
                 </emphasized-action-group>
-            `);
+            `
+    );
     const firstButton = el.querySelector("#first");
     const secondButton = el.querySelector("#second");
     await elementUpdated(el);
@@ -205,13 +228,15 @@ describe("ActionGroup", () => {
     expect(secondButton.emphasized).to.be.true;
   });
   it('loads [selects="single"] action-group accessibly', async () => {
-    const el = await fixture(html`
+    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");
@@ -219,18 +244,21 @@ describe("ActionGroup", () => {
     expect(el.children[0].getAttribute("role")).to.equal("radio");
   });
   it('loads [selects="single"] action-group w/ selection accessibly', async () => {
-    const el = await fixture(html`
+    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`
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -239,15 +267,19 @@ 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("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`
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -256,36 +288,42 @@ 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`
+    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 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`
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -294,7 +332,8 @@ 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",
@@ -302,13 +341,15 @@ describe("ActionGroup", () => {
     ]);
   });
   it("does not select without [selects]", async () => {
-    const el = await fixture(html`
+    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);
@@ -317,7 +358,8 @@ describe("ActionGroup", () => {
     expect(el.selected.length).to.equal(1);
   });
   it('selects via `click` while [selects="single"]', async () => {
-    const el = await fixture(html`
+    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>
@@ -327,7 +369,8 @@ describe("ActionGroup", () => {
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);
+            `
+    );
     const thirdElement = el.querySelector(".third");
     await elementUpdated(el);
     expect(el.selected.length).to.equal(1);
@@ -335,10 +378,14 @@ describe("ActionGroup", () => {
     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`");
+    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 el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -349,7 +396,8 @@ 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");
@@ -362,16 +410,21 @@ describe("ActionGroup", () => {
     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`");
+    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 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();
@@ -379,19 +432,21 @@ describe("ActionGroup", () => {
     expect(el.selected.length).to.equal(0);
   });
   it("selection can be prevented", async () => {
-    const el = await fixture(html`
+    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);
@@ -429,7 +484,8 @@ describe("ActionGroup", () => {
     expect(secondButton.selected, "second button selected").to.be.true;
   });
   it('selects user-passed value while [selects="multiple"]', async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -445,7 +501,8 @@ describe("ActionGroup", () => {
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);
+            `
+    );
     await elementUpdated(el);
     const firstButton = el.querySelector(".first");
     const secondButton = el.querySelector(".second");
@@ -468,7 +525,8 @@ describe("ActionGroup", () => {
     expect(thirdButton.selected, "third button selected").to.be.true;
   });
   it('selects can be updated while [selects="multiple"]', async () => {
-    const el = await fixture(html`
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
@@ -484,7 +542,8 @@ describe("ActionGroup", () => {
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);
+            `
+    );
     await elementUpdated(el);
     const firstButton = el.querySelector(".first");
     const secondButton = el.querySelector(".second");
@@ -530,7 +589,8 @@ describe("ActionGroup", () => {
     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`
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects User-Chosen Buttons"
                     .selected=${["first"]}
@@ -542,7 +602,8 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.selected.length).to.equal(1);
     const firstButton = el.querySelector(".first");
@@ -556,7 +617,8 @@ describe("ActionGroup", () => {
     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`
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects User-Chosen Buttons"
                     .selected=${["first", "second"]}
@@ -568,7 +630,8 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.selected.length).to.equal(2);
     const firstButton = el.querySelector(".first");
@@ -582,14 +645,15 @@ describe("ActionGroup", () => {
     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`
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Multiple Group"
                     selects="multiple"
                     .selected=${["first", "second"]}
                     @change=${(event) => {
-      event.preventDefault();
-    }}
+        event.preventDefault();
+      }}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -601,7 +665,8 @@ describe("ActionGroup", () => {
                         Third
                     </sp-action-button>
                 </sp-action-group>
-            `);
+            `
+    );
     const firstElement = el.querySelector(".first");
     const secondElement = el.querySelector(".second");
     const thirdElement = el.querySelector(".third");
@@ -618,14 +683,15 @@ describe("ActionGroup", () => {
     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 el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
                     .selected=${["first"]}
                     @change=${(event) => {
-      event.preventDefault();
-    }}
+        event.preventDefault();
+      }}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -634,7 +700,8 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
+            `
+    );
     const firstElement = el.querySelector(".first");
     const secondElement = el.querySelector(".second");
     await elementUpdated(el);
@@ -649,13 +716,14 @@ describe("ActionGroup", () => {
     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 el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Single Group"
                     .selected=${["first"]}
                     @change=${(event) => {
-      event.preventDefault();
-    }}
+        event.preventDefault();
+      }}
                 >
                     <sp-action-button class="first" value="first">
                         First
@@ -664,7 +732,8 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
+            `
+    );
     const firstElement = el.querySelector(".first");
     const secondElement = el.querySelector(".second");
     await elementUpdated(el);
@@ -677,7 +746,8 @@ describe("ActionGroup", () => {
     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 el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
@@ -690,7 +760,8 @@ describe("ActionGroup", () => {
                         Second
                     </sp-action-button>
                 </sp-action-group>
-            `);
+            `
+    );
     await elementUpdated(el);
     const firstElement = el.querySelector(".first");
     const secondElement = el.querySelector(".second");
@@ -733,17 +804,20 @@ describe("ActionGroup", () => {
     expect(el.selected[0]).to.equal("Second");
   };
   it("accepts keybord input", async () => {
-    const el = await fixture(html`
+    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`
+    const el = await fixture(
+      html`
                 <sp-action-group label="Selects Single Group" selects="single">
                     <overlay-trigger>
                         <sp-action-button slot="trigger">
@@ -768,11 +842,13 @@ 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`
+    const el = await fixture(
+      html`
                 <sp-action-group
                     label="Selects Single Group"
                     selects="single"
@@ -782,7 +858,8 @@ 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);