react-native-ui-lib 8.1.1 → 8.1.5

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

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

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

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

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

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

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

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