@duetds/components 7.1.0 → 7.1.1

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -56,7 +56,8 @@ export class DuetPageHeading {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -79,7 +80,8 @@ export class DuetPageHeading {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },

package/lib/collection/components/duet-pagination/duet-pagination.e2e.js

@@ -0,0 +1,101 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+import { shouldDisplayNavigation } from "./duet-pagination-utils";
+describe("duet-pagination", () => {
+  describe("shouldDisplayNavigation", () => {
+    it("return false when visibleItems are low compared to totalItems", async () => {
+      const shouldDisplayNavigationResult = shouldDisplayNavigation(10, 100, 10);
+      expect(shouldDisplayNavigationResult).toBe(false);
+    });
+    it("return true when visibleItems are high compared to totalItems", async () => {
+      const shouldDisplayNavigationResult = shouldDisplayNavigation(10, 1000, 10);
+      expect(shouldDisplayNavigationResult).toBe(true);
+    });
+  });
+  describe("Edge conditions should appear correctly", () => {
+    /**
+     * The component should handle situation where take / totals is not an equal number
+     * eg 1000 / 30 = 33,3333333
+     * and should display 34 page with a fraction of the visible-items viewable
+     */
+    it("The characters should look correctly when setting un-divisible fractions", async () => {
+      const page = await createPage(`
+        <div>
+          <duet-pagination take="30" visible-items="5" total="1000"></duet-pagination>
+        </div>`);
+      const pager = await page.find("duet-pagination");
+      const paginationLinks = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinks.length).toBe(7); // ( 1 2 3 4 5 … 34 )
+      const fwdButton = await page.find("duet-pagination >>> .duet-pagination-link-dots-forward");
+      expect(pager).not.toBeNull();
+      expect(pager).toHaveClass("hydrated");
+      expect(fwdButton.textContent).toBe("…");
+      expect(paginationLinks[6].textContent).toBe("34");
+      await fwdButton.click();
+      const paginationLinksPost = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost.length).toBe(9); // ( 1 … 6 7 8 9 10 … 34 )
+      expect(paginationLinksPost[6].textContent).toBe("10");
+      expect(paginationLinksPost[7].textContent).toBe("…");
+      expect(paginationLinksPost[8].textContent).toBe("34");
+      // now that the pager is on second "page" it will have changed the dom elements and re-rendered, we need tog et the bn again
+      const newFwdButton = await page.find("duet-pagination >>> .duet-pagination-link-dots-forward");
+      await newFwdButton.click();
+      const paginationLinksPost2ndClick = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost2ndClick.length).toBe(9); // ( 1 … 11 12 13 14 15 … 34 )
+      expect(paginationLinksPost[6].textContent).not.toBe("5.666666666666666");
+      expect(paginationLinksPost[6].textContent).toBe("15");
+      expect(paginationLinksPost[7].textContent).toBe("…");
+      expect(paginationLinksPost[8].textContent).toBe("34");
+    });
+  });
+  describe("fixes", () => {
+    it("DUET-765: should not display upper ellipsis in the last take", async () => {
+      const page = await createPage(`
+        <div>
+          <duet-pagination take="5" visible-items="5" total="1000"></duet-pagination>
+        </div>`);
+      const lastPageButton = await page.find("duet-pagination >>> .duet-pagination-link-jump-forward");
+      await lastPageButton.click();
+      const paginationLinksPost = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost.map(item => item.textContent)).toEqual(["1", "…", "196", "197", "198", "199", "200"]);
+    });
+    it("DUET-765: should display upper ellipsis and total buttons except the last take", async () => {
+      const page = await createPage(`
+        <div>
+          <duet-pagination take="5" visible-items="5" total="1000"></duet-pagination>
+        </div>`);
+      const lastPageButton = await page.find("duet-pagination >>> .duet-pagination-link-jump-forward");
+      await lastPageButton.click();
+      const jumpBackButton = await page.find("duet-pagination >>> .duet-pagination-link-dots-back");
+      await jumpBackButton.click();
+      const paginationLinksPost = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost.map(item => item.textContent)).toEqual([
+        "1",
+        "…",
+        "191",
+        "192",
+        "193",
+        "194",
+        "195",
+        "…",
+        "200",
+      ]);
+    });
+    it("DUET-766: should not allow navigation beyond the last page", async () => {
+      const page = await createPage(`
+        <div>
+          <duet-pagination take="5" visible-items="5" total="1000"></duet-pagination>
+        </div>`);
+      const lastPageButton = await page.find("duet-pagination >>> .duet-pagination-link-jump-forward");
+      await lastPageButton.click();
+      const jumpBackButton = await page.find("duet-pagination >>> .duet-pagination-link-dots-back");
+      await jumpBackButton.click();
+      const fwdArrowButton = await page.find("duet-pagination >>> .duet-date-dialog-next");
+      await fwdArrowButton.click();
+      const paginationLinksPost = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost.map(item => item.textContent)).toEqual(["1", "…", "196", "197", "198", "199", "200"]);
+    });
+  });
+});

package/lib/collection/components/duet-pagination/duet-pagination.js

@@ -353,7 +353,8 @@ export class DuetPagination {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -376,7 +377,8 @@ export class DuetPagination {
           "references": {
             "DuetPaginationVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+              "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationVariation"
             }
           }
         },
@@ -471,7 +473,8 @@ export class DuetPagination {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -491,7 +494,8 @@ export class DuetPagination {
           "resolved": "{ [x: string]: string; }",
           "references": {
             "Record": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Record"
             }
           }
         },
@@ -566,7 +570,8 @@ export class DuetPagination {
           "references": {
             "DuetBreakpoints": {
               "location": "import",
-              "path": "../../utils/token-utils"
+              "path": "../../utils/token-utils",
+              "id": "src/utils/token-utils.ts::DuetBreakpoints"
             }
           }
         },
@@ -643,7 +648,8 @@ export class DuetPagination {
           "references": {
             "DuetPaginationPageEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+              "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationPageEvent"
             }
           }
         }

package/lib/collection/components/duet-paragraph/duet-paragraph.e2e.js

@@ -0,0 +1,27 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-paragraph", () => {
+  it("should render a paragraph", async () => {
+    const page = await createPage(`<duet-paragraph></duet-paragraph>`);
+    const component = await page.find("duet-paragraph");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-paragraph theme="turva"></duet-paragraph>`);
+    const element = await page.find("duet-paragraph >>> .duet-paragraph");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-paragraph margin="none"></duet-paragraph>`);
+    const element = await page.find("duet-paragraph >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that switches the variant", async () => {
+    const page = await createPage(`<duet-paragraph variation="intro"></duet-paragraph>`);
+    const element = await page.find("duet-paragraph >>> .duet-paragraph");
+    expect(element).toHaveClass("intro");
+  });
+});

package/lib/collection/components/duet-paragraph/duet-paragraph.js

@@ -65,7 +65,8 @@ export class DuetParagraph {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -88,7 +89,8 @@ export class DuetParagraph {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -111,7 +113,8 @@ export class DuetParagraph {
           "references": {
             "DuetParagraphSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+              "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphSize"
             }
           }
         },
@@ -134,7 +137,8 @@ export class DuetParagraph {
           "references": {
             "DuetParagraphWeight": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+              "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphWeight"
             }
           }
         },
@@ -157,7 +161,8 @@ export class DuetParagraph {
           "references": {
             "DuetParagraphVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+              "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphVariation"
             }
           }
         },
@@ -180,7 +185,8 @@ export class DuetParagraph {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -198,7 +198,8 @@ export class DuetPopupMenu {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -220,7 +221,8 @@ export class DuetPopupMenu {
           "resolved": "HTMLElement | HTMLElement & { setFocus(): void; }",
           "references": {
             "HTMLElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLElement"
             }
           }
         },
@@ -329,7 +331,8 @@ export class DuetPopupMenu {
           "references": {
             "DuetPopupMenuEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
+              "id": "src/components/duet-popup-menu/duet-popup-menu.tsx::DuetPopupMenuEvent"
             }
           }
         }
@@ -343,7 +346,8 @@ export class DuetPopupMenu {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<boolean>"
@@ -359,7 +363,8 @@ export class DuetPopupMenu {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -375,7 +380,8 @@ export class DuetPopupMenu {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -391,7 +397,8 @@ export class DuetPopupMenu {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -106,7 +106,8 @@ export class DuetPopupMenuItem {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -182,7 +183,8 @@ export class DuetPopupMenuItem {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -205,7 +207,8 @@ export class DuetPopupMenuItem {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -279,7 +282,8 @@ export class DuetPopupMenuItem {
           "references": {
             "DuetPopupMenuItemEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+              "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
             }
           }
         }
@@ -299,7 +303,8 @@ export class DuetPopupMenuItem {
           "references": {
             "DuetPopupMenuItemEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+              "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
             }
           }
         }
@@ -316,10 +321,12 @@ export class DuetPopupMenuItem {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -335,7 +342,8 @@ export class DuetPopupMenuItem {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<boolean>"

package/lib/collection/components/duet-progress/duet-progress.e2e.js

@@ -0,0 +1,12 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-progress", () => {
+  it("should render an progressbar", async () => {
+    const page = await createPage(`<duet-progress progress="50"></duet-progress>`);
+    const component = await page.find("duet-progress");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+});

package/lib/collection/components/duet-progress/duet-progress.js

@@ -169,7 +169,8 @@ export class DuetProgress {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -266,7 +267,8 @@ export class DuetProgress {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

package/lib/collection/components/duet-promo-card/duet-promo-card.e2e.js

@@ -0,0 +1,23 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("promo-card", () => {
+  it("should render a promo-card", async () => {
+    const page = await createPage(`<duet-promo-card>Test</duet-promo-card>`);
+    const component = await page.find("duet-promo-card");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-promo-card margin="none">
+    </duet-promo-card>`);
+    const element = await page.find("duet-promo-card");
+    expect(element).toHaveClass("duet-m-0");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-promo-card theme="turva">Test</duet-promo-card>`);
+    const element = await page.find("duet-promo-card >>> .duet-promo-card");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+});

package/lib/collection/components/duet-promo-card/duet-promo-card.js

@@ -67,7 +67,8 @@ export class DuetPromoCard {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -90,7 +91,8 @@ export class DuetPromoCard {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -113,7 +115,8 @@ export class DuetPromoCard {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -136,7 +139,8 @@ export class DuetPromoCard {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -177,7 +181,8 @@ export class DuetPromoCard {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },

package/lib/collection/components/duet-radio/duet-radio.e2e.js

@@ -0,0 +1,135 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-radio", () => {
+  it("should render a radio", async () => {
+    const page = await createPage(`<duet-radio></duet-radio>`);
+    const component = await page.find("duet-radio");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that renders label", async () => {
+    const page = await createPage(`<duet-radio label="test"></duet-radio>`);
+    const element = await page.find("duet-radio label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should provide a slot that renders label", async () => {
+    const page = await createPage(`<duet-radio><span slot="label">test</span></duet-radio>`);
+    const element = await page.find("duet-radio label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should render HTML in the label when provided as a slotted content", async () => {
+    const page = await createPage(`<duet-radio><span slot="label">test <strong>HTML!</strong></span></duet-radio>`);
+    const element = await page.find("duet-radio label strong");
+    expect(element).not.toBeNull();
+  });
+  it("should prioritize the content from the label slot when both the slot and the attribute are present", async () => {
+    const page = await createPage(`<duet-radio label="Label wins"><span slot="label">Slot wins</span></duet-radio>`);
+    const element = await page.find("duet-radio label");
+    expect(element.innerText).toEqual("Slot wins");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-radio margin="none"></duet-radio>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that renders aria-controls", async () => {
+    const page = await createPage(`<duet-radio accessible-controls="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("aria-controls")).toEqual("test");
+  });
+  it("should provide a property that renders aria-activedescendant", async () => {
+    const page = await createPage(`<duet-radio accessible-active-descendant="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
+  });
+  it("should provide a property that renders aria-owns", async () => {
+    const page = await createPage(`<duet-radio accessible-owns="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("aria-owns")).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-radio theme="turva"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that makes the radio disabled", async () => {
+    const page = await createPage(`<duet-radio disabled></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID for the radio", async () => {
+    const page = await createPage(`<duet-radio identifier="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that adds name for the radio", async () => {
+    const page = await createPage(`<duet-radio name="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("name")).not.toBeNull();
+  });
+  it("should provide a property that adds role for the radio", async () => {
+    const page = await createPage(`<duet-radio role="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("role")).not.toBeNull();
+  });
+  it("should provide a property that checks the radio", async () => {
+    const page = await createPage(`<duet-radio checked></duet-radio>`);
+    const element = (await page.find("duet-radio .duet-radio"));
+    expect(element.checked).not.toBeNull();
+  });
+  it("should provide a property that adds value for the radio", async () => {
+    const page = await createPage(`<duet-radio value="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("value")).not.toBeNull();
+  });
+  it("should provide a property that adds group direction", async () => {
+    const page = await createPage(`<duet-radio group-direction="horizontal"></duet-radio>`);
+    const element = await page.find("duet-radio");
+    expect(element).toHaveClass("horizontal");
+  });
+  it("should provide a property that adds group disabled", async () => {
+    const page = await createPage(`<duet-radio group-disabled></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that changes tabindex of checkbox", async () => {
+    const page = await createPage(`<duet-radio accessible-index="-1"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("tabindex")).not.toBeNull();
+  });
+  it("should only raise an event on user interaction, not when changing checked property programmatically", async () => {
+    const page = await createPage(`<duet-radio label="Checked" value="test"></duet-radio>`);
+    const choice = await page.find("duet-radio");
+    const changeEventSpy = await choice.spyOnEvent("duetChange");
+    choice.setProperty("checked", true);
+    await page.waitForChanges();
+    expect(changeEventSpy).not.toHaveReceivedEvent();
+    choice.setProperty("checked", false);
+    await page.waitForChanges();
+    await choice.click();
+    expect(changeEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on focus", async () => {
+    const page = await createPage(`<duet-radio label="Checked" value="test"></duet-radio>`);
+    const radio = await page.find("duet-radio");
+    const focusEventSpy = await radio.spyOnEvent("duetFocus");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(focusEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on blur", async () => {
+    const page = await createPage(`
+      <duet-radio label="Checked" value="test"></duet-radio>
+      <button>another focusable element</button>
+    `);
+    const radio = await page.find("duet-radio");
+    const blurEventSpy = await radio.spyOnEvent("duetFocus");
+    // focus then blur the checkbox
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(blurEventSpy).toHaveReceivedEvent();
+  });
+});