Update Body component to accept a hasSidebar prop to make testing easier

Brian Earwood · Brian Earwood · commit 1fdad7150728 · 2019-01-10T17:40:23.000-06:00
diff --git a/src/App.js b/src/App.js
@@ -10,7 +10,9 @@ import {
 import {
   buildFacetConfigFromConfig,
   buildSearchOptionsFromConfig,
-  getConfig
+  getConfig,
+  getFacetFields,
+  getSortFields
 } from "./config/config-helper";
 
 function createDriver() {
@@ -49,7 +51,7 @@ class App extends Component {
             }`}
           >
             <Header />
-            <Body />
+            <Body hasSidebar={getFacetFields().length > 0 || getSortFields().length > 0 ? true : false} />
           </div>
         )}
       </SearchProvider>
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import React from "react";
 
 import {
@@ -9,17 +10,17 @@ import {
   ResultsPerPage,
   Sorting
 } from "../containers";
-import { getFacetFields, getSortFields, buildSortOptionsFromConfig } from "../config/config-helper";
+import { buildSortOptionsFromConfig } from "../config/config-helper";
 
-export default function Body() {
+function Body({ hasSidebar = true }) {
   return (
     <div className="reference-ui-body">
       <ErrorBoundary>
         <div className="initial-state-message">
           Type a search above to begin.
         </div>
         <div className="search-results">
-          <div className={"sidebar" + (getFacetFields().length > 0 || getSortFields().length > 0 ? '' : ' hidden')}>
+          <div className={"sidebar" + (hasSidebar ? '' : ' hidden')}>
             <Sorting sortOptions={buildSortOptionsFromConfig()} />
             <Facets />
           </div>
@@ -42,3 +43,9 @@ export default function Body() {
     </div>
   );
 }
+
+Body.propTypes = {
+  hasSidebar: PropTypes.bool
+};
+
+export default Body;
diff --git a/src/components/Body.test.js b/src/components/Body.test.js
@@ -2,7 +2,12 @@ import React from "react";
 import Body from "./Body";
 import { shallow } from "enzyme";
 
-it("renders correctly", () => {
-  const wrapper = shallow(<Body />);
+it("renders correctly with sidebar", () => {
+  const wrapper = shallow(<Body hasSidebar={true}/>);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders correctly without the sidebar", () => {
+  const wrapper = shallow(<Body hasSidebar={false} />);
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/src/components/__snapshots__/Body.test.js.snap b/src/components/__snapshots__/Body.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`renders correctly with sidebar 1`] = `
 <div
   className="reference-ui-body"
 >
@@ -57,3 +57,61 @@ exports[`renders correctly 1`] = `
   </Component>
 </div>
 `;
+
+exports[`renders correctly without the sidebar 1`] = `
+<div
+  className="reference-ui-body"
+>
+  <Component>
+    <div
+      className="initial-state-message"
+    >
+      Type a search above to begin.
+    </div>
+    <div
+      className="search-results"
+    >
+      <div
+        className="sidebar hidden"
+      >
+        <Component
+          sortOptions={
+            Array [
+              Object {
+                "direction": "",
+                "name": "Relevance",
+                "value": "",
+              },
+            ]
+          }
+        />
+        <Component />
+      </div>
+      <div
+        className="results"
+      >
+        <div
+          className="results__header"
+        >
+          <div
+            className="meta"
+          >
+            <Component />
+            <Component />
+          </div>
+        </div>
+        <div
+          className="results__body"
+        >
+          <Component />
+        </div>
+        <div
+          className="results__footer"
+        >
+          <Component />
+        </div>
+      </div>
+    </div>
+  </Component>
+</div>
+`;
