@jobber/components-native 0.47.3 → 0.48.1

package/dist/types/src/Select/Select.d.ts

@@ -64,6 +64,10 @@ export interface SelectProps {
      * The validations that will mark this component as invalid
      */
     readonly validations?: RegisterOptions;
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    readonly testID?: string;
 }
-export declare function Select({ value, defaultValue, onChange, children, placeholder, label, assistiveText, disabled, invalid, validations, accessibilityLabel, name, }: SelectProps): JSX.Element;
+export declare function Select({ value, defaultValue, onChange, children, placeholder, label, assistiveText, disabled, invalid, validations, accessibilityLabel, name, testID, }: SelectProps): JSX.Element;
 export declare function Option({ children }: SelectOption): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.47.3",
+  "version": "0.48.1",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "6e42ff7d712d09ecd2214b0fccae8c39bc51afec"
+  "gitHead": "d8214fde2dedb50cebe48fe7967019660a1933bd"
 }

package/src/AtlantisContext/AtlantisContext.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { PropsWithChildren } from "react";
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-hooks";
 import {
   AtlantisContext,
   AtlantisContextProps,
@@ -8,8 +8,6 @@ import {
   useAtlantisContext,
 } from "./AtlantisContext";
 
-afterEach(cleanup);
-
 const providerValues: AtlantisContextProps = {
   dateFormat: "MM/DD/YYYY",
   timeFormat: "hh:mm a",

package/src/Button/components/InternalButtonLoading/InternalButtonLoading.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cleanup, render } from "@testing-library/react-native";
+import { render } from "@testing-library/react-native";
 import {
   InternalButtonLoading,
   darkPattern,
@@ -7,8 +7,6 @@ import {
 } from "./InternalButtonLoading";
 import { ButtonType, ButtonVariation } from "../../types";
 
-afterEach(cleanup);
-
 describe("Loading pattern", () => {
   it.each<[string, ButtonType, ButtonVariation]>([
     [lightPattern, "primary", "work"],

package/src/Checkbox/CheckboxGroup.test.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   RenderAPI,
-  cleanup,
   fireEvent,
   render,
   waitFor,
@@ -31,8 +30,6 @@ interface CheckboxGroupFormOnChangeHandlers {
   all?: (data: CheckboxGroupState) => void;
 }
 
-afterEach(cleanup);
-
 function setup(
   label: string | undefined,
   disabled?: boolean,
@@ -71,8 +68,8 @@ function SetupWithForm({
   initialValues,
   onChangeHandlers,
 }: {
-  initialValues: CheckboxGroupFormData;
-  onChangeHandlers?: CheckboxGroupFormOnChangeHandlers;
+  readonly initialValues: CheckboxGroupFormData;
+  readonly onChangeHandlers?: CheckboxGroupFormOnChangeHandlers;
 }): JSX.Element {
   const formMethods = useForm({ defaultValues: initialValues });
 
@@ -178,6 +175,7 @@ describe("when all of the checkboxes in a group are checked", () => {
 describe("when the parent checkbox does not have a label", () => {
   it("does not render the parent checkbox", async () => {
     const { checkboxGroup } = setup(undefined);
+
     const findParentCheckbox = () => {
       checkboxGroup.getByLabelText(parentCheckboxLabel);
     };

package/src/Divider/Divider.test.tsx

@@ -1,10 +1,8 @@
 import React from "react";
-import { cleanup, render } from "@testing-library/react-native";
+import { render } from "@testing-library/react-native";
 import { Divider } from "./Divider";
 import { styles } from "./Divider.style";
 
-afterEach(cleanup);
-
 const dividerTestId = "Divider";
 
 describe("Divider", () => {

package/src/Form/components/FormErrorBanner/FormErrorBanner.test.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import { cleanup, render } from "@testing-library/react-native";
+import { render } from "@testing-library/react-native";
 import { FormErrorBanner } from "./FormErrorBanner";
 import { atlantisContextDefaultValues } from "../../../AtlantisContext";
 import * as atlantisContext from "../../../AtlantisContext/AtlantisContext";
 
+afterEach(jest.clearAllMocks);
+
 describe("FormErrorBanner", () => {
   const atlantisContextSpy = jest.spyOn(atlantisContext, "useAtlantisContext");
 
@@ -56,6 +58,3 @@ describe("FormErrorBanner", () => {
     expect(queryByText(couldNotSavechanges)).toBeNull();
   });
 });
-
-afterEach(jest.clearAllMocks);
-afterEach(cleanup);

package/src/InputSearch/InputSearch.test.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  cleanup,
-  fireEvent,
-  render,
-  waitFor,
-} from "@testing-library/react-native";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { InputSearch } from "./InputSearch";
 
 const accessibilityLabelSearch = "Search";
@@ -18,7 +13,6 @@ beforeEach(() => {
   mockOnDebouncedChange.mockReset();
   searchValue = "";
 });
-afterEach(cleanup);
 
 function setup() {
   return render(

package/src/InputTime/InputTime.test.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  cleanup,
-  fireEvent,
-  render,
-  waitFor,
-} from "@testing-library/react-native";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { FormProvider, useForm } from "react-hook-form";
 import { InputTime } from "./InputTime";
@@ -12,7 +7,6 @@ import * as atlantisContext from "../AtlantisContext/AtlantisContext";
 import { Button } from "../Button";
 
 afterEach(() => {
-  cleanup();
   jest.spyOn(atlantisContext, "useAtlantisContext").mockRestore();
 });
 
@@ -192,6 +186,7 @@ const mockOnSubmit = jest.fn();
 const saveButtonText = "Submit";
 
 const requiredError = "This is required";
+
 function SimpleFormWithProvider({ children, defaultValues }) {
   const formMethods = useForm({
     reValidateMode: "onChange",

package/src/Select/Select.test.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  RenderAPI,
-  cleanup,
-  fireEvent,
-  render,
-} from "@testing-library/react-native";
+import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
 import { tokens } from "@jobber/design/foundation";
 import { AccessibilityInfo } from "react-native";
 import { Option, Select } from ".";
@@ -19,7 +14,6 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  cleanup();
   jest.resetAllMocks();
 });
 
@@ -80,48 +74,6 @@ describe("Select", () => {
     ).toBeDefined();
   });
 
-  describe("when invalid", () => {
-    const labelText = "labelText";
-
-    it("renders an invalid Select", () => {
-      const { getByText } = render(
-        <Select onChange={onChange} invalid={true} label={labelText}>
-          <Option value={"1"}>1</Option>
-          <Option value={"2"}>2</Option>
-        </Select>,
-      );
-      expect(
-        getByText(labelText, { includeHiddenElements: true }).props.style,
-      ).toContainEqual({
-        color: tokens["color-critical"],
-      });
-    });
-
-    it("renders an invalid Select with placeholder", () => {
-      const placeholder = "Place me in the holder";
-      const { getByText } = render(
-        <Select
-          label={labelText}
-          onChange={onChange}
-          invalid={true}
-          placeholder={placeholder}
-        >
-          <Option value={"1"}>1</Option>
-          <Option value={"2"}>2</Option>
-        </Select>,
-      );
-
-      expect(
-        getByText(placeholder, { includeHiddenElements: true }),
-      ).toBeDefined();
-      expect(
-        getByText(labelText, { includeHiddenElements: true }).props.style,
-      ).toContainEqual({
-        color: tokens["color-critical"],
-      });
-    });
-  });
-
   it("renders a disabled Select", () => {
     const labelText = "labelText";
     const { getByText } = render(
@@ -166,156 +118,172 @@ describe("Select", () => {
     ).toBeDefined();
   });
 
-  describe("fires the onChange callback", () => {
-    it("fires", () => {
-      const { getByTestId } = render(
-        <Select onChange={onChange} value={"2"}>
-          <Option value={"1"}>1</Option>
-          <Option value={"2"}>2</Option>
-        </Select>,
-      );
+  it("renders a Select with custom testID", () => {
+    const testID = "testID";
+    const { getByTestId } = render(
+      <Select onChange={onChange} testID={testID}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
 
-      const select = getByTestId("ATL-Select").findByType(SelectInternalPicker);
-      expect(select).toBeTruthy();
-      fireEvent(select, "onChange", "1");
-      expect(onChange).toHaveBeenCalledWith("1");
+    expect(getByTestId(`ATL-${testID}-Select`)).toBeDefined();
+  });
+
+  it("renders an accessibilityLabel if provided", () => {
+    const { getByLabelText } = render(
+      <Select
+        onChange={onChange}
+        label="label"
+        accessibilityLabel="accessibilityLabel"
+      >
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+
+    expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+  });
+  it("fires the onChange callback", () => {
+    const { getByTestId } = render(
+      <Select onChange={onChange} value={"2"}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+
+    const select = getByTestId("ATL-Select").findByType(SelectInternalPicker);
+    expect(select).toBeTruthy();
+    fireEvent(select, "onChange", "1");
+    expect(onChange).toHaveBeenCalledWith("1");
+  });
+});
+
+describe("when Select is invalid", () => {
+  const labelText = "labelText";
+
+  it("renders an invalid Select", () => {
+    const { getByText } = render(
+      <Select onChange={onChange} invalid={true} label={labelText}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+    expect(
+      getByText(labelText, { includeHiddenElements: true }).props.style,
+    ).toContainEqual({
+      color: tokens["color-critical"],
     });
   });
 
-  describe("Invalid value", () => {
-    it("renders with the empty value option", () => {
-      const { getByText } = render(
-        <Select onChange={onChange} value={"invalid"}>
-          <Option value={"first"}>first</Option>
-          <Option value={"2"}>2</Option>
-        </Select>,
-      );
+  it("renders an invalid Select with placeholder", () => {
+    const placeholder = "Place me in the holder";
+    const { getByText } = render(
+      <Select
+        label={labelText}
+        onChange={onChange}
+        invalid={true}
+        placeholder={placeholder}
+      >
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
 
-      expect(
-        getByText(defaultPlaceholder, { includeHiddenElements: true }),
-      ).toBeDefined();
+    expect(
+      getByText(placeholder, { includeHiddenElements: true }),
+    ).toBeDefined();
+    expect(
+      getByText(labelText, { includeHiddenElements: true }).props.style,
+    ).toContainEqual({
+      color: tokens["color-critical"],
     });
+  });
+});
 
-    it("renders with the placeholder", () => {
-      const { getByText } = render(
+describe("when validations are passed to the component", () => {
+  describe("validations fail", () => {
+    let tree: RenderAPI;
+    const labelText = "labelText";
+    const errorMsg = "Too short";
+    beforeEach(() => {
+      tree = render(
         <Select
+          label={labelText}
           onChange={onChange}
-          value={"invalid"}
-          placeholder={"Make a selection"}
+          value={"Watermelon"}
+          validations={{
+            minLength: { value: 60, message: errorMsg },
+          }}
         >
-          <Option value={"1"}>1</Option>
-          <Option value={"2"}>2</Option>
+          <Option value={"Apple"}>Apple</Option>
+          <Option value={"Watermelon"}>Watermelon</Option>
         </Select>,
       );
+    });
+
+    it("renders the error message when there is an error", async () => {
+      const select = tree
+        .getByTestId("ATL-Select")
+        .findByType(SelectInternalPicker);
+      fireEvent(select, "onChange", "Apple");
+      expect(
+        await tree.findByText(errorMsg, { includeHiddenElements: true }),
+      ).toBeTruthy();
+    });
 
+    it("shows the invalid colours", async () => {
+      const select = tree
+        .getByTestId("ATL-Select")
+        .findByType(SelectInternalPicker);
+      fireEvent(select, "onChange", "Apple");
       expect(
-        getByText("Make a selection", { includeHiddenElements: true }),
-      ).toBeDefined();
+        (await tree.findByText(labelText, { includeHiddenElements: true }))
+          .props.style,
+      ).toContainEqual({
+        color: tokens["color-critical"],
+      });
     });
   });
 
-  describe("accessibilityLabel", () => {
-    it("uses accessibilityLabel if specified", () => {
-      const { getByLabelText } = render(
+  describe("validations passes", () => {
+    let tree: RenderAPI;
+    const labelText = "labelText";
+    const errorMsg = "Not too short";
+    beforeEach(() => {
+      tree = render(
         <Select
+          label={labelText}
           onChange={onChange}
-          label="label"
-          accessibilityLabel="accessibilityLabel"
+          value={"Watermelon"}
+          validations={{
+            minLength: { value: 4, message: errorMsg },
+          }}
         >
-          <Option value={"1"}>1</Option>
-          <Option value={"2"}>2</Option>
+          <Option value={"Apple"}>Apple</Option>
+          <Option value={"Watermelon"}>Watermelon</Option>
         </Select>,
       );
-
-      expect(getByLabelText("accessibilityLabel")).toBeTruthy();
     });
-  });
 
-  describe("when validations are passed to the component", () => {
-    describe("validations fail", () => {
-      let tree: RenderAPI;
-      const labelText = "labelText";
-      const errorMsg = "Too short";
-      beforeEach(() => {
-        tree = render(
-          <Select
-            label={labelText}
-            onChange={onChange}
-            value={"Watermelon"}
-            validations={{
-              minLength: { value: 60, message: errorMsg },
-            }}
-          >
-            <Option value={"Apple"}>Apple</Option>
-            <Option value={"Watermelon"}>Watermelon</Option>
-          </Select>,
-        );
-      });
-
-      it("renders the error message when there is an error", async () => {
-        const select = tree
-          .getByTestId("ATL-Select")
-          .findByType(SelectInternalPicker);
-        fireEvent(select, "onChange", "Apple");
-        expect(
-          await tree.findByText(errorMsg, { includeHiddenElements: true }),
-        ).toBeTruthy();
-      });
-
-      it("shows the invalid colours", async () => {
-        const select = tree
-          .getByTestId("ATL-Select")
-          .findByType(SelectInternalPicker);
-        fireEvent(select, "onChange", "Apple");
-        expect(
-          (await tree.findByText(labelText, { includeHiddenElements: true }))
-            .props.style,
-        ).toContainEqual({
-          color: tokens["color-critical"],
-        });
-      });
+    it("does not render any error messages", () => {
+      const select = tree
+        .getByTestId("ATL-Select")
+        .findByType(SelectInternalPicker);
+      expect(select).toBeTruthy();
+      fireEvent(select, "onChange", "Apple");
+      expect(tree.queryByText(errorMsg)).toBeNull();
     });
 
-    describe("validations passes", () => {
-      let tree: RenderAPI;
-      const labelText = "labelText";
-      const errorMsg = "Not too short";
-      beforeEach(() => {
-        tree = render(
-          <Select
-            label={labelText}
-            onChange={onChange}
-            value={"Watermelon"}
-            validations={{
-              minLength: { value: 4, message: errorMsg },
-            }}
-          >
-            <Option value={"Apple"}>Apple</Option>
-            <Option value={"Watermelon"}>Watermelon</Option>
-          </Select>,
-        );
-      });
-
-      it("does not render any error messages", () => {
-        const select = tree
-          .getByTestId("ATL-Select")
-          .findByType(SelectInternalPicker);
-        expect(select).toBeTruthy();
-        fireEvent(select, "onChange", "Apple");
-        expect(tree.queryByText(errorMsg)).toBeNull();
-      });
-
-      it("has non-critical colours", () => {
-        const select = tree
-          .getByTestId("ATL-Select")
-          .findByType(SelectInternalPicker);
-        fireEvent(select, "onChange", "Apple");
-        expect(
-          tree.getByText(labelText, { includeHiddenElements: true }).props
-            .style,
-        ).toContainEqual({
-          color: tokens["color-text--secondary"],
-        });
+    it("has non-critical colours", () => {
+      const select = tree
+        .getByTestId("ATL-Select")
+        .findByType(SelectInternalPicker);
+      fireEvent(select, "onChange", "Apple");
+      expect(
+        tree.getByText(labelText, { includeHiddenElements: true }).props.style,
+      ).toContainEqual({
+        color: tokens["color-text--secondary"],
       });
     });
   });

package/src/Select/Select.tsx

@@ -88,6 +88,11 @@ export interface SelectProps {
    * The validations that will mark this component as invalid
    */
   readonly validations?: RegisterOptions;
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  readonly testID?: string;
 }
 
 export function Select({
@@ -103,6 +108,7 @@ export function Select({
   validations,
   accessibilityLabel,
   name,
+  testID,
 }: SelectProps): JSX.Element {
   const { field, error } = useFormController({
     name,
@@ -129,7 +135,7 @@ export function Select({
       }}
     >
       <View
-        testID="ATL-Select"
+        testID={getTestID(testID)}
         accessible={true}
         accessibilityLabel={getA11yLabel()}
         accessibilityValue={{ text: getValue() }}
@@ -187,6 +193,7 @@ export function Select({
   function getA11yLabel(): string | undefined {
     let text = [accessibilityLabel || label, assistiveText];
     text = text.filter(Boolean);
+
     return text.join(", ");
   }
 
@@ -219,6 +226,7 @@ export function Select({
     const options = getOptions();
 
     const activeValue = options.find(option => option.isActive);
+
     return activeValue?.label || placeholder || t("Select.emptyValue");
   }
 }
@@ -229,9 +237,18 @@ function getTextVariation({
 }: Pick<SelectProps, "invalid" | "disabled">): TextVariation {
   if (invalid) return "error";
   if (disabled) return "disabled";
+
   return "subdued";
 }
 
+function getTestID(testID?: string): string {
+  if (testID) {
+    return `ATL-${testID}-Select`;
+  }
+
+  return "ATL-Select";
+}
+
 export function Option({ children }: SelectOption): JSX.Element {
   return <>{children}</>;
 }

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cleanup, fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render } from "@testing-library/react-native";
 import { AccessibilityInfo, View } from "react-native";
 import { SelectDefaultPicker } from "./SelectDefaultPicker";
 import { Text } from "../../../Text";
@@ -19,11 +19,11 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  cleanup();
   jest.resetAllMocks();
 });
 
 const childText = "Click me";
+
 function setup() {
   return render(
     <View testID="SelectDefaultPicker">

package/src/Select/components/SelectInternalPicker/SelectInternalPicker.test.tsx

@@ -1,5 +1,5 @@
 import React, { ElementType } from "react";
-import { cleanup, fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render } from "@testing-library/react-native";
 import { View } from "react-native";
 import { SelectInternalPicker } from ".";
 import { SelectInternalPickerProps } from "../../types";
@@ -19,7 +19,6 @@ jest.mock("@react-native-picker/picker", () => ({ Picker: MockPicker }));
 MockPicker.Item = MockPickerItem;
 
 afterEach(() => {
-  cleanup();
   jest.resetAllMocks();
 });