react-native-ui-lib 8.1.1 → 8.1.5

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

@@ -1,287 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Button from '../index';
-import View from '../../view';
-import {Colors, ThemeManager} from '../../../style';
-import {Constants} from '../../../commons';
-
-describe('Button', () => {
-  beforeEach(() => {
-    ThemeManager.setComponentTheme('Button', {});
-    mockIOS();
-  });
-
-  it('should render default button', () => {
-    const tree = renderer.create(<Button label="Button"/>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  describe('outline', () => {
-    it('should render button with an outline', () => {
-      const tree = renderer.create(<Button label="Button" outline/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should render button with an outlineColor', () => {
-      const tree = renderer.create(<Button label="Button" outlineColor={'blue'}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should render button with outline and outlineColor', () => {
-      const tree = renderer.create(<Button label="Button" outline outlineColor={'blue'}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    ///
-
-    it('should return undefined when link is true, even when outline is true', () => {
-      const tree = renderer.create(<Button label="Button" outline link/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return disabled color for outline if button is disabled', () => {
-      const tree = renderer.create(<Button label="Button" outline disabled/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return custom borderWidth according to outlineWidth passed', () => {
-      const tree = renderer.create(<Button label="Button" outline outlineWidth={3}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('link', () => {
-    it('should render button as a link', () => {
-      const tree = renderer.create(<Button label="Button" link/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('hyperlink', () => {
-    it('should render button as a hyperlink', () => {
-      const tree = renderer.create(<Button label="Button" hyperlink/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('backgroundColor', () => {
-    it('should return defined theme backgroundColor', () => {
-      ThemeManager.setComponentTheme('Button', {
-        backgroundColor: Colors.purple40
-      });
-      const tree = renderer.create(<Button label="Button"/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return backgroundColor according to prop value', () => {
-      const tree = renderer.create(<Button label="Button" backgroundColor={'red'}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return backgroundColor according to modifier', () => {
-      const tree = renderer.create(<Button label="Button" bg-orange30/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return undefined if this button is outline', () => {
-      const tree = renderer.create(<Button label="Button" backgroundColor="blue" outline/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return undefined if this button is link', () => {
-      const tree = renderer.create(<Button label="Button" bg-orange30 link/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return theme disabled color if button is disabled', () => {
-      const tree = renderer.create(<Button label="Button" bg-orange30 disabled/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  // describe('activeBackgroundColor', () => {
-  //   it('should return undefined by default', () => {
-  //     const uut = new Button({});
-  //     expect(uut.getActiveBackgroundColor()).toBe(undefined);
-  //   });
-
-  //   it('should return value according to getActiveBackgroundColor callback prop', () => {
-  //     const getActiveBackgroundColor = () => 'red';
-  //     const uut = new Button({getActiveBackgroundColor});
-  //     expect(uut.getActiveBackgroundColor()).toBe('red');
-  //   });
-  // });
-
-  describe('labelColor', () => {
-    it('should return Theme linkColor color for link', () => {
-      ThemeManager.setComponentTheme('Button', {
-        linkColor: Colors.yellow40
-      });
-      const tree = renderer.create(<Button label="Button" link/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return linkColor color for link', () => {
-      const tree = renderer.create(<Button label="Button" link linkColor={Colors.orange50}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return color according to color modifier', () => {
-      const tree = renderer.create(<Button label="Button" red10/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return color according to color prop', () => {
-      const tree = renderer.create(<Button label="Button" red30 color="green"/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return disabled text color according to theme for link/outline button', () => {
-      const tree = renderer.create(<Button label="Button" color="green" link disabled/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return undefined color if this is an icon button (without label)', () => {
-      const tree = renderer.create(<Button iconSource={12}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('label size', () => {
-    it('should return style for large button', () => {
-      const tree = renderer.create(<Button label="Button" size={'large'}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return style for medium button', () => {
-      const tree = renderer.create(<Button label="Button" size={'medium'}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return style for small button', () => {
-      const tree = renderer.create(<Button label="Button" size={'small'}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return style for xSmall button', () => {
-      const tree = renderer.create(<Button label="Button" size={'xSmall'}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('border radius', () => {
-    it('should return given border radius when use plain number', () => {
-      const tree = renderer.create(<Button label="Button" borderRadius={12}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return 0 border radius when border radius prop is 0', () => {
-      const tree = renderer.create(<Button label="Button" borderRadius={0}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should return 0 border radius when button is full width', () => {
-      const tree = renderer.create(<Button label="Button" fullWidth/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('container size', () => {
-    it('should return style for large button', () => {
-      expect(renderer.create(<Button label="Button" size="large"/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="large" outline/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should return style for medium button', () => {
-      expect(renderer.create(<Button label="Button" size="medium"/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="medium" outline/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should return style for small button', () => {
-      expect(renderer.create(<Button label="Button" size="small"/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="small" outline/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should return style for xSmall button', () => {
-      expect(renderer.create(<Button label="Button" size="xSmall"/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="xSmall" outline/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should reduce padding by outlineWidth in case of outline button', () => {
-      expect(renderer.create(<Button label="Button" size="large" outline outlineWidth={2}/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should avoid minWidth limitation if avoidMinWidth was sent', () => {
-      expect(renderer.create(<Button label="Button" size="medium" avoidMinWidth/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should have no padding of button is a link nor min width', () => {
-      expect(renderer.create(<Button label="Button" size="medium" link/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should have no padding of button is an icon button', () => {
-      expect(renderer.create(<Button label="Button" size="medium" iconSource={14}/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should have no padding if avoidInnerPadding prop was sent', () => {
-      expect(renderer.create(<Button label="Button" size="medium" avoidInnerPadding/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should return style for round button', () => {
-      expect(renderer.create(<Button label="Button" round/>).toJSON()).toMatchSnapshot();
-    });
-  });
-
-  describe('customBackground', () => {
-    it('should render button with custom background element', () => {
-      const CustomBackground = () => <View flex style={{backgroundColor: 'red'}}/>;
-      const tree = renderer.create(<Button label="Button" customBackground={<CustomBackground/>}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('should render custom background element with transparent backgroundColor when provided', () => {
-      const CustomBackground = () => <View flex style={{backgroundColor: 'blue'}}/>;
-      const tree = renderer.create(<Button label="Button" backgroundColor="green" customBackground={<CustomBackground/>}/>).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('icon', () => {
-    it('should return the right spacing according to button size when label exists and icon on the right', () => {
-      expect(renderer.create(<Button label="Button" size="large" iconOnRight/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="medium" iconOnRight/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="small" iconOnRight/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button label="Button" size="xSmall" iconOnRight/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should apply color on icon', () => {
-      expect(renderer.create(<Button iconSource={12} color={'green'}/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button iconSource={12} red30/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should return icon style according to different variations', () => {
-      expect(renderer.create(<Button iconSource={12} outline/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button iconSource={12} link/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button iconSource={12} disabled/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should include custom iconStyle provided as a prop', () => {
-      expect(renderer.create(<Button iconSource={12} iconStyle={{marginRight: 9, tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
-    });
-
-    it('should apply the right icon color', () => {
-      expect(renderer.create(<Button iconSource={12} iconProps={{tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
-      expect(renderer.create(<Button iconSource={12} iconStyle={{tintColor: '#ffee22'}}/>).toJSON()).toMatchSnapshot();
-      expect(renderer
-        .create(<Button iconSource={12} iconProps={{tintColor: 'red'}} iconStyle={{tintColor: '#ffee22'}}/>)
-        .toJSON()).toMatchSnapshot();
-    });
-  });
-
-  function mockIOS() {
-    Constants.isIOS = true;
-    Constants.isAndroid = false;
-  }
-});
-
-

package/src/components/card/__tests__/CardPresenter.spec.js

@@ -1,35 +0,0 @@
-import * as uut from '../CardPresenter';
-
-describe('CardPresenter', () => {
-  describe('extractPositionValues', () => {
-    it('should work with basic string value', () => {
-      expect(uut.extractPositionValues('top')).toEqual({top: true, right: false, bottom: false, left: false});
-      expect(uut.extractPositionValues('bottom')).toEqual({top: false, right: false, bottom: true, left: false});
-      expect(uut.extractPositionValues('left')).toEqual({top: false, right: false, bottom: false, left: true});
-      expect(uut.extractPositionValues('right')).toEqual({top: false, right: true, bottom: false, left: false});
-      expect(uut.extractPositionValues('')).toEqual({top: false, right: false, bottom: false, left: false});
-    });
-
-    it('should work with basic array of positions', () => {
-      expect(uut.extractPositionValues(['top', 'bottom'])).toEqual({
-        top: true,
-        right: false,
-        bottom: true,
-        left: false
-      });
-      expect(uut.extractPositionValues(['left', 'right'])).toEqual({
-        top: false,
-        right: true,
-        bottom: false,
-        left: true
-      });
-      expect(uut.extractPositionValues(['top', 'left', 'bottom', 'right'])).toEqual({
-        top: true,
-        right: true,
-        bottom: true,
-        left: true
-      });
-      expect(uut.extractPositionValues([])).toEqual({top: false, right: false, bottom: false, left: false});
-    });
-  });
-});

package/src/components/carousel/__tests__/CarouselPresenter.spec.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import * as uut from '../CarouselPresenter';
-
-describe('Carousel presenter', () => {
-  it('should getChildrenLength', () => {
-    expect(uut.getChildrenLength({children: [<></>, <></>, <></>]})).toBe(3);
-    expect(uut.getChildrenLength({children: [<></>]})).toBe(1);
-    expect(uut.getChildrenLength({children: [[], <></>]})).toBe(1);
-    expect(uut.getChildrenLength(<></>)).toBe(0);
-  });
-
-  describe('calcOffset', () => {
-    it('should calcOffset (default mode)', () => {
-      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 0})).toStrictEqual({x: 0, y: 0});
-      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 1})).toStrictEqual({x: 120, y: 0});
-      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 2})).toStrictEqual({x: 240, y: 0});
-      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: false}, {pageWidth: 80, pageHeight: 150, currentPage: 0})).toStrictEqual({x: 0, y: 0});
-      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: false}, {pageWidth: 80, pageHeight: 150, currentPage: 1})).toStrictEqual({x: 0, y: 150});
-      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: false}, {pageWidth: 80, pageHeight: 150, currentPage: 2})).toStrictEqual({x: 0, y: 300});
-    });
-
-    it('should calcOffset (loop mode)', () => {
-      expect(uut.calcOffset({loop: true, children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 0})).toStrictEqual({x: 120, y: 0});
-      expect(uut.calcOffset({loop: true, children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 1})).toStrictEqual({x: 240, y: 0});
-      expect(uut.calcOffset({loop: true, children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 2})).toStrictEqual({x: 360, y: 0});
-    });
-  });
-
-  describe('calcPageIndex', () => {
-    it('should calcPageIndex', () => {
-      expect(uut.calcPageIndex(120, {children: [<></>, <></>, <></>]}, 120)).toBe(1);
-      expect(uut.calcPageIndex(245, {children: [<></>, <></>, <></>]}, 120)).toBe(2);
-      expect(uut.calcPageIndex(481, {children: [<></>, <></>, <></>]}, 120)).toBe(2);
-      expect(uut.calcPageIndex(5, {children: [<></>, <></>, <></>]}, 120)).toBe(0);
-    });
-
-    it('should calcPageIndex (loop mode)', () => {
-      expect(uut.calcPageIndex(120, {loop: true, children: [<></>, <></>, <></>]}, 120)).toBe(0);
-      expect(uut.calcPageIndex(245, {loop: true, children: [<></>, <></>, <></>]}, 120)).toBe(1);
-      expect(uut.calcPageIndex(481, {loop: true, children: [<></>, <></>, <></>]}, 120)).toBe(0);
-      expect(uut.calcPageIndex(5, {loop: true, children: [<></>, <></>, <></>]}, 120)).toBe(2);
-    });
-  });
-
-  it('should return isOutsideLimits', () => {
-    expect(uut.isOutOfBounds(120, {children: [<></>, <></>, <></>]}, 120)).toBe(false);
-    expect(uut.isOutOfBounds(1125, {children: [<></>, <></>, <></>, <></>]}, 375)).toBe(false);
-    expect(uut.isOutOfBounds(0, {children: [<></>, <></>, <></>]}, 120)).toBe(true);
-    expect(uut.isOutOfBounds(481, {children: [<></>, <></>, <></>]}, 120)).toBe(true);
-    expect(uut.isOutOfBounds(1875, {children: [<></>, <></>, <></>, <></>]}, 375)).toBe(true);
-  });
-});

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

@@ -1,89 +0,0 @@
-import _map from "lodash/map";
-import React from 'react';
-import { Text, View } from 'react-native';
-import { fireOnMomentumScrollEnd } from "../../../uilib-test-renderer";
-import { render } from '@testing-library/react-native';
-import Carousel from "../index";
-import { Constants } from "../../../commons/new";
-import { CarouselDriver } from "../Carousel.driver.new";
-const numberOfPagesShown = 5;
-const onChangePageMock = jest.fn();
-const onScrollMock = jest.fn();
-const testID = 'carousel';
-const TestCase = props => {
-  return <Carousel testID={testID} onChangePage={onChangePageMock} onScroll={onScrollMock} {...props}>
-      {_map([...Array(numberOfPagesShown)], (_, index) => <Page key={index}>
-          <Text testID={`page-${index}`}>Page #{index}</Text>
-        </Page>)}
-    </Carousel>;
-};
-const Page = ({
-  children,
-  ...others
-}) => {
-  return <View {...others} style={{
-    flex: 1
-  }}>
-      {children}
-    </View>;
-};
-describe('Carousel render tests', () => {
-  describe('initialPage', () => {
-    it('should be set to default initialPage', async () => {
-      const renderTree = render(<TestCase />);
-      const driver = CarouselDriver({
-        renderTree,
-        testID
-      });
-      expect((await driver.getContentOffset()).x).toBe(0);
-    });
-    it('should be set to initialPage = 2', async () => {
-      const renderTree = render(<TestCase initialPage={2} />);
-      const driver = CarouselDriver({
-        renderTree,
-        testID
-      });
-      expect((await driver.getContentOffset()).x).toBe(Constants.screenWidth * 2);
-    });
-  });
-  describe('onScroll', () => {
-    it('should trigger onScroll from the second scroll', async () => {
-      const renderTree = render(<TestCase />);
-      const driver = CarouselDriver({
-        renderTree,
-        testID
-      });
-      await driver.scroll({
-        x: Constants.screenWidth
-      }); //NOTE: first scroll doesn't fire onScroll
-      expect(onScrollMock).not.toHaveBeenCalled();
-      await driver.scroll({
-        x: Constants.screenWidth
-      });
-      expect(onScrollMock).toHaveBeenCalled();
-    });
-  });
-  describe('onChangePage', () => {
-    it('should trigger onChangePage with current page', async () => {
-      const renderTree = render(<TestCase />);
-      const driver = CarouselDriver({
-        renderTree,
-        testID
-      });
-      const scrollView = await driver.getElement();
-      await driver.scroll({
-        x: Constants.screenWidth
-      }); //NOTE: first scroll doesn't fire onScroll
-      await driver.scroll({
-        x: Constants.screenWidth
-      });
-      expect(onChangePageMock).not.toHaveBeenCalled();
-      fireOnMomentumScrollEnd(scrollView, {
-        x: Constants.screenWidth
-      });
-      expect(onChangePageMock).toHaveBeenCalledWith(1, 0, {
-        isAutoScrolled: false
-      });
-    });
-  });
-});