Add tests

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+coverage

.travis.yml

@@ -1,8 +1,12 @@
 language: node_js
 node_js:
-  - "10"
   - "12"
+  - "14"
 cache:
   yarn: true
   directories:
     - "node_modules"
+before_install:
+  - export TZ=Europe/Berlin
+script:
+  - yarn ci

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: "ts-jest",
+  testPathIgnorePatterns: ["/dist/", "/node_modules/"],
+};

package.json

@@ -8,12 +8,13 @@
   "license": "MIT",
   "scripts": {
     "start": "concurrently 'yarn ts:build:test' 'yarn server'",
-    "server": "http-server ./src/__tests__/visual/",
+    "server": "http-server ./src/__visual__/",
     "ts:lint": "eslint . --ext ts,tsx",
     "ts:build": "tsc -p tsconfig.json",
-    "ts:build:test": "webpack --config src/__tests__/visual/webpack.config.js --watch",
+    "ts:build:test": "webpack --config src/__visual__/webpack.config.js --watch",
     "lint": "yarn ts:lint",
-    "test": "yarn lint",
+    "test": "jest",
+    "ci": "yarn lint && yarn test",
     "build": "yarn ts:build",
     "prepublishOnly": "yarn build"
   },
@@ -25,6 +26,11 @@
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^11.2.2",
+    "@types/": "testing-library/jest-dom",
+    "@types/enzyme": "^3.10.8",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^26.0.19",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.6",
     "@typescript-eslint/eslint-plugin": "^4.10.0",
@@ -39,13 +45,18 @@
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-react": "^7.21.5",
     "http-server": "^0.12.3",
+    "jest": "^26.6.3",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
+    "ts-jest": "^26.4.4",
     "ts-loader": "^8.0.12",
     "typescript": "^4.1.3",
     "webpack": "^5.11.0",
     "webpack-cli": "^4.2.0"
+  },
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.6"
   }
 }

src/Walls.tsx

@@ -12,7 +12,8 @@ export interface RouteProps {
   fallback?: FunctionComponent<any>;
 }
 
-interface Props {
+// export for testing
+export interface Props {
   routes: RouteProps[];
   isAuthorized?: boolean;
   onUnauthorized?: (props: any) => void;

src/__tests__/index.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { screen, render } from "@testing-library/react";
+import { createMemoryHistory } from "history";
+import { Router } from "react-router-dom";
+import Walls, { Props } from "../Walls";
+
+import "@testing-library/jest-dom/extend-expect";
+
+const ROUTE = {
+  id: "foo",
+  route: "/foo",
+  render: () => <>foo</>,
+  private: false,
+};
+
+const renderWrapper = (props: Props, currentRoute: string) => {
+  const history = createMemoryHistory();
+  history.push(currentRoute);
+
+  render(
+    <Router history={history}>
+      <Walls {...props} />
+    </Router>,
+  );
+};
+
+describe("Walls", () => {
+  describe("Given an existing walls garden", () => {
+    describe("then a route is public ", () => {
+      describe("can be visited", () => {
+        beforeEach(() => {
+          renderWrapper({ routes: [ROUTE] }, ROUTE.route);
+        });
+
+        it("renders Route component", () => {
+          expect(screen.getByText(/foo/i)).toBeInTheDocument();
+        });
+      });
+    });
+
+    describe("then a route is private", () => {
+      describe("and the user is authorized", () => {
+        describe("can be visited", () => {
+          beforeEach(() => {
+            renderWrapper(
+              {
+                isAuthorized: true,
+                routes: [
+                  { ...ROUTE, render: () => <>private</>, private: true },
+                ],
+              },
+              ROUTE.route,
+            );
+          });
+
+          it("renders as Private Route", () => {
+            expect(screen.getByText(/private/i)).toBeInTheDocument();
+          });
+        });
+      });
+
+      describe("and the user is not authorized", () => {
+        describe("can not be visited", () => {
+          beforeEach(() => {
+            renderWrapper(
+              {
+                isAuthorized: false,
+                routes: [
+                  {
+                    ...ROUTE,
+                    render: () => <>private</>,
+                    fallback: () => <>fallback</>,
+                    private: true,
+                  },
+                ],
+              },
+              ROUTE.route,
+            );
+          });
+
+          it("does not render the private route", () => {
+            expect(screen.getByText(/fallback/i)).toBeInTheDocument();
+          });
+        });
+      });
+    });
+  });
+});

src/__tests__/visual/Container.tsx → src/__visual__/Container.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, ReactElement, useState } from "react";
 import { NavLink } from "react-router-dom";
 
-import Walls from "../../../index";
+import Walls from "../../index";
 
 import routes from "./routes";