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

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

"use strict";

var _reblendjs = require("reblendjs");
var _ = require("../");
describe("rerender API", () => {
  let originalConfig;
  beforeEach(() => {
    // Grab the existing configuration so we can restore
    // it at the end of the test
    (0, _.configure)(existingConfig => {
      originalConfig = existingConfig;
      // Don't change the existing config
      return {};
    });
  });
  afterEach(() => {
    (0, _.configure)(originalConfig);
  });
  test("rerender will re-render the element", async () => {
    const Greeting = class
      /* @Reblend: Transformed from function to class */
    extends _reblendjs.Reblend {
      static ELEMENT_NAME = "Greeting";
      constructor() {
        super();
      }
      async initState() {}
      async initProps(props) {
        this.props = {};
        this.props = props;
      }
      async html() {
        return _reblendjs.Reblend.construct.bind(this)("div", null, this.props.message);
      }
    };
    const {
      container,
      rerender
    } = await (0, _.render)(_reblendjs.Reblend.construct.bind(this)(Greeting, {
      message: "hi"
    }));
    expect(container.firstChild).toHaveTextContent("hi");
    await rerender(_reblendjs.Reblend.construct.bind(this)(Greeting, {
      message: "hey"
    }));
    expect(container.firstChild).toHaveTextContent("hey");
  });

  /*   test("rerender will re-render the element", async () => {
      const initialInputElement = document.createElement("input");
      const container = document.createElement("div");
      container.appendChild(initialInputElement);
      document.body.appendChild(container);
  
      const firstValue = "hello";
      initialInputElement.value = firstValue;
  
      const { rerender } = await render(
        <input value="" onChange={() => null} />,
        {
          container,
        }
      );
  
      expect(initialInputElement).toHaveValue(firstValue);
  
      const secondValue = "goodbye";
      await rerender(<input value={secondValue} onChange={() => null} />);
      expect(initialInputElement).toHaveValue(secondValue);
    }); */

  test("renders options.wrapper around node", async () => {
    const WrapperComponent = class
      /* @Reblend: Transformed from function to class */
    extends _reblendjs.Reblend {
      static ELEMENT_NAME = "WrapperComponent";
      constructor() {
        super();
      }
      async initState() {}
      async initProps({
        children
      }) {
        this.props = {};
        this.props.children = children;
      }
      async html() {
        return _reblendjs.Reblend.construct.bind(this)("div", {
          "data-testid": "wrapper"
        }, this.props.children);
      }
    };
    const Greeting = class
      /* @Reblend: Transformed from function to class */
    extends _reblendjs.Reblend {
      static ELEMENT_NAME = "Greeting";
      constructor() {
        super();
      }
      async initState() {}
      async initProps(props) {
        this.props = {};
        this.props = props;
      }
      async html() {
        return _reblendjs.Reblend.construct.bind(this)("div", null, this.props.message);
      }
    };
    const {
      container,
      rerender
    } = await (0, _.render)(_reblendjs.Reblend.construct.bind(this)(Greeting, {
      message: "hi"
    }), {
      wrapper: WrapperComponent
    });
    expect(container.firstChild).toMatchInlineSnapshot(`
          <div
            reblendcomponent="WrapperComponent"
          >
            <div
              data-testid="wrapper"
            >
              <div
                reblendcomponent="Greeting"
              >
                <div>
                  hi
                </div>
              </div>
            </div>
          </div>
      `);
    await rerender(_reblendjs.Reblend.construct.bind(this)(Greeting, {
      message: "hey"
    }));
    expect(container.firstChild).toMatchInlineSnapshot(`
          <div
            reblendcomponent="WrapperComponent"
          >
            <div
              data-testid="wrapper"
            >
              <div
                reblendcomponent="Greeting"
              >
                <div>
                  hey
                </div>
              </div>
            </div>
          </div>
    `);
  });
  test("body of functional components runs once", async () => {
    const spy = jest.fn();
    class Component extends _reblendjs.Reblend {
      static ELEMENT_NAME = "Component";
      constructor() {
        super();
      }
      async initState() {
        spy();
      }
      async initProps() {
        this.props = {};
      }
      async html() {
        return;
      }
    }
    /* @Reblend: Transformed from function to class */
    const {
      rerender
    } = await (0, _.render)(_reblendjs.Reblend.construct.bind(this)(Component, null));
    expect(spy).toHaveBeenCalledTimes(1);
    spy.mockClear();
    await rerender(_reblendjs.Reblend.construct.bind(this)(Component, null));
    expect(spy).toHaveBeenCalledTimes(0);
  });
});