react-native-ui-lib 8.0.1 → 8.1.0

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

@@ -0,0 +1,121 @@
+import _times from "lodash/times";
+import React from 'react';
+import { render /* , act, waitFor */ } from '@testing-library/react-native';
+import { Colors } from "../../../style";
+import WheelPicker from "../index";
+import { WheelPickerDriver } from "../WheelPicker.driver";
+import { WheelPickerItemDriver } from "../WheelPickerItem.driver";
+const ITEM_HEIGHT = 50;
+const NUM_OF_ROWS = 10;
+const testID = 'wheel';
+const onChange = jest.fn();
+const TestCase = props => {
+  return <WheelPicker testID={testID} items={_times(60, i => i).map(item => ({
+    label: `item #${item}`,
+    value: item,
+    testID: `${item}`
+  }))} initialValue={0} onChange={onChange} numberOfVisibleRows={NUM_OF_ROWS} itemHeight={ITEM_HEIGHT} activeTextColor={Colors.red30} inactiveTextColor={Colors.blue30} {...props} />;
+};
+describe('WheelPicker', () => {
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+  describe('FlatList', () => {
+    it('should present $NUM_OF_ROWS rows', () => {
+      const renderTree = render(<TestCase />);
+      const driver = WheelPickerDriver({
+        renderTree,
+        testID
+      });
+      expect(driver.getListHeight()).toBe(NUM_OF_ROWS * ITEM_HEIGHT);
+    });
+    it('should call onChange after scrolling ends with default itemHeight and numberOfRows', () => {
+      const props = {
+        itemHeight: undefined,
+        numberOfVisibleRows: undefined
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const driver = WheelPickerDriver({
+        renderTree,
+        testID
+      });
+      driver.moveToItem(4);
+      expect(onChange).toHaveBeenCalledWith(4, 4);
+      driver.moveToItem(7);
+      expect(onChange).toHaveBeenCalledWith(7, 7);
+    });
+    it('should call onChange after scrolling ends', () => {
+      const renderTree = render(<TestCase />);
+      const driver = WheelPickerDriver({
+        renderTree,
+        testID
+      });
+      driver.moveToItem(4, ITEM_HEIGHT);
+      expect(onChange).toHaveBeenCalledWith(4, 4);
+      driver.moveToItem(7, ITEM_HEIGHT);
+      expect(onChange).toHaveBeenCalledWith(7, 7);
+    });
+  });
+  describe('initialValue', () => {
+    it('should not call onChange when initialValue is updated', () => {
+      const renderTree = render(<TestCase />);
+      renderTree.rerender(<TestCase initialValue={2} />);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+  describe('label', () => {
+    it('should return label', () => {
+      const label = 'Hours';
+      const renderTree = render(<TestCase label={label} />);
+      const driver = WheelPickerDriver({
+        renderTree,
+        testID
+      });
+      expect(driver.getLabel()).toEqual(label);
+    });
+  });
+  describe('PickerItem', () => {
+    it('should get first item\'s label', () => {
+      const renderTree = render(<TestCase />);
+      const index = 0;
+      const driver = WheelPickerItemDriver({
+        renderTree,
+        testID: `${index}`
+      });
+      expect(driver.getLabel()).toEqual('item #0');
+    });
+    it('should get first item\'s text style when no active/inactive colors', () => {
+      const renderTree = render(<TestCase textStyle={{
+        color: Colors.green30
+      }} />);
+      const index = 0;
+      const driver = WheelPickerItemDriver({
+        renderTree,
+        testID: `${index}`
+      });
+      expect(driver.getLabelStyle()?.color).toEqual(Colors.green30);
+    });
+
+    //TODO: Fix these test's using AnimatedStyle mocking
+    // it('should call onChange after second item is pressed', async () => {
+    //   const renderTree = render(<TestCase/>);
+    //   const index = 1;
+    //   const driver = WheelPickerItemDriver({renderTree, testID: `${index}`});
+
+    //   driver.press();
+
+    //   expect(await onChange).toHaveBeenCalledTimes(1);
+    //   expect(onChange).toHaveBeenCalledWith(1);
+    // });
+
+    // it('should not call onChange after first item is pressed', async () => {
+    //   const renderTree = render(<TestCase/>);
+    //   const index = 0;
+    //   const driver = WheelPickerItemDriver({renderTree, testID: `${index}`});
+
+    //   driver.press();
+
+    //   expect(onChange).not.toHaveBeenCalledTimes(1);
+    // });
+  });
+});

package/src/components/WheelPicker/__tests__/useListMiddleIndex.spec.js

@@ -0,0 +1,40 @@
+import useMiddleIndex from '../helpers/useListMiddleIndex';
+
+describe('Finds list\'s middle index', () => {
+  
+  it('When list is at offset 0, it should return the index of the first item', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    const offset = 0;
+    expect(sut(offset)).toEqual(0);
+  });
+
+  it('When list is at offset 100, it means we are at passed on 2 items', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    const offset = 100;
+    expect(sut(offset)).toEqual(2);
+  });
+
+  it('Make sure calculation changes on the middle of the item height', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    let offset = 24;
+    expect(sut(offset)).toEqual(0);
+
+    offset = 26;
+    expect(sut(offset)).toEqual(1);
+  });
+
+  it('Make sure calculation does not exceeds the number of items', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    let offset = 501;
+    expect(sut(offset)).toEqual(9);
+
+    offset = 600;
+    expect(sut(offset)).toEqual(9);
+  });
+
+  it('Make sure calculation does not less then 0', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    const offset = -100;
+    expect(sut(offset)).toEqual(0);
+  });
+});

package/src/components/WheelPicker/__tests__/usePresenter.spec.js

@@ -0,0 +1,87 @@
+import usePresenter from '../usePresenter';
+import {renderHook} from '@testing-library/react-hooks';
+
+describe('WheelPicker presenter tests', () => {
+  jest.spyOn(global.console, 'warn');
+
+  const makeSUT = ({items = makeItems(9), children, initialValue, itemHeight = 10, preferredNumVisibleRows = 20}) => {
+    return renderHook(() =>
+      usePresenter({
+        items,
+        children,
+        initialValue,
+        itemHeight,
+        preferredNumVisibleRows
+      }));
+  };
+
+  const makeItems = (count, stringValue) => {
+    const items = [];
+    while (count >= items.length) {
+      const someData = stringValue ? stringValue + items.length : items.length;
+      const item = {value: someData, label: someData};
+      items.push(item);
+    }
+    return items;
+  };
+
+  it('expect height of the content-view to be itemHeight * preferredNumVisibleRows', () => {
+    let sut = makeSUT({items: makeItems(44), itemHeight: 10, preferredNumVisibleRows: 5});
+    expect(sut.result.current.height).toEqual(50);
+
+    sut = makeSUT({items: makeItems(10), itemHeight: 20, preferredNumVisibleRows: 3});
+    expect(sut.result.current.height).toEqual(60);
+
+    sut = makeSUT({items: makeItems(10), itemHeight: 0, preferredNumVisibleRows: 0});
+    expect(sut.result.current.height).toEqual(0);
+  });
+
+  it('Expect to find items by their string types', () => {
+    let sut = makeSUT({items: makeItems(15, 'a'), initialValue: 'a2'});
+    expect(sut.result.current.index).toEqual(2);
+
+    sut = makeSUT({items: makeItems(100, 'bbb'), initialValue: 'bbb71'});
+    expect(sut.result.current.index).toEqual(71);
+
+    // no data found
+    sut = makeSUT({items: makeItems(10, 'b'), initialValue: '$$$'});
+    expect(sut.result.current.index).toEqual(-1);
+  });
+
+  it('Expect to find items by their number types', () => {
+    let sut = makeSUT({items: makeItems(11), initialValue: 0});
+    expect(sut.result.current.index).toEqual(0);
+
+    sut = makeSUT({items: makeItems(8), initialValue: 4});
+    expect(sut.result.current.index).toEqual(4);
+
+    sut = makeSUT({items: makeItems(18), initialValue: 18});
+    expect(sut.result.current.index).toEqual(18);
+
+    sut = makeSUT({items: makeItems(18), initialValue: 99});
+    expect(sut.result.current.index).toEqual(-1);
+
+    sut = makeSUT({items: makeItems(0), initialValue: 99});
+    expect(sut.result.current.index).toEqual(-1);
+
+    sut = makeSUT({items: makeItems(0), initialValue: 0});
+    expect(sut.result.current.index).toEqual(0);
+  });
+
+  it('Expect to find items by their object of {value, label} types', () => {
+    const {result} = makeSUT({items: makeItems(15, 'b'), initialValue: {value: 'b6', label: 'abc'}});
+    expect(result.current.index).toEqual(6);
+    expect(console.warn).toHaveBeenCalledWith('UILib WheelPicker will stop supporting initialValue prop type as an object (ItemProps). Please pass string or number only');
+  });
+
+  it('Expect getRowItemAtOffset to return the right row for offset', () => {
+    let sut = makeSUT({initialValue: 2, itemHeight: 100});
+
+    let offset = 300;
+    expect(sut.result.current.getRowItemAtOffset(offset).value).toEqual(3);
+
+    sut = makeSUT({initialValue: 0, itemHeight: 100});
+    offset = 0;
+    expect(sut.result.current.getRowItemAtOffset(offset).value).toEqual(0);
+  });
+});

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {render} from '@testing-library/react-native';
+import {Avatar} from '../index';
+
+function verifyBadgeSize(renderTree, expectedSize) {
+  const badge = renderTree.getByTestId('avatar.onlineBadge');
+  const style = StyleSheet.flatten(badge.props.style);
+  expect(style.width).toEqual(expectedSize);
+  expect(style.height).toEqual(expectedSize);
+}
+
+describe('Avatar Badge', () => {
+  describe('badgeProps.size supports number', () => {
+    it('should return 99 as the size number given', () => {
+      const renderTree = render(<Avatar testID={'avatar'} badgeProps={{size: 99}}/>);
+      verifyBadgeSize(renderTree, 99);
+    });
+
+    it('should return default when passing 0 as size', () => {
+      const renderTree = render(<Avatar testID={'avatar'} badgeProps={{size: 0}}/>);
+      verifyBadgeSize(renderTree, 10);
+    });
+  });
+});

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

@@ -0,0 +1,84 @@
+import {Badge} from '../index';
+
+describe('Badge', () => {
+  describe('Badge Label', () => {
+    it('Should return the label sent (unformatted)', () => {
+      const uut = new Badge({label: '10'});
+      expect(uut.getFormattedLabel()).toEqual('10');
+    });
+    it('Should return original label if it is NaN (string) ', () => {
+      const uut = new Badge({label: 'a'});
+      expect(uut.getFormattedLabel()).toEqual('a');
+    });
+    it('Should return original label if it is NaN (number with +) ', () => {
+      const uut = new Badge({label: '99+'});
+      expect(uut.getFormattedLabel()).toEqual('99+');
+    });
+    it('Should return formatted label according to given labelFormatterLimit prop (1) ', () => {
+      const uut = new Badge({label: '10000', labelFormatterLimit: 1});
+      expect(uut.getFormattedLabel()).toEqual('9+');
+    });
+    it('Should return formatted label according to given labelFormatterLimit prop (2) ', () => {
+      const uut = new Badge({label: '10000', labelFormatterLimit: 2});
+      expect(uut.getFormattedLabel()).toEqual('99+');
+    });
+    it('Should return formatted label according to given labelFormatterLimit prop (3) ', () => {
+      const uut = new Badge({label: '10000', labelFormatterLimit: 3});
+      expect(uut.getFormattedLabel()).toEqual('999+');
+    });
+    it('Should return formatted label according to given labelFormatterLimit prop (4) ', () => {
+      const uut = new Badge({label: '10000', labelFormatterLimit: 4});
+      expect(uut.getFormattedLabel()).toEqual('9999+');
+    });
+    it('Should not format label if it is not larger than maxLabelNumber', () => {
+      const uut = new Badge({label: '999', labelFormatterLimit: 3});
+      expect(uut.getFormattedLabel()).toEqual('999');
+    });
+    it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => {
+      const uut = new Badge({label: '9', labelFormatterLimit: 'a'});
+      expect(uut.getFormattedLabel()).toEqual('9');
+    });
+    it('Should return original label when label is NaN and labelFormatterLimit prop is valid ', () => {
+      const uut = new Badge({label: 'a', labelFormatterLimit: 3});
+      expect(uut.getFormattedLabel()).toEqual('a');
+    });
+    it('Should return original label when labelFormatterLimit prop is undefined', () => {
+      const uut = new Badge({label: '9', labelFormatterLimit: undefined});
+      expect(uut.getFormattedLabel()).toEqual('9');
+    });
+    it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => {
+      const uut = new Badge({label: '9', labelFormatterLimit: 5});
+      expect(uut.getFormattedLabel()).toEqual('9');
+    });
+    it('Should return original label when labelFormatterLimit prop is not included in LABEL_FORMATTER_VALUES array', () => {
+      const uut = new Badge({label: '9', labelFormatterLimit: 0});
+      expect(uut.getFormattedLabel()).toEqual('9');
+    });
+  });
+
+  describe('Badge Size', () => {
+    it('Should return pimple badge when no size and no label passed', () => {
+      const uut = new Badge({});
+      console.log(`uut.size`, uut.size);
+      expect(uut.size).toEqual(10);
+    });
+
+    it('Should return pimple badge when no label  and size undefined', () => {
+      const uut = new Badge({label: undefined, size: undefined});
+      console.log(`uut.size`, uut.size);
+      expect(uut.size).toEqual(10);
+    });
+
+    it('Shouldn\'t return pimple badge when label is undefined and size passed', () => {
+      const uut = new Badge({label: undefined, size: 20});
+      console.log(`uut.size`, uut.size);
+      expect(uut.size).toEqual(20);
+    });
+
+    it('Should return size when label is empty string', () => {
+      const uut = new Badge({label: '', size: 20});
+      console.log(`uut.size`, uut.size);
+      expect(uut.size).toEqual(20);
+    });
+  });
+});

package/src/components/button/__tests__/index.driver.spec.js

@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+import { waitFor, render } from '@testing-library/react-native';
+import View from "../../view";
+import Text from "../../text";
+import { TextDriver } from "../../text/Text.driver.new";
+import { ButtonDriver } from "../Button.driver.new";
+import Button from "../index";
+const BUTTON_ID = 'button_test_id';
+const CHILDREN_TEXT_ID = 'children_test_id';
+const CHILDREN_TEXT = 'custom button text';
+
+// TODO: This tests are flaky and only fail on CI - we should investigate why
+describe('Button', () => {
+  it('should render a button', async () => {
+    const renderTree = render(<WrapperScreenWithButton />);
+    const buttonDriver = ButtonDriver({
+      renderTree,
+      testID: 'button_test_id'
+    });
+    expect(await buttonDriver.exists()).toBeTruthy();
+  });
+  describe('style', () => {
+    it('should render a button with custom style', async () => {
+      const style = {
+        borderWidth: 2,
+        borderColor: 'green'
+      };
+      const renderTree = render(<WrapperScreenWithButton style={style} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      expect(buttonDriver.exists()).toBeTruthy();
+      expect(await buttonDriver.getStyle().borderWidth).toEqual(style.borderWidth);
+      expect(await buttonDriver.getStyle().borderColor).toEqual(style.borderColor);
+    });
+  });
+  describe('custom button', () => {
+    it('should render a custom button', async () => {
+      const renderTree = render(<WrapperScreenWithCustomButton />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      expect(buttonDriver.exists()).toBeTruthy();
+    });
+    it('should render the children with correct text', async () => {
+      const renderTree = render(<WrapperScreenWithCustomButton />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      expect(buttonDriver.exists()).toBeTruthy();
+      const childrenTextDriver = TextDriver({
+        renderTree,
+        testID: CHILDREN_TEXT_ID
+      });
+      expect(await childrenTextDriver.getText()).toEqual(CHILDREN_TEXT);
+    });
+  });
+  describe('onPress', () => {
+    let onPressCallback;
+    beforeEach(() => onPressCallback = jest.fn());
+    afterEach(() => onPressCallback.mockClear());
+    it('should trigger onPress callback', async () => {
+      const props = {
+        onPress: onPressCallback
+      };
+      const renderTree = render(<WrapperScreenWithButton {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      buttonDriver.press();
+      await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
+    });
+    it('should not trigger onPress callback if button disabled', async () => {
+      const props = {
+        disabled: true,
+        onPress: onPressCallback
+      };
+      const renderTree = render(<WrapperScreenWithButton {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      buttonDriver.press();
+      await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(0));
+    });
+    it.each([true, false])(`button should be disabled when disabled is %s`, disabled => {
+      const renderTree = render(<WrapperScreenWithButton disabled={disabled} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      expect(buttonDriver.isDisabled()).toBe(disabled);
+    });
+  });
+  describe('label', () => {
+    const LABEL = 'mock label';
+    it('should render a button with correct content', async () => {
+      const props = {
+        label: LABEL
+      };
+      const renderTree = render(<WrapperScreenWithButton {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      expect(await buttonDriver.getLabel().getText()).toEqual(LABEL);
+    });
+    it('should render a button with correct label content. ', async () => {
+      const props = {
+        label: LABEL
+      };
+      const renderTree = render(<WrapperScreenWithButton {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      expect(await buttonDriver.getLabel().getText()).toEqual(LABEL);
+    });
+    it('should render a button without label. ', async () => {
+      const renderTree = render(<WrapperScreenWithButton />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      expect(await buttonDriver.getLabel().exists()).toBeFalsy();
+    });
+  });
+  describe('icon', () => {
+    it('should render a button without an icon. ', async () => {
+      const renderTree = render(<WrapperScreenWithButton />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      expect(await buttonDriver.getIcon().exists()).toBeFalsy();
+    });
+    it('should render a button with icon. ', async () => {
+      const ICON = 12;
+      const props = {
+        iconSource: ICON
+      };
+      const renderTree = render(<WrapperScreenWithButton {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: 'button_test_id'
+      });
+      expect(await buttonDriver.getIcon().exists()).toBeTruthy();
+    });
+  });
+  describe('more complicated screen', () => {
+    //todo take it out of this file. to the demo screens maybe
+    it('should change text values according to state changes from buttons pressing', async () => {
+      const renderTree = render(StatefulScreen());
+      const text1Driver = TextDriver({
+        testID: `text_1`,
+        renderTree
+      });
+      const text2Driver = TextDriver({
+        testID: `text_2`,
+        renderTree
+      });
+      const button2Driver = ButtonDriver({
+        testID: `${BUTTON_ID}2`,
+        renderTree
+      });
+      const button1Driver = ButtonDriver({
+        testID: `${BUTTON_ID}1`,
+        renderTree
+      });
+      expect(await text1Driver.getText()).toBe('button 1 pressed 0 times');
+      expect(await text2Driver.getText()).toBe('button 2 pressed 0 times');
+      await button1Driver.press();
+      await button1Driver.press();
+      await button2Driver.press();
+      await waitFor(async () => expect(await text1Driver.getText()).toBe('button 1 pressed 2 times'));
+      await waitFor(async () => expect(await text2Driver.getText()).toBe('button 2 pressed 1 times'));
+    });
+  });
+});
+function WrapperScreenWithButton(buttonProps = {}) {
+  return <View testID={'wrapper_screen_test_id'}>
+      <Button {...buttonProps} testID={BUTTON_ID} />
+    </View>;
+}
+function WrapperScreenWithCustomButton(buttonProps = {}) {
+  const {
+    onPress
+  } = buttonProps;
+  return <View testID={'wrapper_screen_test_id'}>
+      <Button testID={BUTTON_ID} onPress={onPress}>
+        <Text testID={CHILDREN_TEXT_ID}>{CHILDREN_TEXT}</Text>
+      </Button>
+    </View>;
+}
+const StatefulScreen = () => <StatefulScreenWithTextsAndButtons />;
+const StatefulScreenWithTextsAndButtons = () => {
+  const [count1, setCount1] = useState(0);
+  const [count2, setCount2] = useState(0);
+  return <View testID={'stateful_wrapper_screen_test_id'}>
+      <Text testID={'text_1'}>{`button 1 pressed ${count1} times`}</Text>
+      <Text testID={'text_2'}>{`button 2 pressed ${count2} times`}</Text>
+      <Button testID={`${BUTTON_ID}1`} onPress={() => setCount1(count1 + 1)} />
+      <Button testID={`${BUTTON_ID}2`} onPress={() => setCount2(count2 + 1)} />
+    </View>;
+};