@applicaster/zapp-react-native-ui-components/Components/TextInputTv/__tests__/TextInputTv.test.js

Applicaster Zapp React Native ui components for the Quick Brick App

import React from "react";
import { Platform } from "react-native";
import { render } from "@testing-library/react-native";

Platform.OS = "samsung_tv";

Object.defineProperty(Platform, "isTV", {
  get() {
    return true;
  },
});

jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
  useIsRTL: jest.fn(() => false),
}));

const { TextInputTv } = require("../");
const testIDToTest = "TextInput-tv";

describe("<TextInputTv />", () => {
  it("renders", () => {
    const { toJSON } = render(<TextInputTv />);
    expect(toJSON()).toMatchSnapshot();
  });

  describe("on native", () => {
    beforeEach(() => {
      Platform.OS = "ios";
    });

    it("returns React-Native TextInput component if not on samsung", () => {
      const { getByTestId } = render(<TextInputTv />);
      expect(getByTestId(testIDToTest)).toBeTruthy();
    });
  });

  describe("on samsung", () => {
    beforeEach(() => {
      Platform.OS = "samsung_tv";
    });

    it("returns React input component if on samsung", () => {
      const { getByTestId } = render(<TextInputTv type="samsung" />);
      expect(getByTestId(testIDToTest)).toBeTruthy();
    });

    it("flattens styles", () => {
      Platform.OS = "samsung_tv";
      const style = [{ width: 200 }, { height: 200 }];

      const { getByTestId } = render(
        <TextInputTv type="samsung" style={style} />
      );

      expect(getByTestId(testIDToTest).props.style).toBeObject();
    });

    it("maps onChangeText to onChange", () => {
      Platform.OS = "samsung_tv";
      const onChangeText = jest.fn();

      const { getByTestId } = render(
        <TextInputTv type="samsung" onChangeText={onChangeText} />
      );

      const inputInstance = getByTestId(testIDToTest);
      expect(inputInstance.props.onChange).toBeDefined();
      expect(inputInstance.props.onChangeText).toBeUndefined();
    });

    it("it polyfills the behaviour of onChangeText", () => {
      Platform.OS = "samsung_tv";
      const onChangeText = jest.fn();

      const { getByTestId } = render(
        <TextInputTv type="samsung" onChangeText={onChangeText} />
      );

      const inputInstance = getByTestId(testIDToTest);
      const value = "foobar";
      inputInstance.props.onChange({ target: { value: value } });
      expect(onChangeText).toBeCalledWith(value);
    });

    it("maps onEndEditing to onBlur", () => {
      Platform.OS = "samsung_tv";

      const { getByTestId } = render(
        <TextInputTv type="samsung" onEndEditing={() => null} />
      );

      const inputInstance = getByTestId(testIDToTest);

      expect(inputInstance.props.onBlur).toBeDefined();
      expect(inputInstance.props.onEndEditing).toBeUndefined();
    });

    it("maps onPress to onClick", () => {
      Platform.OS = "samsung_tv";

      const { getByTestId } = render(
        <TextInputTv type="samsung" onPress={() => null} />
      );

      const inputInstance = getByTestId(testIDToTest);

      expect(inputInstance.props.onClick).toBeDefined();
      expect(inputInstance.props.onPress).toBeUndefined();
    });

    it("replaces secureTextEntry with type:'password'", () => {
      Platform.OS = "samsung_tv";

      const { getByTestId } = render(
        <TextInputTv type="samsung" secureTextEntry />
      );

      const inputInstance = getByTestId(testIDToTest);

      expect(inputInstance.props.type).toBe("password");
    });

    it("removes 'onChangeText', 'secureTextEntry', 'onEndEditing', 'onPress' props", () => {
      Platform.OS = "samsung_tv";

      const { getByTestId } = render(
        <TextInputTv type="samsung" onChangeText secureTextEntry onEndEditing />
      );

      const inputInstance = getByTestId(testIDToTest);

      expect(inputInstance.props.onChangeText).toBeUndefined();
      expect(inputInstance.props.secureTextEntry).toBeUndefined();
      expect(inputInstance.props.onEndEditing).toBeUndefined();
    });
  });
});