Badge - add BadgeDriver and scope inner testIDs

packages/react-native-ui-lib/src/components/badge/__tests__/badge.driver.spec.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import Assets from '../../../assets';
+import Badge, {BadgeProps} from '../index';
+import {BadgeDriver} from '../badge.driver';
+
+const testID = 'test-badge';
+
+const getDriver = (props?: Partial<BadgeProps>) => {
+  const renderTree = render(<Badge testID={testID} {...props}/>);
+  return BadgeDriver({renderTree, testID});
+};
+
+describe('Badge', () => {
+  describe('sanity', () => {
+    it('should render Badge', () => {
+      const driver = getDriver({label: '5'});
+      expect(driver.exists()).toBeTruthy();
+    });
+  });
+
+  describe('Label', () => {
+    it('should render label text', () => {
+      const driver = getDriver({label: '5'});
+      expect(driver.getLabel().exists()).toBeTruthy();
+      expect(driver.getLabel().getText()).toEqual('5');
+    });
+
+    it('should not render label when label prop is missing (pimple)', () => {
+      const driver = getDriver();
+      expect(driver.getLabel().exists()).toBeFalsy();
+    });
+  });
+
+  describe('Icon', () => {
+    it('should render icon when icon prop is passed', () => {
+      const driver = getDriver({icon: Assets.internal.icons.check});
+      expect(driver.getIcon().exists()).toBeTruthy();
+    });
+
+    it('should not render icon when icon prop is missing', () => {
+      const driver = getDriver({label: '5'});
+      expect(driver.getIcon().exists()).toBeFalsy();
+    });
+  });
+
+  describe('Size', () => {
+    it('should expose explicit size from style', () => {
+      const driver = getDriver({label: '5', size: 24});
+      expect(driver.getSize()).toEqual(24);
+    });
+
+    it('should expose default badge size when no size prop is given', () => {
+      const driver = getDriver({label: '5'});
+      expect(driver.getSize()).toEqual(20);
+    });
+  });
+});

packages/react-native-ui-lib/src/components/badge/badge.driver.ts

@@ -0,0 +1,49 @@
+import {StyleSheet} from 'react-native';
+import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+import {usePressableDriver} from '../../testkit/new/usePressable.driver';
+import {TextDriver} from '../text/Text.driver.new';
+import {ImageDriver} from '../image/Image.driver.new';
+
+export const BadgeDriver = (props: ComponentProps) => {
+  const driver = usePressableDriver(useComponentDriver(props));
+
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.label`
+  });
+
+  const iconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.icon`
+  });
+
+  const getLabel = () => {
+    return {...labelDriver};
+  };
+
+  const getIcon = () => {
+    const exists = (): boolean => {
+      return iconDriver.exists();
+    };
+    const getStyle = () => {
+      return StyleSheet.flatten(iconDriver.getElement().props.style);
+    };
+    return {...iconDriver, exists, getStyle};
+  };
+
+  const getStyle = () => {
+    return StyleSheet.flatten(driver.getElement().props.style);
+  };
+
+  const getSize = (): number => {
+    return getStyle().height as number;
+  };
+
+  return {
+    ...driver,
+    getLabel,
+    getIcon,
+    getStyle,
+    getSize
+  };
+};

packages/react-native-ui-lib/src/components/badge/index.tsx

@@ -206,15 +206,15 @@ class Badge extends PureComponent<BadgeProps> {
   }
 
   renderLabel() {
-    const {labelStyle, label} = this.props;
+    const {labelStyle, label, testID} = this.props;
 
     if (label) {
       return (
         <Text
           style={[this.styles.label, this.isSmallBadge() && this.styles.labelSmall, labelStyle]}
           allowFontScaling={false}
           numberOfLines={1}
-          testID="badge"
+          testID={testID ? `${testID}.label` : 'badge'}
           recorderTag={'unmask'}
         >
           {this.getFormattedLabel()}
@@ -229,7 +229,7 @@ class Badge extends PureComponent<BadgeProps> {
   }
 
   renderIcon() {
-    const {icon, iconStyle, iconProps, borderColor, label} = this.props;
+    const {icon, iconStyle, iconProps, borderColor, label, testID} = this.props;
     const flex = label ? 0 : 1;
     return (
       icon && (
@@ -239,6 +239,7 @@ class Badge extends PureComponent<BadgeProps> {
           tintColor={Colors.$iconDefaultLight}
           //@ts-ignore
           borderColor={borderColor}
+          testID={testID ? `${testID}.icon` : undefined}
           {...iconProps}
           style={{
             flex,

packages/react-native-ui-lib/src/testkit/index.ts

@@ -23,3 +23,4 @@ export {ToastDriver} from '../incubator/toast/Toast.driver.new';
 export {DateTimePickerDriver} from '../components/dateTimePicker/DateTimePicker.driver';
 export {TimelineDriver} from '../components/timeline/timeline.driver';
 export {ChipDriver} from '../components/chip/chip.driver';
+export {BadgeDriver} from '../components/badge/badge.driver';