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

Applicaster Zapp React Native ui components for the Quick Brick App

import { View } from "react-native";
import React from "react";
import { act, render } from "@testing-library/react-native";
import { CellWithFocusable } from "../CellWithFocusable.tsx";

import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";

const renderWith = (props) => {
  return render(<CellWithFocusable {...props} />);
};

describe("CellWithFocusable", () => {
  it("should render in default state", () => {
    const props = {
      index: 0,
      item: {},
      CellRenderer: View,
      id: "id",
      groupId: "groupId",
      onFocus: jest.fn(),
      scrollTo: jest.fn(),
    };

    const wrapper = renderWith(props);

    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");

    expect(element.props.state).toBe("default");
  });

  it("should render in default state", () => {
    const props = {
      index: 0,
      item: {},
      CellRenderer: View,
      id: "id",
      groupId: "groupId",
      onFocus: jest.fn(),
      scrollTo: jest.fn(),
    };

    focusManager.isGroupItemFocused = jest.fn(() => true);

    const wrapper = renderWith(props);
    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");

    expect(element.props.state).toBe("default");
  });

  it("should render in focused state", () => {
    const props = {
      index: 0,
      item: {},
      CellRenderer: View,
      id: "id",
      groupId: "groupId",
      onFocus: jest.fn(),
      scrollTo: jest.fn(),
    };

    const wrapper = renderWith(props);

    const focusableGroupComponent = wrapper.getByTestId(
      "cell-with-focusable-cell-renderer-focusable-group"
    );

    act(() => {
      focusableGroupComponent.props.onFocus();
    });

    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
    expect(element.props.state).toBe("focused");
  });
});