Automation gap - WOAUILIB-3704

src/components/text/__tests__/index.driver.spec.tsx

@@ -1,46 +1,91 @@
 import React from 'react';
 import {render} from '@testing-library/react-native';
-import View from '../../view';
-import Text from '../index';
 import {TextDriver} from '../Text.driver.new';
+import {StyleSheet} from 'react-native';
 
 const TEXT_ID = 'text_test_id';
 const TEXT_CONTENT = 'text content';
 
 function WrapperScreenWithText(textProps: {onPress?: jest.Mock} = {}) {
   const {onPress} = textProps;
+  const Text = require('../index').default;
   return (
-    <View>
-      <Text testID={TEXT_ID} onPress={onPress}>
-        {TEXT_CONTENT}
-      </Text>
-    </View>
+    <Text testID={TEXT_ID} onPress={onPress}>
+      {TEXT_CONTENT}
+    </Text>
   );
 }
 
+const getDriver = (textProps: {onPress?: jest.Mock} = {}) => {
+  const {onPress} = textProps;
+  const renderTree = render(<WrapperScreenWithText onPress={onPress}/>);
+  const textDriver = TextDriver({renderTree, testID: TEXT_ID});
+  return {textDriver};
+};
+
 describe('Text', () => {
   it('should render Text Component', () => {
-    const renderTree = render(<WrapperScreenWithText/>);
-    const textDriver = TextDriver({renderTree, testID: TEXT_ID});
+    const {textDriver} = getDriver();
     const content = textDriver.getText();
     expect(content).toEqual(TEXT_CONTENT);
   });
 
   describe('onPress', () => {
     it('should press the text, and run callback', () => {
       const onPressCallback = jest.fn();
-      const renderTree = render(<WrapperScreenWithText onPress={onPressCallback}/>);
-      const textDriver = TextDriver({renderTree, testID: TEXT_ID});
-
+      const {textDriver} = getDriver({onPress: onPressCallback});
       textDriver.press();
-
       expect(onPressCallback).toHaveBeenCalledTimes(1);
     });
 
     it('should not be pressable if onPress prop is not supplied', () => {
-      const renderTree = render(<WrapperScreenWithText/>);
-      const textDriver = TextDriver({renderTree, testID: TEXT_ID});
+      const {textDriver} = getDriver();
       expect(textDriver.hasOnPress()).toBeFalsy();
     });
   });
+  const setConstants = (isAndroid: boolean, isRTL: boolean) => {
+    const {Constants} = require('../../../commons/new');
+    Constants.isAndroid = isAndroid;
+    Constants.isIOS = !isAndroid;
+    Constants.isRTL = isRTL;
+  };
+
+  describe('Automation gap', () => {
+    describe('Both RTL and LTR', () => {
+      it('Should always align text to left on Android', () => {
+        jest.isolateModules(() => {
+          setConstants(true, true);
+          const {textDriver} = getDriver();
+          const textStyle = textDriver.getProps().style;
+          expect(StyleSheet.flatten(textStyle).textAlign).toEqual('left');
+        });
+        jest.isolateModules(() => {
+          setConstants(true, false);
+          const {textDriver} = getDriver();
+          const textStyle = textDriver.getProps().style;
+          expect(StyleSheet.flatten(textStyle).textAlign).toEqual('left');
+        });
+      });
+    });
+    describe('RTL', () => {
+      it('Should have text of left on iOS', () => {
+        jest.isolateModules(() => {
+          setConstants(false, true);
+          const {textDriver} = getDriver();
+          const textStyle = textDriver.getProps().style;
+          expect(StyleSheet.flatten(textStyle).writingDirection).toEqual('rtl');
+        });
+      });
+    });
+    describe('LTR', () => {
+      it('Should have text of right on iOS', () => {
+        jest.isolateModules(() => {
+          setConstants(false, false);
+          const {textDriver} = getDriver();
+          const textStyle = textDriver.getProps().style;
+          expect(StyleSheet.flatten(textStyle).writingDirection).toEqual('ltr');
+        });
+      });
+    });
+  });
 });

src/components/text/index.tsx

@@ -6,8 +6,7 @@ import {
   TextProps as RNTextProps,
   TextStyle,
   Animated,
-  StyleProp,
-  Platform
+  StyleProp
 } from 'react-native';
 import {
   asBaseComponent,
@@ -192,14 +191,13 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: 'transparent',
     color: Colors.$textDefault,
-    ...Platform.select({
-      ios: {
+    ...(Constants.isIOS
+      ? {
         writingDirection: Constants.isRTL ? writingDirectionTypes.RTL : writingDirectionTypes.LTR
-      },
-      android: {
-        textAlign: 'left'
       }
-    })
+      : {
+        textAlign: 'left'
+      })
   },
   centered: {
     textAlign: 'center'