react-native-ui-lib 8.1.1 → 8.1.5

package/src/commons/__tests__/modifiers.spec.js

@@ -1,453 +0,0 @@
-import PropTypes from 'prop-types';
-import {ThemeManager, Colors, Typography, BorderRadiuses, Spacings} from '../../style';
-import * as uut from '../modifiers';
-
-describe('Modifiers', () => {
-  const SampleComponent = () => {};
-  SampleComponent.displayName = 'SampleComponent';
-  SampleComponent.propTypes = {
-    prop1: PropTypes.string,
-    prop2: PropTypes.number
-  };
-
-  describe('extractColorValue', () => {
-    it('should return color value according to modifier', () => {
-      expect(uut.extractColorValue({red30: true})).toBe(Colors.red30);
-    });
-
-    it('should take last color passed as modifier', () => {
-      expect(uut.extractColorValue({red30: true, green10: false, purple50: true})).toBe(Colors.purple50);
-    });
-  });
-
-  describe('background modifiers', () => {
-    it('should return color value according to background-?? prop that was sent', () => {
-      expect(uut.extractBackgroundColorValue({'background-red30': true})).toBe(Colors.red30);
-      expect(uut.extractBackgroundColorValue({'bg-red30': true})).toBe(Colors.red30);
-    });
-
-    it('should return undefined value for unfamiliar color const', () => {
-      expect(uut.extractBackgroundColorValue({'background-uknown30': true})).toBe(undefined);
-    });
-  });
-
-  describe('extractTypographyValue', () => {
-    it('should extract typography value according to typography modifier', () => {
-      expect(uut.extractTypographyValue({text40: true})).toEqual(Typography.text40);
-      expect(uut.extractTypographyValue({text70: true})).toEqual(Typography.text70);
-    });
-
-    it('should return undefined if not typography modifier was sent', () => {
-      expect(uut.extractTypographyValue({})).toEqual(undefined);
-    });
-
-    it('should ignore modifiers with false value', () => {
-      expect(uut.extractTypographyValue({
-        text40: true,
-        text70: false
-      })).toEqual(Typography.text40);
-    });
-
-    it('should prioritize last typography modifier prop in case there is more than one', () => {
-      expect(uut.extractTypographyValue({
-        text40: true,
-        text70: true
-      })).toEqual(Typography.text70);
-      expect(uut.extractTypographyValue({
-        text70: true,
-        text40: true
-      })).toEqual(Typography.text40);
-    });
-
-    it('should return value of the custom made typography', () => {
-      const customTypography = {fontSize: Typography.text30.fontSize, fontWeight: '400'};
-      Typography.loadTypographies({customTypography});
-      expect(uut.extractTypographyValue({customTypography: true})).toEqual(customTypography);
-      expect(uut.extractTypographyValue({
-        text40: true,
-        customTypography: true
-      })).toEqual({...Typography.text40, ...customTypography});
-      expect(uut.extractTypographyValue({
-        customTypography: true,
-        text40: true
-      })).toEqual({...customTypography, ...Typography.text40});
-    });
-
-    it('should merge typography modifiers', () => {
-      const bold = {fontWeight: 'bold'};
-      Typography.loadTypographies({bold});
-      expect(uut.extractTypographyValue({text70: true, bold: true})).toEqual({
-        ...Typography.text70,
-        fontWeight: 'bold'
-      });
-    });
-  });
-
-  describe('extractPaddingValues - paddings modifiers', () => {
-    it('should return paddings values  according to padding?-?? prop that was sent', () => {
-      expect(uut.extractPaddingValues({
-        'padding-25': true,
-        'paddingL-15': true,
-        'paddingT-10': true,
-        'paddingR-20': true,
-        'paddingB-15': true,
-        'paddingH-20': true,
-        'paddingV-15': true
-      })).toEqual({
-        padding: 25,
-        paddingLeft: 15,
-        paddingTop: 10,
-        paddingRight: 20,
-        paddingBottom: 15,
-        paddingHorizontal: 20,
-        paddingVertical: 15
-      });
-    });
-
-    it('should ignore unfamiliar paddings keys', () => {
-      expect(uut.extractPaddingValues({'paddings-25': true})).toEqual({});
-    });
-
-    it('should ignore non numeric padding values', () => {
-      expect(uut.extractPaddingValues({'padding-2a5': true})).toEqual({});
-    });
-
-    it('should support Spacing preset for padding', () => {
-      expect(uut.extractPaddingValues({'padding-s3': true})).toEqual({padding: 12});
-    });
-  });
-
-  describe('extractMarginValues - margins modifiers', () => {
-    it('should return margins values according to margin?-?? prop that was sent', () => {
-      expect(uut.extractMarginValues({
-        'margin-25': true,
-        'marginL-15': true,
-        'marginT-10': true,
-        'marginR-20': true,
-        'marginB-15': true,
-        'marginH-20': true,
-        'marginV-15': true
-      })).toEqual({
-        margin: 25,
-        marginLeft: 15,
-        marginTop: 10,
-        marginRight: 20,
-        marginBottom: 15,
-        marginHorizontal: 20,
-        marginVertical: 15
-      });
-    });
-
-    it('should ignore unfamiliar margin keys', () => {
-      expect(uut.extractMarginValues({'margins-25': true})).toEqual({});
-    });
-
-    it('should ignore non numeric margin values', () => {
-      expect(uut.extractMarginValues({'margin-2a5': true})).toEqual({});
-    });
-
-    it('should support Spacing preset for margin', () => {
-      expect(uut.extractMarginValues({'marginL-s4': true})).toEqual({marginLeft: 16});
-    });
-  });
-
-  describe('extractAlignmentsValues - alignments modifiers', () => {
-    it('should return prop alignment for a row view', () => {
-      expect(uut.extractAlignmentsValues({row: true, left: true})).toEqual({
-        flexDirection: 'row',
-        justifyContent: 'flex-start'
-      });
-      expect(uut.extractAlignmentsValues({row: true, right: true})).toEqual({
-        flexDirection: 'row',
-        justifyContent: 'flex-end'
-      });
-      expect(uut.extractAlignmentsValues({row: true, top: true})).toEqual({
-        flexDirection: 'row',
-        alignItems: 'flex-start'
-      });
-      expect(uut.extractAlignmentsValues({row: true, bottom: true})).toEqual({
-        flexDirection: 'row',
-        alignItems: 'flex-end'
-      });
-      expect(uut.extractAlignmentsValues({row: true, centerH: true})).toEqual({
-        flexDirection: 'row',
-        justifyContent: 'center'
-      });
-      expect(uut.extractAlignmentsValues({row: true, centerV: true})).toEqual({
-        flexDirection: 'row',
-        alignItems: 'center'
-      });
-      expect(uut.extractAlignmentsValues({row: true, spread: true})).toEqual({
-        flexDirection: 'row',
-        justifyContent: 'space-between'
-      });
-    });
-
-    it('should return prop alignment for a column view (default)', () => {
-      expect(uut.extractAlignmentsValues({left: true})).toEqual({alignItems: 'flex-start'});
-      expect(uut.extractAlignmentsValues({right: true})).toEqual({alignItems: 'flex-end'});
-      expect(uut.extractAlignmentsValues({top: true})).toEqual({
-        justifyContent: 'flex-start'
-      });
-      expect(uut.extractAlignmentsValues({bottom: true})).toEqual({
-        justifyContent: 'flex-end'
-      });
-      expect(uut.extractAlignmentsValues({centerH: true})).toEqual({alignItems: 'center'});
-      expect(uut.extractAlignmentsValues({centerV: true})).toEqual({justifyContent: 'center'});
-      expect(uut.extractAlignmentsValues({spread: true})).toEqual({
-        justifyContent: 'space-between'
-      });
-    });
-
-    it('should return center alignment for both axis', () => {
-      expect(uut.extractAlignmentsValues({center: true})).toEqual({
-        justifyContent: 'center',
-        alignItems: 'center'
-      });
-      expect(uut.extractAlignmentsValues({row: true, center: true})).toEqual({
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center'
-      });
-    });
-  });
-
-  describe('extractPositionStyle', () => {
-    it('should return undefined when modifier prop is invalid/irrelevant', () => {
-      expect(uut.extractPositionStyle({abs: false})).toEqual(undefined);
-      expect(uut.extractPositionStyle({absK: true})).toEqual(undefined);
-      expect(uut.extractPositionStyle({absolute: true})).toEqual(undefined);
-    });
-
-    it('should return absolute style', () => {
-      expect(uut.extractPositionStyle({abs: true})).toEqual({position: 'absolute'});
-    });
-    it('should return absolute fill object style', () => {
-      expect(uut.extractPositionStyle({absF: true})).toEqual({
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
-      });
-    });
-    it('should return absolute with top value', () => {
-      expect(uut.extractPositionStyle({absT: true})).toEqual({position: 'absolute', top: 0});
-    });
-    it('should return absolute with bottom value', () => {
-      expect(uut.extractPositionStyle({absB: true})).toEqual({position: 'absolute', bottom: 0});
-    });
-    it('should return absolute with left value', () => {
-      expect(uut.extractPositionStyle({absL: true})).toEqual({position: 'absolute', left: 0});
-    });
-    it('should return absolute with right value', () => {
-      expect(uut.extractPositionStyle({absR: true})).toEqual({position: 'absolute', right: 0});
-    });
-    it('should return absolute with vertical values', () => {
-      expect(uut.extractPositionStyle({absV: true})).toEqual({position: 'absolute', top: 0, bottom: 0});
-    });
-    it('should return absolute with horizontal values', () => {
-      expect(uut.extractPositionStyle({absH: true})).toEqual({position: 'absolute', left: 0, right: 0});
-    });
-
-    it('should combine multiple abs modifiers', () => {
-      expect(uut.extractPositionStyle({absB: true, absR: true})).toEqual({position: 'absolute', bottom: 0, right: 0});
-      expect(uut.extractPositionStyle({absH: true, absV: true})).toEqual({position: 'absolute', top: 0, left: 0, bottom: 0, right: 0});
-    });
-  });
-
-  describe('extractFlexStyle - flex modifier', () => {
-    it('should return flex style according to flex-? prop', () => {
-      expect(uut.extractFlexStyle({'flex-2': true})).toEqual({flex: 2});
-      expect(uut.extractFlexStyle({flex: true})).toEqual({flex: 1});
-      expect(uut.extractFlexStyle({'flex-0': true})).toEqual({flex: 0});
-      expect(uut.extractFlexStyle({})).toEqual(undefined);
-    });
-
-    it('should handle flexG and flexS props', () => {
-      expect(uut.extractFlexStyle({'flexG-2': true})).toEqual({flexGrow: 2});
-      expect(uut.extractFlexStyle({flexG: true})).toEqual({flexGrow: 1});
-      expect(uut.extractFlexStyle({'flexS-3': true})).toEqual({flexShrink: 3});
-      expect(uut.extractFlexStyle({flexS: true})).toEqual({flexShrink: 1});
-      expect(uut.extractFlexStyle({flexG: false, flexS: false})).toEqual(undefined);
-    });
-
-    it('should handle bad usage', () => {
-      expect(uut.extractFlexStyle({'flexG-2s': true})).toEqual(undefined);
-      expect(uut.extractFlexStyle({'flex-aaa': true})).toEqual(undefined);
-      expect(uut.extractFlexStyle({'flexB-12': true})).toEqual(undefined);
-      expect(uut.extractFlexStyle({'flex-': true})).toEqual({flex: 1});
-    });
-  });
-
-  describe('extractBorderRadiusValue - BorderRadius modifier', () => {
-    it('should return border radius value according br? modifier prop', () => {
-      expect(uut.extractBorderRadiusValue({br10: true})).toEqual(BorderRadiuses.br10);
-      expect(uut.extractBorderRadiusValue({br20: true})).toEqual(BorderRadiuses.br20);
-    });
-  });
-
-  // describe('extractOwnProps', () => {
-  //   it('should extract the component props from a props object', () => {
-  //     const props = {color: 'red', topShadow: 1, bottomShadow: 2};
-  //     expect(MultipleShadow.extractOwnProps(props)).toEqual({
-  //       topShadow: 1,
-  //       bottomShadow: 2,
-  //     });
-  //   });
-
-  //   it('should omit props that were required to ignore', () => {
-  //     const props = {color: 'red', topShadow: 1, bottomShadow: 2};
-  //     expect(MultipleShadow.extractOwnProps(props, 'topShadow')).toEqual({
-  //       bottomShadow: 2,
-  //     });
-  //     expect(MultipleShadow.extractOwnProps(props, ['topShadow', 'bottomShadow'])).toEqual({});
-  //   });
-  // });
-
-  describe('extractModifiersProps', () => {
-    it('should return all modifiers props', () => {
-      expect(uut.extractModifierProps({
-        'paddingL-20': true,
-        'bg-red30': true,
-        other: 'some-value'
-      })).toEqual({
-        'paddingL-20': true,
-        'bg-red30': true
-      });
-
-      expect(uut.extractModifierProps({
-        'margin-50': true,
-        'background-blue20': true,
-        other: 'some-value'
-      })).toEqual({
-        'margin-50': true,
-        'background-blue20': true
-      });
-
-      expect(uut.extractModifierProps({left: true, 'bg-red10': false, other: 'some-value'})).toEqual({
-        left: true,
-        'bg-red10': false
-      });
-      expect(uut.extractModifierProps({
-        'paddingL-20': true,
-        'gap-10': true,
-        other: 'some-value'
-      })).toEqual({
-        'paddingL-20': true,
-        'gap-10': true
-      });
-      expect(uut.extractModifierProps({
-        'paddingL-20': true,
-        'gap-s3': true,
-        other: 'some-value'
-      })).toEqual({
-        'paddingL-20': true,
-        'gap-s3': true
-      });
-    });
-  });
-
-  describe('extractOwnProps', () => {
-    it('should extract the component props from a props object', () => {
-      const props = {color: 'red', prop1: 'text', prop2: 2};
-      expect(uut.extractOwnProps.bind(SampleComponent)(props)).toEqual({
-        prop1: 'text',
-        prop2: 2
-      });
-    });
-
-    it('should omit props that were required to ignore', () => {
-      const props = {color: 'red', prop1: 'text', prop2: 2};
-      expect(uut.extractOwnProps.bind(SampleComponent)(props, 'prop1')).toEqual({
-        prop2: 2
-      });
-      expect(uut.extractOwnProps.bind(SampleComponent)(props, ['prop1', 'prop2'])).toEqual({});
-    });
-  });
-
-  describe('getThemeProps', () => {
-    beforeEach(() => {
-      ThemeManager.setComponentTheme('SampleComponent', undefined);
-      ThemeManager.setComponentForcedTheme('SampleComponent', undefined);
-    });
-
-    it('should return props values from the Theme Manager if were defined', () => {
-      ThemeManager.setComponentTheme('SampleComponent', {prop1: 'themeValue'});
-      expect(uut.getThemeProps.call(SampleComponent, {})).toEqual({prop1: 'themeValue'});
-    });
-
-    it('should return override theme values with passed props values', () => {
-      ThemeManager.setComponentTheme('SampleComponent', {prop1: 'themeValue'});
-      expect(uut.getThemeProps.call(SampleComponent, {prop1: 'someValue'})).toEqual({prop1: 'someValue'});
-    });
-
-    it('should return props values from the Theme Manager merged with values from passed props', () => {
-      ThemeManager.setComponentTheme('SampleComponent', {prop1: 'themeValue'});
-      expect(uut.getThemeProps.call(SampleComponent, {prop2: 2})).toEqual({prop1: 'themeValue', prop2: 2});
-    });
-
-    it('should support getThemeProps callback that accepts current props and can condition returned props', () => {
-      ThemeManager.setComponentTheme('SampleComponent', props => ({prop1: props.test ? 'yes' : 'no'}));
-      expect(uut.getThemeProps.call(SampleComponent, {test: true})).toEqual({prop1: 'yes', test: true});
-      expect(uut.getThemeProps.call(SampleComponent, {test: false})).toEqual({prop1: 'no', test: false});
-    });
-
-    it('should prioritize forced theme props over user props', () => {
-      ThemeManager.setComponentForcedTheme('SampleComponent', () => ({foo: 'forced'}));
-      expect(uut.getThemeProps.call(SampleComponent, {foo: 'user-value', other: 'other'})).toEqual({
-        foo: 'forced',
-        other: 'other'
-      });
-    });
-  });
-
-  describe('generateModifiersStyle', () => {
-    it('should generate modifiers object out of props', () => {
-      const modifiers = uut.generateModifiersStyle(undefined, {
-        'bg-red40': true,
-        'padding-20': true,
-        'margin-20': true,
-        flex: true,
-        bottom: true,
-        br100: true
-      });
-      expect(modifiers.backgroundColor).toBe(Colors.red40);
-      expect(modifiers.paddings).toEqual({padding: 20});
-      expect(modifiers.margins).toEqual({margin: 20});
-      expect(modifiers.flexStyle).toEqual({flex: 1});
-      expect(modifiers.alignments).toEqual({justifyContent: 'flex-end'});
-      expect(modifiers.borderRadius).toEqual(BorderRadiuses.br100);
-    });
-
-    // TODO: enable this test once we fixed the issue with omitting empty values out of modifiers
-    it.skip('should not include empty modifiers values', () => {
-      const modifiers = uut.generateModifiersStyle(undefined, {'bg-red40': true});
-      expect(modifiers.backgroundColor).toBe(Colors.red40);
-      expect(modifiers.paddings).toBeUndefined();
-      expect(modifiers.margins).toBeUndefined();
-      expect(modifiers.flexStyle).toBeUndefined();
-      expect(modifiers.alignments).toBeUndefined();
-      expect(modifiers.borderRadius).toBeUndefined();
-    });
-  });
-
-  describe('extractGapValues', () => {
-    it('Should return gap 10', () => {
-      const gap = uut.extractGapValues({'gap-10': true});
-      expect(gap).toEqual(10);
-    });
-    it('Should return gap 20', () => {
-      const gap = uut.extractGapValues({'gap-20': true});
-      expect(gap).toEqual(20);
-    });
-    it('Should return gap spacing s3', () => {
-      const gap = uut.extractGapValues({'gap-s3': true});
-      expect(gap).toEqual(Spacings.s3);
-    });
-    it('Should return gap spacing s10', () => {
-      const gap = uut.extractGapValues({'gap-s10': true});
-      expect(gap).toEqual(Spacings.s10);
-    });
-  });
-});

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);
-  });
-});