1.1.0 (#48)

* Add the ability to group routes (#42)

* First version of grouping routes

* Switched to new calculation of groups and styled them

* Added group routing based on togglable state

* Updated package-lock

* DB - Moved some components around, added some tests and fixed jest running tests

* DB - Added more test coverage

* Removed useless header x-powered-by (#45)

* Improved methods and status codes (#44)

* DB - Fixing tests for new routes that were added as part of #44

* Added CHANGELOG

* Feature - Add support for adding headers onto responses (#46)

* Started to add custom headers

* Tmp

* #4 - Added the ability to add headers in the routes

* Updated CHANGELOG

* DB - Format of settings

* Updated version

CHANGELOG.md

@@ -0,0 +1,13 @@
+## [Unreleased]
+
+- Add the ability to group routes ([JDansercoer](https://github.com/JDansercoer) in [#42](https://github.com/boyney123/mockit/pull/42))
+
+- Removed useless header x-powered-by ([webdevium](https://github.com/webdevium) in [#45](https://github.com/boyney123/mockit/pull/45))
+
+- Improved methods and status codes ([webdevium](https://github.com/webdevium) in [#44](https://github.com/boyney123/mockit/pull/44))
+
+- Add the ability to add custom headers ([boyney123](https://github.com/boyney123) in [#46](https://github.com/boyney123/mockit/pull/46))
+
+## 1.0.0
+
+Initial Release

client/config-overrides.js

@@ -0,0 +1,6 @@
+module.exports = {
+  jest: function(config) {
+    config.testMatch.push("<rootDir>/src/**/{spec,test}.{js,jsx,ts,tsx}");
+    return config;
+  }
+};

client/package.json

@@ -1,23 +1,25 @@
 {
   "name": "mockit-ui",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "bulma": "^0.7.4",
     "bulma-extensions": "^6.2.4",
     "faker": "^4.1.0",
+    "lodash": "^4.17.11",
     "node-sass": "^4.11.0",
     "react": "v16.8.3",
     "react-dom": "v16.8.3",
     "react-json-editor-ajrm": "^2.5.9",
     "react-scripts": "3.0.0",
     "scrollreveal": "^4.0.5",
+    "styled-components": "^4.2.0",
     "uuid": "^3.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "REACT_APP_MOCKIT_API_URL=localhost react-scripts test",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "jest": {
@@ -40,6 +42,7 @@
     "dom-testing-library": "^3.19.1",
     "jest-dom": "^3.1.3",
     "nock": "^10.0.6",
+    "react-app-rewired": "^2.1.3",
     "react-testing-library": "^6.1.2"
   }
 }

client/src/App.js

@@ -1,29 +1,30 @@
 import React, { useState } from "react";
 import useScrollReval from "./hooks/useScrollReveal";
-import RouteList from "./components/RouteList";
+import RouteListStack from "./components/RouteListStack";
+import RouteListGroup from "./components/RouteListGroup";
 import Logo from "./components/Logo";
+import { version } from "../package.json";
 
 import { buildRoute, deleteRoute } from "./utils/routes-api";
 
 import RouteModal from "./components/RouteModal";
 import SettingsModal from "./components/SettingsModal";
 import ConfirmationDialog from "./components/ConfirmationDialog";
 
-import { settings, routes } from "./config/routes.json";
+import { settings, routes as configRoutes } from "./config/routes.json";
 
 import "./scss/index.scss";
 
-export default function({ settings: propSettings }) {
-  useScrollReval([
-    { selector: ".hero .title, .card, .subtitle " },
-    { selector: ".route", options: { duration: 750, distance: "40px", easing: "cubic-bezier(0.5, -0.01, 0, 1.005)", interval: 64, origin: "bottom", viewFactor: 0.32 } }
-  ]);
+export default function({ settings: propSettings, customRoutes }) {
+  useScrollReval([{ selector: ".hero .title, .card, .subtitle " }]);
 
   const [selectedRoute, setSelectedRoute] = useState();
   const [routeToBeRemoved, setRouteToBeRemoved] = useState();
   const [settingsModalVisible, showSettingsModal] = useState(false);
 
-  const { features: { chaosMonkey = false } = {} } = propSettings || settings;
+  const routes = customRoutes || configRoutes;
+
+  const { features: { chaosMonkey = false, groupedRoutes = false } = {} } = propSettings || settings;
 
   return (
     <>
@@ -73,14 +74,23 @@ export default function({ settings: propSettings }) {
             <p className=" mb20 has-text-centered">The chaos monkey is enabled and causing havoc on all APIs...</p>
           </>
         )}
+        {routes.length === 0 && (
+          <p aria-label="no-routes" className="no-routes has-text-centered">
+            No routes found. Click "Add Route" to get started.
+          </p>
+        )}
 
-        <RouteList routes={routes} onRouteEdit={route => setSelectedRoute(route)} onRouteDelete={route => setRouteToBeRemoved(route)} />
+        {groupedRoutes ? (
+          <RouteListGroup routes={routes} onRouteEdit={route => setSelectedRoute(route)} onRouteDelete={route => setRouteToBeRemoved(route)} />
+        ) : (
+          <RouteListStack routes={routes} onRouteEdit={route => setSelectedRoute(route)} onRouteDelete={route => setRouteToBeRemoved(route)} />
+        )}
       </main>
       <footer className="footer" aria-label="Site footer">
         <div className="content has-text-centered">
           <p>
             <a href="https://github.com/boyney123/mockit" target="_blank" rel="noopener noreferrer">
-              <strong>MockIt </strong>
+              <strong>MockIt v{version} </strong>
             </a>{" "}
             an OpenSource tool developed by{" "}
             <a href="https://github.com/boyney123" aria-label="Github Repo" target="_blank" rel="noopener noreferrer">

client/src/components/HeaderInput/index.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from "react";
+import uuid from "uuid/v4";
+
+export default function({ index, data = {}, onBlur = () => {}, onRemove = () => {} } = {}) {
+  const { id = uuid(), header: initialHeader, value: initialValue } = data;
+
+  const [header, setHeader] = useState(initialHeader);
+  const [value, setValue] = useState(initialValue);
+
+  const update = (field, inputValue) => {
+    field === "header" ? setHeader(inputValue) : setValue(inputValue);
+  };
+
+  useEffect(() => {
+    if (header && value) onBlur({ id, header, value });
+  }, [header, value]);
+
+  return (
+    <div className="columns Header" aria-label="header">
+      <div className="control column">
+        <input className="input" placeholder="header" value={header} aria-label="header-key" onChange={e => update("header", e.target.value)} />
+      </div>
+      <div className="control column">
+        <input className="input" placeholder="value" value={value} aria-label="header-value" onChange={e => update("value", e.target.value)} />
+      </div>
+      <div className="control column is-1 Header__Remove" onClick={() => onRemove(id)}>
+        <i className="far fa-times-circle" aria-label="remove-header" />
+      </div>
+    </div>
+  );
+}

client/src/components/HeaderInput/spec.js

@@ -0,0 +1,55 @@
+// __tests__/fetch.test.js
+import React from "react";
+import { render, fireEvent, cleanup } from "react-testing-library";
+import "jest-dom/extend-expect";
+import HeaderInput from "./";
+
+afterEach(cleanup);
+
+describe("DoubleInput", () => {
+  describe("renders", () => {
+    it("two inputs one for the header and one for the value", () => {
+      const { getByPlaceholderText } = render(<HeaderInput />);
+      expect(getByPlaceholderText("header")).toBeVisible();
+      expect(getByPlaceholderText("value")).toBeVisible();
+    });
+
+    it('two inputs are rendered with the given "header" and "value" data when given to the component', () => {
+      const { getByPlaceholderText } = render(<HeaderInput data={{ id: 1, header: "Content-Type", value: "application/json" }} />);
+      expect(getByPlaceholderText("header").value).toEqual("Content-Type");
+      expect(getByPlaceholderText("value").value).toEqual("application/json");
+    });
+  });
+
+  describe("props: events", () => {
+    it('onBlur is called when both "header" and "value" have been entered', () => {
+      const spy = jest.fn();
+      const { getByPlaceholderText } = render(<HeaderInput onBlur={spy} />);
+      fireEvent.change(getByPlaceholderText("header"), { target: { value: "Content-Type" } });
+      fireEvent.change(getByPlaceholderText("value"), { target: { value: "application/json" } });
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('onBlur is not called when "header" value is set but "value" is missing', () => {
+      const spy = jest.fn();
+      const { getByPlaceholderText } = render(<HeaderInput onBlur={spy} />);
+      fireEvent.change(getByPlaceholderText("header"), { target: { value: "Content-Type" } });
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('onBlur is not called when "value" is set but the "header" value is not', () => {
+      const spy = jest.fn();
+      const { getByPlaceholderText } = render(<HeaderInput onBlur={spy} />);
+      fireEvent.change(getByPlaceholderText("value"), { target: { value: "application/json" } });
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it("onRemove is called with the headers id when the user clicks on the remove icon", () => {
+      const spy = jest.fn();
+      const data = { id: 1, header: "Content-Type", value: "application/json" };
+      const { getByLabelText } = render(<HeaderInput data={data} onRemove={spy} />);
+      fireEvent.click(getByLabelText("remove-header"));
+      expect(spy).toHaveBeenCalledWith(1);
+    });
+  });
+});