Add unit test environment setup (#12)

* Setup and add tests (Jest, @testing-library/react-native)

Author: ChristianMarca

.gitignore

@@ -4,3 +4,6 @@ yarn-error.log
 
 ### GENERATED ###
 dist/
+
+### IDE's ###
+.idea/

jest.config.json

@@ -0,0 +1,16 @@
+{
+  "preset": "react-native",
+  "transform": {
+    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  "testRegex": "test/.*\\.test\\.(tsx?)$",
+  "moduleFileExtensions": ["ts", "tsx", "js"],
+  "setupFilesAfterEnv": [
+    "<rootDir>/test/setup.ts"
+  ],
+  "transformIgnorePatterns": [
+    "node_modules/(!react-native)",
+    "node_modules/(!@react-native-community)"
+  ]
+}

package.json

@@ -14,17 +14,26 @@
   },
   "scripts": {
     "compile": "tsc",
-    "lint": "tslint -c tslint.json \"!(dist)/**/*.ts?(x)\""
+    "lint": "tslint -c tslint.json \"!(dist)/**/*.ts?(x)\"",
+    "test": "jest"
   },
   "dependencies": {
     "react-native-responsive-dimensions": "^3.1.1",
     "styled-components": "^5.1.1"
   },
   "devDependencies": {
-    "@types/react": "^16.9.44",
+    "@testing-library/jest-native": "^3.3.0",
+    "@testing-library/react-native": "^7.0.2",
+    "@types/jest": "^26.0.10",
     "@types/react-native": "^0.63.4",
+    "@types/react-test-renderer": "^16.9.3",
     "@types/styled-components": "^5.1.2",
-    "react-native-svg": "^12.1.0",
+    "jest": "^26.4.2",
+    "react": ">=16.8.0",
+    "react-native": ">=0.50.0",
+    "react-native-svg": ">=12.1.0",
+    "react-test-renderer": "^16.13.1",
+    "ts-jest": "^26.2.0",
     "tslint": "^6.1.3",
     "tslint-react": "^5.0.0",
     "typescript": "^3.9.7",

src/lib/tour-overlay/TourOverlay.component.tsx

@@ -124,8 +124,13 @@ export const TourOverlay: React.FC<TourOverlayProps> = ({ color = "black", opaci
       transparent={true}
       visible={true}
     >
-      <OverlayView>
-        <Svg height="100%" width="100%" viewBox={`0 0 ${vwDP(100)} ${vhDP(100)}`}>
+      <OverlayView accessibilityLabel="Tour Overlay View">
+        <Svg
+          accessibilityLabel="Svg overlay view"
+          height="100%"
+          width="100%"
+          viewBox={`0 0 ${vwDP(100)} ${vhDP(100)}`}
+        >
           <Defs>
             <Mask id="mask" x={0} y={0} height="100%" width="100%">
               <Rect height="100%" width="100%" fill="#fff" />
@@ -147,7 +152,11 @@ export const TourOverlay: React.FC<TourOverlayProps> = ({ color = "black", opaci
           />
         </Svg>
 
-        <TipView style={[tipStyle, { opacity: tipOpacity }]} onLayout={measureTip}>
+        <TipView
+          style={[tipStyle, { opacity: tipOpacity }]}
+          onLayout={measureTip}
+          accessibilityLabel="Tip Overlay View"
+        >
           {tourStep.render({
             current,
             isFirst: current === 0,

test/helpers/TestTour.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Button, Text, View } from "react-native";
+
+import { Align, AttachStep, Position, SpotlightTourProvider, TourStep, useSpotlightTour } from "../../src";
+
+export const BASE_STEP: TourStep = {
+  alignTo: Align.SCREEN,
+  position: Position.BOTTOM,
+  render: ({ next, previous }) => (
+    <View accessibilityLabel="Container fake component" >
+      <Text>Hello, world!</Text>
+      <Button accessibilityLabel="Next spot button" title="Next spot" onPress={next} />
+      <Button accessibilityLabel="Previous spot button" title="Previous spot" onPress={previous} />
+    </View>
+  )
+};
+
+const TestComponent: React.FC = () => {
+  const tourContext = useSpotlightTour();
+
+  const fakeAction = () => undefined;
+
+  return (
+    <View>
+      <AttachStep index={0}>
+        <View>Hello, world!</View>
+      </AttachStep>
+      <AttachStep index={1}>
+        <Button onPress={fakeAction} title="Test button" />
+      </AttachStep>
+      <Button
+        accessibilityLabel="Start tour button"
+        title="start tour"
+        onPress={tourContext.start}
+      />
+      <Button
+        accessibilityLabel="Stop tour button"
+        title="stop tour"
+        onPress={tourContext.stop}
+      />
+    </View>
+  );
+};
+
+export const TestScreen: React.FC = () => {
+  const spotStep = BASE_STEP;
+  const secondSpotStep = { ...BASE_STEP, position: Position.TOP };
+  const spotSteps = [spotStep, secondSpotStep];
+
+  return (
+    <SpotlightTourProvider steps={spotSteps}>
+      <TestComponent />
+    </SpotlightTourProvider>
+  );
+};

test/helpers/helper.ts

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { Animated } from "react-native";
+import { ReactTestInstance } from "react-test-renderer";
+
+interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface Circle {
+  y: number;
+  x: number;
+  r: number;
+}
+
+export function checkValidIntersection(rectangle: Rectangle, circle: Circle): boolean {
+  /**
+   * The explanation of the formulas used are available on following the document:
+   * https://docs.google.com/document/d/1rrfTB7NN4r1HItxiPni83TvL-up3OYXt0dgLOsO9Sg0/edit?usp=sharing
+   */
+
+  /**
+   * Rectangles centroid formula:
+   * https://www.engineeringintro.com/mechanics-of-structures/centre-of-gravity/centroid-of-rectangle/
+   */
+
+  const rectangleCentroid = {
+    x: rectangle.x + rectangle.width / 2,
+    y: rectangle.y + rectangle.height / 2
+  };
+
+  const circleDistanceX = Math.abs(circle.x - rectangleCentroid.x);
+  const circleDistanceY = Math.abs(circle.y - rectangleCentroid.y);
+
+  // Distance between two points formula:
+  // https://www.mathsisfun.com/algebra/distance-2-points.html
+  const rectangleCircleCentroidXDistance = Math.pow(rectangleCentroid.x - circle.x, 2);
+  const rectangleCircleCentroidYDistance = Math.pow(rectangleCentroid.y - circle.y, 2);
+  const circleAndRectangleCentroidDistance = Math.sqrt(
+    rectangleCircleCentroidYDistance + rectangleCircleCentroidXDistance
+  );
+
+  const isCircleRadiusShorterThanCentroidsDistance = circle.r <= circleAndRectangleCentroidDistance;
+
+  // This formula verifies if the distance between the rectangle centroid and circle centroid
+  // is larger than the circle radius
+  const isCentroidsDistanceBiggerThanTheCirclesRadiusSum =
+    circleAndRectangleCentroidDistance >= rectangle.height / 2 + circle.r &&
+    circleAndRectangleCentroidDistance >= rectangle.width / 2 + circle.r;
+
+  const figuresAreOverlaid =
+    isCircleRadiusShorterThanCentroidsDistance &&
+    isCentroidsDistanceBiggerThanTheCirclesRadiusSum;
+
+  if (figuresAreOverlaid) {
+    return false;
+  }
+
+  // A formula that explains this implementation can be found on
+  // https://math.stackexchange.com/a/2916460
+  const relativeCircleRectangleXDistance = Math.pow(circleDistanceX - rectangle.width / 2, 2);
+  const relativeCircleRectangleYDistance = Math.pow(circleDistanceY - rectangle.height / 2, 2);
+  const cornerDistance = Math.sqrt(
+    relativeCircleRectangleXDistance + relativeCircleRectangleYDistance
+  );
+
+  const squaredCornerDistanceIsSmallerThanSquaredCircleRadius =
+    Math.pow(cornerDistance, 2) <= Math.pow(circle.r, 2);
+  const circleRadiusAndVirtualRectangleRadiusRelation =
+    circle.r / Math.max(rectangle.width / 2, rectangle.height / 2) >= 1;
+
+  return (
+    squaredCornerDistanceIsSmallerThanSquaredCircleRadius
+    && circleRadiusAndVirtualRectangleRadiusRelation
+  );
+}
+
+type ChildProps = { [key: string]: any };
+
+function isReactTestInstance(child: ReactTestInstance | string): child is ReactTestInstance {
+  return typeof child !== "string";
+}
+
+function isReactProps<T extends object>(
+  props: React.PropsWithChildren<T> | null
+): props is React.PropsWithChildren<T> {
+  return typeof props === "object";
+}
+
+export function findPropsOnTestInstance(
+  reactTestInstance: ReactTestInstance,
+  componentName: string
+): React.PropsWithChildren<ChildProps> {
+  const findInsideChild = (
+    childReactTestInstance: ReactTestInstance,
+    depth: number
+  ): (React.PropsWithChildren<ChildProps> | null)[] => {
+    if (!isReactTestInstance(childReactTestInstance) || depth <= 0) {
+      return [null];
+    }
+
+    if (childReactTestInstance.type === componentName) {
+      return [childReactTestInstance.props];
+    }
+
+    const children: Array<ReactTestInstance | string> = childReactTestInstance.children;
+
+    return children.map(nestedChild =>
+      isReactTestInstance(nestedChild)
+        ? findInsideChild(nestedChild, depth - 1)
+        : null
+    );
+  };
+
+  const props = findInsideChild(reactTestInstance, 20)
+    .flat(Infinity)
+    .filter(item => !!item)[0];
+
+  return isReactProps(props) ? props : {};
+}
+
+type AnimatedValue = number | Animated.AnimatedValue | { x: number; y: number } | Animated.AnimatedValueXY;
+
+type TimingAnimatedValue = Animated.AnimatedInterpolation | AnimatedValue;
+
+export function isAnimatedTimingInterpolation(value: TimingAnimatedValue): value is Animated.AnimatedInterpolation {
+  return Animated.AnimatedInterpolation && value instanceof Animated.AnimatedInterpolation;
+}
+
+export function isAnimatedValue(value: AnimatedValue): value is Animated.Value {
+  return value instanceof Animated.Value;
+}
+
+export function isAnimatedValueXY(value: Animated.Value | Animated.ValueXY): value is Animated.ValueXY {
+  return value instanceof Animated.ValueXY;
+}
+
+export function isXYValue(value: AnimatedValue): value is { x: number; y: number } & number {
+  return !(value instanceof Animated.Value)
+    && !(value instanceof Animated.ValueXY)
+    && (typeof value === "number" || (typeof value !== "number" && !!(value?.x && value?.y)));
+}
+
+export function isNumberValue(value: AnimatedValue): value is number {
+  return typeof value === "number";
+}

test/helpers/measures.ts

@@ -0,0 +1,20 @@
+export interface MeasureOnSuccessCallbackParams {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export const viewMockMeasureData: MeasureOnSuccessCallbackParams = {
+  height: 400,
+  width: 200,
+  x: 1,
+  y: 1
+};
+
+export const buttonMockMeasureData: MeasureOnSuccessCallbackParams = {
+  height: 50,
+  width: 100,
+  x: 10,
+  y: 10
+};

test/helpers/native-mocks.ts

@@ -0,0 +1,74 @@
+import * as React from "react";
+import {
+  Animated,
+  MeasureInWindowOnSuccessCallback,
+  NativeMethods
+} from "react-native";
+
+import { MeasureOnSuccessCallbackParams } from "./measures";
+
+export function mockNativeComponent(modulePath: string, mockMethods: NativeMethods) {
+  const OriginalComponent = jest.requireActual(modulePath);
+  const SuperClass = typeof OriginalComponent === "function"
+      ? OriginalComponent
+      : React.Component;
+
+  const Component = class extends SuperClass {
+    static displayName: string = "Component";
+
+    render() {
+      const name: string =
+        OriginalComponent.displayName ||
+        OriginalComponent.name ||
+        (OriginalComponent.render
+          ? OriginalComponent.render.displayName ||
+            OriginalComponent.render.name
+          : "Unknown");
+
+      const props = Object.assign({}, OriginalComponent.defaultProps);
+
+      if (this.props) {
+        Object.keys(this.props).forEach(prop => {
+          if (this.props[prop] !== undefined) {
+            props[prop] = this.props[prop];
+          }
+        });
+      }
+
+      return React.createElement(name.replace(/^(RCT|RK)/, ""), props, this.props.children);
+    }
+  };
+
+  Object.keys(OriginalComponent).forEach(classStatic => {
+    Component[classStatic] = OriginalComponent[classStatic];
+  });
+
+  Object.assign(Component.prototype, mockMethods);
+
+  return Component;
+}
+
+export const emptyNativeMethods: NativeMethods = {
+  blur: jest.fn(),
+  focus: jest.fn(),
+  measure: jest.fn(),
+  measureInWindow: jest.fn(),
+  measureLayout: jest.fn(),
+  refs: {},
+  setNativeProps: jest.fn()
+};
+
+export function createMeasureMethod(
+  mockMeasureData: MeasureOnSuccessCallbackParams
+): (callback: MeasureInWindowOnSuccessCallback) => void {
+  return callback => {
+    const { x, y, width, height } = mockMeasureData;
+    callback(x, y, width, height);
+  };
+}
+
+export const emptyAnimationMethods: Animated.CompositeAnimation = {
+  reset: () => undefined,
+  start: () => undefined,
+  stop: () => undefined
+};