react-native-ui-lib 8.1.1 → 8.1.5

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

@@ -1,229 +0,0 @@
-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/hint/__tests__/index.spec.js

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

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

package/src/components/maskedInput/__tests__/maskedInput.new.spec.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import MaskedInput from "../new";
-import Text from "../../../components/text";
-import { TextFieldDriver } from "../../textField/TextField.driver.new";
-const testID = 'field';
-const TestCase = () => {
-  return <MaskedInput testID={testID} renderMaskedText={text => <Text>{text}</Text>} />;
-};
-describe('MaskedInput (new)', () => {
-  it('Sanity - it renders', () => {
-    const renderTree = render(<TestCase />);
-    const mainInputDriver = TextFieldDriver({
-      renderTree,
-      testID
-    });
-    mainInputDriver.exists();
-  });
-});

package/src/components/maskedInput/__tests__/maskedInput.old.spec.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import MaskedInput from "../old";
-import Text from "../../../components/text";
-import { TextFieldDriver } from "../../textField/TextField.driver.new";
-const testID = 'field';
-const TestCase = () => {
-  // @ts-expect-error - this has an error, but this is an old component and I don't want to spend time fixing it
-  return <MaskedInput testID={testID} renderMaskedText={text => <Text>{text}</Text>} />;
-};
-describe('MaskedInput (old)', () => {
-  it('Sanity - it renders', () => {
-    const renderTree = render(<TestCase />);
-    const mainInputDriver = TextFieldDriver({
-      renderTree,
-      testID
-    });
-    mainInputDriver.exists();
-  });
-});

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

@@ -1,58 +0,0 @@
-import React, { useState } from 'react';
-import { render } from '@testing-library/react-native';
-import Modal from "../";
-import { ModalDriver } from "../Modal.driver.new";
-import View from "../../view";
-import Button from "../../button";
-import { ButtonDriver } from "../../button/Button.driver.new";
-const testID = 'modal';
-const TestCase = props => {
-  return <Modal testID={testID} {...props} />;
-};
-describe('Sanity modal test', () => {
-  it('Testing visibility', () => {
-    const renderTree = render(<TestCase />);
-    const modalDriver = ModalDriver({
-      renderTree,
-      testID
-    });
-    expect(modalDriver.isVisible()).toBeFalsy();
-    renderTree.rerender(<TestCase visible />);
-    expect(modalDriver.isVisible()).toBeTruthy();
-  });
-  it('Should press on background', () => {
-    const backgroundPressHandler = jest.fn();
-    const renderTree = render(<TestCase visible onBackgroundPress={backgroundPressHandler} />);
-    const modalDriver = ModalDriver({
-      renderTree,
-      testID
-    });
-    expect(backgroundPressHandler).not.toHaveBeenCalled();
-    modalDriver.pressOnBackground();
-    expect(backgroundPressHandler).toHaveBeenCalledTimes(1);
-  });
-  it('Should dismiss modal', () => {
-    const onDismissHandler = jest.fn();
-    const TestCase = () => {
-      const [showModal, setShowModal] = useState(true);
-      return <View>
-          <Modal testID={testID} onDismiss={onDismissHandler} visible={showModal} />
-          <Button testID={'button-dismiss'} onPress={() => setShowModal(false)} />
-        </View>;
-    };
-    const renderTree = render(<TestCase />);
-    const modalDriver = ModalDriver({
-      renderTree,
-      testID
-    });
-    const buttonDriver = ButtonDriver({
-      renderTree,
-      testID: 'button-dismiss'
-    });
-    expect(modalDriver.isVisible()).toBeTruthy();
-    expect(onDismissHandler).not.toHaveBeenCalled();
-    buttonDriver.press();
-    expect(modalDriver.isVisible()).toBeFalsy();
-    expect(onDismissHandler).toHaveBeenCalledTimes(1);
-  });
-});