react-native-ui-lib 8.0.1 → 8.1.0

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

@@ -0,0 +1,357 @@
+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

@@ -0,0 +1,63 @@
+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/colorSwatch/index.js

@@ -188,7 +188,7 @@ function createStyles({
     container: {
       backgroundColor: color,
       borderWidth: Colors.isTransparent(color) ? undefined : 1,
-      borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2),
+      borderColor: Colors.rgba(Colors.$outlineNeutralHeavy, 1),
       margin: SWATCH_MARGIN,
       overflow: 'hidden'
     },

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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,118 @@
+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();
+  });
+});