mithril-testing-library

    1.0.7 • Public • Published

    mithril-testing-library

    This library provides some helper functions around @testing-library/dom for testing mithril components.

    Installation

    npm install --dev mithril-testing-library
    

    or using yarn

    yarn add --dev mithril-testing-library
    

    This library has peerDependencies for mithril.

    Difference from react-testing-library

    This library takes a lot of code from react-testing-library. The main difference is the way the render function is called.

    In mithril-testing-library, the render function is called with the mithril Component and the attributes you want to pass the component as arguments. react-testing-library on the other hand works by sending the react element directly to the render function.

    That won't work in mithril since if we create mithril element outside of mithril tree construction, the event callbacks for those elements won't trigger an automatic redraw in mithril. The reference check for vnode returned by that element created outside mithril tree would always return the same object.

    Here's more information on the mithril documentation site

    https://mithril.js.org/components.html#avoid-creating-component-instances-outside-views

    Examples

    async function wait(waitTime) {
      return new Promise((res) => setTimeout(res, waitTime));
    }
    
    const ComponentToTest = {
      view: (vnode) => {
        return m("div", [
          m(
            "button",
            {
              onclick: (e) => {
                e.stopPropagation();
                vnode.state.showList = !vnode.state.showList;
              },
            },
            "Open list"
          ),
          vnode.state.showList &&
            m(
              OnClickOutside,
              {
                onDocumentClick: () => {
                  vnode.state.showList = false;
                  // since this click handler is outside mithril ecosystem, we 
                  // have to force redraw
                  m.redraw();
                },
              },
              m("ul", { "data-testid": "the-list" }, [(m("li", 1), m("li", 2))])
            ),
        ]);
      },
    };
    
    test("onclickoutside to close dropdown menu", async () => {
      const { getByText, queryByTestId } = render(ComponentToTest);
      expect(queryByTestId("the-list")).toBeNull();
      fireEvent.click(getByText("Open list"));
    
      await waitFor(() => {
        expect(queryByTestId("the-list")).not.toBeNull();
      });
    
      await wait(1);
      fireEvent.click(document);
    
      await waitFor(() => {
        expect(queryByTestId("the-list")).toBeNull();
      });
    });
    

    Install

    npm i mithril-testing-library

    DownloadsWeekly Downloads

    530

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • mukeshsoni