react-native-ui-lib 8.1.1 → 8.1.5

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

@@ -1,357 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { render } from '@testing-library/react-native';
-import Checkbox from "../index";
-import { CheckboxDriver } from "../Checkbox.driver";
-const testID = 'checkbox';
-const checkboxRef = React.createRef();
-const onValueChange = jest.fn();
-const onChangeValidity = jest.fn();
-function TestCase(props) {
-  const {
-    value,
-    onValueChange,
-    ...others
-  } = props;
-  const [_value, _setValue] = useState(value);
-  const _onValueChange = useCallback(newValue => {
-    _setValue(newValue);
-    onValueChange?.(newValue);
-  }, [_setValue, onValueChange]);
-  return <Checkbox {...others} onValueChange={_onValueChange} value={_value} testID={testID} ref={checkboxRef} />;
-}
-describe('Checkbox renderer test', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  describe('Value', () => {
-    it('Default value is false', async () => {
-      const props = {
-        onValueChange
-      };
-      const renderTree = render(<TestCase {...props} />);
-      const driver = CheckboxDriver({
-        renderTree,
-        testID
-      });
-      await driver.press();
-      expect(onValueChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledWith(true);
-    });
-    it.each`
-      checkboxInitialValue | checkboxExpectedValue
-      ${false}             | ${true}
-      ${true}              | ${false}
-    `('Send value ($checkboxInitialValue)', async ({
-      checkboxInitialValue,
-      checkboxExpectedValue
-    }) => {
-      const props = {
-        onValueChange,
-        value: checkboxInitialValue
-      };
-      const renderTree = render(<TestCase {...props} />);
-      const driver = CheckboxDriver({
-        renderTree,
-        testID
-      });
-      await driver.press();
-      expect(onValueChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledWith(checkboxExpectedValue);
-    });
-  });
-  describe('Press', () => {
-    it('Multiple clicks', async () => {
-      const props = {
-        onValueChange
-      };
-      const renderTree = render(<TestCase {...props} />);
-      const driver = CheckboxDriver({
-        renderTree,
-        testID
-      });
-      await driver.press();
-      expect(onValueChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledWith(true);
-      await driver.press();
-      expect(onValueChange.mock.calls).toEqual([[true], [false]]);
-      await driver.press();
-      expect(onValueChange.mock.calls).toEqual([[true], [false], [true]]);
-    });
-    it.each`
-      checkboxInitialValue
-      ${false}
-      ${true}
-    `('Disabled (value = $checkboxInitialValue)', async ({
-      checkboxInitialValue
-    }) => {
-      const props = {
-        onValueChange,
-        value: checkboxInitialValue,
-        disabled: true
-      };
-      const renderTree = render(<TestCase {...props} />);
-      const driver = CheckboxDriver({
-        renderTree,
-        testID
-      });
-      await driver.press();
-      expect(onValueChange).not.toHaveBeenCalled();
-    });
-  });
-  describe('Validation', () => {
-    describe('onChangeValidity', () => {
-      it('should not been called', async () => {
-        const props = {
-          onChangeValidity
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        await driver.press();
-        expect(onChangeValidity).not.toHaveBeenCalled();
-      });
-      it('should been called with required prop', async () => {
-        const props = {
-          onChangeValidity,
-          required: true
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        await driver.press();
-        expect(onChangeValidity).toHaveBeenCalled();
-        expect(onChangeValidity).toHaveBeenCalledWith(true);
-      });
-      it('should not been called after invoking validate()', async () => {
-        const props = {
-          required: true,
-          onChangeValidity
-        };
-        const renderTree = render(<TestCase {...props} />);
-        //eslint-disable-next-line
-        CheckboxDriver({
-          renderTree,
-          testID
-        });
-
-        //@ts-ignore
-        checkboxRef.current.validate();
-        expect(onChangeValidity).not.toHaveBeenCalled();
-      });
-      it('should not been called after invoking validate() and value changed to true if required is false', async () => {
-        const props = {
-          onChangeValidity
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        checkboxRef.current?.validate();
-        await driver.press();
-        expect(onChangeValidity).not.toHaveBeenCalled();
-      });
-      it('should been called after invoking validate() and value changed to true', async () => {
-        const props = {
-          required: true,
-          onChangeValidity
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        checkboxRef.current?.validate();
-        await driver.press();
-        expect(onChangeValidity).toHaveBeenCalledWith(true);
-      });
-      it('should been called after invoking validate() and value changed to true and then false', async () => {
-        const props = {
-          required: true,
-          onChangeValidity
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        checkboxRef.current?.validate();
-        await driver.press();
-        await driver.press();
-        expect(onChangeValidity).toHaveBeenCalledWith(false);
-      });
-      it.each([false, true])('should return validity from validate function - initial %s', async initialValue => {
-        const props = {
-          required: true,
-          onChangeValidity,
-          value: initialValue
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        expect(checkboxRef.current?.validate()).toBe(initialValue);
-        await driver.press();
-        expect(checkboxRef.current?.validate()).toBe(!initialValue);
-      });
-    });
-    describe('isValid', () => {
-      it('should be valid if initial value is false', async () => {
-        const props = {};
-        const renderTree = render(<TestCase {...props} />);
-        //eslint-disable-next-line
-        CheckboxDriver({
-          renderTree,
-          testID
-        });
-        const isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(true);
-      });
-      it('should be valid if initial value is true', async () => {
-        const props = {
-          value: true
-        };
-        const renderTree = render(<TestCase {...props} />);
-        //eslint-disable-next-line
-        CheckboxDriver({
-          renderTree,
-          testID
-        });
-        const isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(true);
-      });
-      it('should be valid if initial value is true and is required', async () => {
-        const props = {
-          value: true,
-          required: true
-        };
-        const renderTree = render(<TestCase {...props} />);
-        //eslint-disable-next-line
-        CheckboxDriver({
-          renderTree,
-          testID
-        });
-        const isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(true);
-      });
-      it('should be invalid if initial value is false and is required', async () => {
-        const props = {
-          required: true
-        };
-        const renderTree = render(<TestCase {...props} />);
-        //eslint-disable-next-line
-        CheckboxDriver({
-          renderTree,
-          testID
-        });
-        const isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(false);
-      });
-      it('should be invalid after validate when initial value is false', async () => {
-        const props = {
-          required: true
-        };
-        const renderTree = render(<TestCase {...props} />);
-        //eslint-disable-next-line
-        CheckboxDriver({
-          renderTree,
-          testID
-        });
-        let isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(false);
-        checkboxRef.current?.validate();
-        isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(false);
-      });
-      it('should be valid after validate when initial value is true', async () => {
-        const props = {
-          value: true,
-          required: true
-        };
-        const renderTree = render(<TestCase {...props} />);
-        //eslint-disable-next-line
-        CheckboxDriver({
-          renderTree,
-          testID
-        });
-        let isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(true);
-        checkboxRef.current?.validate();
-        isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(true);
-      });
-      it('should be valid after validate and value changed to true', async () => {
-        const props = {
-          required: true
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        let isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(false);
-        checkboxRef.current?.validate();
-        await driver.press();
-        isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(true);
-      });
-      it('should be invalid after validate and value changed to false', async () => {
-        const props = {
-          value: true,
-          required: true
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        let isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(true);
-        checkboxRef.current?.validate();
-        await driver.press();
-        isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(false);
-      });
-      it('should be invalid after validate and value changed to true and then false', async () => {
-        const props = {
-          required: true
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        let isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(false);
-        checkboxRef.current?.validate();
-        await driver.press();
-        isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(true);
-        await driver.press();
-        isValid = checkboxRef.current?.isValid();
-        expect(isValid).toBe(false);
-      });
-    });
-    describe('label', () => {
-      it('should have passed label', async () => {
-        const text = 'Blue';
-        const props = {
-          label: text
-        };
-        const renderTree = render(<TestCase {...props} />);
-        const driver = CheckboxDriver({
-          renderTree,
-          testID
-        });
-        const label = driver.getLabel();
-        expect(label).toEqual(text);
-      });
-    });
-  });
-});

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

@@ -1,63 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ChipDriver } from "../chip.driver";
-import Chip from "../index";
-import Assets from "../../../assets";
-import { Colors } from "../../../style";
-const testID = 'test-chip';
-const getDriver = props => {
-  const renderTree = render(<Chip testID={testID} {...props} />);
-  return ChipDriver({
-    renderTree,
-    testID
-  });
-};
-describe('Chip', () => {
-  describe('sanity', () => {
-    it('should render Chip', () => {
-      const driver = getDriver();
-      expect(driver.exists()).toBeTruthy();
-      expect(driver.getIcon().exists()).toBeFalsy();
-      expect(driver.getLabel().exists()).toBeFalsy();
-      expect(driver.getDismissIcon().exists()).toBeFalsy();
-    });
-  });
-  describe('Label', () => {
-    it('should render label', () => {
-      const driver = getDriver({
-        label: 'test'
-      });
-      expect(driver.getLabel().exists()).toBeTruthy();
-      expect(driver.getLabel().getText()).toEqual('test');
-      expect(driver.getLabel().getStyle().color).toEqual(Colors.$textDefault);
-    });
-  });
-  describe('Dismiss Icon', () => {
-    it('should render dismiss icon', () => {
-      const driver = getDriver({
-        onDismiss: () => {}
-      });
-      expect(driver.getDismissIcon().exists()).toBeTruthy();
-      expect(driver.getDismissIcon().getStyle().tintColor).toEqual(Colors.$iconDefault);
-    });
-  });
-  describe('Icon', () => {
-    it('should render icon', () => {
-      const driver = getDriver({
-        iconSource: Assets.internal.icons.check
-      });
-      expect(driver.getIcon().exists()).toBeTruthy();
-      expect(driver.getIcon().getStyle().tintColor).toEqual(Colors.$iconDefault);
-    });
-  });
-  it('should render with label, icon and dismiss icon', () => {
-    const driver = getDriver({
-      label: 'test',
-      iconSource: Assets.internal.icons.check,
-      onDismiss: () => {}
-    });
-    expect(driver.getLabel().exists()).toBeTruthy();
-    expect(driver.getIcon().exists()).toBeTruthy();
-    expect(driver.getDismissIcon().exists()).toBeTruthy();
-  });
-});

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

@@ -1,41 +0,0 @@
-import _ from 'lodash';
-import {ConnectionStatusBar} from '../index';
-
-describe('ConnectionStatusBar', () => {
-  let uut;
-  beforeEach(() => {
-    uut = new ConnectionStatusBar({});
-    ConnectionStatusBar.unregisterGlobalOnConnectionLost();
-  });
-
-  describe('registerGlobalOnConnectionLost', () => {
-    it('should register a callback for when connection is lost', () => {
-      const callback = jest.fn();
-      expect(ConnectionStatusBar.onConnectionLost).toBe(undefined);
-      ConnectionStatusBar.registerGlobalOnConnectionLost(callback);
-      expect(ConnectionStatusBar.onConnectionLost).toBe(callback);
-      ConnectionStatusBar.unregisterGlobalOnConnectionLost();
-      expect(ConnectionStatusBar.onConnectionLost).toBe(undefined);
-    });
-
-    it('should call onConnectionLost callback when connection state changed from connected to disconnected', () => {
-      const callback = jest.fn();
-      ConnectionStatusBar.registerGlobalOnConnectionLost(callback);
-      _.set(uut, 'state.isConnected', true);
-
-      uut.onConnectionChange({type: 'none'});
-
-      expect(callback).toHaveBeenCalled();
-    });
-
-    it('should not call onConnectionLost callback when connection state changed from disconnected to connected', () => {
-      const callback = jest.fn();
-      ConnectionStatusBar.registerGlobalOnConnectionLost(callback);
-      _.set(uut, 'state.isConnected', false);
-
-      uut.onConnectionChange({type: 'wifi'});
-
-      expect(callback).not.toHaveBeenCalled();
-    });
-  });
-});

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

@@ -1,44 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import DateTimePicker from "../index";
-import { DateTimePickerDriver } from "../DateTimePicker.driver";
-const testID = 'dateTimePicker';
-const someDate = new Date('2021-04-04T00:00:00Z');
-const someDateNextDay = new Date(someDate.getTime() + 24 * 60 * 60 * 1000);
-const someDateNextHour = new Date(someDate.getTime() + 60 * 60 * 1000);
-const TestCase = props => {
-  const defaultProps = {
-    value: someDate,
-    testID
-  };
-  return <DateTimePicker {...defaultProps} {...props} />;
-};
-describe('DateTimePicker', () => {
-  test.each(['time', 'date'])('should invoke onChange when value is changed - mode %s', mode => {
-    const onChange = jest.fn();
-    const renderTree = render(<TestCase onChange={onChange} mode={mode} value={someDate} />);
-    expect(onChange).not.toHaveBeenCalled();
-    const driver = DateTimePickerDriver({
-      renderTree,
-      testID
-    });
-    driver.open();
-    const dateToChangeTo = mode === 'time' ? someDateNextHour : someDateNextDay;
-    driver.changeDateTo(dateToChangeTo);
-    expect(onChange).not.toHaveBeenCalled();
-    driver.select();
-    expect(onChange).toHaveBeenCalledWith(dateToChangeTo);
-  });
-  test.each(['time', 'date'])('should not invoke onChange when value is not changed - mode %s', mode => {
-    const onChange = jest.fn();
-    const renderTree = render(<TestCase onChange={onChange} mode={mode} />);
-    expect(onChange).not.toHaveBeenCalled();
-    const driver = DateTimePickerDriver({
-      renderTree,
-      testID
-    });
-    driver.open();
-    driver.select();
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});

package/src/components/dialog/__tests__/index.new.spec.js

@@ -1,118 +0,0 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { render, act } from '@testing-library/react-native';
-import Dialog from "../index";
-import { DialogDriver } from "../Dialog.driver.new";
-import View from "../../../components/view";
-import Button from "../../../components/button";
-import { ButtonDriver } from "../../../components/button/Button.driver.new";
-const testID = 'dialog';
-const TestCase1 = props => {
-  return <Dialog testID={testID} {...props} />;
-};
-const onDismiss = () => {};
-const defaultProps = {
-  testID: 'dialog',
-  useSafeArea: true,
-  onDismiss,
-  bottom: true,
-  centerH: true
-};
-const TestCase2 = props => {
-  const [visible, setVisible] = useState(props.visible);
-  useEffect(() => {
-    setVisible(props.visible);
-  }, [props.visible]);
-  const openDialog = useCallback(() => {
-    setVisible(true);
-  }, []);
-  const closeDialog = useCallback(() => {
-    setVisible(false);
-  }, []);
-  return <View>
-      <Dialog {...defaultProps} {...props} visible={visible}>
-        <View height={300}>
-          <Button testID={'closeButton'} flex onPress={closeDialog} />
-        </View>
-      </Dialog>
-      <Button testID={'openButton'} flex onPress={openDialog} />
-    </View>;
-};
-const getDriver = Element => {
-  const renderTree = render(Element);
-  const dialogDriver = DialogDriver({
-    renderTree,
-    testID
-  });
-  return {
-    renderTree,
-    dialogDriver
-  };
-};
-describe('Dialog sanity checks', () => {
-  it('Should show dialog', () => {
-    const {
-      dialogDriver
-    } = getDriver(<TestCase1 visible />);
-    expect(dialogDriver.isVisible()).toBeTruthy();
-  });
-  it('Should dismiss dialog on background press', () => {
-    const dismissFn = jest.fn();
-    const {
-      dialogDriver
-    } = getDriver(<TestCase1 visible onDismiss={dismissFn} />);
-    expect(dismissFn).not.toHaveBeenCalled();
-    expect(dialogDriver.isVisible()).toBeTruthy();
-    dialogDriver.pressOnBackground();
-    expect(dialogDriver.isVisible()).toBeFalsy();
-    expect(dismissFn).toHaveBeenCalledTimes(1);
-  });
-  it('Should dismiss dialog on dismiss call', () => {
-    let dialogRef;
-    const RefTestCase = () => {
-      dialogRef = useRef(null);
-      return <Dialog testID={testID} visible ref={dialogRef} />;
-    };
-    const {
-      dialogDriver
-    } = getDriver(<RefTestCase />);
-    expect(dialogDriver.isVisible()).toBeTruthy();
-    act(() => {
-      dialogRef.current?.dismiss();
-    });
-    expect(dialogDriver.isVisible()).toBeFalsy();
-  });
-  it('Should exist only if visible', () => {
-    const onDismiss = jest.fn();
-    const component = <TestCase2 onDismiss={onDismiss} />;
-    const {
-      dialogDriver,
-      renderTree
-    } = getDriver(component);
-    expect(dialogDriver.isVisible()).toBeFalsy();
-    const openButtonDriver = ButtonDriver({
-      renderTree,
-      testID: 'openButton'
-    });
-    openButtonDriver.press();
-    expect(dialogDriver.isVisible()).toBeTruthy();
-    expect(onDismiss).toHaveBeenCalledTimes(0);
-    const closeButtonDriver = ButtonDriver({
-      renderTree,
-      testID: 'closeButton'
-    });
-    closeButtonDriver.press();
-    expect(dialogDriver.isVisible()).toBeFalsy();
-    expect(onDismiss).toHaveBeenCalledTimes(1);
-  });
-
-  // Note: since RN73 modals do not render when not visible
-  it('Modal should not exists even when not visible (WOAUILIB-3606)', () => {
-    const onDismiss = jest.fn();
-    const component = <TestCase2 onDismiss={onDismiss} />;
-    const {
-      dialogDriver
-    } = getDriver(component);
-    expect(dialogDriver.exists()).toBeFalsy();
-    expect(dialogDriver.isVisible()).toBeFalsy();
-  });
-});

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

@@ -1,76 +0,0 @@
-import {updateConstants} from '../../../commons/Constants';
-import {FeatureHighlight} from '../index';
-
-describe('FeatureHighlight', () => {
-  beforeEach(() => {
-    mockScreenDimentions();
-  });
-
-  describe('getContentPosition', () => {
-    it('massage should be placed above element positioned below screen\'s vertical center', () => {
-      const uut = new FeatureHighlight({visible: true});
-      uut.state = {
-        contentTopPosition: 0
-      };
-      uut.targetPosition = {left: 0, top: 500, width: 80, height: 80};
-      uut.didLayout = true;
-      expect(uut.getContentPosition()).toEqual(218);
-    });
-    it('massage should be placed below element positioned above screen\'s vertical center', () => {
-      const uut = new FeatureHighlight({minimumRectSize: {width: 56, height: 56}, innerPadding: 10});
-      uut.state = {
-        contentTopPosition: 0
-      };
-      uut.targetPosition = {left: 0, top: 200, width: 20, height: 20};
-      uut.didLayout = true;
-      expect(uut.getContentPosition()).toEqual(243);
-    });
-    it('massage should be placed below element positioned above screen\'s vertical center', () => {
-      const uut = new FeatureHighlight({minimumRectSize: {width: 56, height: 56}, innerPadding: 10});
-      uut.state = {
-        contentTopPosition: 0
-      };
-      uut.targetPosition = {left: 0, top: 200, width: 80, height: 80};
-      uut.didLayout = true;
-      expect(uut.getContentPosition()).toEqual(290);
-    });
-  });
-
-  describe('setTargetPosition', () => {
-    it('targetPosition should be equal to component position', () => {
-      // Arrange
-      const mockTarget = {measureInWindow: jest.fn()};
-      const getTargetMock = jest.fn();
-      getTargetMock.mockReturnValue(mockTarget);
-      const uut = new FeatureHighlight({getTarget: getTargetMock});
-      jest.spyOn(FeatureHighlight, 'getDerivedStateFromProps');
-      jest.spyOn(FeatureHighlight, 'findTargetNode').mockImplementation(() => 23);
-      jest.spyOn(window, 'setTimeout');
-
-      jest.useFakeTimers();
-
-      // Act
-      FeatureHighlight.getDerivedStateFromProps({getTarget: getTargetMock});
-      uut.setTargetPosition({getTarget: getTargetMock});
-
-      // Assert
-      expect(FeatureHighlight.getDerivedStateFromProps).toHaveBeenCalledWith({getTarget: getTargetMock});
-      expect(mockTarget.measureInWindow).not.toBeCalled();
-      expect(FeatureHighlight.findTargetNode).toHaveBeenCalledWith(mockTarget);
-
-      jest.runAllTimers();
-
-      expect(setTimeout).toHaveBeenCalledTimes(1);
-      expect(mockTarget.measureInWindow).toBeCalled();
-    });
-  });
-});
-
-function mockScreenDimentions() {
-  // iPhone 8
-  const dimensions = {
-    screen: {height: 667, width: 375},
-    window: {height: 1000, width: 1000}
-  };
-  updateConstants(dimensions);
-}