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

Applicaster Zapp React Native utilities package

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

import { NOOP, getSetterName, createContextSetters } from "../helpers";

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

describe("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 ClassComponent {
        constructor() {
          this._state = { foo: "foo", bar: "bar" };
          createContextSetters(["foo", "bar"], this, { stateValidator });
        }

        setState(newState) {
          if (typeof newState === "function") {
            this.state = newState(this.state);
          } else {
            this.state = { ...this.state, ...newState };
          }
        }

        set state(val) {
          this._state = val;
        }

        get state() {
          return this._state;
        }

        getState() {
          return this._state;
        }

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

        render() {
          return <View testID="test-view">{JSON.stringify(this.state)}</View>;
        }
      }

      let instance;

      beforeEach(() => {
        instance = new ClassComponent();
      });

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

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

        instance.setBar("new bar");
        expect(instance.state.bar).toEqual("new bar");
      });

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

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

        instance.setBar("invalid bar");
        expect(instance.state.bar).toEqual("bar");
      });

      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();
      });
    });

    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 = new Component();
      const instance = new Component();
      const setStateSpy = jest.spyOn(instance, "setState");

      afterEach(() => {
        setStateSpy.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();
      });
    });
  });
});