Switch - refactor driver to use new implementation (#2891)

* Switch - refactor driver to use new implementation

* rename const

* remove wrapper view

* Update src/components/switch/switch.driver.ts

remove log

Co-authored-by: Adi Mordo <[email protected]>

---------

Co-authored-by: Adi Mordo <[email protected]>

Author: Inbal-Tish

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

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

src/components/switch/switch.driver.ts

@@ -1,13 +1,15 @@
+import {ViewStyle} from 'react-native';
 import {SwitchProps} from './index';
-import {ComponentDriver} from '../../testkit/Component.driver';
-
-export class SwitchDriver extends ComponentDriver<SwitchProps> {
-  getAccessibilityValue = async () => (await this.getElementProps()).accessibilityValue?.text === '1';
-
-  isDisabled = async () => (await this.getElementProps()).accessibilityState?.disabled === true;
-
-  isChecked = async () => (await this.getElementProps()).accessibilityValue?.text === '1';
-
-  // @ts-ignore
-  getColor = async () => (await this.getElementProps()).style.backgroundColor;
-}
+import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+import {usePressableDriver} from '../../testkit/new/usePressable.driver';
+
+export const SwitchDriver = (props: ComponentProps) => {
+  const driver = usePressableDriver<SwitchProps>(useComponentDriver(props));
+  
+  const getStyle = () => driver.getProps().style as ViewStyle;
+  const getAccessibilityValue = () => driver.getProps().accessibilityValue?.text === '1';
+  const isDisabled = () => driver.getProps().accessibilityState?.disabled === true;
+  const isChecked = () => driver.getProps().accessibilityValue?.text === '1';
+  
+  return {...driver, getStyle, getAccessibilityValue, isDisabled, isChecked};
+};

src/testkit/index.ts

@@ -12,3 +12,4 @@ export {TextFieldDriver} from '../components/textField/TextField.driver.new';
 export {ViewDriver} from '../components/view/View.driver.new';
 export {ButtonDriver} from '../components/button/Button.driver.new';
 export {ImageDriver} from '../components/image/Image.driver.new';
+export {SwitchDriver} from '../components/switch/switch.driver';