react-native-ui-lib 8.0.1 → 8.1.0

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

@@ -0,0 +1,364 @@
+import React, { useState } from 'react';
+import { act, render, waitFor, screen } from '@testing-library/react-native';
+import Picker from "../index";
+import { PickerDriver } from "../Picker.driver.new";
+const countries = [{
+  label: 'Israel',
+  value: 'IL'
+}, {
+  label: 'United States',
+  value: 'US'
+}, {
+  label: 'Germany',
+  value: 'DE'
+}, {
+  label: 'Italy',
+  value: 'IT'
+}, {
+  label: 'Spain',
+  value: 'ES '
+}];
+const testID = 'picker';
+const TestCase = props => {
+  const [value, setValue] = useState(props?.value);
+  return <Picker testID={testID} {...props} onChange={setValue} value={value}>
+      {countries.map(country => {
+      return <Picker.Item key={country.value} value={country.value} label={country.label} testID={country.label} />;
+    })}
+    </Picker>;
+};
+const getDriver = props => {
+  const renderTree = render(<TestCase {...props} />);
+  return PickerDriver({
+    renderTree,
+    testID
+  }, props?.useDialog);
+};
+const onPress = jest.fn();
+const onDismiss = jest.fn();
+const onShow = jest.fn();
+describe('Picker', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('Items', () => {
+    const testItems = [{
+      key: 'one',
+      value: 1,
+      label: 'One',
+      testID: 'item_one'
+    }, {
+      key: 'two',
+      value: 2,
+      label: 'Two',
+      testID: 'item_two'
+    }];
+    const testItemExists = TestCase => {
+      const renderTree = render(<TestCase />);
+      const driver = PickerDriver({
+        renderTree,
+        testID
+      }, false);
+      driver.open();
+      const item = driver.itemDriver(testItems[0].testID);
+      expect(item.exists()).toBeTruthy();
+    };
+    it('should render picker items when passing children', () => {
+      const TestCase = () => {
+        return <Picker testID={testID}>
+            <Picker.Item {...testItems[0]} />
+            <Picker.Item {...testItems[1]} />
+          </Picker>;
+      };
+      testItemExists(TestCase);
+    });
+    it('should render picker items when passing items', () => {
+      const TestCase = () => {
+        return <Picker testID={testID} items={testItems} />;
+      };
+      testItemExists(TestCase);
+    });
+    it('should render picker items with one option when passing one child', () => {
+      const TestCase = () => {
+        return <Picker testID={testID}>
+            <Picker.Item {...testItems[0]} />
+          </Picker>;
+      };
+      testItemExists(TestCase);
+    });
+    it('should render picker with one option when passing one item', () => {
+      const TestCase = () => {
+        return <Picker testID={testID} items={[testItems[0]]} />;
+      };
+      testItemExists(TestCase);
+    });
+  });
+  describe('Modal', () => {
+    describe('Test open', () => {
+      it('Should open when enabled', () => {
+        const driver = getDriver();
+        expect(driver.isOpen()).toBeFalsy();
+        driver.open();
+        expect(driver.isOpen()).toBeTruthy();
+      });
+      it('Should not open when disabled', () => {
+        const driver = getDriver({
+          editable: false
+        });
+        expect(driver.isOpen()).toBeFalsy();
+        driver.open();
+        expect(driver.isOpen()).toBeFalsy();
+      });
+    });
+    it('Test close', () => {
+      const driver = getDriver();
+      driver.open();
+      expect(driver.isOpen()).toBeTruthy();
+      driver.cancel();
+      expect(driver.isOpen()).toBeFalsy();
+    });
+    describe('Test value', () => {
+      it('Get correct value of a single item', () => {
+        const driver = getDriver({
+          value: countries[2].value
+        });
+        expect(driver.getValue()).toEqual(countries[2].label);
+      });
+      it('Get correct value of multiple selected items', () => {
+        const driver = getDriver({
+          value: [countries[2].value, countries[4].value]
+        });
+        expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
+      });
+    });
+    describe('Test selection', () => {
+      it('Should select a single item', () => {
+        const driver = getDriver();
+        expect(driver.getValue()).toEqual('');
+        driver.open();
+        expect(driver.isOpen()).toBeTruthy();
+        driver.selectItem(countries[2].label);
+        expect(driver.isOpen()).toBeFalsy();
+        expect(driver.getValue()).toEqual(countries[2].label);
+      });
+      it('Should select multiple items', () => {
+        const driver = getDriver({
+          mode: 'MULTI'
+        });
+        expect(driver.getValue()).toEqual('');
+        driver.open();
+        expect(driver.isOpen()).toBeTruthy();
+        driver.selectItem(countries[2].label);
+        driver.selectItem(countries[4].label);
+        driver.done();
+        expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
+      });
+    });
+    it('Test onPress', () => {
+      const driver = getDriver({
+        onPress
+      });
+      driver.open();
+      expect(onPress).toHaveBeenCalled();
+    });
+    describe('Test pickerModalProps', () => {
+      it('Test onDismiss', () => {
+        const driver = getDriver({
+          pickerModalProps: {
+            onDismiss
+          }
+        });
+        driver.open();
+        expect(driver.isOpen()).toBeTruthy();
+        driver.cancel();
+        expect(driver.isOpen()).toBeFalsy();
+        expect(onDismiss).toHaveBeenCalledTimes(2); // TODO: this should be 1
+      });
+
+      // TODO: this test is not passing yet
+      // The onShow function get's called when the Modal is fully opened, tried to use act and waitFor to wait for fully open but it didn't work
+      it.skip('Test onShow passed via pickerModalProps', async () => {
+        const driver = getDriver({
+          pickerModalProps: {
+            onShow
+          }
+        });
+        expect(driver.isOpen()).toBeFalsy();
+        jest.useFakeTimers();
+        expect(driver.isOpen()).toBeTruthy();
+        expect(onShow).toHaveBeenCalled();
+      });
+      describe('Test Modal TopBar', () => {
+        const modalProps = {
+          mode: 'MULTI',
+          topBarProps: {
+            cancelLabel: 'Cancel'
+          }
+        };
+        it('should close and select items when pressing on done button', () => {
+          const driver = getDriver(modalProps);
+          driver.open();
+          expect(driver.isOpen()).toBeTruthy();
+          driver.selectItem(countries[2].label);
+          driver.selectItem(countries[4].label);
+          driver.done();
+          expect(driver.isOpen()).toBeFalsy();
+          expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
+        });
+        it('should close without selecting items when pressing on cancel button', () => {
+          const driver = getDriver(modalProps);
+          driver.open();
+          expect(driver.isOpen()).toBeTruthy();
+          driver.selectItem(countries[2].label);
+          driver.selectItem(countries[4].label);
+          driver.cancel();
+          expect(driver.getValue()).toEqual(``);
+          expect(driver.isOpen()).toBeFalsy();
+        });
+      });
+    });
+  });
+  describe('Dialog', () => {
+    const dialogProps = {
+      useDialog: true
+    };
+    describe('Test value', () => {
+      it('Get correct value of a single item', () => {
+        const driver = getDriver({
+          ...dialogProps,
+          value: countries[2].value
+        });
+        expect(driver.getValue()).toEqual(countries[2].label);
+      });
+      it('Get correct value of multiple selected items', () => {
+        const driver = getDriver({
+          ...dialogProps,
+          value: [countries[2].value, countries[4].value]
+        });
+        expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
+      });
+    });
+    describe('Test open/close', () => {
+      it('Should open when enabled', async () => {
+        const driver = getDriver(dialogProps);
+        expect(driver.isOpen()).toBeFalsy();
+        jest.useFakeTimers();
+        act(() => driver.open());
+        jest.runAllTimers();
+        await waitFor(() => expect(driver.isOpen()).toBeTruthy());
+      });
+      it('Should not open when disabled', () => {
+        const driver = getDriver({
+          ...dialogProps,
+          editable: false
+        });
+        expect(driver.isOpen()).toBeFalsy();
+        driver.open();
+        expect(driver.isOpen()).toBeFalsy();
+      });
+      it('Test close', async () => {
+        const driver = getDriver(dialogProps);
+        expect(driver.isOpen()).toBeFalsy();
+        act(() => driver.open());
+        await waitFor(() => expect(driver.isOpen()).toBeTruthy());
+        act(() => driver.dismissDialog());
+        await waitFor(() => expect(driver.isOpen()).toBeFalsy());
+      });
+    });
+    describe('Test selection', () => {
+      it('Should select a single item', async () => {
+        const driver = getDriver(dialogProps);
+        expect(driver.getValue()).toEqual('');
+        act(() => driver.open());
+        await waitFor(() => expect(driver.isOpen()).toBeTruthy());
+        driver.selectItem(countries[2].label);
+        await waitFor(() => expect(driver.isOpen()).toBeFalsy());
+        expect(driver.getValue()).toEqual(countries[2].label);
+      });
+      it('Should select multiple items', async () => {
+        const driver = getDriver({
+          ...dialogProps,
+          mode: 'MULTI'
+        });
+        expect(driver.getValue()).toEqual('');
+        expect(driver.isOpen()).toBeFalsy();
+        act(() => driver.open());
+        await waitFor(() => expect(driver.isOpen()).toBeTruthy());
+        driver.selectItem(countries[2].label);
+        driver.selectItem(countries[4].label);
+        driver.done();
+        await waitFor(() => expect(driver.isOpen()).toBeFalsy());
+        expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
+      });
+    });
+    it('Test onDismiss', async () => {
+      const driver = getDriver({
+        ...dialogProps,
+        customPickerProps: {
+          dialogProps: {
+            onDismiss
+          }
+        }
+      });
+      expect(driver.isOpen()).toBeFalsy();
+      act(() => driver.open());
+      await waitFor(() => expect(driver.isOpen()).toBeTruthy());
+      act(() => driver.dismissDialog());
+      await waitFor(() => expect(driver.isOpen()).toBeFalsy());
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // TODO: add tests for WheelPicker
+  // Note: the picker dialog should be opened and then the wheel picker should be rendered, this is the main issue with testing it for now
+  // describe.skip('WheelPicker', () => {
+  // });
+
+  //TODO: add more tests for different props
+  describe('Picker field types', () => {
+    describe('Test filter field type', () => {
+      const placeholderText = 'Select a Filter';
+      it('should render a filter picker', () => {
+        const driver = getDriver({
+          fieldType: 'filter',
+          placeholder: placeholderText
+        });
+        expect(driver.isOpen()).toBeFalsy();
+        const label = screen.getByTestId(`${testID}.filter.type.label`);
+        expect(label).toBeTruthy();
+        expect(label.props.children).toEqual(placeholderText);
+      });
+    });
+    describe('Test settings field type', () => {
+      const labelText = 'Settings';
+      const placeholderText = 'Select a setting';
+      it('should render a settings picker with label', async () => {
+        const driver = getDriver({
+          fieldType: 'settings',
+          label: labelText,
+          placeholder: placeholderText
+        });
+        const label = screen.getByTestId(`${testID}.settings.type.label`);
+        const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`);
+        expect(driver.isOpen()).toBeFalsy();
+        expect(label).toBeTruthy();
+        expect(placeholder).toBeTruthy();
+        expect(label.props.children).toEqual(labelText);
+        expect(placeholder.props.children).toEqual(placeholderText);
+      });
+      it('should render a settings picker with placeholder', async () => {
+        const driver = getDriver({
+          fieldType: 'settings',
+          placeholder: placeholderText
+        });
+        const label = screen.getByTestId(`${testID}.settings.type.label`);
+        const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`);
+        expect(driver.isOpen()).toBeFalsy();
+        expect(label).toBeTruthy();
+        expect(placeholder).toBeTruthy();
+        expect(label.props.children).toEqual(placeholderText);
+        expect(placeholder.props.children).toEqual(placeholderText);
+      });
+    });
+  });
+});

package/src/components/picker/helpers/__tests__/usePickerLabel.spec.js

@@ -0,0 +1,96 @@
+import { renderHook } from '@testing-library/react-hooks';
+import usePickerLabel from "../usePickerLabel";
+const colors = [{
+  value: 'red',
+  label: 'Red'
+}, {
+  value: 'green',
+  label: 'Green',
+  listItemProps: {
+    subtitle: 'Subtitle'
+  }
+}, {
+  value: 'blue',
+  label: 'Blue',
+  listItemProps: {
+    subtitleLines: 2,
+    subtitle: 'Subtitle with\n2 lines of text'
+  }
+}, {
+  value: 'purple',
+  label: 'Purple',
+  disabled: true
+}, {
+  value: 'yellow',
+  label: 'Yellow'
+}, {
+  value: 'grey',
+  label: 'Grey'
+}];
+describe('usePickerLabel hook tests', () => {
+  const makeSUT = ({
+    value,
+    items,
+    getLabel
+    // accessibilityLabel,
+    // accessibilityHint,
+    // placeholder
+  }) => {
+    return renderHook(() => usePickerLabel({
+      value,
+      items,
+      getLabel
+      // accessibilityLabel,
+      // accessibilityHint,
+      // placeholder
+    }));
+  };
+  it('expect label to equal an empty string when value is undefined', () => {
+    const sut = makeSUT({
+      items: colors,
+      value: undefined,
+      getLabel: undefined
+    });
+    expect(sut.result.current.label).toEqual('');
+  });
+  it('expect label to equal an empty string when value is null', () => {
+    const sut = makeSUT({
+      items: colors,
+      value: null,
+      getLabel: undefined
+    });
+    expect(sut.result.current.label).toEqual('');
+  });
+  it('expect label to equal returned string when getLabel passed', () => {
+    const sut = makeSUT({
+      items: colors,
+      value: null,
+      getLabel: () => 'Some label'
+    });
+    expect(sut.result.current.label).toEqual('Some label');
+  });
+  it('expect label to equal array of values when value is array', () => {
+    const sut = makeSUT({
+      items: colors,
+      value: ['red', 'green'],
+      getLabel: undefined
+    });
+    expect(sut.result.current.label).toEqual('Red, Green');
+  });
+  it('expect label to equal selected item label when value equals item value', () => {
+    const sut = makeSUT({
+      items: colors,
+      value: 'red',
+      getLabel: undefined
+    });
+    expect(sut.result.current.label).toEqual('Red');
+  });
+  it('expect label to equal empty string when no items passed', () => {
+    const sut = makeSUT({
+      items: undefined,
+      value: 'Some string',
+      getLabel: undefined
+    });
+    expect(sut.result.current.label).toEqual('');
+  });
+});

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { RadioButtonDriver } from "../RadioButton.driver";
+import { Assets, RadioButton } from "../../../index";
+const testID = 'checkbox';
+const TestCase = props => {
+  return <RadioButton {...props} testID={testID} />;
+};
+describe('RadioButton renderer test', () => {
+  afterEach(() => RadioButtonDriver.clear());
+  it('should render a RadioButton', async () => {
+    const component = <TestCase />;
+    const driver = new RadioButtonDriver({
+      component,
+      testID
+    });
+    expect(await driver.exists()).toBeTruthy();
+  });
+  it('should render a RadioButton with label', async () => {
+    const component = <TestCase label={'test'} />;
+    const driver = new RadioButtonDriver({
+      component,
+      testID
+    });
+    expect(await driver.hasLabel()).toBeTruthy();
+  });
+  it('should render a RadioButton with icon', async () => {
+    const component = <TestCase iconSource={Assets.internal.icons.x} />;
+    const driver = new RadioButtonDriver({
+      component,
+      testID
+    });
+    expect(await driver.hasIcon()).toBeTruthy();
+  });
+  it('should render a RadioButton with label and icon', async () => {
+    const component = <TestCase label={'test'} iconSource={Assets.internal.icons.x} />;
+    const driver = new RadioButtonDriver({
+      component,
+      testID
+    });
+    expect(await driver.hasLabel()).toBeTruthy();
+    expect(await driver.hasIcon()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import RadioGroup from "../index";
+import RadioButton from "../../radioButton/index";
+import { RadioGroupDriver } from "../RadioGroup.driver";
+const testID = 'radioGroup';
+const testIDs = {
+  radioButtonUp: 'radioButtonUp',
+  radioButtonDown: 'radioButtonDown',
+  radioButtonLeft: 'radioButtonLeft',
+  radioButtonRight: 'radioButtonRight'
+};
+const onValueChangeMock = jest.fn();
+const RadioGroupTestComponent = props => {
+  const {
+    shouldDisable,
+    ...others
+  } = props;
+  return <RadioGroup {...others} onValueChange={onValueChangeMock} testID={testID}>
+      <RadioButton value={'up'} label={'Up'} disabled={shouldDisable} testID={testIDs.radioButtonUp} />
+      <RadioButton value={'down'} label={'Down'} testID={testIDs.radioButtonDown} />
+      <RadioButton value={'left'} label={'Left'} testID={testIDs.radioButtonLeft} />
+      <RadioButton value={'right'} label={'Right'} testID={testIDs.radioButtonRight} />
+    </RadioGroup>;
+};
+describe('RadioGroup renderer test', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  afterEach(() => RadioGroupDriver.clear());
+  it('Press on radio button', async () => {
+    const props = {
+      onValueChangeMock
+    };
+    const component = <RadioGroupTestComponent {...props} />;
+    const driver = new RadioGroupDriver({
+      component,
+      testID,
+      testIDs
+    });
+    await driver.pressOn(testIDs.radioButtonUp);
+    expect(onValueChangeMock).toHaveBeenCalledTimes(1);
+    expect(onValueChangeMock).toHaveBeenCalledWith('up');
+  });
+  it('Press on disabled radio button', async () => {
+    const props = {
+      onValueChangeMock,
+      shouldDisable: true
+    };
+    const component = <RadioGroupTestComponent {...props} />;
+    const driver = new RadioGroupDriver({
+      component,
+      testID,
+      testIDs
+    });
+    await driver.pressOn(testIDs.radioButtonUp);
+    expect(onValueChangeMock).not.toHaveBeenCalled();
+  });
+  it('Press on selected radio button', async () => {
+    const props = {
+      onValueChangeMock,
+      initialValue: 'up'
+    };
+    const component = <RadioGroupTestComponent {...props} />;
+    const driver = new RadioGroupDriver({
+      component,
+      testID,
+      testIDs
+    });
+    await driver.pressOn(testIDs.radioButtonUp);
+    expect(onValueChangeMock).toHaveBeenCalledTimes(1);
+    expect(onValueChangeMock).toHaveBeenCalledWith('up');
+  });
+  it('Press multiple radio buttons', async () => {
+    const props = {
+      onValueChangeMock
+    };
+    const component = <RadioGroupTestComponent {...props} />;
+    const driver = new RadioGroupDriver({
+      component,
+      testID,
+      testIDs
+    });
+    await driver.pressOn(testIDs.radioButtonUp);
+    expect(onValueChangeMock).toHaveBeenCalledTimes(1);
+    expect(onValueChangeMock).toHaveBeenCalledWith('up');
+    await driver.pressOn(testIDs.radioButtonDown);
+    expect(onValueChangeMock).toHaveBeenCalledTimes(2);
+    expect(onValueChangeMock.mock.calls).toEqual([['up'], ['down']]);
+    await driver.pressOn(testIDs.radioButtonLeft);
+    expect(onValueChangeMock).toHaveBeenCalledTimes(3);
+    expect(onValueChangeMock.mock.calls).toEqual([['up'], ['down'], ['left']]);
+    await driver.pressOn(testIDs.radioButtonRight);
+    expect(onValueChangeMock).toHaveBeenCalledTimes(4);
+    expect(onValueChangeMock.mock.calls).toEqual([['up'], ['down'], ['left'], ['right']]);
+  });
+});

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

@@ -0,0 +1,35 @@
+import _map from "lodash/map";
+import React from 'react';
+import SectionsWheelPicker from "../index";
+import { render } from '@testing-library/react-native';
+import { SectionsWheelPickerDriver } from "../SectionsWheelPicker.driver";
+import { sections, labels } from "./mockSections";
+const testID = 'sectionsWheel';
+const onChange = jest.fn();
+const TestCase = props => {
+  return <SectionsWheelPicker testID={testID} numberOfVisibleRows={4} sections={sections} {...props} />;
+};
+describe('SectionsWheelPicker', () => {
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+  it('should present 3 sections', () => {
+    const renderTree = render(<TestCase />);
+    const driver = SectionsWheelPickerDriver({
+      renderTree,
+      testID
+    });
+    expect(driver.sectionsDrivers.length).toBe(3);
+  });
+  it('should have 3 labels', () => {
+    const renderTree = render(<TestCase />);
+    const driver = SectionsWheelPickerDriver({
+      renderTree,
+      testID
+    });
+    const sectionsDrivers = driver.sectionsDrivers;
+    _map(sectionsDrivers, (sectionDriver, index) => {
+      expect(sectionDriver.getLabel()).toBe(labels[index]);
+    });
+  });
+});

package/src/components/sectionsWheelPicker/__tests__/mockSections.js

@@ -0,0 +1,28 @@
+import _map from "lodash/map";
+import _times from "lodash/times";
+export const labels = ['Days', 'Hrs', 'Mins'];
+const DAYS = _times(10, i => i);
+const HOURS = _times(24, i => i);
+const MINUTES = _times(60, i => i);
+const getItems = values => {
+  return _map(values, item => ({
+    label: '' + item,
+    value: item
+  }));
+};
+const onDaysChange = jest.fn();
+const onHoursChange = jest.fn();
+const onMinutesChange = jest.fn();
+export const sections = [{
+  items: getItems(DAYS),
+  onChange: onDaysChange,
+  label: labels[0]
+}, {
+  items: getItems(HOURS),
+  onChange: onHoursChange,
+  label: labels[1]
+}, {
+  items: getItems(MINUTES),
+  onChange: onMinutesChange,
+  label: labels[2]
+}];

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import SegmentedControl from "../index";
+const testSegmentes = [{
+  label: 'Segmented 1'
+}, {
+  label: 'Segmented 2'
+}, {
+  label: 'Segmented 3'
+}, {
+  label: 'Segmented 4'
+}];
+const TestCase = props => {
+  return <SegmentedControl segments={testSegmentes} {...props} />;
+};
+describe('SegmentedControl', () => {
+  it('should render', () => {
+    const renderTree = render(<TestCase />);
+    expect(renderTree).toBeTruthy();
+  });
+  it('should render with a label', () => {
+    const renderTree = render(<TestCase label="Test Label" />);
+    expect(renderTree.queryByText('Test Label')).toBeTruthy();
+  });
+});