reblend-testing-library/lib/__tests__/act.js

Simple and complete Reblendjs testing utilities that encourage good testing practices.

"use strict";

var _reblendjs = require("reblendjs");
var _ = require("../");
test("render calls useEffect immediately", async () => {
  const effectCb = jest.fn();
  //@reblendComponent
  class MyUselessComponent extends _reblendjs.Reblend {
    static ELEMENT_NAME = "MyUselessComponent";
    constructor() {
      super();
    }
    async initState() {
      _reblendjs.useEffect.bind(this)(effectCb);
    }
    async initProps() {
      this.props = {};
    }
    async html() {
      return _reblendjs.Reblend.construct.bind(this)(_reblendjs.Reblend, null);
    }
  }
  /* @Reblend: Transformed from function to class */
  await (0, _.render)(_reblendjs.Reblend.construct.bind(this)(MyUselessComponent, null));
  expect(effectCb).toHaveBeenCalledTimes(1);
});
test("findByTestId returns the element", async () => {
  const ref = (0, _reblendjs.useRef)();
  await (0, _.render)(_reblendjs.Reblend.construct.bind(this)("div", {
    ref: ref,
    "data-testid": "foo"
  }));
  expect(await _.screen.findByTestId("foo")).toBe(ref.current);
});
test("fireEvent triggers useEffect calls", async () => {
  const effectCb = jest.fn();
  //@reblendComponent
  class Counter extends _reblendjs.Reblend {
    static ELEMENT_NAME = "Counter";
    constructor() {
      super();
    }
    async initState() {
      _reblendjs.useEffect.bind(this)(effectCb);
      const [count, setCount] = _reblendjs.useState.bind(this)(0, "count");
      this.state.count = count;
      this.state.setCount = setCount;
    }
    async initProps() {
      this.props = {};
    }
    async html() {
      return _reblendjs.Reblend.construct.bind(this)(_reblendjs.Reblend, null, _reblendjs.Reblend.construct.bind(this)("button", {
        onClick: () => this.state.setCount(this.state.count + 1)
      }, this.state.count), this.state.count ? "Watch me change!" : "Click the button!");
    }
  }
  /* @Reblend: Transformed from function to class */
  const {
    container: {
      firstChild: {
        firstChild: buttonNode
      }
    }
  } = await (0, _.render)(_reblendjs.Reblend.construct.bind(this)(Counter, null));
  effectCb.mockClear();
  _.fireEvent.click(buttonNode);
  await (0, _.waitFor)(async () => {
    _.screen.getByText(/Click the button!/);
  });
  await (0, _.waitFor)(async () => {
    _.screen.getByText(/Watch me change!/);
  });
  expect(buttonNode).toHaveTextContent("1");
  expect(effectCb).toHaveBeenCalledTimes(1);
});