Add ChipDriver and associated basic tests for Chip component (#3717)

* Add ChipDriver and associated basic tests for Chip component

* Add ChipDriver export

* Enhance ChipDriver to include getStyle method for dismiss and icon drivers

* fixed sanity test

* Chip test check to ddefault  icon, dismiss icon and label styles

* removed the todo comments

Author: adids1221

src/components/chip/__tests__/index.spec.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {ChipDriver} from '../chip.driver';
+import Chip, {ChipProps} from '../index';
+import Assets from '../../../assets';
+import {Colors} from '../../../style';
+
+const testID = 'test-chip';
+
+const getDriver = (props?: ChipProps) => {
+  const renderTree = render(<Chip testID={testID} {...props}/>);
+  return ChipDriver({renderTree, testID});
+};
+
+describe('Chip', () => {
+  describe('sanity', () => {
+    it('should render Chip', () => {
+      const driver = getDriver();
+      expect(driver.exists()).toBeTruthy();
+      expect(driver.getIcon().exists()).toBeFalsy();
+      expect(driver.getLabel().exists()).toBeFalsy();
+      expect(driver.getDismissIcon().exists()).toBeFalsy();
+    });
+  });
+
+  describe('Label', () => {
+    it('should render label', () => {
+      const driver = getDriver({label: 'test'});
+      expect(driver.getLabel().exists()).toBeTruthy();
+      expect(driver.getLabel().getText()).toEqual('test');
+      expect(driver.getLabel().getStyle().color).toEqual(Colors.$textDefault);
+    });
+  });
+
+  describe('Dismiss Icon', () => {
+    it('should render dismiss icon', () => {
+      const driver = getDriver({onDismiss: () => {}});
+      expect(driver.getDismissIcon().exists()).toBeTruthy();
+      expect(driver.getDismissIcon().getStyle().tintColor).toEqual(Colors.$iconDefault);
+    });
+  });
+
+  describe('Icon', () => {
+    it('should render icon', () => {
+      const driver = getDriver({iconSource: Assets.internal.icons.check});
+      expect(driver.getIcon().exists()).toBeTruthy();
+      expect(driver.getIcon().getStyle().tintColor).toEqual(Colors.$iconDefault);
+    });
+  });
+
+  it('should render with label, icon and dismiss icon', () => {
+    const driver = getDriver({label: 'test', iconSource: Assets.internal.icons.check, onDismiss: () => {}});
+    expect(driver.getLabel().exists()).toBeTruthy();
+    expect(driver.getIcon().exists()).toBeTruthy();
+    expect(driver.getDismissIcon().exists()).toBeTruthy();
+  });
+});

src/components/chip/chip.driver.ts

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

src/testkit/index.ts

@@ -21,3 +21,4 @@ export {PickerDriver} from '../components/picker/Picker.driver.new';
 export {ExpandableOverlayDriver} from '../incubator/expandableOverlay/ExpandableOverlay.driver';
 export {ToastDriver} from '../incubator/toast/Toast.driver.new';
 export {DateTimePickerDriver} from '../components/dateTimePicker/DateTimePicker.driver';
+export {ChipDriver} from '../components/chip/chip.driver';