@jobber/components-native 0.80.1-upgrade-to-feb557b.16 → 0.80.1-upgrade-to-2887450.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.80.1-upgrade-to-feb557b.16+feb557bf",
+  "version": "0.80.1-upgrade-to-2887450.21+28874506",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "feb557bf7d157f62138d5d34303d9fdb2cf61fb1"
+  "gitHead": "288745068c78774ec580f968bb469a5b1790ce46"
 }

package/src/Disclosure/Disclosure.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { ReactTestInstance } from "react-test-renderer";
 import { Disclosure } from ".";
 import { Text } from "../Text";
@@ -23,49 +23,107 @@ function fireLayoutEvent(disclosureContent: ReactTestInstance) {
   });
 }
 
-it("renders a Disclosure with a header and a content when open is true", () => {
-  const disclosure = render(
-    <Disclosure
-      header={<Text>This is the header</Text>}
-      content={<Text>This is the content</Text>}
-      open={true}
-      isEmpty={false}
-      onToggle={() => {
-        return;
-      }}
-    />,
-  );
-  fireLayoutEvent(disclosure.getByTestId("content"));
-  expect(disclosure).toMatchSnapshot();
-});
+describe("Disclosure", () => {
+  const defaultProps = {
+    header: <Text>This is the header</Text>,
+    content: <Text>This is the content</Text>,
+    onToggle: jest.fn(),
+  };
 
-it("renders a Disclosure with a header and with a content of size 0 when closed is false", () => {
-  const disclosure = render(
-    <Disclosure
-      header={<Text>This is the header</Text>}
-      content={<Text>This is the content</Text>}
-      open={false}
-      isEmpty={false}
-      onToggle={() => {
-        return;
-      }}
-    />,
-  );
-  fireLayoutEvent(disclosure.getByTestId("content"));
-  expect(disclosure).toMatchSnapshot();
-});
+  it("renders a Disclosure with a header and a content when open is true", () => {
+    render(
+      <Disclosure
+        header={<Text>This is the header</Text>}
+        content={<Text>This is the content</Text>}
+        open={true}
+        isEmpty={false}
+        onToggle={() => {
+          return;
+        }}
+      />,
+    );
+
+    expect(screen.getByText("This is the header")).toBeTruthy();
+
+    const content = screen.getByTestId("content");
+    fireLayoutEvent(content);
+
+    expect(screen.getByText("This is the content")).toBeTruthy();
+    expect(screen.getByTestId("arrowUp")).toBeTruthy();
+  });
+
+  it("renders a Disclosure with a header and with a content of size 0 when open is false", () => {
+    render(
+      <Disclosure
+        header={<Text>This is the header</Text>}
+        content={<Text>This is the content</Text>}
+        open={false}
+        isEmpty={false}
+        onToggle={() => {
+          return;
+        }}
+      />,
+    );
+
+    expect(screen.getByText("This is the header")).toBeTruthy();
+
+    const content = screen.getByTestId("content");
+    fireLayoutEvent(content);
+
+    expect(screen.getByText("This is the content")).toBeTruthy();
+    expect(screen.getByTestId("arrowUp")).toBeTruthy();
+  });
 
-it("should not render the caret when the Disclosure is empty", () => {
-  const disclosure = render(
-    <Disclosure
-      header={<Text>This is the header</Text>}
-      content={<Text>This is the content</Text>}
-      open={false}
-      isEmpty={true}
-      onToggle={() => {
-        return;
-      }}
-    />,
-  );
-  expect(disclosure).toMatchSnapshot();
+  it("should not render the caret when the Disclosure is empty", () => {
+    render(
+      <Disclosure
+        header={<Text>This is the header</Text>}
+        content={<Text>This is the content</Text>}
+        open={false}
+        isEmpty={true}
+        onToggle={() => {
+          return;
+        }}
+      />,
+    );
+
+    expect(screen.getByText("This is the header")).toBeTruthy();
+    expect(screen.queryByTestId("arrowUp")).toBeNull();
+  });
+
+  it("calls onToggle when header is pressed", () => {
+    const onToggleMock = jest.fn();
+    const { getByText } = render(
+      <Disclosure
+        {...defaultProps}
+        onToggle={onToggleMock}
+        open={false}
+        isEmpty={false}
+      />,
+    );
+
+    const headerText = getByText("This is the header");
+
+    fireEvent.press(headerText);
+
+    expect(onToggleMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onToggle when header is pressed and isEmpty is true", () => {
+    const onToggleMock = jest.fn();
+    const { getByText } = render(
+      <Disclosure
+        {...defaultProps}
+        onToggle={onToggleMock}
+        open={false}
+        isEmpty={true}
+      />,
+    );
+
+    const headerText = getByText("This is the header");
+
+    fireEvent.press(headerText);
+
+    expect(onToggleMock).not.toHaveBeenCalled();
+  });
 });

package/src/Form/Form.tsx

@@ -138,7 +138,7 @@ function InternalForm<T extends FieldValues, S>({
 
   const styles = useStyles();
 
-  // Comment to trigger build once more
+  // Comment to trigger build once more and again
   return (
     <FormProvider {...formMethods}>
       <>

package/src/Glimmer/Glimmer.test.tsx

@@ -4,8 +4,8 @@ import {
   fireEvent,
   render as renderComponent,
 } from "@testing-library/react-native";
+import { Animated } from "react-native";
 import { GLIMMER_SHINE_TEST_ID, GLIMMER_TEST_ID, Glimmer } from "./Glimmer";
-import { tokens } from "../utils/design";
 
 let screen: ReturnType<typeof renderComponent<typeof Glimmer>>;
 
@@ -48,6 +48,10 @@ describe("Glimmer", () => {
 
   it("renders sets the correct width", () => {
     jest.useFakeTimers();
+
+    // Spy on Animated.timing to verify the animation configuration
+    const timingSpy = jest.spyOn(Animated, "timing");
+
     render(<Glimmer />);
 
     act(() => {
@@ -62,12 +66,19 @@ describe("Glimmer", () => {
       expect.objectContaining({ transform: [{ translateX: -48 }] }),
     );
 
-    jest.advanceTimersByTime(tokens["timing-loading--extended"]);
+    expect(timingSpy).toHaveBeenCalled();
 
-    expect(element.props.style).toEqual(
-      expect.objectContaining({ transform: [{ translateX: 348 }] }),
-    );
+    // Get the last call to timing
+    const lastCall = timingSpy.mock.calls[timingSpy.mock.calls.length - 1];
+
+    // The first argument should be the animated value
+    // The second argument should be the config
+    const config = lastCall[1];
+
+    // Verify animation targets the right end position (300 + 48 = 348)
+    expect(config.toValue).toBe(348);
 
+    timingSpy.mockRestore();
     jest.useRealTimers();
   });
 });

package/src/Disclosure/__snapshots__/Disclosure.test.tsx.snap

@@ -1,482 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders a Disclosure with a header and a content when open is true 1`] = `
-<View
-  style={
-    {
-      "width": "100%",
-    }
-  }
->
-  <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": false,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "alignItems": "flex-start",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        adjustsFontSizeToFit={false}
-        allowFontScaling={true}
-        collapsable={false}
-        maxFontSizeMultiplier={3.125}
-        selectable={true}
-        selectionColor="hsl(86, 100%, 46%)"
-        style={
-          [
-            {
-              "fontFamily": "inter-regular",
-            },
-            {
-              "color": "hsl(198, 35%, 21%)",
-            },
-            {
-              "textAlign": "left",
-            },
-            {
-              "fontSize": 16,
-              "lineHeight": 20,
-            },
-            {
-              "letterSpacing": 0,
-            },
-          ]
-        }
-      >
-        This is the header
-      </Text>
-      <View
-        style={
-          [
-            {
-              "transform": [
-                {
-                  "rotateZ": "0deg",
-                },
-              ],
-            },
-          ]
-        }
-      >
-        <SVGMock
-          style={
-            {
-              "display": "flex",
-              "fill": "hsl(0, 0%, 72%)",
-              "height": 24,
-              "verticalAlign": "middle",
-              "width": 24,
-            }
-          }
-          testID="arrowUp"
-          viewBox="0 0 24 24"
-        >
-          <Path
-            d="M16.297 14.709a.996.996 0 0 0 1.41-.001.994.994 0 0 0 0-1.41l-5-5.005a.998.998 0 0 0-1.415 0l-5 5a.994.994 0 0 0 0 1.41.996.996 0 0 0 1.411.001L12 10.416l4.297 4.293Z"
-            fill="hsl(0, 0%, 72%)"
-          />
-        </SVGMock>
-      </View>
-    </View>
-  </View>
-  <RCTScrollView
-    collapsable={false}
-    scrollEnabled={false}
-    scrollEventThrottle={0.0001}
-    showsHorizontalScrollIndicator={false}
-    showsVerticalScrollIndicator={false}
-    style={
-      {
-        "height": 100,
-        "paddingTop": 8,
-      }
-    }
-  >
-    <View>
-      <View
-        onLayout={[Function]}
-        testID="content"
-      >
-        <Text
-          accessibilityRole="text"
-          adjustsFontSizeToFit={false}
-          allowFontScaling={true}
-          collapsable={false}
-          maxFontSizeMultiplier={3.125}
-          selectable={true}
-          selectionColor="hsl(86, 100%, 46%)"
-          style={
-            [
-              {
-                "fontFamily": "inter-regular",
-              },
-              {
-                "color": "hsl(198, 35%, 21%)",
-              },
-              {
-                "textAlign": "left",
-              },
-              {
-                "fontSize": 16,
-                "lineHeight": 20,
-              },
-              {
-                "letterSpacing": 0,
-              },
-            ]
-          }
-        >
-          This is the content
-        </Text>
-      </View>
-    </View>
-  </RCTScrollView>
-</View>
-`;
-
-exports[`renders a Disclosure with a header and with a content of size 0 when closed is false 1`] = `
-<View
-  style={
-    {
-      "width": "100%",
-    }
-  }
->
-  <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": false,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "alignItems": "flex-start",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        adjustsFontSizeToFit={false}
-        allowFontScaling={true}
-        collapsable={false}
-        maxFontSizeMultiplier={3.125}
-        selectable={true}
-        selectionColor="hsl(86, 100%, 46%)"
-        style={
-          [
-            {
-              "fontFamily": "inter-regular",
-            },
-            {
-              "color": "hsl(198, 35%, 21%)",
-            },
-            {
-              "textAlign": "left",
-            },
-            {
-              "fontSize": 16,
-              "lineHeight": 20,
-            },
-            {
-              "letterSpacing": 0,
-            },
-          ]
-        }
-      >
-        This is the header
-      </Text>
-      <View
-        style={
-          [
-            {
-              "transform": [
-                {
-                  "rotateZ": "-180deg",
-                },
-              ],
-            },
-          ]
-        }
-      >
-        <SVGMock
-          style={
-            {
-              "display": "flex",
-              "fill": "hsl(0, 0%, 72%)",
-              "height": 24,
-              "verticalAlign": "middle",
-              "width": 24,
-            }
-          }
-          testID="arrowUp"
-          viewBox="0 0 24 24"
-        >
-          <Path
-            d="M16.297 14.709a.996.996 0 0 0 1.41-.001.994.994 0 0 0 0-1.41l-5-5.005a.998.998 0 0 0-1.415 0l-5 5a.994.994 0 0 0 0 1.41.996.996 0 0 0 1.411.001L12 10.416l4.297 4.293Z"
-            fill="hsl(0, 0%, 72%)"
-          />
-        </SVGMock>
-      </View>
-    </View>
-  </View>
-  <RCTScrollView
-    collapsable={false}
-    scrollEnabled={false}
-    scrollEventThrottle={0.0001}
-    showsHorizontalScrollIndicator={false}
-    showsVerticalScrollIndicator={false}
-    style={
-      {
-        "height": 0,
-        "paddingTop": 8,
-      }
-    }
-  >
-    <View>
-      <View
-        onLayout={[Function]}
-        testID="content"
-      >
-        <Text
-          accessibilityRole="text"
-          adjustsFontSizeToFit={false}
-          allowFontScaling={true}
-          collapsable={false}
-          maxFontSizeMultiplier={3.125}
-          selectable={true}
-          selectionColor="hsl(86, 100%, 46%)"
-          style={
-            [
-              {
-                "fontFamily": "inter-regular",
-              },
-              {
-                "color": "hsl(198, 35%, 21%)",
-              },
-              {
-                "textAlign": "left",
-              },
-              {
-                "fontSize": 16,
-                "lineHeight": 20,
-              },
-              {
-                "letterSpacing": 0,
-              },
-            ]
-          }
-        >
-          This is the content
-        </Text>
-      </View>
-    </View>
-  </RCTScrollView>
-</View>
-`;
-
-exports[`should not render the caret when the Disclosure is empty 1`] = `
-<View
-  style={
-    {
-      "width": "100%",
-    }
-  }
->
-  <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": true,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "opacity": 1,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "alignItems": "flex-start",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-        }
-      }
-    >
-      <Text
-        accessibilityRole="text"
-        adjustsFontSizeToFit={false}
-        allowFontScaling={true}
-        collapsable={false}
-        maxFontSizeMultiplier={3.125}
-        selectable={true}
-        selectionColor="hsl(86, 100%, 46%)"
-        style={
-          [
-            {
-              "fontFamily": "inter-regular",
-            },
-            {
-              "color": "hsl(198, 35%, 21%)",
-            },
-            {
-              "textAlign": "left",
-            },
-            {
-              "fontSize": 16,
-              "lineHeight": 20,
-            },
-            {
-              "letterSpacing": 0,
-            },
-          ]
-        }
-      >
-        This is the header
-      </Text>
-    </View>
-  </View>
-  <RCTScrollView
-    collapsable={false}
-    scrollEnabled={false}
-    scrollEventThrottle={0.0001}
-    showsHorizontalScrollIndicator={false}
-    showsVerticalScrollIndicator={false}
-    style={
-      {
-        "height": 0,
-        "paddingTop": 8,
-      }
-    }
-  >
-    <View>
-      <View
-        onLayout={[Function]}
-        testID="content"
-      >
-        <Text
-          accessibilityRole="text"
-          adjustsFontSizeToFit={false}
-          allowFontScaling={true}
-          collapsable={false}
-          maxFontSizeMultiplier={3.125}
-          selectable={true}
-          selectionColor="hsl(86, 100%, 46%)"
-          style={
-            [
-              {
-                "fontFamily": "inter-regular",
-              },
-              {
-                "color": "hsl(198, 35%, 21%)",
-              },
-              {
-                "textAlign": "left",
-              },
-              {
-                "fontSize": 16,
-                "lineHeight": 20,
-              },
-              {
-                "letterSpacing": 0,
-              },
-            ]
-          }
-        >
-          This is the content
-        </Text>
-      </View>
-    </View>
-  </RCTScrollView>
-</View>
-`;