Merge pull request #84 from wcandillon/tests

Add extensive integration tests

Author: crutchcorn

package.json

@@ -49,6 +49,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
+    "@testing-library/react-native": "^8.0.0-rc.1",
     "@types/jest": "^26.0.0",
     "@types/lodash": "^4.14.168",
     "@types/react": "^16.9.19",
@@ -61,6 +62,7 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "16.13.1",
+    "react-test-renderer": "16.13.1",
     "react-native": "0.63.4",
     "react-native-builder-bob": "^0.18.0",
     "release-it": "^14.2.2",
@@ -75,9 +77,11 @@
   },
   "jest": {
     "preset": "react-native",
+    "setupFilesAfterEnv": ["./src/__tests__/setup.ts"],
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
+      "<rootDir>/lib/",
+      "<rootDir>/src/__tests__/setup.ts"
     ]
   },
   "commitlint": {

src/MediaQuery.tsx

@@ -1,4 +1,5 @@
-import { PixelRatio, Platform } from "react-native";
+import type * as React from "react";
+import { PixelRatio, Platform, PlatformOSType } from "react-native";
 
 import useDimensions from "./useDimensions";
 
@@ -15,7 +16,7 @@ export interface MediaQuery {
   maxPixelRatio?: number;
   orientation?: Orientation;
   condition?: boolean;
-  platform?: string;
+  platform?: PlatformOSType;
 }
 
 export const isInInterval = (
@@ -26,22 +27,23 @@ export const isInInterval = (
   (min === undefined || value >= min) && (max === undefined || value <= max);
 
 export const mediaQuery = (
-  {
+  query: MediaQuery,
+  width: number,
+  height: number
+): boolean => {
+  const {
     minWidth,
     maxWidth,
     minHeight,
     maxHeight,
     minAspectRatio,
     maxAspectRatio,
-    orientation,
-    platform,
     minPixelRatio,
     maxPixelRatio,
+    orientation,
+    platform,
     condition,
-  }: MediaQuery,
-  width: number,
-  height: number
-): boolean => {
+  } = query;
   const currentOrientation: Orientation =
     width > height ? "landscape" : "portrait";
   return (
@@ -55,18 +57,11 @@ export const mediaQuery = (
   );
 };
 
-interface MediaQueryProps extends MediaQuery {
-  children: React.ReactNode;
-}
-
-const MediaQuery = ({
-  children,
-  ...props
-}: MediaQueryProps): React.ReactNode => {
+const MediaQuery: React.FC<MediaQuery> = ({ children, ...props }) => {
   const { width, height } = useDimensions();
   const val = mediaQuery(props, width, height);
   if (val) {
-    return children;
+    return children as JSX.Element;
   }
   return null;
 };

src/__tests__/MediaQuery.test.tsx

@@ -0,0 +1,233 @@
+import React from "react";
+import { Dimensions, Platform, Text } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import MediaQuery, { isInInterval, mediaQuery } from "../MediaQuery";
+
+const MediaQueryTestComp = ({ minHeight }: { minHeight: number }) => {
+  return (
+    <MediaQuery minHeight={minHeight}>
+      <Text>I am visible</Text>
+    </MediaQuery>
+  );
+};
+
+test("isInInterval", () => {
+  expect(isInInterval(5, 1, 10)).toBeTruthy();
+  expect(isInInterval(11, 1, 10)).toBeFalsy();
+  expect(isInInterval(0, 1, 10)).toBeFalsy();
+});
+
+describe("mediaQuery", () => {
+  test("minHeight should be false if too low", () => {
+    const width = 100;
+    const height = 100;
+    const res = mediaQuery({ minHeight: 450 }, width, height);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("minHeight should be true if above", () => {
+    const width = 100;
+    const height = 500;
+    const res = mediaQuery({ minHeight: 450 }, width, height);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("maxHeight should be true if lower", () => {
+    const width = 100;
+    const height = 100;
+    const res = mediaQuery({ maxHeight: 450 }, width, height);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("maxHeight should be false if above", () => {
+    const width = 100;
+    const height = 500;
+    const res = mediaQuery({ maxHeight: 450 }, width, height);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("minWidth should be false if too low", () => {
+    const width = 100;
+    const height = 100;
+    const res = mediaQuery({ minWidth: 450 }, width, height);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("minWidth should be true if above", () => {
+    const width = 500;
+    const height = 100;
+    const res = mediaQuery({ minWidth: 450 }, width, height);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("maxWidth should be true if lower", () => {
+    const width = 100;
+    const height = 100;
+    const res = mediaQuery({ maxWidth: 450 }, width, height);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("maxWidth should be false if above", () => {
+    const width = 500;
+    const height = 100;
+    const res = mediaQuery({ maxWidth: 450 }, width, height);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("minAspectRatio should be false if too low", () => {
+    const width = 100;
+    const height = 200;
+    const res = mediaQuery({ minAspectRatio: 1 }, width, height);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("minAspectRatio should be true if above", () => {
+    const width = 200;
+    const height = 100;
+    const res = mediaQuery({ minAspectRatio: 1 }, width, height);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("maxAspectRatio should be true if lower", () => {
+    const width = 100;
+    const height = 200;
+    const res = mediaQuery({ maxAspectRatio: 1 }, width, height);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("maxAspectRatio should be false if above", () => {
+    const width = 200;
+    const height = 100;
+    const res = mediaQuery({ maxAspectRatio: 1 }, width, height);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("minPixelRatio should be false if too low", () => {
+    Dimensions.set({ pixelRatio: 0 });
+    const res = mediaQuery({ minPixelRatio: 1 }, 0, 0);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("minPixelRatio should be true if above", () => {
+    Dimensions.set({ pixelRatio: 2 });
+    const res = mediaQuery({ minPixelRatio: 1 }, 0, 0);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("maxPixelRatio should be true if lower", () => {
+    Dimensions.set({ pixelRatio: 0 });
+    const res = mediaQuery({ maxPixelRatio: 1 }, 0, 0);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("maxPixelRatio should be false if above", () => {
+    Dimensions.set({ pixelRatio: 2 });
+    const res = mediaQuery({ maxPixelRatio: 1 }, 0, 0);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("orientation landscape should fail when expected", () => {
+    const width = 100;
+    const height = 200;
+    const res = mediaQuery({ orientation: "landscape" }, width, height);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("orientation landscape should pass when expected", () => {
+    const width = 200;
+    const height = 100;
+    const res = mediaQuery({ orientation: "landscape" }, width, height);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("orientation portrait should fail when expected", () => {
+    const width = 200;
+    const height = 100;
+    const res = mediaQuery({ orientation: "portrait" }, width, height);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("orientation portrait should pass when expected", () => {
+    const width = 100;
+    const height = 200;
+    const res = mediaQuery({ orientation: "portrait" }, width, height);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("platform should match", () => {
+    Platform.OS = "web";
+    const res = mediaQuery({ platform: "web" }, 0, 0);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("platform should fail", () => {
+    Platform.OS = "ios";
+    const res = mediaQuery({ platform: "web" }, 0, 0);
+
+    expect(res).toBeFalsy();
+  });
+
+  test("condition should match", () => {
+    const res = mediaQuery({ condition: true }, 0, 0);
+
+    expect(res).toBeTruthy();
+  });
+
+  test("condition should fail", () => {
+    const res = mediaQuery({ condition: false }, 0, 0);
+
+    expect(res).toBeFalsy();
+  });
+});
+
+describe("MediaQuery Comp", () => {
+  test("should render when constraints set", async () => {
+    const { queryByText } = render(<MediaQueryTestComp minHeight={50} />);
+
+    Dimensions.set({ height: 100, width: 100 });
+
+    expect(queryByText("I am visible")).toBeTruthy();
+  });
+
+  test("should not render when constraints not set", async () => {
+    const { queryByText } = render(<MediaQueryTestComp minHeight={150} />);
+
+    Dimensions.set({ height: 100, width: 100 });
+
+    expect(queryByText("I am visible")).toBeFalsy();
+  });
+
+  test("should re-render when constraints updated", async () => {
+    const { queryByText } = render(<MediaQueryTestComp minHeight={150} />);
+
+    Dimensions.set({ height: 100, width: 100 });
+
+    expect(queryByText("I am visible")).toBeFalsy();
+
+    Dimensions.set({ height: 200, width: 200 });
+
+    expect(queryByText("I am visible")).toBeTruthy();
+  });
+});

src/__tests__/ResponsiveComponent.test.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Dimensions, Text, View } from "react-native";
+import { render } from "@testing-library/react-native";
+
+import ResponsiveComponent from "../ResponsiveComponent";
+
+class RespTestComp extends ResponsiveComponent {
+  render() {
+    const { width, height } = this.state.window;
+    return (
+      <View>
+        <Text>Width: {width}</Text>
+        <Text>Height: {height}</Text>
+      </View>
+    );
+  }
+}
+
+describe("ResponsiveComponent", () => {
+  test("should display proper sizing", async () => {
+    Dimensions.set({ height: 100, width: 100 });
+
+    const { queryByText } = render(<RespTestComp />);
+
+    expect(queryByText("Width: 100")).toBeTruthy();
+    expect(queryByText("Height: 100")).toBeTruthy();
+
+    Dimensions.set({ height: 200, width: 200 });
+
+    expect(queryByText("Width: 200")).toBeTruthy();
+    expect(queryByText("Height: 200")).toBeTruthy();
+  });
+});