@applicaster/zapp-react-native-ui-components 16.0.0-rc.63 → 16.0.0-rc.65

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { Switch } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useCellClick } from "@applicaster/zapp-react-native-utils/reactHooks/cell-click";
 
 type Props = {
   item: ZappEntry | ZappFeed;
@@ -15,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;
 
   const isSelected = React.useMemo(
     () => cellState === "selected",
@@ -29,22 +24,43 @@ export const Toggle = (props: Props) => {
   );
 
   const actionContext = useActions(action?.identifier);
+  const onCellClick = useCellClick({ item: item as ZappEntry });
 
-  const [actionState, setActionState] = useState(
-    actionContext.initialEntryState(item)
+  // A form toggle has no action plugin behind the switch: it reflects the cell
+  // selection state and writes through the entry's tap actions, the same path a
+  // tap on the row takes.
+  //
+  // The identifier alone cannot tell that case apart from a real action plugin.
+  // The cell manifest declares an initial_value for `toggle_action_identifier`,
+  // and `castOrDefault` substitutes that default whenever the configured value
+  // is empty - and an empty string counts as empty. Clearing the field in the
+  // app configuration therefore cannot produce an empty identifier here. What
+  // does distinguish the two is whether the identifier resolves to an installed
+  // action plugin, so that is what the route is decided on.
+  const hasActionPlugin = Boolean(
+    action?.identifier && actionContext?.invokeAction
+  );
+
+  const [actionState, setActionState] = useState(() =>
+    hasActionPlugin ? actionContext?.initialEntryState?.(item) : undefined
   );
 
   const onPress = useCallback(() => {
-    actionContext.invokeAction(item, {
+    if (!hasActionPlugin) {
+      onCellClick();
+
+      return;
+    }
+
+    actionContext?.invokeAction?.(item, {
       updateState: setActionState,
     });
-  }, [actionState, actionContext?.state]);
+  }, [hasActionPlugin, onCellClick, actionState, actionContext?.state]);
 
   return (
     <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

@@ -0,0 +1,130 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { Toggle } from "../Toggle";
+
+const mockOnCellClick = jest.fn();
+const mockInvokeAction = jest.fn();
+const mockInitialEntryState = jest.fn().mockReturnValue({ state: 0 });
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/cell-click", () => ({
+  useCellClick: jest.fn(() => mockOnCellClick),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => ({
+    invokeAction: mockInvokeAction,
+    initialEntryState: mockInitialEntryState,
+  })),
+}));
+
+const style = {
+  trackColor: "rgba(0,0,0,1)",
+  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;
+
+const renderToggle = (identifier: string, cellState) =>
+  render(
+    <Toggle
+      item={item}
+      action={{ identifier }}
+      style={style}
+      cellState={cellState}
+    />
+  );
+
+describe("Toggle with an empty action identifier", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("is on when the cell is selected", () => {
+    const { getByRole } = renderToggle("", "selected");
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+
+  it("is off when the cell is not selected", () => {
+    const { getByRole } = renderToggle("", "default");
+
+    expect(getByRole("switch").props.value).toBe(false);
+  });
+
+  it("routes a change through the cell click path", () => {
+    const { getByRole } = renderToggle("", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockOnCellClick).toHaveBeenCalledTimes(1);
+    expect(mockInvokeAction).not.toHaveBeenCalled();
+  });
+
+  it("does not read the action plugin state", () => {
+    renderToggle("", "default");
+
+    expect(mockInitialEntryState).not.toHaveBeenCalled();
+  });
+});
+
+describe("Toggle with an action plugin identifier", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("routes a change through the action plugin", () => {
+    const { getByRole } = renderToggle("firebase-push-topic-action", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockInvokeAction).toHaveBeenCalledWith(
+      item,
+      expect.objectContaining({ updateState: expect.any(Function) })
+    );
+
+    expect(mockOnCellClick).not.toHaveBeenCalled();
+  });
+});
+
+describe("Toggle with an identifier whose action plugin is not installed", () => {
+  // The cell manifest declares initial_value "firebase-push-topic-action" for
+  // toggle_action_identifier, and castOrDefault replaces an empty configured
+  // value with that default. A form toggle therefore always arrives with a
+  // non-empty identifier it never asked for - the presence of a real action
+  // context, not the identifier string, is what decides the route.
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useActions as jest.Mock).mockReturnValue(undefined);
+  });
+
+  afterEach(() => {
+    (useActions as jest.Mock).mockReturnValue({
+      invokeAction: mockInvokeAction,
+      initialEntryState: mockInitialEntryState,
+    });
+  });
+
+  it("routes a change through the cell click path", () => {
+    const { getByRole } = renderToggle("firebase-push-topic-action", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockOnCellClick).toHaveBeenCalledTimes(1);
+    expect(mockInvokeAction).not.toHaveBeenCalled();
+  });
+
+  it("still reflects the cell selection state", () => {
+    const { getByRole } = renderToggle(
+      "firebase-push-topic-action",
+      "selected"
+    );
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.63",
+  "version": "16.0.0-rc.65",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.63",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.63",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.63",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.63",
+    "@applicaster/applicaster-types": "16.0.0-rc.65",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.65",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.65",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.65",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",