@jobber/components-native 0.46.10 → 0.47.0

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

@@ -55,6 +55,10 @@ interface CommonButtonProps {
      * `accessibilityLabel`. **Don't use this for testing purposes.**
      */
     readonly accessibilityLabel?: string;
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    readonly testID?: string;
 }
 interface LabelButton extends CommonButtonProps {
     /**
@@ -67,5 +71,5 @@ interface IconButton extends CommonButtonProps {
     readonly accessibilityLabel: string;
 }
 export type ButtonProps = XOR<LabelButton, IconButton>;
-export declare function Button({ label, onPress, variation, type, fullHeight, fullWidth, disabled, loading, size, accessibilityLabel, accessibilityHint, icon, }: ButtonProps): JSX.Element;
+export declare function Button({ label, onPress, variation, type, fullHeight, fullWidth, disabled, loading, size, accessibilityLabel, accessibilityHint, icon, testID, }: ButtonProps): JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.46.10",
+  "version": "0.47.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": "5668739977ce8c578ac682452ea31261d423bf10"
+  "gitHead": "a4a664e49538a432df03a593c100ab6055adeca4"
 }

package/src/Button/Button.tsx

@@ -72,6 +72,11 @@ interface CommonButtonProps {
    * `accessibilityLabel`. **Don't use this for testing purposes.**
    */
   readonly accessibilityLabel?: string;
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  readonly testID?: string;
 }
 
 interface LabelButton extends CommonButtonProps {
@@ -87,6 +92,7 @@ interface IconButton extends CommonButtonProps {
 }
 
 export type ButtonProps = XOR<LabelButton, IconButton>;
+
 export function Button({
   label,
   onPress,
@@ -100,6 +106,7 @@ export function Button({
   accessibilityLabel,
   accessibilityHint,
   icon,
+  testID,
 }: ButtonProps): JSX.Element {
   const buttonStyle = [
     styles.button,
@@ -119,7 +126,7 @@ export function Button({
   return (
     <TouchableHighlight
       onPress={onPress}
-      testID={accessibilityLabel || label}
+      testID={buildTestID(testID, label, accessibilityLabel)}
       accessibilityLabel={accessibilityLabel || label}
       accessibilityHint={accessibilityHint}
       accessibilityRole="button"
@@ -220,3 +227,15 @@ function getContentStyles(
     !!label && styles.contentWithLabel,
   ];
 }
+
+function buildTestID(
+  testID: string | undefined,
+  label: string | undefined,
+  accessibilityLabel: string | undefined,
+): string | undefined {
+  if (testID) {
+    return `ATL-${testID}-Button`;
+  }
+
+  return accessibilityLabel || label;
+}

package/src/ButtonGroup/ButtonGroup.tsx

@@ -50,6 +50,7 @@ export function ButtonGroup({
   const { handlePress } = usePreventTapWhenOffline();
   const secondaryActionsRef = useRef<BottomSheetRef>();
   const { primaryActions, secondaryActions } = getActions(children);
+
   return (
     <View style={styles.buttonGroup}>
       {primaryActions.map((action, index) => {
@@ -75,6 +76,7 @@ export function ButtonGroup({
                 fullHeight={true}
                 icon={icon}
                 loading={loading}
+                testID={`ATL-ButtonGroup-Primary-Action-${index}`}
               />
             )}
           </View>
@@ -88,6 +90,7 @@ export function ButtonGroup({
             accessibilityLabel={t("more")}
             onPress={handlePress(openBottomSheet)}
             fullHeight={true}
+            testID="ATL-ButtonGroup-Secondary-Action"
           />
         </View>
       )}

package/src/Form/components/FormSaveButton/FormSaveButton.tsx

@@ -21,36 +21,34 @@ export function FormSaveButton({
   const buttonActions = useButtonGroupAction(secondaryActions);
 
   return (
-    <>
-      <ButtonGroup
-        onOpenBottomSheet={onOpenBottomSheet}
-        onCloseBottomSheet={onCloseBottomSheet}
-        allowTapWhenOffline={true}
-      >
-        {buttonActions.map((action, index) => {
-          if (index === 0) {
-            return (
-              <ButtonGroup.PrimaryAction
-                key={index}
-                onPress={primaryAction}
-                label={label ?? t("save")}
-                loading={loading}
-              />
-            );
-          } else {
-            return (
-              <ButtonGroup.SecondaryAction
-                key={index}
-                label={action.label}
-                icon={action.icon}
-                onPress={action.onPress}
-                destructive={action.destructive}
-              />
-            );
-          }
-        })}
-      </ButtonGroup>
-    </>
+    <ButtonGroup
+      onOpenBottomSheet={onOpenBottomSheet}
+      onCloseBottomSheet={onCloseBottomSheet}
+      allowTapWhenOffline={true}
+    >
+      {buttonActions.map((action, index) => {
+        if (index === 0) {
+          return (
+            <ButtonGroup.PrimaryAction
+              key={index}
+              onPress={primaryAction}
+              label={label ?? t("save")}
+              loading={loading}
+            />
+          );
+        } else {
+          return (
+            <ButtonGroup.SecondaryAction
+              key={index}
+              label={action.label}
+              icon={action.icon}
+              onPress={action.onPress}
+              destructive={action.destructive}
+            />
+          );
+        }
+      })}
+    </ButtonGroup>
   );
 
   function useButtonGroupAction(
@@ -81,6 +79,7 @@ export function FormSaveButton({
     handleAction: SecondaryActionProp["handleAction"],
   ) {
     let performSubmit = true;
+
     if (handleAction.onBeforeSubmit) {
       performSubmit = await handleAction.onBeforeSubmit();
     }