@jobber/components-native 0.80.1-upgrade-to-feb557b.16 → 0.80.1-upgrade-to-2c02d1f.23

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-2c02d1f.23+2c02d1fc",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -70,7 +70,7 @@
     "date-fns-tz": "^2.0.0",
     "react": "^18.2.0",
     "react-intl": "^6.4.2",
-    "react-native": ">=0.69.2",
+    "react-native": ">=0.77.0",
     "react-native-gesture-handler": ">=2.10.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal-datetime-picker": " >=13.0.0",
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "feb557bf7d157f62138d5d34303d9fdb2cf61fb1"
+  "gitHead": "2c02d1fc6bffcecd659c2b0bdc58a22670c43548"
 }

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 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();
   });
 });