react-native-ui-lib 8.0.1 → 8.1.0

package/src/components/switch/__tests__/index.spec.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import Switch from "../index";
+import { SwitchDriver } from "../Switch.driver";
+const testID = 'switch';
+const defaultProps = {
+  value: false,
+  onValueChange: jest.fn(),
+  disabled: false
+};
+const onColor = 'red';
+const offColor = 'grey';
+const testCase = (testID, props) => {
+  const renderTree = render(<Switch testID={testID} {...defaultProps} {...props} />);
+  return SwitchDriver({
+    renderTree,
+    testID
+  });
+};
+describe('Switch', () => {
+  it('Should fire onChange event', async () => {
+    const onChange = jest.fn();
+    const driver = testCase(testID, {
+      onValueChange: onChange
+    });
+    driver.press();
+    expect(onChange).toHaveBeenCalled();
+  });
+  it('Should fire onChange event with false value when toggling off', async () => {
+    const onChange = jest.fn();
+    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 onChange = jest.fn();
+    const driver = testCase(testID, {
+      onValueChange: onChange,
+      value: false
+    });
+    driver.press();
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+  it('Should not fire onChange when disabled', async () => {
+    const onValueChange = jest.fn();
+    const driver = testCase(testID, {
+      disabled: true,
+      onValueChange
+    });
+    driver.press();
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+  it('Accessibility value should be false when not checked', async () => {
+    const driver = testCase(testID, {
+      value: false
+    });
+    expect(driver.isChecked()).toBe(false);
+  });
+  it('Accessibility value should be checked when checked', async () => {
+    const driver = testCase(testID, {
+      value: true
+    });
+    expect(driver.isChecked()).toBe(true);
+  });
+  it('Should be disabled', async () => {
+    const driver = testCase(testID, {
+      disabled: true
+    });
+    expect(driver.isDisabled()).toBe(true);
+  });
+  it('Should be disabled', async () => {
+    const driver = testCase(testID, {
+      disabled: false
+    });
+    expect(driver.isDisabled()).toBe(false);
+  });
+  it('Should pass correct color when on', async () => {
+    const driver = testCase(testID, {
+      value: true,
+      onColor,
+      offColor
+    });
+    expect(driver.getStyle()?.backgroundColor).toBe(onColor);
+  });
+  it('Should pass correct color when off', async () => {
+    const driver = testCase(testID, {
+      value: false,
+      onColor,
+      offColor
+    });
+    expect(driver.getStyle()?.backgroundColor).toBe(offColor);
+  });
+});

package/src/components/text/__tests__/index.driver.spec.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+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 = {}) {
+  const {
+    onPress
+  } = textProps;
+  const Text = require("../index").default;
+  return <Text testID={TEXT_ID} onPress={onPress}>
+      {TEXT_CONTENT}
+    </Text>;
+}
+const getDriver = (textProps = {}) => {
+  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 {
+      textDriver
+    } = getDriver();
+    const content = textDriver.getText();
+    expect(content).toEqual(TEXT_CONTENT);
+  });
+  it('should return empty string', () => {
+    const Text = require("../").default;
+    const renderTree = render(<Text testID={TEXT_ID} />);
+    const textDriver = TextDriver({
+      renderTree,
+      testID: TEXT_ID
+    });
+    const content = textDriver.getText();
+    expect(content).toEqual('');
+  });
+  it('should not return a string as text', () => {
+    const Text = require("../").default;
+    const renderTree = render(<Text testID={TEXT_ID}><Text>This is a text</Text></Text>);
+    const textDriver = TextDriver({
+      renderTree,
+      testID: TEXT_ID
+    });
+    const content = textDriver.getText();
+    expect(content.length).toBe(1);
+    expect(typeof content[0]).not.toBe('string');
+  });
+  describe('onPress', () => {
+    it('should press the text, and run callback', () => {
+      const onPressCallback = jest.fn();
+      const {
+        textDriver
+      } = getDriver({
+        onPress: onPressCallback
+      });
+      textDriver.press();
+      expect(onPressCallback).toHaveBeenCalledTimes(1);
+    });
+    it('should not be pressable if onPress prop is not supplied', () => {
+      const {
+        textDriver
+      } = getDriver();
+      expect(textDriver.hasOnPress()).toBeFalsy();
+    });
+  });
+  const setConstants = (isAndroid, isRTL) => {
+    const {
+      Constants
+    } = require("../../../commons/new");
+    Constants.isAndroid = isAndroid;
+    Constants.isIOS = !isAndroid;
+    Constants.isRTL = isRTL;
+  };
+  describe('Text alignment', () => {
+    it('Should always align text to left on Android (LTR/RTL)', () => {
+      jest.isolateModules(() => {
+        setConstants(true, true);
+        const {
+          textDriver
+        } = getDriver();
+        const textStyle = textDriver.getElement().props.style;
+        expect(StyleSheet.flatten(textStyle).textAlign).toEqual(undefined);
+      });
+      jest.isolateModules(() => {
+        setConstants(true, false);
+        const {
+          textDriver
+        } = getDriver();
+        const textStyle = textDriver.getElement().props.style;
+        expect(StyleSheet.flatten(textStyle).textAlign).toEqual(undefined);
+      });
+    });
+    it('Should have text of right on iOS RTL', () => {
+      jest.isolateModules(() => {
+        setConstants(false, true);
+        const {
+          textDriver
+        } = getDriver();
+        const textStyle = textDriver.getElement().props.style;
+        expect(StyleSheet.flatten(textStyle).writingDirection).toEqual('rtl');
+      });
+    });
+    it('Should have text of left on iOS LTR', () => {
+      jest.isolateModules(() => {
+        setConstants(false, false);
+        const {
+          textDriver
+        } = getDriver();
+        const textStyle = textDriver.getElement().props.style;
+        expect(StyleSheet.flatten(textStyle).writingDirection).toEqual('ltr');
+      });
+    });
+  });
+});

package/src/components/text/__tests__/index.spec.js

@@ -0,0 +1,245 @@
+import React from 'react';
+import View from "../../view";
+import Text from "../index";
+import { TextDriver } from "../Text.driver";
+import { Colors } from "../../../style";
+const TEXT_ID = 'text_test_id';
+const TEXT_CONTENT = 'text content';
+describe('Text', () => {
+  afterEach(() => {
+    TextDriver.clear();
+  });
+  describe('highlightString', () => {
+    const HIGHLIGHT_STRING_TEST_ID = 'highlight-string-test-id';
+    describe('single highlightString', () => {
+      describe('style', () => {
+        it('should render highlight string with a given style', async () => {
+          const component = WrapperScreenWithText({
+            highlightString: {
+              string: 'content',
+              style: {
+                color: Colors.red30,
+                textDecorationLine: 'underline'
+              },
+              testID: HIGHLIGHT_STRING_TEST_ID
+            }
+          });
+          const textDriver = new TextDriver({
+            component,
+            testID: TEXT_ID
+          });
+          const {
+            style
+          } = await textDriver.getPropsByTestId(HIGHLIGHT_STRING_TEST_ID);
+          expect(style).toEqual({
+            color: Colors.red30,
+            textDecorationLine: 'underline'
+          });
+        });
+        it('should render highlight string with the general highlightStyle prop style if no specific style given', async () => {
+          const component = WrapperScreenWithText({
+            highlightString: {
+              string: 'content',
+              testID: HIGHLIGHT_STRING_TEST_ID
+            },
+            highlightStyle: {
+              color: Colors.blue50
+            }
+          });
+          const textDriver = new TextDriver({
+            component,
+            testID: TEXT_ID
+          });
+          const {
+            style
+          } = await textDriver.getPropsByTestId(HIGHLIGHT_STRING_TEST_ID);
+          expect(style).toEqual([{
+            color: Colors.grey30
+          }, {
+            color: Colors.blue50
+          }]);
+        });
+      });
+      describe('onPress', () => {
+        it('should press on highlighted text and run its callback', async () => {
+          const onPressCallback = jest.fn();
+          const component = WrapperScreenWithText({
+            highlightString: {
+              string: 'content',
+              onPress: onPressCallback,
+              testID: HIGHLIGHT_STRING_TEST_ID
+            }
+          });
+          const textDriver = new TextDriver({
+            component,
+            testID: HIGHLIGHT_STRING_TEST_ID
+          });
+          await textDriver.press();
+          expect(onPressCallback).toHaveBeenCalledTimes(1);
+        });
+        it('should not be pressable if onPress prop is not supplied for a highlightString', async () => {
+          const component = WrapperScreenWithText({
+            highlightString: {
+              string: 'content',
+              testID: HIGHLIGHT_STRING_TEST_ID
+            }
+          });
+          const textDriver = new TextDriver({
+            component,
+            testID: HIGHLIGHT_STRING_TEST_ID
+          });
+          expect(await textDriver.isPressable()).toBeFalsy();
+        });
+      });
+    });
+    describe('highlightString array', () => {
+      const LONGER_TEXT_CONTENT = 'a longer text content to test';
+      const HIGHLIGHT_STRING_2_TEST_ID = 'highlight-string-2-test-id';
+      describe('style', () => {
+        it('should render multiple highlight strings, each with its given style', async () => {
+          const component = WrapperScreenWithText({
+            text: LONGER_TEXT_CONTENT,
+            highlightString: [{
+              string: 'longer',
+              style: {
+                color: Colors.red30,
+                textDecorationLine: 'underline'
+              },
+              testID: HIGHLIGHT_STRING_TEST_ID
+            }, {
+              string: 'test',
+              style: {
+                color: Colors.yellow40,
+                textDecorationLine: 'line-through'
+              },
+              testID: HIGHLIGHT_STRING_2_TEST_ID
+            }]
+          });
+          const textDriver = new TextDriver({
+            component,
+            testID: TEXT_ID
+          });
+          const {
+            style: style1
+          } = await textDriver.getPropsByTestId(HIGHLIGHT_STRING_TEST_ID);
+          const {
+            style: style2
+          } = await textDriver.getPropsByTestId(HIGHLIGHT_STRING_2_TEST_ID);
+          expect(style1).toEqual({
+            color: Colors.red30,
+            textDecorationLine: 'underline'
+          });
+          expect(style2).toEqual({
+            color: Colors.yellow40,
+            textDecorationLine: 'line-through'
+          });
+        });
+        it('should render highlight string with the general highlightStyle prop style if no specific style given', async () => {
+          const component = WrapperScreenWithText({
+            text: LONGER_TEXT_CONTENT,
+            highlightString: [{
+              string: 'longer',
+              style: {
+                color: Colors.red30,
+                textDecorationLine: 'underline'
+              },
+              testID: HIGHLIGHT_STRING_TEST_ID
+            }, {
+              string: 'test',
+              testID: HIGHLIGHT_STRING_2_TEST_ID
+            }],
+            highlightStyle: {
+              color: Colors.blue50
+            }
+          });
+          const textDriver = new TextDriver({
+            component,
+            testID: TEXT_ID
+          });
+          const {
+            style
+          } = await textDriver.getPropsByTestId(HIGHLIGHT_STRING_TEST_ID);
+          const {
+            style: style2
+          } = await textDriver.getPropsByTestId(HIGHLIGHT_STRING_2_TEST_ID);
+          expect(style).toEqual({
+            color: Colors.red30,
+            textDecorationLine: 'underline'
+          });
+          expect(style2).toEqual([{
+            color: Colors.grey30
+          }, {
+            color: Colors.blue50
+          }]);
+        });
+      });
+      describe('onPress', () => {
+        it('should press on highlighted texts and run their respective callbacks', async () => {
+          const onPressCallback1 = jest.fn();
+          const onPressCallback2 = jest.fn();
+          const component = WrapperScreenWithText({
+            text: LONGER_TEXT_CONTENT,
+            highlightString: [{
+              string: 'longer',
+              onPress: onPressCallback1,
+              testID: HIGHLIGHT_STRING_TEST_ID
+            }, {
+              string: 'test',
+              onPress: onPressCallback2,
+              testID: HIGHLIGHT_STRING_2_TEST_ID
+            }]
+          });
+          const textDriver1 = new TextDriver({
+            component,
+            testID: HIGHLIGHT_STRING_TEST_ID
+          });
+          await textDriver1.press();
+          expect(onPressCallback1).toHaveBeenCalledTimes(1);
+          const textDriver2 = new TextDriver({
+            component,
+            testID: HIGHLIGHT_STRING_2_TEST_ID
+          });
+          await textDriver2.press();
+          expect(onPressCallback2).toHaveBeenCalledTimes(1);
+        });
+        it('should not be pressable if onPress prop is not supplied for a highlightString', async () => {
+          const onPressCallback = jest.fn();
+          const component = WrapperScreenWithText({
+            text: LONGER_TEXT_CONTENT,
+            highlightString: [{
+              string: 'longer',
+              onPress: onPressCallback,
+              testID: HIGHLIGHT_STRING_TEST_ID
+            }, {
+              string: 'test',
+              testID: HIGHLIGHT_STRING_2_TEST_ID
+            }]
+          });
+          const textDriver1 = new TextDriver({
+            component,
+            testID: HIGHLIGHT_STRING_TEST_ID
+          });
+          const textDriver2 = new TextDriver({
+            component,
+            testID: HIGHLIGHT_STRING_2_TEST_ID
+          });
+          expect(await textDriver1.isPressable()).toBeTruthy();
+          expect(await textDriver2.isPressable()).toBeFalsy();
+        });
+      });
+    });
+  });
+});
+function WrapperScreenWithText(textProps = {}) {
+  const {
+    onPress,
+    highlightString,
+    text,
+    highlightStyle
+  } = textProps;
+  return <View>
+    <Text testID={TEXT_ID} onPress={onPress} highlightString={highlightString} highlightStyle={highlightStyle}>
+      {text ?? TEXT_CONTENT}
+    </Text>
+  </View>;
+}

package/src/components/textField/__tests__/Presenter.spec.js

@@ -0,0 +1,240 @@
+import _ from 'lodash';
+import Colors from '../../../style/colors';
+import * as uut from '../Presenter';
+
+describe('TextField:Presenter', () => {
+  describe('get color by state', () => {
+    const colorsByState = {
+      default: 'purple',
+      focus: 'green',
+      error: 'orange',
+      readonly: 'pink',
+      disabled: 'lightblue'
+    };
+
+    const defaultContext = {
+      isFocused: false,
+      hasValue: false,
+      isValid: true,
+      failingValidatorIndex: undefined,
+      disabled: false,
+      readonly: false,
+      validateField: _.noop,
+      checkValidity: () => true,
+      isMandatory: false
+    };
+
+    it('should return passed color when is a string', () => {
+      expect(uut.getColorByState('blue', defaultContext)).toEqual('blue');
+    });
+
+    it('should return passed color when is design token', () => {
+      expect(uut.getColorByState(Colors.$backgroundDark, defaultContext)).toEqual(Colors.$backgroundDark);
+    });
+
+    it('should return textDefault color when color is an empty object', () => {
+      expect(uut.getColorByState({}, defaultContext)).toEqual(Colors.$textDefault);
+    });
+
+    it('should return textDefault color when no default color passed in color object', () => {
+      expect(uut.getColorByState({error: 'red'}, defaultContext)).toEqual(Colors.$textDefault);
+    });
+
+    it('should return default color', () => {
+      expect(uut.getColorByState(colorsByState, defaultContext)).toEqual(colorsByState.default);
+    });
+
+    it('should return focused color', () => {
+      const context = {...defaultContext, isFocused: true};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.focus);
+    });
+
+    it('should return error color', () => {
+      const context = {...defaultContext, isValid: false};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.error);
+    });
+
+    it('should return readonly color', () => {
+      const context = {...defaultContext, readonly: true};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.readonly);
+    });
+
+    it('should return disabled color', () => {
+      const context = {...defaultContext, disabled: true};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.disabled);
+    });
+
+    it('should return disabled color, over readonly', () => {
+      const context = {...defaultContext, disabled: true, readonly: true};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.disabled);
+    });
+
+    it('should return disabled color, over error', () => {
+      const context = {...defaultContext, disabled: true, isValid: false};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.disabled);
+    });
+
+    it('should return disabled color, over focused', () => {
+      const context = {...defaultContext, disabled: true, isFocused: false};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.disabled);
+    });
+
+    it('should return readonly color, over error', () => {
+      const context = {...defaultContext, readonly: true, isValid: false};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.readonly);
+    });
+
+    it('should return readonly color, over focused', () => {
+      const context = {...defaultContext, readonly: true, isFocused: false};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.readonly);
+    });
+
+    it('should return error color, over focused', () => {
+      const context = {...defaultContext, isValid: false, isFocused: true};
+      expect(uut.getColorByState(colorsByState, context)).toEqual(colorsByState.error);
+    });
+  });
+
+  describe('validate', () => {
+    it('should return true if validator is undefined', () => {
+      expect(uut.validate('value', undefined)).toEqual([true, undefined]);
+    });
+
+    it('should validate email', () => {
+      const validator = 'email';
+
+      expect(uut.validate('value', validator)).toEqual([false, 0]);
+      expect(uut.validate('', validator)).toEqual([false, 0]);
+      expect(uut.validate('test@mail', validator)).toEqual([false, 0]);
+      expect(uut.validate('test@mail.com', validator)).toEqual([true, undefined]);
+    });
+
+    it('should validate required', () => {
+      const validator = 'required';
+
+      expect(uut.validate('', validator)).toEqual([false, 0]);
+      expect(uut.validate(undefined, validator)).toEqual([false, 0]);
+      expect(uut.validate('value', validator)).toEqual([true, undefined]);
+    });
+
+    it('should validate a function validator', () => {
+      const validator = value => value.length > 3;
+
+      expect(uut.validate('', validator)).toEqual([false, 0]);
+      expect(uut.validate('abc', validator)).toEqual([false, 0]);
+      expect(uut.validate('abcd', validator)).toEqual([true, undefined]);
+    });
+
+    it('should validate both required and email', () => {
+      const validator = ['required', 'email'];
+
+      expect(uut.validate('', validator)).toEqual([false, 0]);
+      expect(uut.validate('value', validator)).toEqual([false, 1]);
+      expect(uut.validate('test@mail.com', validator)).toEqual([true, undefined]);
+    });
+  });
+
+  describe('getValidationMessage', () => {
+    it('should return undefined when there is no validationMessage', () => {
+      expect(uut.getRelevantValidationMessage(undefined, 0)).toBeUndefined();
+    });
+
+    it('should return the validation message when there is no validate method', () => {
+      expect(uut.getRelevantValidationMessage('error message', undefined)).toBe('error message');
+    });
+
+    it('should return the relevant validation message when there is a single message', () => {
+      expect(uut.getRelevantValidationMessage('error message', 0)).toBe('error message');
+    });
+
+    it('should return the relevant validation message when there are multiple messages', () => {
+      const messages = ['Field is required', 'Email is invalid'];
+      expect(uut.getRelevantValidationMessage(messages, 0)).toBe(messages[0]);
+      expect(uut.getRelevantValidationMessage(messages, 1)).toBe(messages[1]);
+    });
+  });
+
+  describe('Should hide placeholder', () => {
+    it('should keep it visible when floatingPlaceholder is false', () => {
+      expect(uut.shouldHidePlaceholder({floatingPlaceholder: false})).toBe(false);
+    });
+
+    it('should hide it when using floatingPlaceholder', () => {
+      expect(uut.shouldHidePlaceholder({floatingPlaceholder: true})).toBe(true);
+    });
+
+    it('should show it when floatingPlaceholder is true, user passed a hint text, the field is focused and floatOnFocus is true', () => {
+      expect(uut.shouldHidePlaceholder({floatingPlaceholder: true, hint: 'Hint text', floatOnFocus: true}, true)).toBe(false);
+    });
+    
+    it('should hide it when floatingPlaceholder is true, user passed a hint text, the field is focused but floatOnFocus is false', () => {
+      expect(uut.shouldHidePlaceholder({floatingPlaceholder: true, hint: 'Hint text', floatOnFocus: false}, true)).toBe(true);
+    });
+  });
+
+  describe('Should float placeholder', () => {
+    it('should not float when isFocused is false', () => {
+      const props = {floatOnFocus: true};
+      const isFocused = false;
+      const hasValue = undefined;
+      const value = undefined;
+      expect(uut.shouldPlaceholderFloat(props, isFocused, hasValue, value)).toBe(false);
+    });
+
+    it('should not float when isFocused is false', () => {
+      const props = {floatOnFocus: false};
+      const isFocused = true;
+      const hasValue = undefined;
+      const value = undefined;
+      expect(uut.shouldPlaceholderFloat(props, isFocused, hasValue, value)).toBe(false);
+    });
+
+    it('should float when floatOnFocus and isFocused is true', () => {
+      const props = {floatOnFocus: true};
+      const isFocused = true;
+      const hasValue = undefined;
+      const value = undefined;
+      expect(uut.shouldPlaceholderFloat(props, isFocused, hasValue, value)).toBe(true);
+    });
+
+    it('should float when hasValue is true', () => {
+      const props = {floatOnFocus: false};
+      const isFocused = false;
+      const hasValue = true;
+      const value = undefined;
+      expect(uut.shouldPlaceholderFloat(props, isFocused, hasValue, value)).toBe(true);
+    });
+
+    it('should not float when hasValue is false', () => {
+      const props = {floatOnFocus: false};
+      const isFocused = false;
+      const hasValue = false;
+      const value = undefined;
+      expect(uut.shouldPlaceholderFloat(props, isFocused, hasValue, value)).toBe(false);
+    });
+
+    it('should float when defaultValue and value is undefined', () => {
+      const props = {floatOnFocus: false, defaultValue: 'default value'};
+      const isFocused = false;
+      const hasValue = false;
+      const value = undefined;
+      expect(uut.shouldPlaceholderFloat(props, isFocused, hasValue, value)).toBe(true);
+    });
+
+    it('should not float when defaultValue and value', () => {
+      const props = {floatOnFocus: false, defaultValue: 'default value'};
+      const isFocused = false;
+      const hasValue = false;
+      const value = 'value';
+      expect(uut.shouldPlaceholderFloat(props, isFocused, hasValue, value)).toBe(false);
+    });
+
+    it('should not float when no defaultValue and value', () => {
+      const props = {floatOnFocus: false, defaultValue: undefined};
+      const isFocused = false;
+      const hasValue = false;
+      const value = 'value';
+      expect(uut.shouldPlaceholderFloat(props, isFocused, hasValue, value)).toBe(false);
+    });
+  });
+});