Yk/canvas tests

client/src/components/Canvas/Canvas.js

@@ -16,7 +16,7 @@ import { Circle } from "../Shapes/Circle";
 import { Square } from "../Shapes/Square";
 import Bubbles from "../TextBubbles/Bubbles";
 import Characters from "../Characters/characters";
-import { fetchCanvasElements, saveCanvasElements } from "../../store/index";
+import { fetchCanvasElements, saveCanvasElements } from "../../store/canvas";
 import ColorPicker from "../Editor/ColorPicker";
 import CanvasControls from "./CanvasControls";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";

client/src/components/Canvas/CanvasControls.js

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { saveAs } from "file-saver";
 import { canvasControlsCopy } from "./Copy";
-import { saveCanvasElements } from "../../store/index";
+import { saveCanvasElements } from "../../store/canvas";
 import { Button, Tooltip, OverlayTrigger } from "react-bootstrap";
 import { removeSquare, createBack } from "../Shapes/Square";
 import toast from "toasted-notes";

client/src/components/Canvas/CanvasControls.test.js

@@ -0,0 +1,29 @@
+import React from "react";
+import ReactDOM, { unmountComponentAtNode } from "react-dom";
+import { Provider } from "react-redux";
+import store from "../../store/index";
+import CanvasControls from "./CanvasControls";
+
+let container = null;
+
+// setting up a DOM element to render our test component into
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+});
+
+it("renders CanvasControls component", () => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <CanvasControls />
+    </Provider>,
+    container
+  );
+});
+
+// tear down method that unmounts our react component
+afterEach(() => {
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});

client/src/components/Editor/index.js

@@ -1,9 +1,8 @@
 import React from "react";
 import { connect } from "react-redux";
-
 import { Container, Row, Col } from "react-bootstrap";
 import CanvasControls from "../Canvas/index";
-import { authLogin, authSignup, me } from "../../store/index";
+import { authLogin, authSignup, me } from "../../store/user";
 import ModalForm from "./ModalForm";
 
 class Editor extends React.Component {

client/src/components/NavBar/NavBar.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Navbar, Container } from "react-bootstrap";
-import { authLogin, authSignup, me, logout } from "../../store/index";
+import { authLogin, authSignup, me, logout } from "../../store/user";
 import { connect } from "react-redux";
 import { Nav } from "react-bootstrap";
 import { Link } from "react-router-dom";
@@ -41,7 +41,7 @@ class NavigationBar extends React.Component {
                   this.logout();
                 }}
               >
-                Log In or Sign Up <i className="fas fa-chevron-right"></i>
+                Log In or Sign Up<i className="fas fa-chevron-right"></i>
               </Link>
             )}
           </Container>

client/src/components/NavBar/NavBar.test.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { render, unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+import { Provider } from "react-redux";
+import { HashRouter as Router } from "react-router-dom";
+import store from "../../store/index";
+import NavBar from "./NavBar";
+
+let container = null;
+
+// setting up a DOM element to render our test component into
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+});
+
+it("renders NavBar component and displays proper Log In / Log Out CTA", () => {
+  act(() => {
+    render(
+      <Provider store={store}>
+        <Router>
+          <NavBar />
+        </Router>
+      </Provider>,
+      container
+    );
+  });
+
+  const logInOrLogOutCTA = container.querySelector(".auth-button");
+  expect(logInOrLogOutCTA.textContent).toBe("Log In or Sign Up");
+});
+
+// tear down method that unmounts our react component
+afterEach(() => {
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});

client/src/store/canvas.js

@@ -81,3 +81,5 @@ export default function canvas(state = initialState, action) {
       return state;
   }
 }
+
+export * from "./canvas";

client/src/store/elements.js

@@ -28,3 +28,5 @@ export default function elementsA(state = initialState, action) {
       return state;
   }
 }
+
+export * from "./elements";

client/src/store/index.js

@@ -17,10 +17,7 @@ const reducer = combineReducers({
 const middleware = composeWithDevTools(
   applyMiddleware(thunkMiddleware, createLogger({ collapsed: true }))
 );
+
 const store = createStore(reducer, middleware);
 
 export default store;
-export * from "./pages";
-export * from "./canvas";
-export * from "./user";
-export * from "./elements";

client/src/store/pages.js

@@ -30,3 +30,5 @@ export default function pages(state = initialState, action) {
       return state;
   }
 }
+
+export * from "./pages";

client/src/store/user.js

@@ -1,8 +1,8 @@
-import axios from 'axios';
+import axios from "axios";
 
 // action types
-const GET_USER = 'GET_USER';
-const REMOVE_USER = 'REMOVE_USER';
+const GET_USER = "GET_USER";
+const REMOVE_USER = "REMOVE_USER";
 
 const defaultUser = {};
 
@@ -25,7 +25,7 @@ export const removeUser = () => {
 // thunk for checking if user is already logged in
 export const me = () => async (dispatch) => {
   try {
-    const res = await axios.get('/auth/me');
+    const res = await axios.get("/auth/me");
     dispatch(getUser(res.data || defaultUser));
   } catch (err) {
     console.error(err);
@@ -65,7 +65,7 @@ export const authSignup = (userName, password) => async (dispatch) => {
 
 export const logout = () => async (dispatch) => {
   try {
-    await axios.post('/auth/logout');
+    await axios.post("/auth/logout");
     dispatch(removeUser());
   } catch (err) {
     console.error(err);
@@ -96,3 +96,5 @@ export default function user(state = defaultUser, action) {
       return state;
   }
 }
+
+export * from "./user";