@getflip/swirl-components 0.64.6 → 0.65.0

package/dist/collection/components/swirl-lightbox/swirl-lightbox.spec.js

@@ -0,0 +1,187 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlLightbox } from "./swirl-lightbox";
+describe("swirl-lightbox", () => {
+  it("renders its slides and controls", async () => {
+    const page = await newSpecPage({
+      components: [SwirlLightbox],
+      html: `
+        <swirl-lightbox
+          close-button-label="Close"
+          download-button-label="Download"
+          label="Lightbox"
+          next-slide-button-label="Next"
+          previous-slide-button-label="Previous"
+        >
+          <swirl-file-viewer description="Cute dog in a blaket." file="/sample.jpg" type="image/jpeg"></swirl-file-viewer>
+          <swirl-file-viewer file="/sample.mp4" type="video/mp4"></swirl-file-viewer>
+        </swirl-lightbox>
+      `,
+    });
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    expect(page.root).toEqualHtml(`
+      <swirl-lightbox close-button-label="Close" download-button-label="Download" label="Lightbox" next-slide-button-label="Next" previous-slide-button-label="Previous">
+        <mock:shadow-root>
+          <section aria-hidden="true" aria-label="Lightbox" aria-modal="true" class="lightbox" id="lightbox" role="dialog" tabindex="-1">
+            <div class="lightbox__body" role="document">
+              <header class="lightbox__header">
+                <button aria-label="Close" class="lightbox__close-button">
+                  <swirl-icon-close></swirl-icon-close>
+                </button>
+                <button aria-label="Open slide menu" class="lightbox__menu-button" id="slide-menu-trigger">
+                  <swirl-icon-more-vertikal></swirl-icon-more-vertikal>
+                </button>
+              </header>
+              <div aria-roledescription="carousel" class="lightbox__content" role="group">
+                <div aria-atomic="false" aria-live="polite" class="lightbox__slides">
+                  <slot></slot>
+                </div>
+              </div>
+              <div class="lightbox__controls">
+                <button aria-label="Previous" class="lightbox__previous-slide-button" disabled="">
+                  <swirl-icon-arrow-left></swirl-icon-arrow-left>
+                </button>
+                <button aria-label="Next" class="lightbox__next-slide-button">
+                  <swirl-icon-arrow-right></swirl-icon-arrow-right>
+                </button>
+              </div>
+              <span class="lightbox__pagination">
+                <span aria-current="page">1</span> / 2
+              </span>
+            </div>
+            <swirl-popover animation="scale-in-y" disablescrolllock="" label="Slide options" placement="bottom-end" popoverid="slide-menu" trigger="slide-menu-trigger">
+              <swirl-stack>
+                <div class="lightbox__meta">
+                  <div class="lightbox__file-info">
+                    <swirl-text truncate="" weight="semibold"></swirl-text>
+                    <swirl-text color="subdued" size="sm" truncate=""></swirl-text>
+                  </div>
+                </div>
+                <swirl-separator></swirl-separator>
+                <swirl-action-list>
+                  <swirl-action-list-item icon="<swirl-icon-download></swirl-icon-download>" label="Download"></swirl-action-list-item>
+                  <slot name="menu-items"></slot>
+                </swirl-action-list>
+              </swirl-stack>
+            </swirl-popover>
+          </section>
+        </mock:shadow-root>
+        <swirl-file-viewer active="true" aria-label="undefined" aria-roledescription="slide" description="Cute dog in a blaket." file="/sample.jpg" role="group" type="image/jpeg" style="transform: translate3d(-0%, 0, 0);"></swirl-file-viewer>
+        <swirl-file-viewer active="true" aria-hidden="true" aria-label="undefined" aria-roledescription="slide" file="/sample.mp4\" role=\"group\" type=\"video/mp4\" style=\"transform: translate3d(-0%, 0, 0);\"></swirl-file-viewer>
+      </swirl-lightbox>
+    `);
+  });
+  it("navigates through slides via buttons", async () => {
+    const page = await newSpecPage({
+      components: [SwirlLightbox],
+      html: `
+        <swirl-lightbox label="Lightbox">
+          <swirl-file-viewer description="Cute dog in a blaket." file="/sample.jpg" type="image/jpeg"></swirl-file-viewer>
+          <swirl-file-viewer description="Another dog in a blaket." file="/sample-2.jpg" type="image/jpeg"></swirl-file-viewer>
+          <swirl-file-viewer file="/sample.mp4" type="video/mp4"></swirl-file-viewer>
+        </swirl-lightbox>
+      `,
+    });
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    const slides = page.rootInstance.slides;
+    const previousSlideButton = page.root.shadowRoot.querySelector('[aria-label="Previous slide"]');
+    const nextSlideButton = page.root.shadowRoot.querySelector('[aria-label="Next slide"]');
+    expect(slides[0].getAttribute("active")).toBe("true");
+    expect(slides[1].getAttribute("active")).toBe("true");
+    expect(slides[2].getAttribute("active")).toBe("false");
+    expect(page.rootInstance.activeSlideIndex).toBe(0);
+    nextSlideButton.click();
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    expect(slides[0].getAttribute("active")).toBe("true");
+    expect(slides[1].getAttribute("active")).toBe("true");
+    expect(slides[2].getAttribute("active")).toBe("true");
+    expect(page.rootInstance.activeSlideIndex).toBe(1);
+    previousSlideButton.click();
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    expect(slides[0].getAttribute("active")).toBe("true");
+    expect(slides[1].getAttribute("active")).toBe("true");
+    expect(slides[2].getAttribute("active")).toBe("false");
+    expect(page.rootInstance.activeSlideIndex).toBe(0);
+  });
+  it("navigates through slides via keyboard", async () => {
+    const page = await newSpecPage({
+      components: [SwirlLightbox],
+      html: `
+        <swirl-lightbox label="Lightbox">
+          <swirl-file-viewer description="Cute dog in a blaket." file="/sample.jpg" type="image/jpeg"></swirl-file-viewer>
+          <swirl-file-viewer description="Another dog in a blaket." file="/sample-2.jpg" type="image/jpeg"></swirl-file-viewer>
+          <swirl-file-viewer file="/sample.mp4" type="video/mp4"></swirl-file-viewer>
+        </swirl-lightbox>
+      `,
+    });
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    const slides = page.rootInstance.slides;
+    page.root.shadowRoot
+      .querySelector("#lightbox")
+      .dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowRight" }));
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    expect(slides[0].getAttribute("active")).toBe("true");
+    expect(slides[1].getAttribute("active")).toBe("true");
+    expect(slides[2].getAttribute("active")).toBe("true");
+    expect(page.rootInstance.activeSlideIndex).toBe(1);
+    page.root.shadowRoot
+      .querySelector("#lightbox")
+      .dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowLeft" }));
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    expect(slides[0].getAttribute("active")).toBe("true");
+    expect(slides[1].getAttribute("active")).toBe("true");
+    expect(slides[2].getAttribute("active")).toBe("false");
+    expect(page.rootInstance.activeSlideIndex).toBe(0);
+  });
+  it("navigates through slides via touch", async () => {
+    const page = await newSpecPage({
+      components: [SwirlLightbox],
+      html: `
+        <swirl-lightbox label="Lightbox">
+          <swirl-file-viewer description="Cute dog in a blaket." file="/sample.jpg" type="image/jpeg"></swirl-file-viewer>
+          <swirl-file-viewer description="Another dog in a blaket." file="/sample-2.jpg" type="image/jpeg"></swirl-file-viewer>
+          <swirl-file-viewer file="/sample.mp4" type="video/mp4"></swirl-file-viewer>
+        </swirl-lightbox>
+      `,
+    });
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    const slides = page.rootInstance.slides;
+    page.root.shadowRoot
+      .querySelector("#lightbox")
+      .dispatchEvent(new Event("touchStart", { touches: [{ clientX: 0 }] }));
+    page.root.shadowRoot
+      .querySelector("#lightbox")
+      .dispatchEvent(new Event("touchMove", { touches: [{ clientX: -100 }] }));
+    page.root.shadowRoot
+      .querySelector("#lightbox")
+      .dispatchEvent(new Event("touchEnd"));
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    expect(slides[0].getAttribute("active")).toBe("true");
+    expect(slides[1].getAttribute("active")).toBe("true");
+    expect(slides[2].getAttribute("active")).toBe("true");
+    expect(page.rootInstance.activeSlideIndex).toBe(1);
+    page.root.shadowRoot
+      .querySelector("#lightbox")
+      .dispatchEvent(new Event("touchStart", { touches: [{ clientX: 0 }] }));
+    page.root.shadowRoot
+      .querySelector("#lightbox")
+      .dispatchEvent(new Event("touchMove", { touches: [{ clientX: 100 }] }));
+    page.root.shadowRoot
+      .querySelector("#lightbox")
+      .dispatchEvent(new Event("touchEnd"));
+    // wait for animation
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    expect(slides[0].getAttribute("active")).toBe("true");
+    expect(slides[1].getAttribute("active")).toBe("true");
+    expect(slides[2].getAttribute("active")).toBe("false");
+    expect(page.rootInstance.activeSlideIndex).toBe(0);
+  });
+});

package/dist/collection/components/swirl-link/swirl-link.spec.js

@@ -0,0 +1,19 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlLink } from "./swirl-link";
+describe("swirl-link", () => {
+  it("renders its label", async () => {
+    const page = await newSpecPage({
+      components: [SwirlLink],
+      html: `<swirl-link href="/" label="Label"></swirl-link>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-link href="/" label="Label">
+        <mock:shadow-root>
+          <a class="link link--color-default" href="/" part="link">
+            Label
+          </a>
+        </mock:shadow-root>
+      </swirl-link>
+    `);
+  });
+});

package/dist/collection/components/swirl-list/swirl-list.spec.js

@@ -0,0 +1,53 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlList } from "./swirl-list";
+describe("swirl-list", () => {
+  it("render its native list", async () => {
+    const page = await newSpecPage({
+      components: [SwirlList],
+      html: `
+        <swirl-list>
+          <ul>
+            <li>Level 1</li>
+            <li>Level 1
+              <ul>
+                <li>Level 2</li>
+                <li>Level 2</li>
+              </ul>
+            </li>
+            <li>Level 1</li>
+          </ul>
+        </swirl-list>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-list>
+        <div class="swirl-list">
+          <ul>
+            <li>Level 1</li>
+            <li>
+              Level 1
+              <ul>
+                <li>Level 2</li>
+                <li>Level 2</li>
+              </ul>
+            </li>
+            <li>Level 1</li>
+          </ul>
+        </div>
+      </swirl-list>
+    `);
+  });
+  it("should warn if provided with unallowed children", async () => {
+    const spy = jest.fn();
+    global.console.warn = spy;
+    await newSpecPage({
+      components: [SwirlList],
+      html: `
+        <swirl-list>
+          <div>Test</div>
+        </swirl-list>
+      `,
+    });
+    expect(spy).toHaveBeenCalledWith("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.");
+  });
+});

package/dist/collection/components/swirl-menu/swirl-menu.spec.js

@@ -0,0 +1,193 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlButton } from "../swirl-button/swirl-button";
+import { SwirlMenuItem } from "../swirl-menu-item/swirl-menu-item";
+import { SwirlPopover } from "../swirl-popover/swirl-popover";
+import { SwirlMenu } from "./swirl-menu";
+global.DocumentFragment = class DocumentFragment extends Node {
+};
+global.ShadowRoot = class ShadowRoot extends DocumentFragment {
+};
+global.MutationObserver = class {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+};
+const template = `
+  <div>
+    <swirl-button id="trigger" label="Trigger"></swirl-button>
+    <swirl-popover label="Menu" trigger="trigger">
+      <swirl-menu label="Menu">
+        <swirl-menu-item label="Item 1"></swirl-menu-item>
+        <swirl-menu-item label="Item 2">
+          <swirl-menu label="Sub menu" variant="selection">
+            <swirl-menu-item label="Sub item 1" value="1"></swirl-menu-item>
+            <swirl-menu-item label="Sub item 2" value="2"></swirl-menu-item>
+          </swirl-menu>
+        </swirl-menu-item>
+        <swirl-menu-item label="Item 3"></swirl-menu-item>
+      </swirl-menu>
+    </swirl-popover>
+  </div>
+`;
+describe("swirl-menu", () => {
+  beforeAll(() => {
+    Object.defineProperty(window, "ShadowRoot", {
+      writable: false,
+      value: jest.fn(),
+    });
+    class ResizeObserver {
+      observe() { }
+      unobserve() { }
+      disconnect() { }
+    }
+    global.ResizeObserver = ResizeObserver;
+  });
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [SwirlButton, SwirlPopover, SwirlMenu, SwirlMenuItem],
+      html: template,
+    });
+    expect(page.body.children[0]).toMatchInlineSnapshot(`
+      <div>
+        <swirl-button id="trigger" label="Trigger">
+          <button aria-controls="undefined" aria-expanded="false" aria-haspopup="dialog" class="button button--icon-position-start button--intent-default button--size-m button--variant-ghost" type="button">
+            <span class="button__label">
+              Trigger
+            </span>
+          </button>
+        </swirl-button>
+        <swirl-popover label="Menu" trigger="trigger">
+          <mock:shadow-root>
+            <div class="popover popover--animation-scale-in-xy popover--inactive popover--placement-undefined">
+              <div aria-hidden="true" aria-label="Menu" class="popover__content" part="popover__content" role="dialog" tabindex="-1">
+                <span class="popover__handle"></span>
+                <div class="popover__scroll-container">
+                  <slot></slot>
+                </div>
+              </div>
+            </div>
+          </mock:shadow-root>
+          <swirl-menu label="Menu">
+            <mock:shadow-root>
+              <div class="menu menu--active menu--level-0 menu--mobile menu--root">
+                <div class="menu__mobile-header">
+                  <swirl-button>
+                    <button aria-label="Close menu" class="button button--icon-only button--icon-position-start button--intent-default button--size-m button--variant-plain" type="button">
+                      <span class="button__icon">
+                        <swirl-icon-close size="24"></swirl-icon-close>
+                      </span>
+                    </button>
+                  </swirl-button>
+                  <span class="menu__title" id="menu-title">
+                    <swirl-heading align="center" as="span" level="4" text="Menu" truncate=""></swirl-heading>
+                  </span>
+                  <swirl-button class="menu__done-button">
+                    <button class="button button--icon-position-start button--intent-primary button--size-m button--variant-ghost" type="button">
+                      <span class="button__label">
+                        Done
+                      </span>
+                    </button>
+                  </swirl-button>
+                </div>
+                <div aria-labelledby="menu-title" aria-orientation="vertical" class="menu__menu" role="menubar" style="left: calc(-100% * 0);">
+                  <slot></slot>
+                </div>
+              </div>
+            </mock:shadow-root>
+            <swirl-menu-item label="Item 1">
+              <mock:shadow-root>
+                <div class="menu-item">
+                  <swirl-action-list-item intent="default" label="Item 1"></swirl-action-list-item>
+                  <slot></slot>
+                </div>
+              </mock:shadow-root>
+            </swirl-menu-item>
+            <swirl-menu-item label="Item 2">
+              <mock:shadow-root>
+                <div class="menu-item">
+                  <swirl-action-list-item intent="default" label="Item 2"></swirl-action-list-item>
+                  <slot></slot>
+                </div>
+              </mock:shadow-root>
+              <swirl-menu label="Sub menu" variant="selection">
+                <mock:shadow-root>
+                  <div class="menu menu--active menu--level-1 menu--mobile menu--root">
+                    <div class="menu__mobile-header">
+                      <swirl-button>
+                        <button aria-label="Close menu" class="button button--icon-only button--icon-position-start button--intent-default button--size-m button--variant-plain" type="button">
+                          <span class="button__icon">
+                            <swirl-icon-close size="24"></swirl-icon-close>
+                          </span>
+                        </button>
+                      </swirl-button>
+                      <span class="menu__title" id="menu-title">
+                        <swirl-heading align="center" as="span" level="4" text="Sub menu" truncate=""></swirl-heading>
+                      </span>
+                      <swirl-button class="menu__done-button">
+                        <button class="button button--icon-position-start button--intent-primary button--size-m button--variant-ghost" type="button">
+                          <span class="button__label">
+                            Done
+                          </span>
+                        </button>
+                      </swirl-button>
+                    </div>
+                    <div aria-labelledby="menu-title" aria-orientation="vertical" class="menu__menu" role="menubar" style="left: calc(-100% * 0);">
+                      <slot></slot>
+                    </div>
+                  </div>
+                </mock:shadow-root>
+                <swirl-menu-item label="Sub item 1" value="1">
+                  <mock:shadow-root>
+                    <div class="menu-item">
+                      <swirl-option-list-item label="Sub item 1" swirlariarole="menuitemradio" value="1"></swirl-option-list-item>
+                      <slot></slot>
+                    </div>
+                  </mock:shadow-root>
+                </swirl-menu-item>
+                <swirl-menu-item label="Sub item 2" value="2">
+                  <mock:shadow-root>
+                    <div class="menu-item">
+                      <swirl-option-list-item label="Sub item 2" swirlariarole="menuitemradio" value="2"></swirl-option-list-item>
+                      <slot></slot>
+                    </div>
+                  </mock:shadow-root>
+                </swirl-menu-item>
+              </swirl-menu>
+            </swirl-menu-item>
+            <swirl-menu-item label="Item 3">
+              <mock:shadow-root>
+                <div class="menu-item">
+                  <swirl-action-list-item intent="default" label="Item 3"></swirl-action-list-item>
+                  <slot></slot>
+                </div>
+              </mock:shadow-root>
+            </swirl-menu-item>
+          </swirl-menu>
+        </swirl-popover>
+      </div>
+    `);
+  });
+  it("starts as active if root menu", async () => {
+    const page = await newSpecPage({
+      components: [SwirlButton, SwirlPopover, SwirlMenu, SwirlMenuItem],
+      html: template,
+    });
+    const menu = page.body.querySelector("swirl-menu");
+    const rootMenuEl = menu.shadowRoot.children[0];
+    expect(rootMenuEl.classList.contains("menu--active")).toBeTruthy();
+  });
+  it("fires done event", async () => {
+    const page = await newSpecPage({
+      components: [SwirlButton, SwirlPopover, SwirlMenu, SwirlMenuItem],
+      html: template,
+    });
+    const spy = jest.fn();
+    const menu = page.body.querySelector("swirl-menu");
+    const trigger = page.body.querySelector("#trigger");
+    menu.addEventListener("done", spy);
+    trigger.click();
+    const doneButton = Array.from(menu.shadowRoot.querySelectorAll("swirl-button")).find((button) => button.innerText === "Done");
+    doneButton.click();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/collection/components/swirl-menu-item/swirl-menu-item.spec.js

@@ -0,0 +1,58 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlMenuItem } from "./swirl-menu-item";
+import { SwirlMenu } from "../swirl-menu/swirl-menu";
+import { SwirlPopover } from "../swirl-popover/swirl-popover";
+global.DocumentFragment = class DocumentFragment extends Node {
+};
+global.ShadowRoot = class ShadowRoot extends DocumentFragment {
+};
+global.MutationObserver = class {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+};
+describe("swirl-menu-item", () => {
+  it("renders a menu item", async () => {
+    const page = await newSpecPage({
+      components: [SwirlPopover, SwirlMenu, SwirlMenuItem],
+      html: `
+        <swirl-popover label="Menu" trigger="trigger">
+          <swirl-menu label="Menu">
+            <swirl-menu-item label="Item"></swirl-menu-item>
+          </swirl-menu>
+        </swirl-popover>
+      `,
+    });
+    expect(page.root.querySelector("swirl-menu-item")).toEqualHtml(`
+      <swirl-menu-item label="Item">
+        <mock:shadow-root>
+          <div class="menu-item">
+            <swirl-action-list-item intent="default" label="Item"></swirl-action-list-item>
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </swirl-menu-item>
+    `);
+  });
+  it("renders an option list for selection variant", async () => {
+    const page = await newSpecPage({
+      components: [SwirlPopover, SwirlMenu, SwirlMenuItem],
+      html: `
+        <swirl-popover label="Menu" trigger="trigger">
+          <swirl-menu label="Menu" variant="selection">
+            <swirl-menu-item label="Item" value="Value"></swirl-menu-item>
+          </swirl-menu>
+        </swirl-popover>`,
+    });
+    expect(page.root.querySelector("swirl-menu-item")).toEqualHtml(`
+      <swirl-menu-item label="Item" value="Value">
+        <mock:shadow-root>
+          <div class="menu-item">
+            <swirl-option-list-item label="Item" swirlariarole="menuitemradio" value="Value"></swirl-option-list-item>
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </swirl-menu-item>
+    `);
+  });
+});

package/dist/collection/components/swirl-modal/swirl-modal.spec.js

@@ -0,0 +1,45 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlModal } from "./swirl-modal";
+describe("swirl-modal", () => {
+  it("renders content and heading", async () => {
+    const page = await newSpecPage({
+      components: [SwirlModal],
+      html: `<swirl-modal label="Dialog">Content</swirl-modal>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-modal label="Dialog">
+        <section aria-hidden="true" aria-label="Dialog" aria-modal="true" class="modal modal--padded modal--variant-default" role="dialog">
+          <div class="modal__backdrop"></div>
+          <div class="modal__body">
+            <swirl-button class="modal__close-button" hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Close modal"></swirl-button>
+            <header class="modal__custom-header"></header>
+            <header class="modal__header">
+              <swirl-heading as="h2" class="modal__heading" level="3" text="Dialog"></swirl-heading>
+            </header>
+            <div class="modal__content">
+              Content
+            </div>
+            <div class="modal__custom-footer"></div>
+          </div>
+        </section>
+      </swirl-modal>
+    `);
+  });
+  it("renders controls and fires events", async () => {
+    const page = await newSpecPage({
+      components: [SwirlModal],
+      html: `<swirl-modal label="Dialog" primary-action-label="Primary" secondary-action-label="Secondary">Content</swirl-modal>`,
+    });
+    const primarySpy = jest.fn();
+    const secondarySpy = jest.fn();
+    const buttons = page.root.querySelectorAll(".modal__controls swirl-button");
+    page.root.addEventListener("primaryAction", primarySpy);
+    page.root.addEventListener("secondaryAction", secondarySpy);
+    buttons[0].click();
+    buttons[1].click();
+    expect(buttons[0].getAttribute("label")).toEqual("Secondary");
+    expect(buttons[1].getAttribute("label")).toEqual("Primary");
+    expect(primarySpy).toHaveBeenCalled();
+    expect(secondarySpy).toHaveBeenCalled();
+  });
+});

package/dist/collection/components/swirl-option-list/swirl-option-list.spec.js

@@ -0,0 +1,109 @@
+import { MockElement } from "@stencil/core/mock-doc";
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlOptionListItem } from "../swirl-option-list-item/swirl-option-list-item";
+import { SwirlOptionList } from "./swirl-option-list";
+global.DocumentFragment = class DocumentFragment extends Node {
+};
+global.ShadowRoot = class ShadowRoot extends DocumentFragment {
+};
+MockElement.prototype.after = function () {
+  var argArr = Array.prototype.slice.call(arguments);
+  var docFrag = document.createDocumentFragment();
+  for (var n = 0; n < argArr.length; n++) {
+    docFrag.appendChild(argArr[n]);
+  }
+  this.parentNode.insertBefore(docFrag, this.nextSibling);
+};
+MockElement.prototype.before = function () {
+  var argArr = Array.prototype.slice.call(arguments);
+  var docFrag = document.createDocumentFragment();
+  for (var n = 0; n < argArr.length; n++) {
+    docFrag.appendChild(argArr[n]);
+  }
+  this.parentNode.insertBefore(docFrag, this.previousSibling);
+};
+global.MutationObserver = class {
+  constructor() { }
+  disconnect() { }
+  observe() { }
+};
+describe("swirl-option-list", () => {
+  const template = `
+    <swirl-option-list label="Option List" multi-select="true">
+      <swirl-option-list-item label="This is an option" value="1"></swirl-option-list-item>
+      <swirl-option-list-item label="This is an option" value="2"></swirl-option-list-item>
+      <swirl-option-list-item label="This is an option" value="3"></swirl-option-list-item>
+    </swirl-option-list>
+  `;
+  it("renders its children", async () => {
+    const page = await newSpecPage({
+      components: [SwirlOptionList],
+      html: template,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-option-list label="Option List" multi-select="true">
+        <swirl-visually-hidden role="alert"></swirl-visually-hidden>
+        <div aria-label="Option List" aria-multiselectable="true" class="option-list" role="listbox" tabindex="0">
+          <swirl-option-list-item label="This is an option" value="1"></swirl-option-list-item>
+          <swirl-option-list-item label="This is an option" value="2"></swirl-option-list-item>
+          <swirl-option-list-item label="This is an option" value="3"></swirl-option-list-item>
+        </div>
+      </swirl-option-list>
+    `);
+  });
+  it("fires valueChange events for single select", async () => {
+    const page = await newSpecPage({
+      components: [SwirlOptionList, SwirlOptionListItem],
+      html: template,
+    });
+    const spy = jest.fn();
+    page.root.addEventListener("valueChange", spy);
+    page.root
+      .querySelector(".option-list")
+      .dispatchEvent(new KeyboardEvent("keydown", { code: "KeyA", metaKey: true }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy.mock.calls[0][0].detail).toEqual(["1", "2", "3"]);
+  });
+  it("reflects value changes", async () => {
+    const page = await newSpecPage({
+      components: [SwirlOptionList, SwirlOptionListItem],
+      html: template,
+    });
+    const items = Array.from(page.root.querySelectorAll("swirl-option-list-item"));
+    for (const item of items) {
+      expect(item.selected).toBe(false);
+    }
+    page.root.value = ["2", "3"];
+    expect(items[0].selected).toBe(false);
+    expect(items[1].selected).toBe(true);
+    expect(items[2].selected).toBe(true);
+  });
+  it("makes items draggable", async () => {
+    const page = await newSpecPage({
+      components: [SwirlOptionList, SwirlOptionListItem],
+      html: template,
+    });
+    const items = Array.from(page.root.querySelectorAll("swirl-option-list-item"));
+    const assistiveText = page.root.querySelector('[role="alert"]');
+    const optionList = page.root.querySelector(".option-list");
+    for (const item of items) {
+      expect(item.getAttribute("allow-drag")).toBeNull();
+    }
+    page.root.setAttribute("allow-drag", "true");
+    await page.waitForChanges();
+    for (const item of items) {
+      expect(item.getAttribute("allow-drag")).toBe("true");
+    }
+    items[0]
+      .querySelector(".option-list-item__drag-handle")
+      .dispatchEvent(new KeyboardEvent("keydown", { code: "Space" }));
+    await page.waitForChanges();
+    expect(assistiveText.innerHTML).toBe("Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.");
+    optionList.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowDown" }));
+    await page.waitForChanges();
+    expect(assistiveText.innerHTML).toBe("Current position: 2");
+    optionList.dispatchEvent(new KeyboardEvent("keydown", { code: "ArrowUp" }));
+    await page.waitForChanges();
+    expect(assistiveText.innerHTML).toBe("Current position: 1");
+  });
+});