Enhancement: Add tooling to test onscroll event for FlowItem and Panel #842

[driskull]

Description

Enhancement: Add tooling to test onscroll event for FlowItem and Panel #842

#842 (review)

CC ISSUE :Esri/calcite-design-system#973

[driskull]

Hey @jcfranco do you know how to test scroll events with Jest/Puppeteer? I couldn't get it to work.

Tried:

it("honors calcitePanelScroll event", async () => {
    const page = await newE2EPage();

    await page.setContent(`<calcite-panel style="height:200px">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p></calcite-panel>`);

    const eventSpy = await page.spyOnEvent("calcitePanelScroll", "window");

    await page.evaluate(async () => {
      const calcitePanel = document.querySelector("calcite-panel");
      await calcitePanel.setFocus();
      const activeElement = calcitePanel.shadowRoot.activeElement;
      activeElement.scrollBy(0, 100);
      calcitePanel.scrollBy(0, 100);
      await new Promise((resolve) => {
        setTimeout(resolve, 100);
      });
    });

    expect(eventSpy).toHaveReceivedEvent();
  });

[jcfranco]

Moved to Esri/calcite-design-system#973