@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/collection/components/charts/wm-chart/wm-chart-slice.js

@@ -1,125 +1,125 @@
 export class ChartSlice {
-  constructor() {
-    this.legend = undefined;
-    this.amount = undefined;
-    this.popoverTitle = undefined;
-    this.popoverText = undefined;
-    this.popoverButtonText = undefined;
-  }
-  componentDidLoad() {
-    if (parseInt(this.amount) > 0 && !this.legend) {
-      throw new Error("wm-chart-slice was provided an amount value without a legend. The legend is required unless the amount is 0 or left empty. For more information see https://components.watermarkinsights.com/chart");
+    constructor() {
+        this.legend = undefined;
+        this.amount = undefined;
+        this.popoverTitle = undefined;
+        this.popoverText = undefined;
+        this.popoverButtonText = undefined;
     }
-  }
-  componentDidUpdate() {
-    this.wmChartSliceUpdated.emit();
-  }
-  static get is() { return "wm-chart-slice"; }
-  static get properties() {
-    return {
-      "legend": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "legend",
-        "reflect": false
-      },
-      "amount": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "amount",
-        "reflect": false
-      },
-      "popoverTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "popover-title",
-        "reflect": false
-      },
-      "popoverText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "popover-text",
-        "reflect": false
-      },
-      "popoverButtonText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "popover-button-text",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmChartSliceUpdated",
-        "name": "wmChartSliceUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+    componentDidLoad() {
+        if (parseInt(this.amount) > 0 && !this.legend) {
+            throw new Error("wm-chart-slice was provided an amount value without a legend. The legend is required unless the amount is 0 or left empty. For more information see https://components.watermarkinsights.com/chart");
         }
-      }];
-  }
+    }
+    componentDidUpdate() {
+        this.wmChartSliceUpdated.emit();
+    }
+    static get is() { return "wm-chart-slice"; }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "legend",
+                "reflect": false
+            },
+            "amount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "amount",
+                "reflect": false
+            },
+            "popoverTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-title",
+                "reflect": false
+            },
+            "popoverText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-text",
+                "reflect": false
+            },
+            "popoverButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-button-text",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmChartSliceUpdated",
+                "name": "wmChartSliceUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/collection/components/charts/wm-chart/wm-chart.e2e.js

@@ -1,47 +1,47 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { AxePuppeteer } from "@axe-core/puppeteer";
 describe("wm-chart", () => {
-  let page, 
-  // @ts-ignore for some reason ts says it's unused
-  component, 
-  // slices: NodeList,
-  paths, svg;
-  beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    let page, 
+    // @ts-ignore for some reason ts says it's unused
+    component, 
+    // slices: NodeList,
+    paths, svg;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
       <wm-chart label="the label"><wm-chart-slice amount="70" legend="Created"></wm-chart-slice><wm-chart-slice amount="2" legend="Not Created"></wm-chart-slice></wm-chart>
       </main></body></html>`);
-    component = await page.find("wm-chart");
-    svg = await page.find("wm-chart >>> svg");
-    // slices = await page.findAll("wm-chart-slice");
-    paths = await page.findAll("wm-chart >>> path");
-  });
-  it("passes Axe tests", async () => {
-    const results = await new AxePuppeteer(page).analyze();
-    expect(results.violations.length).toBe(0);
-  });
-  it("renders", async () => {
-    expect(svg).toBeTruthy();
-  });
-  it("renders the right amount of slices and text", async () => {
-    let tmpPage = await newE2EPage();
-    await tmpPage.setContent(`<wm-chart label="the label">
+        component = await page.find("wm-chart");
+        svg = await page.find("wm-chart >>> svg");
+        // slices = await page.findAll("wm-chart-slice");
+        paths = await page.findAll("wm-chart >>> path");
+    });
+    it("passes Axe tests", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders", async () => {
+        expect(svg).toBeTruthy();
+    });
+    it("renders the right amount of slices and text", async () => {
+        let tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart label="the label">
       <wm-chart-slice amount="100" legend="Created"></wm-chart-slice>
       <wm-chart-slice amount="123" legend="Created"></wm-chart-slice>
       <wm-chart-slice amount="0" legend="Maybe Created"></wm-chart-slice>
       </wm-chart>`);
-    let tmpSlices = await tmpPage.findAll("wm-chart-slice");
-    let tmpPaths = await tmpPage.findAll("wm-chart >>> path");
-    let tmpTexts = await tmpPage.findAll("wm-chart >>> text.value");
-    expect(tmpSlices.length).toEqual(3);
-    // slices rendered even if amount === 0 for accessibility reasons
-    expect(tmpPaths.length).toEqual(tmpSlices.length);
-    expect(tmpTexts.length).toEqual(tmpSlices.length - 1);
-  });
-  it("hides clustered small numbers", async () => {
-    // rule: num < 4 && either neighbor < 5
-    let page = await newE2EPage();
-    await page.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+        let tmpSlices = await tmpPage.findAll("wm-chart-slice");
+        let tmpPaths = await tmpPage.findAll("wm-chart >>> path");
+        let tmpTexts = await tmpPage.findAll("wm-chart >>> text.value");
+        expect(tmpSlices.length).toEqual(3);
+        // slices rendered even if amount === 0 for accessibility reasons
+        expect(tmpPaths.length).toEqual(tmpSlices.length);
+        expect(tmpTexts.length).toEqual(tmpSlices.length - 1);
+    });
+    it("hides clustered small numbers", async () => {
+        // rule: num < 4 && either neighbor < 5
+        let page = await newE2EPage();
+        await page.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
         <wm-chart-slice amount="75" legend="A"></wm-chart-slice> // 89%
         <wm-chart-slice amount="5" legend="B"></wm-chart-slice> // 6%
         <wm-chart-slice amount="4" legend="C"></wm-chart-slice> // 5%
@@ -62,31 +62,31 @@ describe("wm-chart", () => {
         <wm-chart-slice amount="1" legend="E"></wm-chart-slice> // 1%
         <wm-chart-slice amount="0" legend="F"></wm-chart-slice> // 0%
       </wm-chart>`);
-    let [one, two, three] = await page.findAll("wm-chart");
-    let oneSlices = await one.findAll("wm-chart-slice");
-    let onePaths = await page.findAll("#one >>> path");
-    let oneTexts = await page.findAll("#one >>> text.value");
-    expect(onePaths.length).toEqual(oneSlices.length);
-    // All vals should show incl. small ones
-    // (they are not neighbors to other small vals)
-    expect(oneTexts.length).toEqual(oneSlices.length);
-    let twoSlices = await two.findAll("wm-chart-slice");
-    let twoPaths = await page.findAll("#two >>> path");
-    let twoTexts = await page.findAll("#two >>> text.value");
-    expect(twoPaths.length).toEqual(twoSlices.length);
-    // 1 small val should be hidden (3%)
-    // because it is < 4 and has a neighbor < 5
-    expect(twoTexts.length).toEqual(twoSlices.length - 1);
-    let threeSlices = await three.findAll("wm-chart-slice");
-    let threePaths = await page.findAll("#three >>> path");
-    let threeTexts = await page.findAll("#three >>> text.value");
-    // 3 small values should be hidden
-    expect(threePaths.length).toEqual(threeSlices.length);
-    expect(threeTexts.length).toEqual(threeSlices.length - 3);
-  });
-  it("handles percentages less than 1", async () => {
-    let page = await newE2EPage();
-    await page.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+        let [one, two, three] = await page.findAll("wm-chart");
+        let oneSlices = await one.findAll("wm-chart-slice");
+        let onePaths = await page.findAll("#one >>> path");
+        let oneTexts = await page.findAll("#one >>> text.value");
+        expect(onePaths.length).toEqual(oneSlices.length);
+        // All vals should show incl. small ones
+        // (they are not neighbors to other small vals)
+        expect(oneTexts.length).toEqual(oneSlices.length);
+        let twoSlices = await two.findAll("wm-chart-slice");
+        let twoPaths = await page.findAll("#two >>> path");
+        let twoTexts = await page.findAll("#two >>> text.value");
+        expect(twoPaths.length).toEqual(twoSlices.length);
+        // 1 small val should be hidden (3%)
+        // because it is < 4 and has a neighbor < 5
+        expect(twoTexts.length).toEqual(twoSlices.length - 1);
+        let threeSlices = await three.findAll("wm-chart-slice");
+        let threePaths = await page.findAll("#three >>> path");
+        let threeTexts = await page.findAll("#three >>> text.value");
+        // 3 small values should be hidden
+        expect(threePaths.length).toEqual(threeSlices.length);
+        expect(threeTexts.length).toEqual(threeSlices.length - 3);
+    });
+    it("handles percentages less than 1", async () => {
+        let page = await newE2EPage();
+        await page.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
       // total 284
         <wm-chart-slice amount="209" legend="A"></wm-chart-slice> // 74%
         <wm-chart-slice amount="40" legend="B"></wm-chart-slice> // 14%
@@ -101,113 +101,113 @@ describe("wm-chart", () => {
         <wm-chart-slice amount="34" legend="C"></wm-chart-slice> // 12%
         <wm-chart-slice amount="1" legend="D"></wm-chart-slice> // <1%
       </wm-chart>`);
-    let [one, two] = await page.findAll("wm-chart");
-    let oneSlices = await one.findAll("wm-chart-slice");
-    let onePaths = await page.findAll("#one >>> path");
-    let oneTexts = await page.findAll("#one >>> text.value");
-    expect(oneSlices.length).toEqual(5);
-    // All paths are rendered
-    expect(onePaths.length).toEqual(oneSlices.length);
-    // E should be hidden because it borders a percentage < 8
-    expect(oneTexts.length).toEqual(oneSlices.length - 1);
-    let twoSlices = await two.findAll("wm-chart-slice");
-    let twoPaths = await page.findAll("#two >>> path");
-    let twoTexts = await page.findAll("#two >>> text.value");
-    expect(twoSlices.length).toEqual(4);
-    // All paths are rendered
-    expect(twoPaths.length).toEqual(twoSlices.length);
-    // Even D should be visible because it borders a percentage > 8
-    expect(twoTexts.length).toEqual(twoSlices.length);
-  });
-  it("sets the subinfo value", async () => {
-    const comp = await page.find("wm-chart");
-    comp.setProperty("subinfo", "subinfo text");
-    await page.waitForChanges();
-    const subinfo = await page.find("wm-chart >>> .subinfo");
-    expect(subinfo.textContent).toEqual("subinfo text");
-  });
-  it("changes the display values", async () => {
-    // type bar2 and bar3
-    const tmpPage = await newE2EPage();
-    await tmpPage.setContent(`<wm-chart id="bar2chart" chart-type="bar2" label="the label" value-format="percentage"><wm-chart-slice amount="10" legend="Created"></wm-chart-slice><wm-chart-slice amount="10" legend="Not Created"></wm-chart-slice></wm-chart>
+        let [one, two] = await page.findAll("wm-chart");
+        let oneSlices = await one.findAll("wm-chart-slice");
+        let onePaths = await page.findAll("#one >>> path");
+        let oneTexts = await page.findAll("#one >>> text.value");
+        expect(oneSlices.length).toEqual(5);
+        // All paths are rendered
+        expect(onePaths.length).toEqual(oneSlices.length);
+        // E should be hidden because it borders a percentage < 8
+        expect(oneTexts.length).toEqual(oneSlices.length - 1);
+        let twoSlices = await two.findAll("wm-chart-slice");
+        let twoPaths = await page.findAll("#two >>> path");
+        let twoTexts = await page.findAll("#two >>> text.value");
+        expect(twoSlices.length).toEqual(4);
+        // All paths are rendered
+        expect(twoPaths.length).toEqual(twoSlices.length);
+        // Even D should be visible because it borders a percentage > 8
+        expect(twoTexts.length).toEqual(twoSlices.length);
+    });
+    it("sets the subinfo value", async () => {
+        const comp = await page.find("wm-chart");
+        comp.setProperty("subinfo", "subinfo text");
+        await page.waitForChanges();
+        const subinfo = await page.find("wm-chart >>> .subinfo");
+        expect(subinfo.textContent).toEqual("subinfo text");
+    });
+    it("changes the display values", async () => {
+        // type bar2 and bar3
+        const tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart id="bar2chart" chart-type="bar2" label="the label" value-format="percentage"><wm-chart-slice amount="10" legend="Created"></wm-chart-slice><wm-chart-slice amount="10" legend="Not Created"></wm-chart-slice></wm-chart>
       <wm-chart id="bar3chart" chart-type="bar3" label="the label" value-format="amount"><wm-chart-slice amount="70" legend="Created"></wm-chart-slice><wm-chart-slice amount="10" legend="Not Created"></wm-chart-slice></wm-chart>`);
-    await tmpPage.waitForChanges();
-    const bar2val = await tmpPage.findAll("#bar2chart >>> .value");
-    expect(bar2val[0].textContent).toEqual("50%");
-    const bar3val = await tmpPage.findAll("#bar3chart >>> .value");
-    expect(bar3val[0].textContent).toEqual("70");
-  });
-  it("handles Arrows and Tab keys", async () => {
-    const componentWrapper = await page.find("wm-chart >>> .component-wrapper");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    paths = await page.findAll("wm-chart >>> path");
-    expect(componentWrapper).toEqualAttribute("tabindex", "-1");
-    expect(paths[0]).toEqualAttribute("tabindex", "0");
-    expect(paths[1]).toEqualAttribute("tabindex", "-1");
-    await page.keyboard.press("ArrowRight");
-    await page.waitForChanges();
-    paths = await page.findAll("wm-chart >>> path");
-    expect(componentWrapper).toEqualAttribute("tabindex", "-1");
-    expect(paths[0]).toEqualAttribute("tabindex", "-1");
-    expect(paths[1]).toEqualAttribute("tabindex", "0");
-    await page.keyboard.press("ArrowLeft");
-    await page.waitForChanges();
-    paths = await page.findAll("wm-chart >>> path");
-    expect(componentWrapper).toEqualAttribute("tabindex", "-1");
-    expect(paths[0]).toEqualAttribute("tabindex", "0");
-    expect(paths[1]).toEqualAttribute("tabindex", "-1");
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    paths = await page.findAll("wm-chart >>> path");
-    expect(componentWrapper).toEqualAttribute("tabindex", "-1");
-    expect(paths[0]).toEqualAttribute("tabindex", "-1");
-    expect(paths[1]).toEqualAttribute("tabindex", "0");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    expect(componentWrapper).toEqualAttribute("tabindex", "0");
-    expect(paths[0]).toEqualAttribute("tabindex", "-1");
-    expect(paths[1]).toEqualAttribute("tabindex", "-1");
-  });
-  it("opens popover when slice clicked", async () => {
-    const tmpPage = await newE2EPage();
-    await tmpPage.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+        await tmpPage.waitForChanges();
+        const bar2val = await tmpPage.findAll("#bar2chart >>> .value");
+        expect(bar2val[0].textContent).toEqual("50%");
+        const bar3val = await tmpPage.findAll("#bar3chart >>> .value");
+        expect(bar3val[0].textContent).toEqual("70");
+    });
+    it("handles Arrows and Tab keys", async () => {
+        const componentWrapper = await page.find("wm-chart >>> .component-wrapper");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "0");
+        expect(paths[1]).toEqualAttribute("tabindex", "-1");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "-1");
+        expect(paths[1]).toEqualAttribute("tabindex", "0");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "0");
+        expect(paths[1]).toEqualAttribute("tabindex", "-1");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "-1");
+        expect(paths[1]).toEqualAttribute("tabindex", "0");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(componentWrapper).toEqualAttribute("tabindex", "0");
+        expect(paths[0]).toEqualAttribute("tabindex", "-1");
+        expect(paths[1]).toEqualAttribute("tabindex", "-1");
+    });
+    it("opens popover when slice clicked", async () => {
+        const tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
         <wm-chart-slice amount="95" popover-title="A" popover-text="Text A" popover-button-text="A Button" legend="A"></wm-chart-slice>
         <wm-chart-slice amount="5" popover-title="B" popover-text="Text B" popover-button-text="B Button" legend="B"></wm-chart-slice>
       </wm-chart>`);
-    await tmpPage.waitForChanges;
-    let hasPopover = await tmpPage.find("wm-chart >>> .popover");
-    const path = await tmpPage.find("wm-chart >>> path");
-    expect(hasPopover).toBeFalsy;
-    await path.click();
-    await tmpPage.waitForChanges();
-    hasPopover = await tmpPage.find("wm-chart >>> .popover");
-    expect(hasPopover).toBeTruthy;
-  });
-  it("activating popover button fires event", async () => {
-    const tmpPage = await newE2EPage();
-    await tmpPage.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+        await tmpPage.waitForChanges;
+        let hasPopover = await tmpPage.find("wm-chart >>> .popover");
+        const path = await tmpPage.find("wm-chart >>> path");
+        expect(hasPopover).toBeFalsy;
+        await path.click();
+        await tmpPage.waitForChanges();
+        hasPopover = await tmpPage.find("wm-chart >>> .popover");
+        expect(hasPopover).toBeTruthy;
+    });
+    it("activating popover button fires event", async () => {
+        const tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
       <wm-chart-slice amount="5" popover-title="A" popover-text="Text A" popover-button-text="A Button" legend="A"></wm-chart-slice>
       <wm-chart-slice amount="95" popover-title="B" popover-text="Text B" popover-button-text="B Button" legend="B"></wm-chart-slice>
       </wm-chart>
       <div id="indicator"></div>`);
-    await tmpPage.waitForChanges;
-    await tmpPage.evaluate(async () => {
-      const component = await document.querySelector("wm-chart");
-      const indicator = await document.querySelector("#indicator");
-      await component.addEventListener("wmChartPopoverButtonTriggered", () => (indicator.textContent = "event heard"));
+        await tmpPage.waitForChanges;
+        await tmpPage.evaluate(async () => {
+            const component = await document.querySelector("wm-chart");
+            const indicator = await document.querySelector("#indicator");
+            await component.addEventListener("wmChartPopoverButtonTriggered", () => (indicator.textContent = "event heard"));
+        });
+        await tmpPage.waitForChanges;
+        const indicator = await tmpPage.find("#indicator");
+        expect(indicator.textContent).toBe("");
+        await tmpPage.keyboard.press("Tab");
+        await tmpPage.waitForChanges();
+        await tmpPage.keyboard.press("ArrowDown");
+        await tmpPage.waitForChanges();
+        await tmpPage.keyboard.press("Enter");
+        await tmpPage.waitForChanges();
+        expect(indicator.textContent).toBe("event heard");
     });
-    await tmpPage.waitForChanges;
-    const indicator = await tmpPage.find("#indicator");
-    expect(indicator.textContent).toBe("");
-    await tmpPage.keyboard.press("Tab");
-    await tmpPage.waitForChanges();
-    await tmpPage.keyboard.press("ArrowDown");
-    await tmpPage.waitForChanges();
-    await tmpPage.keyboard.press("Enter");
-    await tmpPage.waitForChanges();
-    expect(indicator.textContent).toBe("event heard");
-  });
 });