Fix/#2 status codes (#65)

* 1.2.0 (#62) * Update changelog for 1.2.0 * feat(security): prevent secrets from leaking to source control (#59) * feat(security): prevent secrets from leaking to source control * chore: update lint-staged pacakgeto use v9 * fix: update versions * fix(security): add secrets baseline * 🚧 Added two extra status codes * ✅ Unit checks now validates options groups * 🚧 Label is only visible as a label attribute
boyney123 · Aug 13, 2019 · 742587b · 742587b
1 parent e91243c
commit 742587b
Show file tree

Hide file tree

Showing 6 changed files with 965 additions and 140 deletions.
diff --git a/client/src/components/RouteModal/index.js b/client/src/components/RouteModal/index.js
@@ -18,7 +18,9 @@ const STATUS_CODES = [
   StatusCodes.NOT_FOUND,
   StatusCodes.CONFLICT,
   StatusCodes.UNPROCESSABLE_ENTITY,
-  StatusCodes.INTERNAL_SERVER_ERROR
+  StatusCodes.INTERNAL_SERVER_ERROR,
+  StatusCodes.SERVICE_UNAVAILABLE,
+  StatusCodes.GATEWAY_TIMEOUT
 ];
 
 /**
@@ -83,6 +85,10 @@ const Modal = function(props) {
     }
   };
 
+  const statusCodeStartingWith = startingNumber => {
+    return STATUS_CODES.filter(routeStatusCode => routeStatusCode.startsWith(startingNumber));
+  };
+
   return (
     <>
       <div className="modal is-active" data-testid="route-modal">
@@ -123,13 +129,29 @@ const Modal = function(props) {
                 <label className="label">Status Code</label>
                 <div className="control">
                   <div className="select">
-                    <select aria-label="route-statuscode" value={statusCode} onChange={e => updateStatusCode(e.currentTarget.value)}>
-                      {STATUS_CODES.map(test => (
-                        <option key={test} value={test}>
-                          {test}
-                        </option>
-                      ))}
-                    </select>
+                      <select aria-label="route-statuscode" value={statusCode} onChange={e => updateStatusCode(e.currentTarget.value)}>
+                        <optgroup aria-label="2xx" label="2xx">
+                          {statusCodeStartingWith("2").map(routeStatusCode => 
+                            <option key={routeStatusCode} value={routeStatusCode}>
+                              {routeStatusCode}
+                            </option>
+                          )}
+                        </optgroup>
+                        <optgroup aria-label="4xx" label="4xx">
+                          {statusCodeStartingWith("4").map(routeStatusCode =>
+                            <option key={routeStatusCode} value={routeStatusCode}>
+                              {routeStatusCode}
+                            </option>
+                          )}
+                        </optgroup>
+                        <optgroup aria-label="5xx" label="5xx">
+                          {statusCodeStartingWith("5").map(routeStatusCode =>
+                            <option key={routeStatusCode} value={routeStatusCode}>
+                              {routeStatusCode}
+                            </option>
+                          )}
+                        </optgroup>
+                      </select>
                   </div>
                 </div>
               </div>
@@ -197,3 +219,4 @@ const Modal = function(props) {
 };
 
 export default Modal;
+
diff --git a/client/src/components/RouteModal/spec.js b/client/src/components/RouteModal/spec.js
@@ -60,25 +60,37 @@ describe("Route Modal", () => {
       expect(getByValue("PATCH", dropdownOptions)).toBeVisible();
     });
 
+    it("with a dropdown list with three groups", () => {
+      const route = buildRoute();
+      const { getByLabelText } = render(<RouteModal route={route} />);
+      const dropdown = getByLabelText("route-statuscode");
+      const dropdownOptionGroups = dropdown.childNodes;
+
+      expect(dropdownOptionGroups.length).toEqual(3);
+      expect(getByLabelText("2xx", dropdownOptionGroups)).toBeVisible();
+      expect(getByLabelText("4xx", dropdownOptionGroups)).toBeVisible();
+      expect(getByLabelText("5xx", dropdownOptionGroups)).toBeVisible();
+    });
+
     it("with a dropdown list of all available status code", () => {
       const route = buildRoute();
       const { getByLabelText, getByValue } = render(<RouteModal route={route} />);
       const dropdown = getByLabelText("route-statuscode");
-      const dropdownOptions = dropdown.children;
-
-      expect(dropdownOptions.length).toEqual(11);
-
-      expect(getByValue("200", dropdownOptions)).toBeVisible();
-      expect(getByValue("201", dropdownOptions)).toBeVisible();
-      expect(getByValue("202", dropdownOptions)).toBeVisible();
-      expect(getByValue("204", dropdownOptions)).toBeVisible();
-      expect(getByValue("400", dropdownOptions)).toBeVisible();
-      expect(getByValue("401", dropdownOptions)).toBeVisible();
-      expect(getByValue("403", dropdownOptions)).toBeVisible();
-      expect(getByValue("404", dropdownOptions)).toBeVisible();
-      expect(getByValue("409", dropdownOptions)).toBeVisible();
-      expect(getByValue("422", dropdownOptions)).toBeVisible();
-      expect(getByValue("500", dropdownOptions)).toBeVisible();
+      const dropdownOptionGroups = dropdown.childNodes;
+
+      expect(getByValue("200", dropdownOptionGroups[0].children)).toBeVisible();
+      expect(getByValue("201", dropdownOptionGroups[0].children)).toBeVisible();
+      expect(getByValue("202", dropdownOptionGroups[0].children)).toBeVisible();
+      expect(getByValue("204", dropdownOptionGroups[0].children)).toBeVisible();
+      expect(getByValue("400", dropdownOptionGroups[1].children)).toBeVisible();
+      expect(getByValue("401", dropdownOptionGroups[1].children)).toBeVisible();
+      expect(getByValue("403", dropdownOptionGroups[1].children)).toBeVisible();
+      expect(getByValue("404", dropdownOptionGroups[1].children)).toBeVisible();
+      expect(getByValue("409", dropdownOptionGroups[1].children)).toBeVisible();
+      expect(getByValue("422", dropdownOptionGroups[1].children)).toBeVisible();
+      expect(getByValue("500", dropdownOptionGroups[2].children)).toBeVisible();
+      expect(getByValue("503", dropdownOptionGroups[2].children)).toBeVisible();
+      expect(getByValue("504", dropdownOptionGroups[2].children)).toBeVisible();
     });
 
     it("with a dropdown list of all available delay values", () => {

diff --git a/client/src/utils/consts/index.js b/client/src/utils/consts/index.js
@@ -17,7 +17,9 @@ export const StatusCodes = {
   NOT_FOUND: "404",
   CONFLICT: "409",
   UNPROCESSABLE_ENTITY: "422",
-  INTERNAL_SERVER_ERROR: "500"
+  INTERNAL_SERVER_ERROR: "500",
+  SERVICE_UNAVAILABLE: "503",
+  GATEWAY_TIMEOUT: "504"
 };
 
 export const MOCKIT_SERVER_URL = process.env.REACT_APP_MOCKIT_SERVER_URL || "localhost:3000";
diff --git a/server/.secrets-baseline b/server/.secrets-baseline
@@ -0,0 +1,34 @@
+{
+  "exclude": {
+    "files": null,
+    "lines": null
+  },
+  "generated_at": "2019-07-19T05:29:22Z",
+  "plugins_used": [
+    {
+      "name": "AWSKeyDetector"
+    },
+    {
+      "base64_limit": 4.5,
+      "name": "Base64HighEntropyString"
+    },
+    {
+      "name": "BasicAuthDetector"
+    },
+    {
+      "hex_limit": 3,
+      "name": "HexHighEntropyString"
+    },
+    {
+      "name": "KeywordDetector"
+    },
+    {
+      "name": "PrivateKeyDetector"
+    },
+    {
+      "name": "SlackDetector"
+    }
+  ],
+  "results": {},
+  "version": "0.12.2"
+}