react-native-ui-lib 8.1.1 → 8.1.7-snapshot.7597

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

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

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

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

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

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

@@ -1,209 +0,0 @@
-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>;
-};