@applicaster/zapp-react-native-ui-components 16.0.0-alpha.2024822855 → 16.0.0-alpha.2105365027

package/Components/GeneralContentScreen/hookAdapter/skipExpression.ts

@@ -0,0 +1,252 @@
+import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { log_error, log_info } from "./logger";
+
+/**
+ * Boolean expressions over storage keys, used by the General Content Screen
+ * hook adapter to decide whether a hook should be skipped.
+ *
+ * The `skip_hook_storage_key` rule normally holds a comma-separated list of
+ * keys, meaning "skip when any of these exists". That covers presence only, so
+ * a condition such as "the user is logged in but has not picked a profile yet"
+ * cannot be expressed. To keep the manifest field untouched, an expression may
+ * be packed into the very same string as JSON: anything starting with `{` is
+ * parsed as an expression, anything else keeps the legacy behaviour.
+ *
+ * The expression evaluates to the SKIP condition — true means "do not present
+ * the hook" — matching the name of the rule it is configured in.
+ *
+ * Keys are written as `namespace.key` and resolved exactly like the legacy
+ * format: everything before the LAST dot is the namespace, so
+ * `com.applicaster.feature.someKey` reads `someKey` from `com.applicaster.feature`.
+ * A key with no dot falls back to the default namespace.
+ *
+ * Operators:
+ *
+ *   "ns.key"                              shorthand for { "exists": "ns.key" }
+ *   { "exists":  "ns.key" }               the key holds a truthy value
+ *   { "missing": "ns.key" }               the key holds no value
+ *   { "equals": { "key": "ns.key", "value": "kids" } }
+ *   { "all": [ …operands ] }              AND, short-circuits on the first false
+ *   { "any": [ …operands ] }              OR, short-circuits on the first true
+ *   { "not": operand }                    negation
+ *
+ * @example Show the profile selector to a logged-in user who has no profile yet
+ * ```json
+ * {
+ *   "any": [
+ *     { "missing": "quick-brick-login-flow.access_token" },
+ *     { "exists": "user_account.profile" }
+ *   ]
+ * }
+ * ```
+ * As it is stored in the `skip_hook_storage_key` string field:
+ * ```json
+ * "skip_hook_storage_key": "{\"any\":[{\"missing\":\"quick-brick-login-flow.access_token\"},{\"exists\":\"user_account.profile\"}]}"
+ * ```
+ *
+ * @example Skip an onboarding hook once it has been seen on a subscribed device
+ * ```json
+ * {
+ *   "all": [
+ *     "onboarding.completed",
+ *     { "equals": { "key": "user_account.plan", "value": "premium" } }
+ *   ]
+ * }
+ * ```
+ *
+ * Every failure mode — malformed JSON, an unknown operator, an operand of the
+ * wrong type, a storage read that throws — evaluates to false, so a broken
+ * configuration presents the hook rather than silently hiding a screen.
+ */
+export type SkipExpression =
+  | string
+  | { exists: string }
+  | { missing: string }
+  | { equals: { key: string; value: string } }
+  | { all: SkipExpression[] }
+  | { any: SkipExpression[] }
+  | { not: SkipExpression };
+
+/** Reads a single storage key. Injected so evaluation stays storage-agnostic. */
+export type ReadKey = (key: string, namespace?: string) => Promise<unknown>;
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const hasOperator = (node: Record<string, unknown>, operator: string) =>
+  Object.prototype.hasOwnProperty.call(node, operator);
+
+/**
+ * Whether a `skip_hook_storage_key` value is meant as an expression at all.
+ *
+ * Deliberately a shape check rather than a successful parse: a value that opens
+ * with `{` was written as an expression even when its JSON is broken, and must
+ * never fall back to being read as a list of storage keys.
+ */
+export const looksLikeSkipExpression = (input: unknown): boolean =>
+  isPlainObject(input) ||
+  (typeof input === "string" && input.trim().startsWith("{"));
+
+/**
+ * Reads a `skip_hook_storage_key` value as an expression, or returns null when
+ * it is not one — an empty value, a legacy comma-separated key list, or an
+ * expression whose JSON is malformed.
+ */
+export const parseSkipExpression = (input: unknown): SkipExpression | null => {
+  if (isPlainObject(input)) {
+    return input as SkipExpression;
+  }
+
+  if (!looksLikeSkipExpression(input)) {
+    return null;
+  }
+
+  const trimmed = (input as string).trim();
+
+  try {
+    const parsed = JSON.parse(trimmed);
+
+    if (!isPlainObject(parsed)) {
+      log_error(
+        `parseSkipExpression: Expression must be an object, got: ${trimmed}`
+      );
+
+      return null;
+    }
+
+    return parsed as SkipExpression;
+  } catch (error) {
+    log_error(
+      `parseSkipExpression: Malformed expression: ${trimmed}. Error: ${error.message}`,
+      { error }
+    );
+
+    return null;
+  }
+};
+
+const keyIsTruthy = async (key: string, readKey: ReadKey): Promise<boolean> => {
+  const { namespace, key: name } = getNamespaceAndKey(key);
+
+  return Boolean(await readKey(name, namespace));
+};
+
+const evaluateEquals = async (
+  operand: { key: string; value: string },
+  readKey: ReadKey
+): Promise<boolean> => {
+  const { namespace, key: name } = getNamespaceAndKey(operand.key);
+  const value = await readKey(name, namespace);
+
+  return value == null ? false : String(value) === String(operand.value);
+};
+
+const evaluateNode = async (
+  node: SkipExpression,
+  readKey: ReadKey
+): Promise<boolean> => {
+  try {
+    if (typeof node === "string") {
+      return await keyIsTruthy(node, readKey);
+    }
+
+    if (!isPlainObject(node)) {
+      log_error(
+        `evaluateSkipExpression: Not an operator: ${JSON.stringify(node)}`
+      );
+
+      return false;
+    }
+
+    // The node came from configuration JSON, so every operand is read back as
+    // unknown and type-checked here rather than trusted from the union.
+    const operator = node as Record<string, unknown>;
+
+    if (
+      hasOperator(operator, "exists") &&
+      typeof operator.exists === "string"
+    ) {
+      return await keyIsTruthy(operator.exists, readKey);
+    }
+
+    if (
+      hasOperator(operator, "missing") &&
+      typeof operator.missing === "string"
+    ) {
+      return !(await keyIsTruthy(operator.missing, readKey));
+    }
+
+    if (hasOperator(operator, "equals") && isPlainObject(operator.equals)) {
+      return await evaluateEquals(
+        operator.equals as { key: string; value: string },
+        readKey
+      );
+    }
+
+    if (hasOperator(operator, "all") && Array.isArray(operator.all)) {
+      for (const operand of operator.all) {
+        if (!(await evaluateNode(operand, readKey))) {
+          return false;
+        }
+      }
+
+      // An empty operand list carries no condition, so it stays false rather
+      // than skipping the hook on the vacuous truth of an empty AND.
+      return operator.all.length > 0;
+    }
+
+    if (hasOperator(operator, "any") && Array.isArray(operator.any)) {
+      for (const operand of operator.any) {
+        if (await evaluateNode(operand, readKey)) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
+    if (hasOperator(operator, "not")) {
+      return !(await evaluateNode(operator.not as SkipExpression, readKey));
+    }
+
+    log_error(
+      `evaluateSkipExpression: Unknown or malformed operator: ${JSON.stringify(
+        node
+      )}`
+    );
+
+    return false;
+  } catch (error) {
+    log_error(
+      `evaluateSkipExpression: Error: ${error.message} evaluating: ${JSON.stringify(
+        node
+      )}`,
+      { error }
+    );
+
+    return false;
+  }
+};
+
+/**
+ * Evaluates a parsed expression to the skip decision. A null expression — the
+ * field held no expression — is not a condition, so nothing is skipped.
+ */
+export const evaluateSkipExpression = async (
+  expression: SkipExpression | null,
+  readKey: ReadKey
+): Promise<boolean> => {
+  if (!expression) {
+    return false;
+  }
+
+  const shouldSkip = await evaluateNode(expression, readKey);
+
+  log_info(
+    `evaluateSkipExpression: Expression evaluated to ${shouldSkip}, ${
+      shouldSkip ? "skipping hook" : "proceeding with hook"
+    }`
+  );
+
+  return shouldSkip;
+};

package/Components/GeneralContentScreen/hookAdapter/validationHelper.ts

@@ -1,6 +1,11 @@
 import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import {
+  looksLikeSkipExpression,
+  parseSkipExpression,
+  evaluateSkipExpression,
+} from "./skipExpression";
 import { log_error, log_info } from "./logger";
 
 type ParseKey = { key: string; namespace?: string };
@@ -23,6 +28,12 @@ export const getKeyToSkipHook = async (key: string, namespace?: string) => {
   return await localStorage.getItem(key, namespace);
 };
 
+/**
+ * Decides whether the hook should be skipped, from the `skip_hook_storage_key`
+ * rule. The value is either a comma-separated key list — skip when ANY of them
+ * exists — or, packed into the same string, a JSON boolean expression over
+ * storage keys. See `skipExpression.ts` for the expression format.
+ */
 export const shouldSkipHook = async (
   skipHookIfKeysExist?: string
 ): Promise<boolean> => {
@@ -32,6 +43,13 @@ export const shouldSkipHook = async (
     return false;
   }
 
+  if (looksLikeSkipExpression(skipHookIfKeysExist)) {
+    return await evaluateSkipExpression(
+      parseSkipExpression(skipHookIfKeysExist),
+      getKeyToSkipHook
+    );
+  }
+
   const keyEntries = parseKeyEntries(skipHookIfKeysExist);
 
   if (keyEntries.length === 0) {

package/Components/LinkHandler/LinkHandler.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
   inflateString,
   objectToReadableString,
@@ -40,12 +39,8 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const plugins = usePlugins();
 
-  const ScreenPlugin = findPluginByIdentifier(
-    WEBVIEW_SCREEN_IDENTIFIER,
-    plugins
-  );
+  const ScreenPlugin = getPluginByIdentifier(WEBVIEW_SCREEN_IDENTIFIER);
 
   const Component =
     R.path(["module", "Component"], ScreenPlugin) ||

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from "react";
 import { TouchableOpacity, ViewStyle } from "react-native";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import Image from "./Image";
 type Props = {
@@ -57,6 +58,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
 ) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
+  const component = useUIComponentContext();
 
   // TODO: add subscription API for action availability
   const actionDisabled =
@@ -81,8 +83,9 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       updateState: (state) => {
         setActionState(state);
       },
+      ...(component ? { component } : {}),
     });
-  }, [actionState, actionContext?.state, item?.id]);
+  }, [actionState, actionContext?.state, item, component]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {
@@ -105,6 +108,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
+      accessibilityRole="button"
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/ActionButtonController.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 type ActionDefinition = {
   identifier?: string;
@@ -61,6 +62,7 @@ export function ActionButtonController({
   const resolvedEntry = entry;
   const resolvedIdentifier = action?.identifier || pluginIdentifier || "";
   const actionContext = useActions(resolvedIdentifier);
+  const component = useUIComponentContext();
 
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
@@ -128,20 +130,33 @@ export function ActionButtonController({
       return;
     }
 
+    const invokeOptions: InvokeArgsOptions = {
+      ...(component ? { component } : {}),
+    };
+
     if (supportsEntryState) {
       return actionContext.invokeAction?.(resolvedEntry, {
+        ...invokeOptions,
         updateState: setActionState,
       });
     }
 
+    if (typeof actionContext.invokeAction === "function") {
+      return actionContext.invokeAction(resolvedEntry, invokeOptions);
+    }
+
     const favouritesAction = legacySelected
       ? actionContext.removeFavourite
       : actionContext.addFavourite;
 
-    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
-
-    return toggleAction?.(resolvedEntry);
-  }, [actionContext, supportsEntryState, resolvedEntry, legacySelected]);
+    return favouritesAction?.(resolvedEntry);
+  }, [
+    actionContext,
+    supportsEntryState,
+    resolvedEntry,
+    legacySelected,
+    component,
+  ]);
 
   if (!actionContext || actionDisabled) {
     if (!actionContext) {

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/__tests__/ActionButtonController.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Text } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { UIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import { ActionButtonController } from "../ActionButtonController";
 
@@ -89,6 +90,47 @@ describe("ActionButtonController", () => {
     );
   });
 
+  it("passes the List UIComponentContext into invokeAction so the sheet can refresh it", () => {
+    const listComponent = {
+      id: "list-1",
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: false })),
+      invokeAction: jest.fn(),
+      addListener: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId } = render(
+      <UIComponentContext.Provider value={listComponent}>
+        <ActionButtonController
+          action={{ identifier: "open-modal-bottom-sheet-cell-action" }}
+          entry={entry}
+        >
+          {({ onPress }) => (
+            <Text testID="content" onPress={onPress}>
+              press
+            </Text>
+          )}
+        </ActionButtonController>
+      </UIComponentContext.Provider>
+    );
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(actionContext.invokeAction).toHaveBeenCalledWith(
+      entry,
+      expect.objectContaining({
+        updateState: expect.any(Function),
+        component: listComponent,
+      })
+    );
+  });
+
   it("updates state from addListener", () => {
     let listener;
 
@@ -328,7 +370,7 @@ describe("ActionButtonController", () => {
 
     fireEvent.press(getByTestId("content"));
 
-    expect(invokeAction).toHaveBeenCalledWith(entry);
+    expect(invokeAction).toHaveBeenCalledWith(entry, {});
     expect(addFavourite).not.toHaveBeenCalled();
     expect(removeFavourite).not.toHaveBeenCalled();
   });

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -91,6 +91,7 @@ function ButtonComponent(props: Props) {
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityRole="button"
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/DefaultComponents/LiveImage/executePreloadHooks.ts

@@ -1,5 +1,4 @@
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { loggerLiveImageManager } from "../../../VideoLive/loggerHelper";
 
 const { log_debug, log_error } = loggerLiveImageManager;
@@ -74,10 +73,9 @@ export async function executePreloadHooks({
   let payload: any = entry;
 
   let needsAbort = false;
-  const plugins = appStore.get("plugins");
 
   for (const hookConfig of sortedHooks) {
-    const plugin = findPluginByIdentifier(hookConfig.identifier, plugins, true);
+    const plugin = getPluginByIdentifier(hookConfig.identifier, true);
 
     if (!plugin?.module) {
       log_debug(

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -8,7 +8,7 @@ import Image from "../Image";
 import { useTrackCurrentAutoScrollingElement } from "@applicaster/zapp-react-native-utils/reactHooks/autoscrolling/useTrackCurrentAutoScrollingElement";
 import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { getPropComponentType } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useAccessibilityState } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type LiveImageProps = {
@@ -245,13 +245,21 @@ const LiveImageComponent = (props: LiveImageProps) => {
 
   const isCurrentlyFocused = useTrackCurrentAutoScrollingElement(componentId);
 
-  const { playerPluginId, screenConfig, preloadHooks } =
-    getPlayerConfig(player_screen_id, actionIdentifier) ?? {};
+  // New object identities here restart PlayerLiveImage's register effect,
+  // which throws away the in-flight player and runs preload hooks again.
+  const playerConfig = React.useMemo(
+    () => getPlayerConfig(player_screen_id, actionIdentifier),
+    [player_screen_id, actionIdentifier]
+  );
+
+  const { playerPluginId, screenConfig, preloadHooks } = playerConfig ?? {};
 
-  const playableEntry = playerPluginId ? getPlayableEntry(item) : null;
-  const plugins = appStore.get("plugins");
+  const playableEntry = React.useMemo(
+    () => (playerPluginId ? getPlayableEntry(item) : null),
+    [playerPluginId, item?.id]
+  );
 
-  const playerPlugin = findPluginByIdentifier(playerPluginId, plugins);
+  const playerPlugin = getPluginByIdentifier(playerPluginId);
 
   const isShouldRender =
     playerPlugin &&

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -16,13 +16,7 @@ type Props = {
 export const Toggle = (props: Props) => {
   const { style, item, action, cellState } = props;
 
-  const {
-    trackColor,
-    trackColorActive,
-    thumbColor,
-    thumbColorActive,
-    iosBackgroundColor,
-  } = style;
+  const { trackColor, trackColorActive, thumbColor, thumbColorActive } = style;
 
   // `focused_selected` is the selected state with a finger on the row, so the
   // switch has to read as on for both. Leaving it out reads a pressed selected
@@ -73,7 +67,6 @@ export const Toggle = (props: Props) => {
     <Switch
       trackColor={{ false: trackColor, true: trackColorActive }}
       thumbColor={isSelected ? thumbColorActive : thumbColor}
-      ios_backgroundColor={iosBackgroundColor}
       onValueChange={onPress}
       value={isSelected}
     />

package/Components/MasterCell/DefaultComponents/__tests__/Toggle.test.tsx

@@ -25,7 +25,6 @@ const style = {
   trackColorActive: "rgba(4,207,153,1)",
   thumbColor: "rgba(255,255,255,1)",
   thumbColorActive: "rgba(255,255,255,1)",
-  iosBackgroundColor: "rgba(0,0,0,1)",
 } as any;
 
 const item = { id: "true", title: "I agree" } as any;
@@ -87,10 +86,6 @@ describe("Toggle with an empty action identifier", () => {
     expect(mockInitialEntryState).not.toHaveBeenCalled();
   });
 
-  // ios_backgroundColor paints behind the track, so trackColor does not cover
-  // it and it has to be forwarded on its own. It was dropped once while the
-  // destructure feeding it was being reformatted, and nothing caught that.
-  //
   // Asserted on the Switch element rather than the rendered host component:
   // what Toggle owns is the props it hands to Switch, and React Native rewrites
   // them into platform-specific ones (tintColor, a style entry) underneath.
@@ -100,9 +95,18 @@ describe("Toggle with an empty action identifier", () => {
     expect(UNSAFE_getByType(Switch).props).toMatchObject({
       trackColor: { false: style.trackColor, true: style.trackColorActive },
       thumbColor: style.thumbColor,
-      ios_backgroundColor: style.iosBackgroundColor,
     });
   });
+
+  // ios_backgroundColor paints an opaque layer behind the track that the track
+  // color cannot cover, which on iOS reads as a halo around the switch. The
+  // switch is left on its platform default instead, so the prop must stay
+  // unset even if a style happens to carry a color for it.
+  it("does not set an iOS background color on the switch", () => {
+    const { UNSAFE_getByType } = renderToggle("", "default");
+
+    expect(UNSAFE_getByType(Switch).props.ios_backgroundColor).toBeUndefined();
+  });
 });
 
 describe("Toggle with an action plugin identifier", () => {

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ActionButton.tsx

@@ -166,7 +166,7 @@ export const ActionButton = ({
         <PressableView
           testOnly_pressed={props.testOnly_pressed}
           testID={props.testID || `${entry?.id}`}
-          style={style}
+          style={[style, props.alignment]}
           pressedStyle={focusedStyles}
           onPress={renderProps.onPress}
           accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Pressable, Text as RNText, View } from "react-native";
+import { Pressable, StyleSheet, Text as RNText, View } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -282,7 +282,9 @@ describe("MobileActionButton", () => {
     expect(pressable.props.testID).toBe("mobile_action_button_1");
     expect(pressable.props.accessibilityLabel).toBe("entry-1");
 
-    expect(pressable.props.style({ pressed: false })[0]).toMatchObject({
+    expect(
+      StyleSheet.flatten(pressable.props.style({ pressed: false }))
+    ).toMatchObject({
       backgroundColor: "rgba(1,1,1,1)",
       borderColor: "rgba(2,2,2,1)",
       borderWidth: 1,

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/factory.test.ts

@@ -0,0 +1,32 @@
+import { CollapsibleTextContainer } from "../index";
+
+const getValue = (key: string) => {
+  const values: Record<string, unknown> = {
+    text_alignment: "left",
+    margin_top: 0,
+    margin_right: 0,
+    margin_bottom: 0,
+    margin_left: 0,
+    padding_top: 0,
+    padding_right: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    corner_radius: 0,
+    data_key: "title",
+    custom_data_key: undefined,
+  };
+
+  return values[key];
+};
+
+describe("CollapsibleTextContainer view tree", () => {
+  it("aligns the label to the text alignment instead of stretching the cell", () => {
+    const result = CollapsibleTextContainer({
+      getValue,
+      elements: [],
+      additionalStyles: { backgroundColor: "transparent" },
+    });
+
+    expect(result.style.alignSelf).toBe("flex-start");
+  });
+});