@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1453660071 → 16.0.0-alpha.1454930193

package/Components/ModalComponent/__tests__/BottomSheetModalContent.test.tsx

@@ -0,0 +1,343 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { BottomSheetModalContent } from "../BottomSheetModalContent";
+import { ContentViewModel } from "@applicaster/zapp-react-native-utils/modalState";
+
+jest.mock("react-native-sortables", () => {
+  const { View } = require("react-native");
+
+  const Grid = ({ data, renderItem }: any) => (
+    <View testID="sortable-grid">
+      {(data || []).map((item: any, index: number) =>
+        renderItem({
+          item,
+          index,
+          renderHandle: (children: any) => (
+            <View testID={`sortable-handle-${index}`}>{children}</View>
+          ),
+        })
+      )}
+    </View>
+  );
+
+  const Handle = ({ children }: any) => (
+    <View testID="sortable-handle-wrapper">{children}</View>
+  );
+
+  return {
+    __esModule: true,
+    default: {
+      Grid,
+      Handle,
+    },
+    Grid,
+    Handle,
+  };
+});
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({
+    modal_bottom_sheet_padding_top: 0,
+    modal_bottom_sheet_padding_bottom: 0,
+    modal_bottom_sheet_background_color: "#000",
+    modal_bottom_sheet_item_selected_icon: null,
+  }),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePlugins: () => [],
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useLocalizedStrings: () => ({}),
+}));
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+}));
+
+jest.mock("../Header", () => ({
+  ModalHeader: ({ title }: any) => {
+    const { Text } = require("react-native");
+
+    return <Text testID="default-header">{title}</Text>;
+  },
+}));
+
+jest.mock("../Button", () => ({
+  Button: ({ label }: any) => {
+    const { Text } = require("react-native");
+
+    return <Text testID="generic-button">{label}</Text>;
+  },
+}));
+
+jest.mock("../AudioPlayer/Components/Item", () => ({
+  AudioPlayerTrackItem: ({ data }: any) => {
+    const { Text } = require("react-native");
+
+    return <Text testID="selectable-row">{data.textLabel1}</Text>;
+  },
+  mapMenuItemToPlaylistData: (item: any) => ({ textLabel1: item.title }),
+  VARIANT_PLAYLIST_ITEM: {},
+}));
+
+const mockAudioPlayerButtonProps: Array<any> = [];
+const mockNowPlayingHeaderProps: Array<any> = [];
+
+jest.mock("../AudioPlayer/Components", () => ({
+  NowPlayingHeaderSection: (props: any) => {
+    mockNowPlayingHeaderProps.push(props);
+
+    return null;
+  },
+  AudioPlayerButton: (props: any) => {
+    const { Text } = require("react-native");
+
+    mockAudioPlayerButtonProps.push(props);
+
+    return (
+      <Text testID="create-playlist-button" onPress={props.onPress}>
+        {props.data?.title}
+      </Text>
+    );
+  },
+}));
+
+const baseProps = {
+  items: [{ id: "track-a", title: "Track A", label: "Track A" }],
+  onPress: jest.fn(),
+  width: 320,
+  currentRoute: true,
+  dismiss: jest.fn(),
+  title: "Sheet Title",
+  maxHeight: 400,
+};
+
+describe("BottomSheetModalContent role/behavior cells", () => {
+  it("renders standard Button rows and default header when no viewModel/role", () => {
+    render(<BottomSheetModalContent {...baseProps} />);
+
+    expect(screen.getByTestId("default-header")).toBeTruthy();
+    expect(screen.getByTestId("generic-button")).toBeTruthy();
+    expect(screen.queryByTestId("selectable-row")).toBeNull();
+  });
+
+  it("renders selectable rows when viewModel has collection_selector role", () => {
+    const viewModel = new ContentViewModel({
+      title: "Playlists",
+      items: [{ id: "fav-1", title: "Favorites" }],
+      role: "collection_selector",
+      behavior: { selectMode: "multi", currentSelection: [] },
+    });
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    expect(screen.getByTestId("default-header")).toBeTruthy();
+    expect(screen.getByTestId("selectable-row")).toBeTruthy();
+    expect(screen.queryByTestId("generic-button")).toBeNull();
+  });
+
+  it("does not accept styleVariant as a rendering input", () => {
+    render(
+      <BottomSheetModalContent
+        {...baseProps}
+        {...({ styleVariant: "audio_player" } as any)}
+      />
+    );
+
+    expect(screen.getByTestId("generic-button")).toBeTruthy();
+    expect(screen.queryByTestId("selectable-row")).toBeNull();
+  });
+
+  it("renders SortableList when viewModel has dynamic_collection role with reorder operation", () => {
+    const moveMock = jest.fn();
+    const { BehaviorSubject } = require("rxjs");
+
+    const viewModel = new ContentViewModel({
+      title: "Queue",
+      items: [
+        { id: "t1", title: "Track 1" },
+        { id: "t2", title: "Track 2" },
+      ],
+      role: "dynamic_collection",
+      dynamicCollection: { operations: ["remove", "reorder"] },
+    });
+
+    viewModel.editableCollection = {
+      items$: new BehaviorSubject([
+        { id: "t1", title: "Track 1" },
+        { id: "t2", title: "Track 2" },
+      ]),
+      operations: ["remove", "reorder"],
+      move: moveMock,
+    };
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    expect(screen.getByTestId("sortable-grid")).toBeTruthy();
+  });
+
+  it("renders create playlist button when operations include add and calls editableCollection.add on press", () => {
+    mockAudioPlayerButtonProps.length = 0;
+
+    const addMock = jest.fn();
+    const { BehaviorSubject } = require("rxjs");
+
+    const viewModel = new ContentViewModel({
+      title: "Playlists",
+      items: [{ id: "p1", title: "Playlist 1" }],
+      role: "collection_selector",
+      dynamicCollection: { operations: ["add"] },
+    });
+
+    viewModel.editableCollection = {
+      items$: new BehaviorSubject([{ id: "p1", title: "Playlist 1" }]),
+      operations: ["add"],
+      add: addMock,
+    };
+
+    render(<BottomSheetModalContent {...baseProps} viewModel={viewModel} />);
+
+    const createBtn = screen.getByTestId("create-playlist-button");
+    expect(createBtn).toBeTruthy();
+
+    // The button is rendered bare: styling comes from the modal blocks theme
+    // and the title from the button block, so no configuration/data is passed.
+    expect(mockAudioPlayerButtonProps.length).toBeGreaterThan(0);
+
+    for (const props of mockAudioPlayerButtonProps) {
+      expect(props.configuration).toBeUndefined();
+      expect(props.data).toBeUndefined();
+      expect(typeof props.onPress).toBe("function");
+    }
+
+    const { fireEvent } = require("@testing-library/react-native");
+    fireEvent.press(createBtn);
+
+    expect(addMock).toHaveBeenCalledWith({
+      id: "create_new_playlist",
+      title: "unknown title",
+    });
+  });
+
+  it("shows the empty Next Up message only when now playing is on and the list is empty", () => {
+    mockNowPlayingHeaderProps.length = 0;
+    const { BehaviorSubject } = require("rxjs");
+
+    const emptyQueue = new ContentViewModel({
+      title: "Queue",
+      items: [],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
+    });
+
+    emptyQueue.editableCollection = {
+      items$: new BehaviorSubject([]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    const { rerender } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[]}
+        emptyMessage="Queued items will be added here"
+        viewModel={emptyQueue}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: true,
+      emptyMessage: "Queued items will be added here",
+    });
+
+    const withItem = new ContentViewModel({
+      title: "Queue",
+      items: [{ id: "t1", title: "Track 1" }],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
+    });
+
+    withItem.editableCollection = {
+      items$: new BehaviorSubject([{ id: "t1", title: "Track 1" }]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    rerender(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[{ id: "t1", title: "Track 1", label: "Track 1" }]}
+        emptyMessage="Queued items will be added here"
+        viewModel={withItem}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: false,
+    });
+
+    mockNowPlayingHeaderProps.length = 0;
+
+    render(<BottomSheetModalContent {...baseProps} />);
+
+    expect(mockNowPlayingHeaderProps).toHaveLength(0);
+  });
+
+  it("honors disableScrollViewWrap in contentComponentProps to bypass ScrollView wrapping", () => {
+    const CustomComponent = () => (
+      <React.Fragment>Custom Content</React.Fragment>
+    );
+
+    const { UNSAFE_getByType } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        contentComponent={CustomComponent}
+        contentComponentProps={{ disableScrollViewWrap: true }}
+      />
+    );
+
+    const { ScrollView } = require("react-native");
+    expect(() => UNSAFE_getByType(ScrollView)).toThrow();
+  });
+
+  it("honors static disableScrollViewWrap property on ContentComponent", () => {
+    const CustomSelfScrollingComponent: any = () => (
+      <React.Fragment>Self Scrolling</React.Fragment>
+    );
+
+    CustomSelfScrollingComponent.disableScrollViewWrap = true;
+
+    const { UNSAFE_getByType } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        contentComponent={CustomSelfScrollingComponent}
+      />
+    );
+
+    const { ScrollView } = require("react-native");
+    expect(() => UNSAFE_getByType(ScrollView)).toThrow();
+  });
+
+  it("sets keyboardShouldPersistTaps='handled' on ScrollView wrapping contentComponent", () => {
+    const CustomComponent = () => (
+      <React.Fragment>Custom Content</React.Fragment>
+    );
+
+    const { UNSAFE_getByType } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        contentComponent={CustomComponent}
+      />
+    );
+
+    const { ScrollView } = require("react-native");
+    const scrollView = UNSAFE_getByType(ScrollView);
+    expect(scrollView.props.keyboardShouldPersistTaps).toBe("handled");
+  });
+});

package/Components/ModalComponent/__tests__/SortableList.web.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { SortableList } from "../SortableList.web";
+
+describe("SortableList.web", () => {
+  it("renders nothing", () => {
+    const { toJSON } = render(
+      <SortableList
+        renderItem={() => null}
+        sortableData={[{ id: "1", title: "Track 1" }]}
+      />
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+});

package/Components/ModalComponent/__tests__/TextInputContent.test.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react-native";
+import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor",
+  () => ({
+    actionExecutor: {
+      handleAction: jest.fn().mockResolvedValue(undefined),
+      handleActions: jest.fn().mockResolvedValue(undefined),
+    },
+    ActionResult: { Success: "success", Error: "error" },
+  })
+);
+
+jest.mock("../AudioPlayer/Components/Input", () => ({
+  AudioPlayerInput: ({ value, onChangeText, data, validationMessage }: any) => {
+    const { TextInput, Text } = require("react-native");
+
+    return (
+      <>
+        <Text testID="input-label">{data?.label}</Text>
+        <TextInput
+          testID="playlist-input"
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={data?.placeholder}
+        />
+        {validationMessage ? (
+          <Text testID="input-validation-message">{validationMessage}</Text>
+        ) : null}
+      </>
+    );
+  },
+  VARIANT_NAME_PLAYLIST_INPUT: {},
+}));
+
+jest.mock("../AudioPlayer/Components/Button", () => ({
+  AudioPlayerButton: ({ data, onPress }: any) => {
+    const { Pressable, Text } = require("react-native");
+
+    return (
+      <Pressable testID="submit-button" onPress={onPress}>
+        <Text>{data?.title}</Text>
+      </Pressable>
+    );
+  },
+  VARIANT_TEXT_ONLY: {},
+}));
+
+import { TextInputContent } from "../TextInputContent";
+
+const submitAction = {
+  type: "sendCloudEvent",
+  options: {
+    url: "https://server.com/cloud-events",
+    type: "com.applicaster.collection.create.v1",
+    subject: "edit_collection",
+    data: { collectionId: "playlist-123" },
+  },
+};
+
+const baseProps = {
+  inputLabel: "Name your playlist",
+  defaultValue: "Summer Hits",
+  buttonLabel: "Update",
+  actions: [submitAction],
+};
+
+describe("TextInputContent", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders default value and button label without a modal header", () => {
+    render(<TextInputContent {...baseProps} />);
+
+    expect(screen.queryByTestId("sheet-header")).toBeNull();
+
+    expect(screen.getByTestId("playlist-input").props.value).toBe(
+      "Summer Hits"
+    );
+
+    expect(screen.getByTestId("submit-button")).toBeTruthy();
+    expect(screen.getByText("Update")).toBeTruthy();
+  });
+
+  it("shows validation below the input when its value is too long", () => {
+    render(<TextInputContent maxLength={100} {...baseProps} />);
+
+    fireEvent.changeText(screen.getByTestId("playlist-input"), "x".repeat(101));
+
+    expect(screen.getByTestId("input-validation-message")).toHaveTextContent(
+      "Too many characters"
+    );
+  });
+
+  it("on submit merges name into sendCloudEvent data then dismisses", async () => {
+    render(<TextInputContent {...baseProps} />);
+
+    fireEvent.changeText(screen.getByTestId("playlist-input"), "New Name");
+    fireEvent.press(screen.getByTestId("submit-button"));
+
+    await waitFor(() => {
+      expect(actionExecutor.handleActions).toHaveBeenCalledTimes(1);
+      expect(actionExecutor.handleAction).toHaveBeenCalledTimes(1);
+    });
+
+    expect(actionExecutor.handleActions).toHaveBeenCalledWith([
+      {
+        type: "sendCloudEvent",
+        options: {
+          url: "https://server.com/cloud-events",
+          type: "com.applicaster.collection.create.v1",
+          subject: "edit_collection",
+          data: {
+            collectionId: "playlist-123",
+            name: "New Name",
+          },
+        },
+      },
+    ]);
+
+    expect(actionExecutor.handleAction).toHaveBeenCalledWith({
+      type: "dismissBottomSheet",
+    });
+  });
+
+  it("forwards actionContext into handleActions so rename can refresh the List", async () => {
+    const actionContext = {
+      component: {
+        id: "list-1",
+        data: { source: "https://example.com/user/collections/abc" },
+      },
+      screenData: { id: "playlist-screen" },
+    };
+
+    render(<TextInputContent {...baseProps} actionContext={actionContext} />);
+
+    fireEvent.press(screen.getByTestId("submit-button"));
+
+    await waitFor(() => {
+      expect(actionExecutor.handleActions).toHaveBeenCalledTimes(1);
+    });
+
+    expect(actionExecutor.handleActions).toHaveBeenCalledWith(
+      [
+        {
+          type: "sendCloudEvent",
+          options: {
+            url: "https://server.com/cloud-events",
+            type: "com.applicaster.collection.create.v1",
+            subject: "edit_collection",
+            data: {
+              collectionId: "playlist-123",
+              name: "Summer Hits",
+            },
+          },
+        },
+      ],
+      actionContext
+    );
+  });
+});

package/Components/ModalComponent/__tests__/showTextInput.test.ts

@@ -0,0 +1,95 @@
+import {
+  actionExecutor,
+  ActionResult,
+} from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import { TextInputContent } from "../TextInputContent";
+import { showTextInputAction } from "../showTextInput";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor",
+  () => ({
+    actionExecutor: {
+      handleAction: jest.fn().mockResolvedValue("success"),
+    },
+    ActionResult: { Success: "success", Error: "error" },
+  })
+);
+
+jest.mock("../TextInputContent", () => ({
+  TextInputContent: function MockTextInputContent() {
+    return null;
+  },
+}));
+
+describe("showTextInputAction", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("delegates to openBottomSheet with TextInputContent as body-only component", async () => {
+    const action = {
+      type: "showTextInput",
+      options: {
+        headerTitle: "Create Playlist",
+        inputLabel: "Name your playlist",
+        defaultValue: "",
+        buttonLabel: "Create",
+        actions: [
+          {
+            type: "sendCloudEvent",
+            options: {
+              url: "https://example.com/events",
+              type: "com.applicaster.collection.create.v1",
+              data: {},
+            },
+          },
+          {
+            type: "showToast",
+            options: {
+              message: "Playlist created.",
+            },
+          },
+        ],
+      },
+    };
+
+    const result = await showTextInputAction(action as any);
+
+    expect(result).toBe(ActionResult.Success);
+    expect(actionExecutor.handleAction).toHaveBeenCalledTimes(1);
+
+    expect(actionExecutor.handleAction).toHaveBeenCalledWith(
+      {
+        type: "openBottomSheet",
+        options: {
+          header: {
+            title: "Create Playlist",
+          },
+          content: {
+            component: TextInputContent,
+            props: {
+              inputLabel: "Name your playlist",
+              defaultValue: "",
+              buttonLabel: "Create",
+              actions: action.options.actions,
+            },
+          },
+        },
+      },
+      undefined
+    );
+  });
+
+  it("returns Error when required options are missing", async () => {
+    const action = {
+      type: "showTextInput",
+      options: {
+        headerTitle: "Create Playlist",
+      },
+    };
+
+    const result = await showTextInputAction(action as any);
+    expect(result).toBe(ActionResult.Error);
+    expect(actionExecutor.handleAction).not.toHaveBeenCalled();
+  });
+});

package/Components/ModalComponent/index.tsx

@@ -1,7 +1,18 @@
 import React, { useCallback, useState } from "react";
+import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
 
 import { BasicMeasurementsPortal as MeasurementsPortal } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
 import { BottomSheetModalContent } from "./BottomSheetModalContent";
+import { showTextInputAction } from "./showTextInput";
+
+actionExecutor.registerAction("showTextInput", showTextInputAction);
+
+export { SortableList, type SortableListProps } from "./SortableList";
+
+export {
+  TextInputContent,
+  type TextInputContentProps,
+} from "./TextInputContent";
 
 export type PluginConfiguration = {
   [key: string]: any;
@@ -15,20 +26,18 @@ type Props = {
 export function ModalComponent(props: ModalBottomSheetContentProps & Props) {
   const [height, setHeight] = useState(0);
 
-  const onLayout = useCallback(
-    ({ nativeEvent }) => {
-      if (height === 0) {
-        setHeight(nativeEvent.layout.height);
-      }
-    },
-    [height]
-  );
+  const onLayout = useCallback(({ nativeEvent }) => {
+    setHeight((value) => (value === 0 ? nativeEvent.layout.height : value));
+  }, []);
 
   if (height === 0) {
     return (
       <MeasurementsPortal
         Component={BottomSheetModalContent}
-        componentProps={props}
+        componentProps={{
+          ...props,
+          measurementPhase: true,
+        }}
         onLayout={onLayout}
       />
     );