Added Basic testkit for Swtich component

Author: Marik Shnitman

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/components/switch/Switch.spec.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import Switch, {SwitchProps} from './index';
+import {SwitchDriverFactory} 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 = SwitchDriverFactory({
+      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,11 @@ class Switch extends Component<SwitchProps> {
   getAccessibilityProps() {
     const {disabled, value} = this.props;
 
-    
+
     return {
       accessible: true,
       accessibilityRole: 'switch',
-      accessibilityStates: disabled ? ['disabled'] : value ? ['checked'] : ['unchecked'],
+      accessibilityState: disabled ? ['disabled'] : value ? ['checked'] : ['unchecked'],
       accessibilityValue: {text: value ? '1' : '0'}
     };
   }

src/components/switch/switch.driver.ts

@@ -0,0 +1,18 @@
+import {RenderAPI, fireEvent} from '@testing-library/react-native';
+
+
+export const SwitchDriverFactory = ({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['0'] === 'checked',
+    getColor: () => switchComp.props.style.backgroundColor
+  };
+
+};

src/testkit/index.ts

@@ -1,3 +1,5 @@
+export {SwitchDriverFactory} from '../components/switch/switch.driver';
+
 export {default as ButtonDriverFactory} from '../components/button/Button.driver';
 export {default as TextDriverFactory} from '../components/Text/Text.driver';
-export {default as ImageDriver} from '../components/image/Image.driver';
+export {default as ImageDriverFactory} from '../components/image/Image.driver';