react-native-ui-lib 8.0.1 → 8.1.0

package/src/components/timeline/__tests__/driver.index.spec.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { TimelineDriver } from "../timeline.driver";
+import Timeline from "../index";
+import Text from "../../text";
+import Assets from "../../../assets";
+const testID = 'test-timeline';
+const labelContent = 2;
+const defaultIcon = Assets.internal.icons.check;
+const getDriver = props => {
+  const renderTree = render(<Timeline testID={testID} {...props}>
+    <Text>Timeline</Text>
+  </Timeline>);
+  return TimelineDriver({
+    renderTree,
+    testID
+  });
+};
+describe('Timeline', () => {
+  describe('sanity', () => {
+    it('should render Timeline', () => {
+      const timelineDriver = getDriver();
+      expect(timelineDriver.exists()).toBeTruthy();
+      expect(timelineDriver.getPoint().exists()).toBeTruthy();
+      expect(timelineDriver.getTopLine().exists()).toBeTruthy();
+      expect(timelineDriver.getTopLine().isVisible()).toBeFalsy();
+      expect(timelineDriver.getBottomLine().exists()).toBeFalsy();
+    });
+  });
+  describe('Point', () => {
+    describe('with Icon', () => {
+      it('should override icon color when passing iconProps.tintColor', () => {
+        const props = {
+          point: {
+            icon: defaultIcon,
+            iconProps: {
+              tintColor: '#A2387E'
+            }
+          }
+        };
+        const timelineDriver = getDriver(props);
+        const contentStyle = timelineDriver.getPoint().getContentStyle();
+        expect(contentStyle.tintColor).toEqual('#A2387E');
+        expect(contentStyle.color).toBeUndefined();
+      });
+    });
+    describe('with Label', () => {
+      it('should override label color when passing labelColor', () => {
+        const props = {
+          point: {
+            label: labelContent,
+            labelColor: '#A2387E'
+          }
+        };
+        const timelineDriver = getDriver(props);
+        const contentStyle = timelineDriver.getPoint().getContentStyle();
+        expect(contentStyle.color).toEqual('#A2387E');
+        expect(contentStyle.tintColor).toBeUndefined();
+      });
+    });
+    it('should render Icon when icon and label passed', () => {
+      const props = {
+        point: {
+          icon: defaultIcon,
+          iconProps: {
+            tintColor: '#A2387E'
+          },
+          label: labelContent
+        }
+      };
+      const timelineDriver = getDriver(props);
+      const contentStyle = timelineDriver.getPoint().getContentStyle();
+      expect(contentStyle.tintColor).toEqual('#A2387E');
+      expect(contentStyle.color).toBeUndefined();
+    });
+    it('tintColor and color should be undefined when icon and label are not passed', () => {
+      const timelineDriver = getDriver();
+      const contentStyle = timelineDriver.getPoint().getContentStyle();
+      expect(contentStyle.tintColor).toBeUndefined();
+      expect(contentStyle.color).toBeUndefined();
+    });
+  });
+  describe('TopLine', () => {
+    it('should override top line color and width', () => {
+      const props = {
+        topLine: {
+          color: '#00A87E',
+          width: 3
+        }
+      };
+      const timelineDriver = getDriver(props);
+      const topLine = timelineDriver.getTopLine();
+      expect(topLine.exists()).toBeTruthy();
+      const topLineStyle = topLine.getStyle();
+      expect(topLineStyle.backgroundColor).toEqual('#00A87E');
+      expect(topLineStyle.width).toEqual(3);
+    });
+    it('should render line with entryPoint', () => {
+      const props = {
+        topLine: {
+          entry: true
+        }
+      };
+      const timelineDriver = getDriver(props);
+      const topLine = timelineDriver.getTopLine();
+      expect(topLine.isEntryPointExists()).toBeTruthy();
+    });
+  });
+  describe('BottomLine', () => {
+    it('should render BottomLine', () => {
+      const props = {
+        bottomLine: {}
+      };
+      const timelineDriver = getDriver(props);
+      const bottomLine = timelineDriver.getBottomLine();
+      expect(bottomLine.exists()).toBeTruthy();
+    });
+    it('should override bottom line color and width', () => {
+      const props = {
+        bottomLine: {
+          color: '#FFF4D3',
+          width: 5
+        }
+      };
+      const timelineDriver = getDriver(props);
+      const bottomLine = timelineDriver.getBottomLine();
+      expect(bottomLine.exists()).toBeTruthy();
+      const bottomLineStyle = bottomLine.getStyle();
+      expect(bottomLineStyle.backgroundColor).toEqual('#FFF4D3');
+      expect(bottomLineStyle.width).toEqual(5);
+    });
+  });
+});

package/src/helpers/__tests__/AvatarHelper.spec.js

@@ -0,0 +1,170 @@
+import {Colors, Typography} from '../../../src/style';
+
+describe('services/AvatarService', () => {
+  let uut;
+  beforeEach(() => {
+    uut = require('../../../src/helpers/AvatarHelper');
+  });
+
+  it('should getInitialsTypography', () => {
+    expect(uut.getInitialsTypography(12)).toEqual({fontSize: 10});
+    expect(uut.getInitialsTypography(16)).toEqual({fontSize: 10});
+    expect(uut.getInitialsTypography(20)).toEqual({fontSize: 10});
+    expect(uut.getInitialsTypography(28)).toEqual(Typography.text90BO);
+    expect(uut.getInitialsTypography(40)).toEqual(Typography.text80BO);
+    expect(uut.getInitialsTypography(48)).toEqual(Typography.text80BO);
+    expect(uut.getInitialsTypography(60)).toEqual(Typography.text60BO);
+    expect(uut.getInitialsTypography(80)).toEqual(Typography.text50H);
+    expect(uut.getInitialsTypography(120)).toEqual(Typography.text40H);
+    expect(uut.getInitialsTypography(200)).toEqual(Typography.text40H);
+  });
+
+  it('should getAvatarColors', () => {
+    const avatarColors = uut.getAvatarColors();
+    expect(avatarColors).toEqual([
+      Colors.blue20,
+      Colors.cyan20,
+      Colors.green20,
+      Colors.yellow20,
+      Colors.orange20,
+      Colors.red20,
+      Colors.purple20,
+      Colors.violet20
+    ]);
+  });
+
+  it('should getColorById', () => {
+    const avatarColors = uut.getAvatarColors();
+    expect(uut.getColorById(null)).toBe(avatarColors[0]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f48')).toBe(avatarColors[0]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f47')).toBe(avatarColors[1]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f46')).toBe(avatarColors[2]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f45')).toBe(avatarColors[3]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f44')).toBe(avatarColors[4]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f43')).toBe(avatarColors[5]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f42')).toBe(avatarColors[6]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f49')).toBe(avatarColors[7]);
+  });
+
+  it('should getColorById with custom array of colors', () => {
+    const customColors = [Colors.blue10, Colors.red10, Colors.orange10];
+    expect(uut.getColorById(null, customColors)).toBe(customColors[0]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f48', customColors)).toBe(customColors[1]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f47', customColors)).toBe(customColors[2]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f46', customColors)).toBe(customColors[0]);
+    expect(uut.getColorById('a19c0ee3-c165-434e-bf4d-a6c218c83f45', customColors)).toBe(customColors[1]);
+  });
+
+  it('should getInitials', () => {
+    expect(uut.getInitials('Austin Guerrero')).toBe('AG');
+    expect(uut.getInitials('Austin Guerrero', 1)).toBe('A');
+    expect(uut.getInitials('Austin Guerrero', 2)).toBe('AG');
+    expect(uut.getInitials('Austin Guerrero', 3)).toBe('AG');
+    expect(uut.getInitials('Austin   Guerrero')).toBe('AG');
+    expect(uut.getInitials('theresa simpson')).toBe('TS');
+    expect(uut.getInitials('theresa simpson', 1)).toBe('T');
+    expect(uut.getInitials('theresa simpson', 2)).toBe('TS');
+    expect(uut.getInitials('theresa simpson', 3)).toBe('TS');
+    expect(uut.getInitials('Sarah Michelle Galler')).toBe('SM');
+    expect(uut.getInitials('Sarah Michelle Galler', 1)).toBe('S');
+    expect(uut.getInitials('Sarah Michelle Galler', 2)).toBe('SM');
+    expect(uut.getInitials('Sarah Michelle Galler', 3)).toBe('SMG');
+    expect(uut.getInitials('Keith')).toBe('K');
+    expect(uut.getInitials()).toBe('');
+    expect(uut.getInitials(' Austin ')).toBe('A');
+  });
+
+  it('should getBackgroundColor', () => {
+    const avatarColors = uut.getAvatarColors();
+    const hashFunction = uut.hashStringToNumber;
+    const defaultColor = Colors.grey80;
+    expect(uut.getBackgroundColor('', avatarColors, hashFunction, defaultColor)).toBe(defaultColor);
+    expect(uut.getBackgroundColor(undefined, avatarColors, hashFunction, defaultColor)).toBe(defaultColor);
+    expect(uut.getBackgroundColor(null, avatarColors, hashFunction, defaultColor)).toBe(defaultColor);
+    expect(uut.getBackgroundColor('Austin Guerrero', undefined, hashFunction, defaultColor)).toBe(defaultColor);
+    expect(uut.getBackgroundColor('Austin Guerrero', null, hashFunction, defaultColor)).toBe(defaultColor);
+    expect(uut.getBackgroundColor('Austin Guerrero', avatarColors, undefined, defaultColor)).toBe(defaultColor);
+    expect(uut.getBackgroundColor('Austin Guerrero', avatarColors, null, defaultColor)).toBe(defaultColor);
+    expect(uut.getBackgroundColor('Austin Guerrero', avatarColors, hashFunction, defaultColor)).toBe(Colors.orange20);
+    expect(uut.getBackgroundColor('theresa simpson', avatarColors, hashFunction, defaultColor)).toBe(Colors.green20);
+    expect(uut.getBackgroundColor('Sarah Michelle Galler', avatarColors, hashFunction, defaultColor)).toBe(Colors.green20);
+    expect(uut.getBackgroundColor('Keith', avatarColors, hashFunction, defaultColor)).toBe(Colors.green20);
+    expect(uut.getBackgroundColor(' Austin ', avatarColors, hashFunction, defaultColor)).toBe(Colors.cyan20);
+  });
+
+  describe('Is-gravatar query function', () => {
+    it('should return true for a valid (known) gravatar url', () => {
+      expect(uut.isGravatarUrl('https://www.gravatar.com/avatar/00000000000000000000000000000000')).toEqual(true);
+      expect(uut.isGravatarUrl('http://www.gravatar.com/avatar/00000000000000000000000000000000')).toEqual(true);
+      expect(uut.isGravatarUrl('http://gravatar.com/avatar/00000000000000000000000000000000')).toEqual(true);
+    });
+
+    it('should return true for a gravatar-ish url', () => {
+      expect(uut.isGravatarUrl('http://gravatar.org/avatar/00000000000000000000000000000000')).toEqual(true);
+      expect(uut.isGravatarUrl('http://gravatar/avatar/00000000000000000000000000000000')).toEqual(true);
+    });
+
+    it('should return false for a url with a broken path', () => {
+      expect(uut.isGravatarUrl('https://www.gravatar.com')).toEqual(false);
+    });
+
+    it('should return false for a non-gravatar url', () => {
+      expect(uut.isGravatarUrl('https://www._gravatar.com/avatar/00000000000000000000000000000000')).toEqual(false);
+      expect(uut.isGravatarUrl('https://www.avatar.com/avatar/00000000000000000000000000000000')).toEqual(false);
+      expect(uut.isGravatarUrl('https://www.gravatars.com/avatar/00000000000000000000000000000000')).toEqual(false);
+      expect(uut.isGravatarUrl('https://www.grava.tar/avatar/00000000000000000000000000000000')).toEqual(false);
+    });
+  });
+
+  describe('isBlankGravatarUrl', () => {
+    it('should return false if the url does not contain the blank param', () => {
+      expect(uut.isBlankGravatarUrl('https://www.gravatar.com/avatar/00000000000000000000000000000000')).toEqual(false);
+    });
+
+    it('should return true if the url contains the blank param', () => {
+      expect(uut.isBlankGravatarUrl('https://www.gravatar.com/avatar/00000000000000000000000000000000?d=blank')).toEqual(true);
+    });
+
+    it('should return false if it is not a gravatar url', () => {
+      expect(uut.isBlankGravatarUrl('https://some/random/url/avatar/000000000?d=blank')).toEqual(false);
+    });
+  });
+
+  describe('Patch-fix function', () => {
+    const gravatarUrl = 'https://www.gravatar.com/avatar/00000000000000000000000000000000';
+    const shortGravatarUrl = 'https://gravatar.com/avatar/00000000000000000000000000000000';
+
+    it('should be applied for valid gravatar links without a default url-param', () => {
+      expect(uut.patchGravatarUrl(gravatarUrl)).toEqual(`${gravatarUrl}?d=404`);
+      expect(uut.patchGravatarUrl(shortGravatarUrl)).toEqual(`${shortGravatarUrl}?d=404`);
+    });
+
+    it('should be applied for valid gravatar links with an existing default url-param', () => {
+      const url = `${gravatarUrl}?d=mock`;
+      const urlShort = `${shortGravatarUrl}?d=mock`;
+      expect(uut.patchGravatarUrl(url)).toEqual(`${gravatarUrl}?d=404`);
+      expect(uut.patchGravatarUrl(urlShort)).toEqual(`${shortGravatarUrl}?d=404`);
+    });
+
+    it('should be applied for valid gravatar links with an existing default url-param and a hash', () => {
+      const url = `${gravatarUrl}?d=mock#hash-mock`;
+      const urlShort = `${shortGravatarUrl}?d=mock#hash-mock`;
+      expect(uut.patchGravatarUrl(url)).toEqual(`${gravatarUrl}?d=404#hash-mock`);
+      expect(uut.patchGravatarUrl(urlShort)).toEqual(`${shortGravatarUrl}?d=404#hash-mock`);
+    });
+
+    it('should be applied for valid gravatar links with both short- and longhand default url-param', () => {
+      const url = `${gravatarUrl}?d=mock&default=mock-long`;
+      const urlShort = `${shortGravatarUrl}?d=mock&default=mock-long`;
+      expect(uut.patchGravatarUrl(url)).toEqual(`${gravatarUrl}?d=404`);
+      expect(uut.patchGravatarUrl(urlShort)).toEqual(`${shortGravatarUrl}?d=404`);
+    });
+
+    it('should keep existing non-default params', () => {
+      const url = `${gravatarUrl}?d=mock&mock1=param1&mock2=param2`;
+      const urlShort = `${shortGravatarUrl}?d=mock&mock1=param1&mock2=param2`;
+      expect(uut.patchGravatarUrl(url)).toEqual(`${gravatarUrl}?d=404&mock1=param1&mock2=param2`);
+      expect(uut.patchGravatarUrl(urlShort)).toEqual(`${shortGravatarUrl}?d=404&mock1=param1&mock2=param2`);
+    });
+  });
+});

package/src/hooks/useDidUpdate/__tests__/useDidUpdate.spec.js

@@ -0,0 +1,80 @@
+import {renderHook} from '@testing-library/react-hooks';
+import useDidUpdate from '../index';
+
+describe('useDidUpdate hook tests', () => {
+  it('Expect action to not be called when the dependencies array value hasn\'t change', () => {
+    const action = jest.fn();
+    const dependencies = [false, 'false'];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    rerender();
+    rerender();
+    rerender();
+    expect(action.mock.calls.length).toBe(0);
+  });
+
+  it('Expect action to be called when dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, 'YES YES', 1];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, 'NO NO', 1];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action to be called when dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, 'YES YES', 1];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, 'NO NO', 1];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action to be called when dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, 'YES YES', 1];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, 'NO NO', 1];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action to be called when object value in dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, [1, 2], {name: 'AAA', address: {number: 10}}];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, [1, 2], {name: 'BBB'}];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+    
+    dependencies = [false, [1, 2], {name: 'AAA', address: {number: 20}}];
+    rerender();
+    expect(action.mock.calls.length).toBe(2);
+  });
+
+  it('Expect action to be called when value in array dependencies array has change', () => {
+    const action = jest.fn();
+    let dependencies = [false, [1, [2]], {name: 'AAA'}];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false, [1, [3]], {name: 'AAA', address: {number: 20}}];
+    rerender();
+    expect(action.mock.calls.length).toBe(1);
+  });
+
+  it('Expect action not to be called when value in array dependencies array has not change value just reference', () => {
+    const action = jest.fn();
+    let dependencies = [false];
+    const {rerender} = renderHook(() => useDidUpdate(action, dependencies));
+
+    dependencies = [false];
+    rerender();
+    expect(action.mock.calls.length).toBe(0);
+  });
+
+});

package/src/hooks/useOrientation/__tests__/useOrientation.spec.js

@@ -0,0 +1,70 @@
+import {renderHook, act} from '@testing-library/react-hooks';
+
+let Constants;
+let useOrientation;
+let orientationChangeListeners;
+
+describe('useOrientation hook', () => {
+  beforeEach(() => {
+    jest.mock('../../../commons/Constants');
+    Constants = require('../../../commons/Constants').default;
+    useOrientation = require('../index').default;
+
+    orientationChangeListeners = [];
+
+    Constants.addDimensionsEventListener = jest.fn(callback => {
+      orientationChangeListeners.push(callback);
+    });
+  });
+
+  it('should return current orientation', () => {
+    act(() => {
+      fakeOrientationChange('landscape');
+    });
+    const {result} = renderHook(() => {
+      const {orientation} = useOrientation();
+
+      return {orientation};
+    });
+
+    expect(result.current.orientation).toBe('landscape');
+  });
+
+  it('should update orientation when it change', () => {
+    act(() => {
+      fakeOrientationChange('landscape');
+    });
+    const {result} = renderHook(() => {
+      const {orientation} = useOrientation();
+
+      return {orientation};
+    });
+
+    act(() => {
+      fakeOrientationChange('portrait');
+    });
+
+    expect(result.current.orientation).toBe('portrait');
+  });
+
+  it('should invoke given change callback when orientation changes', () => {
+    const changeCallback = jest.fn();
+    renderHook(() => {
+      const {orientation} = useOrientation({onOrientationChange: changeCallback});
+      return {orientation};
+    });
+
+    act(() => {
+      fakeOrientationChange('landscape');
+    });
+
+    expect(changeCallback).toHaveBeenCalledTimes(1);
+  });
+});
+
+function fakeOrientationChange(orientation = 'portrait') {
+  Constants.orientation = orientation;
+  orientationChangeListeners.forEach(callback => {
+    callback(orientation);
+  });
+}

package/src/hooks/useToggleValue/__tests__/useToggleValue.spec.js

@@ -0,0 +1,89 @@
+import {renderHook, act} from '@testing-library/react-hooks';
+import useToggleValue from '../index';
+
+describe('useOrientation hook tests', () => {
+  const makeSUT = (initial, secondary) => {
+    return renderHook(() => {
+      return useToggleValue(initial, secondary);
+    });
+  };
+
+  const getValue = (result) => {
+    return result.current[0];
+  };
+
+  const getToggle = (result) => {
+    return result.current[1]();
+  };
+
+  const expectValueToToggle = (a, b) => {
+    const {result} = makeSUT(a, b);
+    expect(getValue(result)).toEqual(a);
+  
+    act(() => getToggle(result));
+    expect(getValue(result)).toEqual(b);
+  };
+
+  it('Initial value should be set', () => {
+    const {result} = makeSUT(true, false);
+
+    expect(getValue(result)).toEqual(true);
+  });
+
+  it('Initial value can be undefined', () => {
+    const {result} = makeSUT(undefined, 'Sid');
+    expect(getValue(result)).toEqual(undefined);
+
+    act(() => getToggle(result));
+    expect(getValue(result)).toEqual('Sid');
+  });
+
+  it('Initial value can be change', () => {
+    const {result} = makeSUT(true, false);
+    act(() => getToggle(result));
+    
+    expect(getValue(result)).toEqual(false);
+  });
+
+  it('Allow toggle boolean without passing a second parameter', () => {
+    const {result} = makeSUT(true);
+    act(() => getToggle(result));
+    
+    expect(getValue(result)).toEqual(false);
+  });
+
+  it('Can toggle strings', () => {
+    const a = 'Ohio';
+    const b = 'Texas';
+
+    expectValueToToggle(a, b);
+  });
+
+  it('Can toggle numbers', () => {
+    const a = 30;
+    const b = 22;
+    
+    expectValueToToggle(a, b);
+  });
+
+  it('Can toggle arrays', () => {
+    const a = [1, 2, 3, 4];
+    const b = ['Booking', 'OneApp', 'Fed'];
+
+    expectValueToToggle(a, b);
+  });
+
+  it('Can toggle objects', () => {
+    const a = {};
+    const b = {name: 'Darth', occupation: 'Father'};
+
+    expectValueToToggle(a, b);
+  });
+
+  it('Can toggle different types', () => {
+    const a = 999;
+    const b = '999';
+
+    expectValueToToggle(a, b);
+  });
+});