diff --git a/src/components/chip/__tests__/index.spec.tsx b/src/components/chip/__tests__/index.spec.tsx new file mode 100644 index 0000000000..a0c068c537 --- /dev/null +++ b/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(); + 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(); + }); +}); diff --git a/src/components/chip/chip.driver.ts b/src/components/chip/chip.driver.ts new file mode 100644 index 0000000000..4d056d9385 --- /dev/null +++ b/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 + }; +}; diff --git a/src/testkit/index.ts b/src/testkit/index.ts index 2fe646b742..5b0ffc28d2 100644 --- a/src/testkit/index.ts +++ b/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';