@jobber/components-native 0.80.1-upgrade-to-2ee92b7.19 → 0.80.2

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,10 +48,6 @@ 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(() => {
@@ -66,19 +62,12 @@ describe("Glimmer", () => {
       expect.objectContaining({ transform: [{ translateX: -48 }] }),
     );
 
-    expect(timingSpy).toHaveBeenCalled();
-
-    // Get the last call to timing
-    const lastCall = timingSpy.mock.calls[timingSpy.mock.calls.length - 1];
+    jest.advanceTimersByTime(tokens["timing-loading--extended"]);
 
-    // 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);
+    expect(element.props.style).toEqual(
+      expect.objectContaining({ transform: [{ translateX: 348 }] }),
+    );
 
-    timingSpy.mockRestore();
     jest.useRealTimers();
   });
 });

package/src/Switch/components/BaseSwitch/BaseSwitch.test.tsx

@@ -2,86 +2,61 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { BaseSwitch } from "./BaseSwitch";
 
-describe("BaseSwitch", () => {
-  describe("rendering", () => {
-    it("renders with value true", () => {
-      const { getByRole } = render(<BaseSwitch value={true} />);
-      const switchElement = getByRole("switch");
-      expect(switchElement).toBeDefined();
-      expect(switchElement.props.accessibilityState.checked).toBe(true);
-    });
-
-    it("renders with defaultValue true", () => {
-      const { getByRole } = render(<BaseSwitch defaultValue={true} />);
-      const switchElement = getByRole("switch");
-      expect(switchElement).toBeDefined();
-      expect(switchElement.props.accessibilityState.checked).toBe(true);
-    });
-
-    it("renders with value false", () => {
-      const { getByRole } = render(<BaseSwitch value={false} />);
-      const switchElement = getByRole("switch");
-      expect(switchElement).toBeDefined();
-      expect(switchElement.props.accessibilityState.checked).toBe(false);
-    });
-
-    it("renders with defaultValue false", () => {
-      const { getByRole } = render(<BaseSwitch defaultValue={false} />);
-      const switchElement = getByRole("switch");
-      expect(switchElement).toBeDefined();
-      expect(switchElement.props.accessibilityState.checked).toBe(false);
-    });
+it("renders a Switch with value true", () => {
+  const tree = render(<BaseSwitch value={true} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
 
-    it("renders correctly when disabled with value true", () => {
-      const { getByRole } = render(<BaseSwitch value={true} disabled={true} />);
-      const switchElement = getByRole("switch");
-      expect(switchElement).toBeDefined();
-      expect(switchElement.props.accessibilityState.checked).toBe(true);
-      expect(switchElement.props.accessibilityState.disabled).toBe(true);
-    });
+it("renders a Switch with defaultValue true", () => {
+  const tree = render(<BaseSwitch defaultValue={true} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
 
-    it("renders correctly when disabled with value false", () => {
-      const { getByRole } = render(
-        <BaseSwitch value={false} disabled={true} />,
-      );
-      const switchElement = getByRole("switch");
-      expect(switchElement).toBeDefined();
-      expect(switchElement.props.accessibilityState.checked).toBe(false);
-      expect(switchElement.props.accessibilityState.disabled).toBe(true);
-    });
-  });
+it("renders a Switch with value false", () => {
+  const tree = render(<BaseSwitch value={false} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
 
-  describe("behavior", () => {
-    it("invokes the valueChange callback", () => {
-      const valueChangedCallback = jest.fn();
-      const { getByLabelText } = render(
-        <BaseSwitch
-          value={false}
-          onValueChange={valueChangedCallback}
-          accessibilityLabel={"test switch"}
-        />,
-      );
+it("renders a Switch with defaultValue false", () => {
+  const tree = render(<BaseSwitch defaultValue={false} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
 
-      fireEvent(getByLabelText("test switch"), "valueChange", true);
-      expect(valueChangedCallback).toHaveBeenCalledWith(true);
+it("renders a disabled Switch with value true", () => {
+  const tree = render(<BaseSwitch value={true} disabled={true} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
 
-      fireEvent(getByLabelText("test switch"), "valueChange", false);
-      expect(valueChangedCallback).toHaveBeenCalledWith(false);
-    });
+it("renders a disabled Switch with value false", () => {
+  const tree = render(<BaseSwitch value={false} disabled={true} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
 
-    it("doesn't invoke the valueChange callback if disabled", () => {
-      const valueChangedCallback = jest.fn();
-      const { getByLabelText } = render(
-        <BaseSwitch
-          value={false}
-          disabled={true}
-          onValueChange={valueChangedCallback}
-          accessibilityLabel={"test switch"}
-        />,
-      );
+it("invokes the valueChange callback", () => {
+  const valueChangedCallback = jest.fn();
+  const tree = render(
+    <BaseSwitch
+      value={false}
+      onValueChange={valueChangedCallback}
+      accessibilityLabel={"test switch"}
+    />,
+  );
+  fireEvent(tree.getByLabelText("test switch"), "valueChange", true);
+  expect(valueChangedCallback).toHaveBeenCalledWith(true);
+  fireEvent(tree.getByLabelText("test switch"), "valueChange", false);
+  expect(valueChangedCallback).toHaveBeenCalledWith(false);
+});
 
-      fireEvent(getByLabelText("test switch"), "valueChange", true);
-      expect(valueChangedCallback).not.toHaveBeenCalled();
-    });
-  });
+it("doesn't invoke the valueChange callback if disabled", () => {
+  const valueChangedCallback = jest.fn();
+  const tree = render(
+    <BaseSwitch
+      value={false}
+      disabled={true}
+      onValueChange={valueChangedCallback}
+      accessibilityLabel={"test switch"}
+    />,
+  );
+  fireEvent(tree.getByLabelText("test switch"), "valueChange", true);
+  expect(valueChangedCallback).not.toHaveBeenCalled();
 });

package/src/Switch/components/BaseSwitch/__snapshots__/BaseSwitch.test.tsx.snap

@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a Switch with defaultValue false 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": false,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={4}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="hsl(107, 58%, 33%)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "hsl(51, 17%, 85%)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="hsl(51, 17%, 85%)"
+  value={false}
+/>
+`;
+
+exports[`renders a Switch with defaultValue true 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": true,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={2}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="hsl(107, 58%, 33%)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "hsl(51, 17%, 85%)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="hsl(51, 17%, 85%)"
+  value={true}
+/>
+`;
+
+exports[`renders a Switch with value false 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": false,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={3}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="hsl(107, 58%, 33%)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "hsl(51, 17%, 85%)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="hsl(51, 17%, 85%)"
+  value={false}
+/>
+`;
+
+exports[`renders a Switch with value true 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": true,
+      "disabled": false,
+    }
+  }
+  collapsable={false}
+  disabled={false}
+  handlerTag={1}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="hsl(107, 58%, 33%)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "hsl(51, 17%, 85%)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="hsl(51, 17%, 85%)"
+  value={true}
+/>
+`;
+
+exports[`renders a disabled Switch with value false 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": false,
+      "disabled": true,
+    }
+  }
+  collapsable={false}
+  disabled={true}
+  handlerTag={6}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="hsl(107, 58%, 33%)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "hsl(51, 17%, 85%)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="hsl(51, 17%, 85%)"
+  value={false}
+/>
+`;
+
+exports[`renders a disabled Switch with value true 1`] = `
+<RCTSwitch
+  accessibilityRole="switch"
+  accessibilityState={
+    {
+      "checked": true,
+      "disabled": true,
+    }
+  }
+  collapsable={false}
+  disabled={true}
+  handlerTag={5}
+  handlerType="NativeViewGestureHandler"
+  onChange={[Function]}
+  onGestureHandlerEvent={[Function]}
+  onGestureHandlerStateChange={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onTintColor="hsl(107, 58%, 33%)"
+  style={
+    [
+      {
+        "height": 31,
+        "width": 51,
+      },
+      {
+        "backgroundColor": "hsl(51, 17%, 85%)",
+        "borderRadius": 16,
+      },
+    ]
+  }
+  tintColor="hsl(51, 17%, 85%)"
+  value={true}
+/>
+`;