@watermarkinsights/ripple 4.2.0-0 → 4.2.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;
+  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");
     }
-    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": {}
         }
-    }
-    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;
-        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;
+    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");
+  });
 });