@applicaster/zapp-react-native-utils/reactUtils/createContext/__tests__/helpers.test.js

Applicaster Zapp React Native utilities package

import * as React from "react";
import { shallow } from "enzyme";
import { View, Text } from "react-native";

function stateValidator({ property, value }) {
  return (
    (property === "foo" && value === "new foo") ||
    (property === "bar" && value === "new bar")
  );
}

const logger = {
  warning: jest.fn(),
};

jest.mock("../../logger", () => ({
  reactUtilsLogger: {
    addSubsystem: jest.fn(() => logger),
  },
}));

const { NOOP, getSetterName, createContextSetters } = require("../helpers");

describe("NOOP", () => {
  it("does nothing", () => {
    expect(NOOP()).toBeUndefined();
  });
});

describe("getSetterName", () => {
  it("returns a setter name for the given property name", () => {
    expect(getSetterName("fooBar")).toBe("setFooBar");
  });
});

describe("createContextSetters", () => {
  describe("when state validator is provided", () => {
    class Component extends React.Component {
      constructor(props) {
        super(props);
        this.state = { foo: "foo", bar: "bar" };
        createContextSetters(["foo", "bar"], this, { stateValidator });
      }

      resetInitialState() {
        this.setState({ foo: "foo", bar: "bar" });
      }

      render() {
        return (
          <View>
            <Text>I am a component</Text>
          </View>
        );
      }
    }

    const wrapper = shallow(<Component />);
    const instance = wrapper.instance();
    const setStateSpy = jest.spyOn(instance, "setState");

    beforeEach(() => {
      instance.resetInitialState();
      setStateSpy.mockClear();
      logger.warning.mockClear();
    });

    it("adds all properties and setters to the component", () => {
      expect(instance).toHaveProperty("setFoo");
      expect(instance.setFoo).toBeFunction();
      expect(instance).toHaveProperty("setBar");
      expect(instance.setBar).toBeFunction();
    });

    it("calls setState when the setters are called & the validator passes", () => {
      expect(instance.state).toMatchSnapshot();

      instance.setFoo("new foo");
      expect(instance.state).toMatchSnapshot();

      instance.setBar("new bar");
      expect(instance.state).toMatchSnapshot();

      expect(setStateSpy).toHaveBeenCalledTimes(2);
      expect(setStateSpy.mock.calls).toMatchSnapshot();
      expect(logger.warning).not.toHaveBeenCalled();
    });

    it("skips the update if the state validator doesn't pass", () => {
      expect(instance.state).toMatchSnapshot();

      instance.setFoo("invalid foo");
      expect(instance.state).toMatchSnapshot();

      instance.setBar("invalid bar");
      expect(instance.state).toMatchSnapshot();

      expect(setStateSpy).not.toHaveBeenCalled();
      expect(logger.warning).toHaveBeenCalledTimes(2);
      expect(logger.warning.mock.calls).toMatchSnapshot();
    });

    it("skips the update if the new value is the same as the previous one", () => {
      instance.setFoo("new foo");
      instance.setFoo("new foo");
      expect(instance.state).toMatchSnapshot();
      expect(setStateSpy).toHaveBeenCalledTimes(1);
    });
  });

  describe("when no state validator is provided", () => {
    class Component extends React.Component {
      constructor(props) {
        super(props);
        this.state = { foo: "foo", bar: "bar" };
        createContextSetters(["foo", "bar"], this);
      }

      render() {
        return (
          <View>
            <Text>I am a component </Text>
          </View>
        );
      }
    }

    const wrapper = shallow(<Component />);
    const instance = wrapper.instance();
    const setStateSpy = jest.spyOn(instance, "setState");

    afterEach(() => {
      setStateSpy.mockClear();
      logger.warning.mockClear();
    });

    it("adds all properties and setters to the component", () => {
      expect(instance).toHaveProperty("setFoo");
      expect(instance.setFoo).toBeFunction();
      expect(instance).toHaveProperty("setBar");
      expect(instance.setBar).toBeFunction();
    });

    it("calls setState when the setters are called, no matter what the value is", () => {
      expect(instance.state).toMatchSnapshot();

      instance.setFoo("invalid foo");
      expect(instance.state).toMatchSnapshot();

      instance.setBar("invalid bar");
      expect(instance.state).toMatchSnapshot();

      expect(setStateSpy).toHaveBeenCalledTimes(2);
      expect(setStateSpy.mock.calls).toMatchSnapshot();
      expect(logger.warning).not.toHaveBeenCalled();
    });
  });
});