react-native-ui-lib 8.0.1 → 8.1.0

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

@@ -0,0 +1,76 @@
+import {updateConstants} from '../../../commons/Constants';
+import {FeatureHighlight} from '../index';
+
+describe('FeatureHighlight', () => {
+  beforeEach(() => {
+    mockScreenDimentions();
+  });
+
+  describe('getContentPosition', () => {
+    it('massage should be placed above element positioned below screen\'s vertical center', () => {
+      const uut = new FeatureHighlight({visible: true});
+      uut.state = {
+        contentTopPosition: 0
+      };
+      uut.targetPosition = {left: 0, top: 500, width: 80, height: 80};
+      uut.didLayout = true;
+      expect(uut.getContentPosition()).toEqual(218);
+    });
+    it('massage should be placed below element positioned above screen\'s vertical center', () => {
+      const uut = new FeatureHighlight({minimumRectSize: {width: 56, height: 56}, innerPadding: 10});
+      uut.state = {
+        contentTopPosition: 0
+      };
+      uut.targetPosition = {left: 0, top: 200, width: 20, height: 20};
+      uut.didLayout = true;
+      expect(uut.getContentPosition()).toEqual(243);
+    });
+    it('massage should be placed below element positioned above screen\'s vertical center', () => {
+      const uut = new FeatureHighlight({minimumRectSize: {width: 56, height: 56}, innerPadding: 10});
+      uut.state = {
+        contentTopPosition: 0
+      };
+      uut.targetPosition = {left: 0, top: 200, width: 80, height: 80};
+      uut.didLayout = true;
+      expect(uut.getContentPosition()).toEqual(290);
+    });
+  });
+
+  describe('setTargetPosition', () => {
+    it('targetPosition should be equal to component position', () => {
+      // Arrange
+      const mockTarget = {measureInWindow: jest.fn()};
+      const getTargetMock = jest.fn();
+      getTargetMock.mockReturnValue(mockTarget);
+      const uut = new FeatureHighlight({getTarget: getTargetMock});
+      jest.spyOn(FeatureHighlight, 'getDerivedStateFromProps');
+      jest.spyOn(FeatureHighlight, 'findTargetNode').mockImplementation(() => 23);
+      jest.spyOn(window, 'setTimeout');
+
+      jest.useFakeTimers();
+
+      // Act
+      FeatureHighlight.getDerivedStateFromProps({getTarget: getTargetMock});
+      uut.setTargetPosition({getTarget: getTargetMock});
+
+      // Assert
+      expect(FeatureHighlight.getDerivedStateFromProps).toHaveBeenCalledWith({getTarget: getTargetMock});
+      expect(mockTarget.measureInWindow).not.toBeCalled();
+      expect(FeatureHighlight.findTargetNode).toHaveBeenCalledWith(mockTarget);
+
+      jest.runAllTimers();
+
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      expect(mockTarget.measureInWindow).toBeCalled();
+    });
+  });
+});
+
+function mockScreenDimentions() {
+  // iPhone 8
+  const dimensions = {
+    screen: {height: 667, width: 375},
+    window: {height: 1000, width: 1000}
+  };
+  updateConstants(dimensions);
+}

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

@@ -0,0 +1,229 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Spacings } from "../../../style";
+import FloatingButton, { FloatingButtonLayouts } from "../index";
+import { ButtonDriver } from "../../button/Button.driver.new";
+import { useComponentDriver } from "../../../testkit/new/Component.driver";
+const TEST_ID = 'floating_button';
+const button = {
+  label: 'First'
+};
+const secondaryButton = {
+  label: 'Second'
+};
+const TestCase = props => {
+  return <FloatingButton {...props} testID={TEST_ID} />;
+};
+export const FloatingButtonDriver = props => {
+  const driver = useComponentDriver(props);
+  const getStyle = () => driver.getElement().props.style;
+  return {
+    ...driver,
+    getStyle
+  };
+};
+describe('FloatingButton', () => {
+  describe('visible', () => {
+    it('should render a button according to visibility', async () => {
+      const props = {};
+      const renderTree = render(<TestCase {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.button`
+      });
+      expect(await buttonDriver.exists()).not.toBeTruthy();
+      renderTree.rerender(<TestCase visible button={button} />);
+      expect(await buttonDriver.exists()).toBeTruthy();
+    });
+  });
+  describe('buttons', () => {
+    it('should render a button', async () => {
+      const props = {
+        visible: true,
+        button
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.button`
+      });
+      expect(await buttonDriver.exists()).toBeTruthy();
+    });
+    it('should not render a secondary button', async () => {
+      const props = {
+        visible: true
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.secondaryButton`
+      });
+      expect(await buttonDriver.exists()).not.toBeTruthy();
+    });
+    it('should render a button with a label', async () => {
+      const props = {
+        visible: true,
+        button
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.button`
+      });
+      expect(await buttonDriver.getLabel().getText()).toEqual(button.label);
+    });
+    it('should render secondary button with label', async () => {
+      const props = {
+        visible: true,
+        secondaryButton
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.secondaryButton`
+      });
+      expect(await buttonDriver.getLabel().getText()).toEqual(secondaryButton.label);
+    });
+  });
+  describe('bottomMargin', () => {
+    it('should have default bottom margin', () => {
+      const props = {
+        visible: true,
+        button
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.button`
+      });
+      expect(buttonDriver.getElement().props.style?.marginBottom).toBe(Spacings.s8);
+    });
+    it('should have default bottom margin for both buttons', () => {
+      const props = {
+        visible: true,
+        button,
+        secondaryButton
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.button`
+      });
+      const buttonDriver2 = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.secondaryButton`
+      });
+      expect(buttonDriver.getElement().props.style?.marginBottom).toBe(Spacings.s4);
+      expect(buttonDriver2.getElement().props.style?.marginBottom).toBe(Spacings.s7);
+    });
+    it('should have bottom margin that match bottomMargin prop', () => {
+      const props = {
+        visible: true,
+        button,
+        bottomMargin: 10
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.button`
+      });
+      expect(buttonDriver.getElement().props.style?.marginBottom).toBe(10);
+    });
+    it('should have bottom margin for secondary button that match bottomMarginProp', () => {
+      const props = {
+        visible: true,
+        button,
+        secondaryButton,
+        bottomMargin: 10
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.button`
+      });
+      const buttonDriver2 = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.secondaryButton`
+      });
+      expect(buttonDriver.getElement().props.style?.marginBottom).toBe(Spacings.s4);
+      expect(buttonDriver2.getElement().props.style?.marginBottom).toBe(10);
+    });
+  });
+  describe('buttonLayout', () => {
+    it('should style vertical layout (default)', () => {
+      const props = {
+        visible: true,
+        button,
+        secondaryButton
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const driver = FloatingButtonDriver({
+        renderTree,
+        testID: TEST_ID
+      });
+      expect(driver.getStyle()?.flexDirection).toBe(undefined);
+      expect(driver.getStyle()?.alignItems).toBe('center');
+      expect(driver.getStyle()?.justifyContent).toBe('center');
+      expect(driver.getStyle()?.paddingHorizontal).toBe(undefined);
+    });
+    it('should style horizontal layout', () => {
+      const props = {
+        visible: true,
+        button,
+        secondaryButton,
+        buttonLayout: FloatingButtonLayouts.HORIZONTAL
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const driver = FloatingButtonDriver({
+        renderTree,
+        testID: TEST_ID
+      });
+      expect(driver.getStyle()?.flexDirection).toBe('row');
+      expect(driver.getStyle()?.alignItems).toBe('center');
+      expect(driver.getStyle()?.justifyContent).toBe('center');
+      expect(driver.getStyle()?.paddingHorizontal).toBe(undefined);
+    });
+  });
+  describe('fullWidth', () => {
+    it('should style vertical layout (default) when fullWidth is true', () => {
+      const props = {
+        visible: true,
+        button,
+        secondaryButton,
+        fullWidth: true
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const driver = FloatingButtonDriver({
+        renderTree,
+        testID: TEST_ID
+      });
+      expect(driver.getStyle()?.flexDirection).toBe(undefined);
+      expect(driver.getStyle()?.alignItems).toBe(undefined);
+      expect(driver.getStyle()?.justifyContent).toBe(undefined);
+      const buttonDriver = ButtonDriver({
+        renderTree,
+        testID: `${TEST_ID}.button`
+      });
+      expect(buttonDriver.getElement().props.style.marginLeft).toBe(16);
+      expect(buttonDriver.getElement().props.style.marginRight).toBe(16);
+    });
+    it('should style horizontal layout when fullWidth is true', () => {
+      const props = {
+        visible: true,
+        button,
+        secondaryButton,
+        buttonLayout: FloatingButtonLayouts.HORIZONTAL,
+        fullWidth: true
+      };
+      const renderTree = render(<TestCase {...props} />);
+      const driver = FloatingButtonDriver({
+        renderTree,
+        testID: TEST_ID
+      });
+      expect(driver.getStyle()?.flexDirection).toBe('row');
+      expect(driver.getStyle()?.alignItems).toBe('center');
+      expect(driver.getStyle()?.justifyContent).toBe('center');
+      expect(driver.getStyle()?.paddingHorizontal).toBe(undefined);
+    });
+  });
+});

package/src/components/floatingButton/index.js

@@ -55,19 +55,30 @@ class FloatingButton extends PureComponent {
       }]
     };
   };
-  get isSecondaryHorizontal() {
+  get isSecondaryOnly() {
     const {
       secondaryButton,
+      button
+    } = this.props;
+    return !!secondaryButton && !button;
+  }
+  get isHorizontalLayout() {
+    const {
       buttonLayout
     } = this.props;
-    return secondaryButton && buttonLayout === FloatingButtonLayouts.HORIZONTAL;
+    return buttonLayout === FloatingButtonLayouts.HORIZONTAL || this.isSecondaryOnly;
+  }
+  get isSecondaryHorizontal() {
+    const {
+      secondaryButton
+    } = this.props;
+    return secondaryButton && this.isHorizontalLayout;
   }
   get isSecondaryVertical() {
     const {
-      secondaryButton,
-      buttonLayout
+      secondaryButton
     } = this.props;
-    return secondaryButton && buttonLayout === FloatingButtonLayouts.VERTICAL;
+    return secondaryButton && !this.isHorizontalLayout;
   }
   renderButton() {
     const {
@@ -76,17 +87,17 @@ class FloatingButton extends PureComponent {
       fullWidth,
       testID
     } = this.props;
-    const bottom = this.isSecondaryVertical ? Spacings.s4 : bottomMargin || Spacings.s8;
-    const left = this.isSecondaryHorizontal || fullWidth ? Spacings.s4 : undefined;
-    const right = this.isSecondaryHorizontal ? 20 : fullWidth ? Spacings.s4 : undefined;
-    const shadowStyle = !button?.outline && !button?.link && styles.shadow;
-    const marginStyle = {
-      marginTop: 16,
-      marginBottom: bottom,
-      marginLeft: left,
-      marginRight: right
-    };
-    return <Button size={Button.sizes.large} flex={!!this.isSecondaryHorizontal} style={[shadowStyle, marginStyle]} testID={`${testID}.button`} {...button} />;
+    if (button) {
+      const shadowStyle = button && !button.outline && !button.link ? styles.shadow : undefined;
+      const marginStyle = {
+        marginTop: Spacings.s4,
+        marginBottom: this.isSecondaryVertical ? Spacings.s4 : bottomMargin || Spacings.s8,
+        marginLeft: this.isSecondaryHorizontal || fullWidth ? Spacings.s4 : undefined,
+        marginRight: this.isSecondaryHorizontal ? Spacings.s5 : fullWidth ? Spacings.s4 : undefined
+      };
+      const shouldFlex = this.isSecondaryHorizontal || fullWidth && this.isHorizontalLayout;
+      return <Button size={Button.sizes.large} flex={!!shouldFlex} style={[shadowStyle, marginStyle]} testID={`${testID}.button`} {...button} />;
+    }
   }
   renderOverlay = () => {
     if (!this.props.hideBackgroundOverlay) {
@@ -100,25 +111,44 @@ class FloatingButton extends PureComponent {
       secondaryButton,
       bottomMargin,
       testID,
-      buttonLayout
+      fullWidth,
+      button
     } = this.props;
-    const bgColor = secondaryButton?.backgroundColor || Colors.$backgroundDefault;
-    const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL;
-    const buttonStyle = isHorizontal ? [styles.shadow, styles.secondaryMargin, {
-      backgroundColor: bgColor
-    }] : {
-      marginBottom: bottomMargin || Spacings.s7
-    };
-    return <Button outline={isHorizontal} flex={isHorizontal} link={!isHorizontal} size={Button.sizes.large} testID={`${testID}.secondaryButton`} {...secondaryButton} style={buttonStyle} enableShadow={false} />;
+    if (secondaryButton) {
+      const bgColor = secondaryButton.backgroundColor || Colors.$backgroundDefault;
+      const shouldFlex = this.isHorizontalLayout && !!button || fullWidth && this.isSecondaryOnly;
+      const buttonStyle = this.isHorizontalLayout ? [styles.shadow, styles.horizontalSecondaryMargin, {
+        backgroundColor: bgColor
+      }] : {
+        marginBottom: bottomMargin || Spacings.s7
+      };
+      return <Button outline={this.isHorizontalLayout} flex={shouldFlex} link={!this.isHorizontalLayout} size={Button.sizes.large} testID={`${testID}.secondaryButton`} {...secondaryButton} style={buttonStyle} enableShadow={false} />;
+    }
+  }
+  renderHorizontalLayout() {
+    return <>
+        {this.renderOverlay()}
+        {this.renderSecondaryButton()}
+        {this.renderButton()}
+      </>;
+  }
+  renderVerticalLayout() {
+    return <>
+        {this.renderOverlay()}
+        {this.renderButton()}
+        {this.renderSecondaryButton()}
+      </>;
   }
   render() {
+    // NOTE: keep this.firstLoad as true as long as the visibility changed to true
     const {
       withoutAnimation,
       visible,
       fullWidth,
-      testID
+      testID,
+      button,
+      secondaryButton
     } = this.props;
-    // NOTE: keep this.firstLoad as true as long as the visibility changed to true
     this.firstLoad && !visible ? this.firstLoad = true : this.firstLoad = false;
 
     // NOTE: On first load, don't show if it should not be visible
@@ -128,12 +158,13 @@ class FloatingButton extends PureComponent {
     if (!visible && withoutAnimation) {
       return false;
     }
-    return <View row={this.isSecondaryHorizontal} center={this.isSecondaryHorizontal || !fullWidth} pointerEvents="box-none" animated style={[styles.container, this.getAnimatedStyle()]} testID={testID}>
-        {this.renderOverlay()}
-        {this.isSecondaryHorizontal && this.renderSecondaryButton()}
-        {this.renderButton()}
-        {this.isSecondaryVertical && this.renderSecondaryButton()}
-      </View>;
+    if (button || secondaryButton) {
+      const hasBothButtons = !!(button && secondaryButton);
+      const shouldCenter = !fullWidth || this.isHorizontalLayout && hasBothButtons;
+      return <View row={this.isHorizontalLayout} center={shouldCenter} pointerEvents="box-none" animated style={[styles.container, this.getAnimatedStyle()]} testID={testID}>
+          {this.isHorizontalLayout ? this.renderHorizontalLayout() : this.renderVerticalLayout()}
+        </View>;
+    }
   }
 }
 const styles = StyleSheet.create({
@@ -149,10 +180,10 @@ const styles = StyleSheet.create({
   shadow: {
     ...Shadows.sh20.bottom
   },
-  secondaryMargin: {
+  horizontalSecondaryMargin: {
     marginTop: Spacings.s4,
     marginBottom: Spacings.s7,
-    marginLeft: 20
+    marginLeft: Spacings.s5
   }
 });
 export default asBaseComponent(FloatingButton);

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Hint } from 'react-native-ui-lib';
+import { Colors } from "../../../style";
+import { render } from "../../../uilib-test-renderer";
+import { HintDriver } from "../Hint.driver.new";
+import View from "../../view";
+const HINT_TEST_ID = 'Hint';
+const TARGET_FRAME_LEFT = {
+  x: 25,
+  y: 370,
+  height: 60,
+  width: 100
+};
+const TARGET_FRAME_CENTER = {
+  x: 100,
+  y: 200,
+  height: 60,
+  width: 100
+};
+const TARGET_FRAME_RIGHT = {
+  x: 240,
+  y: 150,
+  height: 60,
+  width: 100
+};
+const TestCase = ({
+  addPagePaddings = true,
+  withModal = false,
+  ...props
+}) => {
+  return <View flex centerV padding-s5={addPagePaddings}>
+      <Hint key={'hint'} message={'Hint message to hint things'} targetFrame={TARGET_FRAME_CENTER} onBackgroundPress={withModal ? () => {} : undefined} testID={HINT_TEST_ID} {...props} />
+    </View>;
+};
+describe('Hint Screen component test', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('Test Hint visibility', async () => {
+    const renderTree = render(<TestCase visible addPagePaddings={false} />);
+    const driver = HintDriver({
+      renderTree,
+      testID: HINT_TEST_ID
+    });
+    expect(driver.exists()).toBeTruthy();
+  });
+  it('Color hint bubble with the default color', async () => {
+    const expectedColor = Colors.$backgroundPrimaryHeavy;
+    const renderTree = render(<TestCase visible />);
+    const driver = HintDriver({
+      renderTree,
+      testID: HINT_TEST_ID
+    });
+    const hintBubble = await driver.getHintBubble();
+    expect(hintBubble.getStyle(true).backgroundColor).toBe(expectedColor);
+  });
+  it('Should color hint bubble with provided color prop', async () => {
+    const renderTree = render(<TestCase visible color={Colors.white} />);
+    const driver = HintDriver({
+      renderTree,
+      testID: HINT_TEST_ID
+    });
+    const hintBubble = await driver.getHintBubble();
+    expect(hintBubble.getStyle(true).backgroundColor).toBe(Colors.white);
+  });
+  it('Should modal be not visible when hint is not visible', async () => {
+    const renderTree = render(<TestCase visible={false} withModal />);
+    const driver = HintDriver({
+      renderTree,
+      testID: HINT_TEST_ID
+    });
+    expect(driver.getModal().isVisible()).toBe(false);
+  });
+
+  // TODO: This scenario tests doesn't pass, need to fix it using act
+  it.skip('Should modal be visible when showHint is true', async () => {
+    const renderTree = render(<TestCase visible withModal />);
+    const driver = HintDriver({
+      renderTree,
+      testID: HINT_TEST_ID
+    });
+    expect(driver.getModal().isVisible()).toBe(true);
+  });
+  describe('Different positions and scenarios', () => {
+    const targetFrameAlignments = {
+      left: TARGET_FRAME_LEFT,
+      center: TARGET_FRAME_CENTER,
+      right: TARGET_FRAME_RIGHT
+    };
+    describe.each(['left', 'center', 'right'])('%s position', alignment => {
+      const targetFrame = targetFrameAlignments[alignment];
+      it(`should position correctly for a target positioned on ${alignment}`, () => {
+        const renderTree = render(<TestCase visible targetFrame={targetFrame} />);
+        expect(renderTree.toJSON()).toMatchSnapshot();
+      });
+      it(`should position correctly for a target positioned on ${alignment} - with sideTip`, () => {
+        const renderTree = render(<TestCase visible targetFrame={targetFrame} useSideTip />);
+        expect(renderTree.toJSON()).toMatchSnapshot();
+      });
+
+      // TODO: This scenario doesn't pass as well because it rendered in a modal
+      it.skip(`should position correctly for a target positioned on ${alignment} - with a modal`, () => {
+        const renderTree = render(<TestCase visible targetFrame={targetFrame} withModal />);
+        expect(renderTree.toJSON()).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,56 @@
+import {Image} from '../index';
+import {ThemeManager} from '../../../style';
+import Assets from '../../../assets';
+
+describe('Image', () => {
+  beforeEach(() => {
+    ThemeManager.setComponentTheme('Image', {});
+  });
+
+  describe('getImageSource', () => {
+    it('should return source prop, if no transformer was sent', () => {
+      const uut = new Image({source: 1});
+      expect(uut.getImageSource()).toBe(1);
+    });
+
+    it('should return transformed source prop, according to sourceTransform prop', () => {
+      const sourceTransformer = jest.fn(() => 2);
+      const uut = new Image({source: 1, sourceTransformer});
+      expect(uut.getImageSource()).toBe(2);
+    });
+
+    it('should return transformed source prop, according to sourceTransform prop and other given props', () => {
+      const sourceTransformer = jest.fn(({size, source}) => (size === 'small' ? source : 3));
+      let uut = new Image({source: 1, size: 'small', sourceTransformer});
+      expect(uut.getImageSource()).toBe(1);
+      uut = new Image({source: 1, size: 'large', sourceTransformer});
+      expect(uut.getImageSource()).toBe(3);
+    });
+
+    it('should return asset according to assetName', () => {
+      Assets.loadAssetsGroup('icons', {
+        test: 'test.png'
+      });
+
+      Assets.loadAssetsGroup('icons.general', {
+        test: 'test.png'
+      });
+
+      let uut = new Image({assetGroup: 'icons', assetName: 'test'});
+      expect(uut.getImageSource()).toBe('test.png');
+
+      uut = new Image({assetGroup: 'icons.general', assetName: 'test'});
+      expect(uut.getImageSource()).toBe('test.png');
+    });
+
+    it('should handle when source sent with uri=null', () => {
+      const uut = new Image({source: {uri: null}});
+      expect(uut.getImageSource()).toEqual({uri: undefined});
+    });
+
+    it('should handle when source sent with uri is empty string', () => {
+      const uut = new Image({source: {uri: ''}});
+      expect(uut.getImageSource()).toEqual({uri: undefined});
+    });
+  });
+});