POC Export of testkits (#1925)

* POC Export of testkits

* Added semicolon

* Some more testing

* Testing builds again

* Babel build

* Added testkit

* Added testkit to npmignore unignore

* Type fix wip

* Removed .js file

* Changed structure

* Amit's Solution

* Fixed types & main

* Added drivers to export

* Added Basic testkit for `Swtich` component

* Fixed AccessibilityState

* removed comment

* Fixed packagejson testkit

* Move Switch spec into __tests__ folder

* Restructure and cleanup testkit components drivers

Co-authored-by: Ethan Sharabi <[email protected]>

Author: Marik Shnitman

.npmignore

@@ -247,4 +247,6 @@ index.ios.js
 *.ts
 *.tsx
 # include the .d.ts files
-!*.d.ts 
+!*.d.ts
+
+!testkit/*.ts

package.json

@@ -72,6 +72,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/react-native": "^7.2.0",
     "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/jest": "^27.4.1",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
     "@types/react-native": "0.66.4",

src/.babelrc.json

@@ -5,7 +5,7 @@
     [
       "module-resolver",
       {
-        "root": ["./src"],
+        "root": ["./src", "./testkit"],
         "alias": {
           "commons": "./src/commons",
           "helpers": "./src/helpers",

src/components/button/Button.driver.ts

@@ -1,11 +1,10 @@
+import _ from 'lodash';
 import {fireEvent, RenderAPI} from '@testing-library/react-native';
 import {ReactTestInstance} from 'react-test-renderer';
-import TextDriver from '../text/Text.driver';
-import ImageDriver from '../image/Image.driver';
-import _ from 'lodash';
+import {TextDriver} from '../text/Text.driver';
+import {ImageDriver} from '../image/Image.driver';
 
-
-const ButtonDriverFactory = async ({wrapperComponent, testID}: {wrapperComponent: RenderAPI, testID: string}) => {
+export const ButtonDriver = async ({wrapperComponent, testID}: {wrapperComponent: RenderAPI; testID: string}) => {
   const button: ReactTestInstance | null = await wrapperComponent.queryByTestId(testID);
   const label = await TextDriver({wrapperComponent, testID: `${testID}.label`});
   const icon = await ImageDriver({wrapperComponent, testID: `${testID}.icon`});
@@ -17,7 +16,7 @@ const ButtonDriverFactory = async ({wrapperComponent, testID}: {wrapperComponent
       if (button) {
         fireEvent.press(button);
       } else {
-        console.warn(`ButtonDriverFactory: cannot click because testID:${testID} were not found`);
+        console.warn(`ButtonDriver: cannot click because testID:${testID} were not found`);
       }
     },
     // label
@@ -29,5 +28,3 @@ const ButtonDriverFactory = async ({wrapperComponent, testID}: {wrapperComponent
     isIconExists: () => icon.exists()
   };
 };
-
-export default ButtonDriverFactory;

src/components/button/__tests__/index.driver.spec.js

@@ -1,10 +1,10 @@
 import React, {useState} from 'react';
 import {render, waitFor} from '@testing-library/react-native';
-import Button from '../index';
 import View from '../../view';
-import ButtonTestKit from '../Button.driver';
 import Text from '../../text';
-import TextTestKit from '../../text/Text.driver';
+import Button from '../index';
+import {ButtonDriver} from '../Button.driver';
+import {TextDriver} from '../../text/Text.driver';
 
 const BUTTON_ID = 'button_test_id';
 const CHILDREN_TEXT_ID = 'children_test_id';
@@ -14,22 +14,22 @@ const CHILDREN_TEXT = 'custom button text';
 describe.skip('Button', () => {
   it('should render a button', async () => {
     const wrapperComponent = renderWrapperScreenWithButton({});
-    const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+    const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
     expect(buttonDriver.exists()).toBeTruthy();
   });
 
   describe('custom button', () => {
     it('should render a custom button', async () => {
       const wrapperComponent = renderWrapperScreenWithCustomButton({});
-      const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+      const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
       expect(buttonDriver.exists()).toBeTruthy();
     });
 
     it('should render the children with correct text', async () => {
       const wrapperComponent = renderWrapperScreenWithCustomButton({});
-      const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+      const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
       expect(buttonDriver.exists()).toBeTruthy();
-      const childrenTextDriver = await TextTestKit({wrapperComponent, testID: CHILDREN_TEXT_ID});
+      const childrenTextDriver = await TextDriver({wrapperComponent, testID: CHILDREN_TEXT_ID});
       expect(childrenTextDriver.getTextContent()).toEqual(CHILDREN_TEXT);
     });
   });
@@ -41,14 +41,14 @@ describe.skip('Button', () => {
 
     it('should trigger onPress callback', async () => {
       const wrapperComponent = renderWrapperScreenWithButton({onPress: onPressCallback});
-      const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+      const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
       buttonDriver.click();
       await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
     });
 
     it('should not trigger onPress callback if button disabled', async () => {
       const wrapperComponent = renderWrapperScreenWithButton({onPress: onPressCallback, disabled: true});
-      const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+      const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
       buttonDriver.click();
       await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(0));
     });
@@ -58,35 +58,35 @@ describe.skip('Button', () => {
     const LABEL = 'mock label';
     it('should render a button with correct content', async () => {
       const wrapperComponent = renderWrapperScreenWithButton({label: LABEL});
-      const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+      const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
       expect(buttonDriver.getLabelContent()).toEqual(LABEL);
     });
 
     xit('should render a button with correct label content. ', async () => {
     // todo import @testing-library/jest-native(/extend-expect)
       const wrapperComponent = renderWrapperScreenWithButton({label: LABEL});
-      const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+      const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
       expect(buttonDriver.getLabelRootElement()).toHaveTextContent(LABEL);
     });
 
     it('should render a button without label. ', async () => {
       const wrapperComponent = renderWrapperScreenWithButton({});
-      const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+      const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
       expect(buttonDriver.isLabelExists()).toBeFalsy();
     });
   });
 
   describe('icon', () => {
     it('should render a button without an icon. ', async () => {
       const wrapperComponent = renderWrapperScreenWithButton({});
-      const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+      const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
       expect(buttonDriver.isIconExists()).toBeFalsy();
     });
 
     it('should render a button with icon. ', async () => {
       const ICON = 12;
       const wrapperComponent = renderWrapperScreenWithButton({iconSource: ICON});
-      const buttonDriver = await ButtonTestKit({wrapperComponent, testID: BUTTON_ID});
+      const buttonDriver = await ButtonDriver({wrapperComponent, testID: BUTTON_ID});
       expect(buttonDriver.isIconExists()).toBeTruthy();
     });
   });
@@ -95,10 +95,10 @@ describe.skip('Button', () => {
     //todo take it out of this file. to the demo screens maybe
     it('should change text values according to state changes from buttons pressing', async () => {
       const wrapperComponent = renderMoreComplicatedScreen();
-      const text1Driver = await TextTestKit({wrapperComponent, testID: `text_1`});
-      const text2Driver = await TextTestKit({wrapperComponent, testID: `text_2`});
-      const button1Driver = await ButtonTestKit({wrapperComponent, testID: `${BUTTON_ID}1`});
-      const button2Driver = await ButtonTestKit({wrapperComponent, testID: `${BUTTON_ID}2`});
+      const text1Driver = await TextDriver({wrapperComponent, testID: `text_1`});
+      const text2Driver = await TextDriver({wrapperComponent, testID: `text_2`});
+      const button1Driver = await ButtonDriver({wrapperComponent, testID: `${BUTTON_ID}1`});
+      const button2Driver = await ButtonDriver({wrapperComponent, testID: `${BUTTON_ID}2`});
       expect(text1Driver.getTextContent()).toBe('button 1 pressed 0 times');
       expect(text2Driver.getTextContent()).toBe('button 2 pressed 0 times');
       button1Driver.click();

src/components/image/Image.driver.ts

@@ -1,9 +1,7 @@
 import {RenderAPI} from '@testing-library/react-native';
 import {ReactTestInstance} from 'react-test-renderer';
 
-
-const ImageDriverFactory = async ({wrapperComponent, testID}: {wrapperComponent: RenderAPI, testID: string}) => {
-
+export const ImageDriver = async ({wrapperComponent, testID}: {wrapperComponent: RenderAPI; testID: string}) => {
   const text: ReactTestInstance | null = await wrapperComponent.queryByTestId(testID);
   return {
     //todo more research on this component
@@ -12,5 +10,3 @@ const ImageDriverFactory = async ({wrapperComponent, testID}: {wrapperComponent:
     // getImageContent: () => text.props.value
   };
 };
-
-export default ImageDriverFactory;

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import Switch, {SwitchProps} from '../index';
+import {SwitchDriver} from '../switch.driver';
+import View from '../../view';
+
+describe('Switch', () => {
+
+  const renderSwitch = (testID: string, props: Partial<SwitchProps>) => {
+    const defaultProps: SwitchProps = {
+      testID,
+      value: false,
+      onValueChange: jest.fn(),
+      disabled: false
+    };
+    const component = render(<View><Switch {...defaultProps} {...props}/></View>);
+    const driver = SwitchDriver({
+      wrappedComponent: component,
+      testID
+    });
+
+    return {driver};
+  };
+
+
+  it('Should fire onChange event', () => {
+    const testId = 'switch-comp';
+    const onChange = jest.fn();
+    const {driver} = renderSwitch(testId, {onValueChange: onChange});
+    driver.press();
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('Should fire onChange event with false value when toggling off', () => {
+    const testId = 'switch-comp';
+    const onChange = jest.fn();
+    const {driver} = renderSwitch(testId, {onValueChange: onChange, value: true});
+    driver.press();
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+  it('Should fire onChange event with true value when toggling on', () => {
+    const testId = 'switch-comp';
+    const onChange = jest.fn();
+    const {driver} = renderSwitch(testId, {onValueChange: onChange, value: false});
+    driver.press();
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('Should not fire onChange when disabled', () => {
+    const testId = 'switch-comp';
+    const onValueChange = jest.fn();
+    const {driver} = renderSwitch(testId, {disabled: true, onValueChange});
+
+    driver.press();
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('Accessibility value should be true when checked', () => {
+    const testId = 'switch-comp';
+    const {driver} = renderSwitch(testId, {value: true});
+
+    expect(driver.getAccessibilityValue()).toBe(true);
+  });
+
+  it('Accessibility value should be false when not checked', () => {
+    const testId = 'switch-comp';
+    const {driver} = renderSwitch(testId, {value: false});
+
+    expect(driver.isChecked()).toBe(false);
+  });
+
+  it('Accessibility value should be checked when checked', () => {
+    const testId = 'switch-comp';
+    const {driver} = renderSwitch(testId, {value: true});
+
+    expect(driver.isChecked()).toBe(true);
+  });
+
+  it('Accessibility value should be false when not checked', () => {
+    const testId = 'switch-comp';
+    const {driver} = renderSwitch(testId, {value: false});
+
+    expect(driver.getAccessibilityValue()).toBe(false);
+  });
+
+  it('Should be disabled', () => {
+    const testId = 'switch-comp';
+    const {driver} = renderSwitch(testId, {disabled: true});
+
+    expect(driver.isDisabled()).toBe(true);
+  });
+
+  it('Should be disabled', () => {
+    const testId = 'switch-comp';
+    const {driver} = renderSwitch(testId, {disabled: false});
+
+    expect(driver.isDisabled()).toBe(false);
+  });
+
+  it('Should pass correct color when on', () => {
+    const testId = 'switch-comp';
+    const {driver} = renderSwitch(testId, {value: true, onColor: 'red'});
+
+    expect(driver.getColor()).toBe('red');
+  });
+
+  it('Should pass correct color when off', () => {
+    const testId = 'switch-comp';
+    const {driver} = renderSwitch(testId, {value: false, offColor: 'red'});
+
+    expect(driver.getColor()).toBe('red');
+  });
+});

src/components/switch/index.tsx

@@ -55,7 +55,7 @@ export type SwitchProps = {
    */
   thumbStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
-  testID?: string; 
+  testID?: string;
 }
 
 /**
@@ -65,13 +65,13 @@ export type SwitchProps = {
  */
 class Switch extends Component<SwitchProps> {
   static displayName = 'Switch';
-  
+
   state = {
     thumbPosition: new Animated.Value(this.props.value ? 1 : 0)
   };
 
   styles = createStyles(this.props);
-  
+
   componentDidUpdate(prevProps: SwitchProps) {
     const {value} = this.props;
     if (prevProps.value !== value) {
@@ -82,11 +82,14 @@ class Switch extends Component<SwitchProps> {
   getAccessibilityProps() {
     const {disabled, value} = this.props;
 
-    
+
     return {
       accessible: true,
       accessibilityRole: 'switch',
-      accessibilityStates: disabled ? ['disabled'] : value ? ['checked'] : ['unchecked'],
+      accessibilityState: {
+        disabled,
+        checked: value ? 'checked' : 'unchecked'
+      },
       accessibilityValue: {text: value ? '1' : '0'}
     };
   }

src/components/switch/switch.driver.ts

@@ -0,0 +1,15 @@
+import {RenderAPI, fireEvent} from '@testing-library/react-native';
+
+export const SwitchDriver = ({wrappedComponent, testID}: {wrappedComponent: RenderAPI; testID: string}) => {
+  const switchComp = wrappedComponent.getByTestId(testID);
+
+  return {
+    exists: () => !!switchComp,
+    getRootElement: () => switchComp,
+    press: () => fireEvent(switchComp, 'press'),
+    getAccessibilityValue: () => switchComp.props.accessibilityValue.text === '1',
+    isDisabled: () => switchComp.props.accessibilityState.disabled === true,
+    isChecked: () => switchComp.props.accessibilityState.checked === 'checked',
+    getColor: () => switchComp.props.style.backgroundColor
+  };
+};

src/components/text/Text.driver.ts

@@ -2,8 +2,7 @@ import {fireEvent, RenderAPI} from '@testing-library/react-native';
 import {ReactTestInstance} from 'react-test-renderer';
 import _ from 'lodash';
 
-const TextDriverFactory = async ({wrapperComponent, testID}: {wrapperComponent: RenderAPI, testID: string}) => {
-
+export const TextDriver = async ({wrapperComponent, testID}: {wrapperComponent: RenderAPI; testID: string}) => {
   const text: ReactTestInstance | null = await wrapperComponent.queryByTestId(testID);
   return {
     exists: () => !!text,
@@ -21,11 +20,8 @@ const TextDriverFactory = async ({wrapperComponent, testID}: {wrapperComponent:
       if (text) {
         fireEvent.press(text);
       } else {
-        console.warn(`TextDriverFactory: cannot click because testID:${testID} were not found`);
+        console.warn(`TextDriver: cannot click because testID:${testID} were not found`);
       }
     }
-
   };
 };
-
-export default TextDriverFactory;