Init

package.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-scripts": "2.1.5"
+    "react-scripts": "2.1.5",
+    "react-test-renderer": "^16.8.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/controls/Controls.spec.js

@@ -1 +1,49 @@
-// Test away!
+import React from 'react';
+
+//Component Import
+import Controls from './Controls';
+
+//Testing imports
+import renderer from 'react-test-renderer';
+import {render, fireEvent} from 'react-testing-library';
+
+//Testing Execution Imports
+import 'react-testing-library/cleanup-after-each';
+import 'jest-dom/extend-expect';
+
+describe('<Controls />', () => {
+  //Run tests on the toggleLocked() function
+  describe('toggleClosed()', () => {
+    it('should call the toggleLocked function', () => {
+      const toggleClosed = jest.fn();
+      const {getByText} = render(<Controls toggleClosed={toggleClosed} />);
+
+      fireEvent.click(getByText(/close gate/i));
+      expect(toggleClosed).toHaveBeenCalled();
+    });
+    // it('should toggle the text of the button from closed gate to open gate', () => {
+    //   const locked = false;
+    //   const toggleClosed = jest.fn(locked => {
+    //     if (locked) {
+    //       locked = false;
+    //     } else {
+    //       locked = true;
+    //     }
+    //   });
+    //   const actual = toggleClosed(locked);
+    //   const {getByText, queryByText} = render(
+    //     <Controls toggleClosed={toggleClosed} />
+    //   );
+    //   expect(queryByText(/close gate/i).textContent).toBe('Close Gate');
+    //   fireEvent.click(getByText(/close gate/i));
+    //   expect(queryByText(/open gate/i).textContent).toBe('Open Gate');
+    // });
+  });
+
+  //Snapshots
+  it('Matches Snapshot', () => {
+    const tree = renderer.create(<Controls />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});

src/controls/__snapshots__/Controls.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Controls /> Matches Snapshot 1`] = `
+<div
+  className="controls panel"
+>
+  <button
+    className="toggle-btn"
+    disabled={true}
+  >
+    Lock Gate
+  </button>
+  <button
+    className="toggle-btn"
+  >
+    Close Gate
+  </button>
+</div>
+`;

src/dashboard/Dashboard.spec.js

@@ -1 +1,20 @@
-// Test away
+import React from 'react';
+
+//Component to test
+import Dashboard from './Dashboard';
+
+//Testing Libraries
+import {render, fireEvent} from 'react-testing-library';
+import renderer from 'react-test-renderer'; //Snapshot Library
+//Execution Testing Libraries
+import 'react-testing-library/cleanup-after-each'; //Resets the DOM after each test
+import 'jest-dom/extend-expect';
+
+describe('<Dashboard />', () => {
+  //Snapshot
+  it('matches snapshot', () => {
+    const tree = renderer.create(<Dashboard />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});

src/dashboard/__snapshots__/Dashboard.spec.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Dashboard /> matches snapshot 1`] = `
+Array [
+  <div
+    className="display panel"
+  >
+    <div
+      className="led green-led"
+    >
+      Unlocked
+    </div>
+    <div
+      className="led green-led"
+    >
+      Open
+    </div>
+  </div>,
+  <div
+    className="controls panel"
+  >
+    <button
+      className="toggle-btn"
+      disabled={true}
+      onClick={[Function]}
+    >
+      Lock Gate
+    </button>
+    <button
+      className="toggle-btn"
+      disabled={false}
+      onClick={[Function]}
+    >
+      Close Gate
+    </button>
+  </div>,
+]
+`;

src/display/Display.spec.js

@@ -1 +1,20 @@
-// Test away!
+import React from 'react';
+
+//Component to test
+import Display from './Display';
+
+//Testing Libraries
+import {render, fireEvent} from 'react-testing-library';
+import renderer from 'react-test-renderer'; //Snapshot Library
+//Execution Testing Libraries
+import 'react-testing-library/cleanup-after-each'; //Resets the DOM after each test
+import 'jest-dom/extend-expect';
+
+describe('<Display />', () => {
+  //Snapshot
+  it('matches snapshot', () => {
+    const tree = renderer.create(<Display />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});

src/display/__snapshots__/Display.spec.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Display /> matches snapshot 1`] = `
+<div
+  className="display panel"
+>
+  <div
+    className="led green-led"
+  >
+    Unlocked
+  </div>
+  <div
+    className="led green-led"
+  >
+    Open
+  </div>
+</div>
+`;

yarn.lock

@@ -8015,7 +8015,7 @@ react-error-overlay@^5.1.3:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.3.tgz#16fcbde75ed4dc6161dc6dc959b48e92c6ffa9ad"
   integrity sha512-GoqeM3Xadie7XUApXOjkY3Qhs8RkwB/Za4WMedBGrOKH1eTuKGyoAECff7jiVonJchOx6KZ9i8ILO5XIoHB+Tg==
 
-react-is@^16.8.1:
+react-is@^16.8.1, react-is@^16.8.4:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
@@ -8075,6 +8075,16 @@ react-scripts@2.1.5:
   optionalDependencies:
     fsevents "1.2.4"
 
+react-test-renderer@^16.8.4:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
+  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.4"
+    scheduler "^0.13.4"
+
 react-testing-library@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/react-testing-library/-/react-testing-library-6.0.0.tgz#81edfcfae8a795525f48685be9bf561df45bb35d"