@applicaster/zapp-react-native-ui-components/Components/MasterCell/__tests__/TestCellStyle/index.js

Applicaster Zapp React Native ui components for the Quick Brick App

import * as cellStyles from "./styles";

const View = "View";
const Text = "Text";
const Image = "Image";

/**
 * Test helper for creating multiple matrixes of content types and states.
 * The additionalProps.whoAmI object is relevant only for tests, as a way
 * to detect which tree was selected in the data adapter.
 * @param {"selected" | "focused" | ...} state of the current cell
 * @param {"feed" | "default" | "channel" ...} contentType of the current entry
 */
const testViewTree = (state, contentType = "default") => [
  {
    type: View,
    style:
      state === "selected"
        ? cellStyles.selectedContainer
        : cellStyles.container,
    additionalProps: {
      whoAmI: {
        contentType,
        state,
      },
    },
    elements: [
      {
        type: Image,
        style: cellStyles.image,
        data: [
          {
            func: "image_src_from_media_item",
            args: ["thumbnail-small"],
            propName: "uri",
          },
        ],
        additionalProps: { numberOfLines: 1 },
      },
      {
        type: View,
        style: cellStyles.titleContainer,
        elements: [
          {
            type: Text,
            style: cellStyles.title,
            data: [
              {
                func: "path",
                args: ["title"],
                propName: "label",
              },
            ],
            additionalProps: { numberOfLines: 1 },
          },
        ],
      },
      {
        type: View,
        style: cellStyles.subTitleContainer,
        elements: [
          {
            type: Text,
            style: cellStyles.subTitle,
            data: [
              {
                func: "path",
                args: ["summary"],
                propName: "label",
              },
            ],
            additionalProps: { numberOfLines: 2 },
          },
        ],
      },
      {
        type: View,
        style: cellStyles.logoContainer,
        data: [],
        elements: [
          {
            type: Image,
            style: cellStyles.logo,
            data: [
              {
                func: "image_src_from_media_item",
                args: ["logo_thumbnail"],
                propName: "uri",
              },
            ],
          },
        ],
      },
    ],
  },
];

export const testCellStyle = {
  content_types: {
    default: {
      states: {
        default: testViewTree("default"),
        focused: testViewTree("focused"),
        selected: testViewTree("selected"),
      },
    },
    feed: {
      states: {
        default: testViewTree("default", "feed"),
        focused: testViewTree("focused", "feed"),
      },
    },
    video: {
      states: {
        default: testViewTree("default", "video"),
      },
    },
  },
};