@jobber/components-native 0.67.6 → 0.68.0

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

@@ -18,5 +18,9 @@ export interface IconProps {
      * Sets a custom color for the icon. Can be a rgb() or hex value.
      */
     readonly customColor?: string;
+    /**
+     * Used to locate this view in end-to-end tests
+     */
+    readonly testID?: string;
 }
-export declare function Icon({ name, color, size, customColor, }: IconProps): JSX.Element;
+export declare function Icon({ name, color, size, customColor, testID, }: IconProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.67.6",
+  "version": "0.68.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "6de60b274c33b104f3198a34182ef1072fb87adb"
+  "gitHead": "4d04806439219be785710a55a0413e288742d8fb"
 }

package/src/Icon/Icon.test.tsx

@@ -37,3 +37,13 @@ it("renders quote icon with themed color", () => {
   const tree = render(<Icon name="quote" color="brand" />).toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+it("applies testID prop to svg element", () => {
+  const { getByTestId } = render(<Icon name="home" testID="home-icon" />);
+  expect(getByTestId("home-icon")).toBeDefined();
+});
+
+it("applies name prop as testID when testID prop is not provided", () => {
+  const { getByTestId } = render(<Icon name="home" />);
+  expect(getByTestId("home")).toBeDefined();
+});

package/src/Icon/Icon.tsx

@@ -32,6 +32,11 @@ export interface IconProps {
    * Sets a custom color for the icon. Can be a rgb() or hex value.
    */
   readonly customColor?: string;
+
+  /**
+   * Used to locate this view in end-to-end tests
+   */
+  readonly testID?: string;
 }
 
 export function Icon({
@@ -39,6 +44,7 @@ export function Icon({
   color,
   size = "base",
   customColor,
+  testID,
 }: IconProps): JSX.Element {
   const { svgClassNames, pathClassNames, paths, viewBox } = getIcon({
     name,
@@ -67,7 +73,7 @@ export function Icon({
   });
 
   return (
-    <Svg style={svgStyle} testID={name} viewBox={viewBox}>
+    <Svg style={svgStyle} testID={testID || name} viewBox={viewBox}>
       {icon}
     </Svg>
   );