TextField - clean tests (#3118)

* move all driver tests to one file

* delete old test file

* delete old driver

* NumberInput - update driver and tests

* remove duplications and edit test cases

* adding shouldPlaceholderFloat tests

* add getColorByState tests

Author: Inbal-Tish

src/components/numberInput/NumberInput.driver.ts

@@ -1,23 +1,32 @@
-import {NumberInputProps} from './index';
-import {ComponentDriver, ComponentDriverArgs} from '../../testkit/Component.driver';
-import {TextFieldDriver} from '../textField/TextField.driver';
+import {ComponentProps} from '../../testkit/new/Component.driver';
+import {TextFieldDriver} from '../textField/TextField.driver.new';
 
-export class NumberInputDriver extends ComponentDriver<NumberInputProps> {
-  private readonly maskedInputDriver: TextFieldDriver;
-  private readonly visualTextFieldDriver: TextFieldDriver;
+export const NumberInputDriver = (props: ComponentProps) => {
+  const maskedInputDriver = TextFieldDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}`
+  });
 
-  constructor(componentDriverArgs: ComponentDriverArgs) {
-    super(componentDriverArgs);
+  const textFieldDriver = TextFieldDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.visual`
+  });
+  
+  const exists = (): boolean => {
+    return maskedInputDriver.exists();
+  };
 
-    this.maskedInputDriver = new TextFieldDriver({...componentDriverArgs, testID: `${this.testID}`});
-    this.visualTextFieldDriver = new TextFieldDriver({...componentDriverArgs, testID: `${this.testID}.visual`});
-  }
+  const changeText = async (text: string) => {
+    await maskedInputDriver.changeText(text);
+  };
 
-  changeText = async (text: string) => {
-    await this.maskedInputDriver.changeText(text);
+  const getValue = (): string | undefined => {
+    return textFieldDriver.getValue();
   };
 
-  getText = async () => {
-    return await this.visualTextFieldDriver.getText();
+  return {
+    exists,
+    changeText,
+    getValue
   };
-}
+};

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

@@ -1,11 +1,13 @@
 import React from 'react';
-import NumberInput from '../index';
+import {render} from '@testing-library/react-native';
 import {NumberInputDriver} from '../NumberInput.driver';
+import NumberInput from '../index';
 
+const TEST_ID = 'numberInput';
 const onChangeNumber = () => {};
 
 const defaultProps = {
-  testID: 'field',
+  testID: TEST_ID,
   placeholder: 'Placeholder',
   centered: true,
   onChangeNumber
@@ -16,22 +18,24 @@ const TestCase = props => {
 };
 
 describe('NumberInput', () => {
-  it('Should update number when fractionDigits changes', async () => {
-    const component = <TestCase/>;
-    const numberInputDriver = new NumberInputDriver({component, testID: 'field'});
-    expect(await numberInputDriver.exists()).toBe(true);
+  it('Should display formatted number', async () => {
+    const renderTree = render(<TestCase/>);
+    const numberInputDriver = NumberInputDriver({renderTree, testID: TEST_ID});
+    
+    expect(numberInputDriver.exists()).toBe(true);
+
+    numberInputDriver.changeText('1234567');
+    expect(await numberInputDriver.getValue()).toEqual('12,345.67');
+  });
+
+  it('Should update number when fractionDigits change', async () => {
+    const renderTree = render(<TestCase/>);
+    const numberInputDriver = NumberInputDriver({renderTree, testID: TEST_ID});
+
     numberInputDriver.changeText('1234567');
-    expect(await numberInputDriver.getText()).toEqual('12,345.67');
-    // TODO: add changing fractionDigits once we support rerender in our drivers
-
-
-    // const renderTree = render(<TestCase/>);
-    // const input = renderTree.getByTestId('field');
-    // fireEvent(input, 'focus');
-    // fireEvent.changeText(input, '1234567');
-    // fireEvent(input, 'blur');
-    // renderTree.getByDisplayValue('1,234.67');
-    // renderTree.rerender(<TestCase fractionDigits={3}/>);
-    // renderTree.getByDisplayValue('123.457');
+    expect(await numberInputDriver.getValue()).toEqual('12,345.67');
+
+    renderTree.rerender(<TestCase fractionDigits={4}/>);
+    expect(await numberInputDriver.getValue()).toEqual('123.4567');
   });
 });

src/components/textField/TextField.driver.ts

@@ -1,6 +1,100 @@
+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]);
@@ -77,4 +171,70 @@ describe('TextField:Presenter', () => {
       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);
+    });
+  });
 });