Infra/test renderer (#1470)

* adding react-native part of the testing library

* export from our own wrapper

* added hint tests

* PR Comments

* remove unused props in tests and in demo screen

Author: mendyEdri

package.json

@@ -70,6 +70,7 @@
     "@react-native-community/netinfo": "^5.6.2",
     "@react-native-picker/picker": "^1.9.4",
     "@testing-library/react-hooks": "^3.4.2",
+    "@testing-library/react-native": "^7.2.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import {Hint} from 'react-native-ui-lib';
+import {Colors} from '../../../style';
+import {render, findStyle} from '../../../uilib-test-renderer';
+
+const HintTestComponent = ({showHint}) => {
+  return (
+    <Hint
+      visible={showHint}
+      message={'Hint message to hint things'}
+      position={Hint.positions.TOP}
+      useSideTip
+      key={'1'}
+      targetFrame={{x: 1, y: 1, height: 1, width: 1}}
+      onBackgroundPress={() => {}}
+      color={Colors.white}
+      removePaddings
+      enableShadow
+      testID={'Hint'}
+    />
+  );
+};
+
+describe('Hint Screen component test', () => {
+  it('Test Hint component background color', async () => {
+    const hintTestId = 'Hint.message';
+
+    const expectedColor = Colors.primary;
+    const element = <HintTestComponent showHint/>;
+
+    const {getByTestId} = render(element);
+
+    const wrapper = getByTestId('Hint');
+    expect(wrapper).toBeTruthy();
+
+    const hint = getByTestId(hintTestId);
+    const color = findStyle('backgroundColor', hint);
+
+    expect(color).toBe(expectedColor);
+    expect(hint).toBeTruthy();
+  });
+
+  it('Test Hint modal is not visible when showHint is false', async () => {
+    const element = <HintTestComponent showHint={false}/>;
+
+    const {queryByTestId} = render(element);
+
+    const modal = queryByTestId('Hint.modal');
+
+    expect(modal).toBeNull();
+  });
+
+  it('Test Hint modal is visible when showHint is true', async () => {
+    const element = <HintTestComponent showHint/>;
+
+    const {getByTestId, queryAllByTestId} = render(element);
+    const hint = getByTestId('Hint');
+    expect(hint).toBeTruthy();
+  
+    expect(queryAllByTestId('Hint.modal')).toBeTruthy();
+  });
+});

src/uilib-test-renderer/helper.ts

@@ -0,0 +1,17 @@
+import _ from 'lodash';
+
+interface Props {
+  style: any;
+}
+
+interface Component {
+  props: Props;
+}
+
+const findStyle = <T>(key: string, component: Component): T => {
+  const flat = _.flatMap(component.props.style) as Array<any | undefined>;
+  const color = _.find(flat, key)[key];
+  return color;
+};
+
+export {findStyle};

src/uilib-test-renderer/index.ts

@@ -0,0 +1,8 @@
+export * from '@testing-library/react-native';
+import {findStyle} from './helper';
+
+export {
+  findStyle
+};
+
+/* Docs: https://callstack.github.io/react-native-testing-library/docs/api/  */