@jobber/components-native 0.47.3 → 0.48.0

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.0",
   "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": "faaa9887b344a34eb2760e71fee532145e2dbe81"
 }

package/src/Select/Select.test.tsx

@@ -80,48 +80,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 +124,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}</>;
 }