From 38828b2a8b058d5e5d861f542425939fcfd4b451 Mon Sep 17 00:00:00 2001 From: Yuliya Kandratsyeva Date: Mon, 22 Feb 2021 19:31:29 -0500 Subject: [PATCH 1/3] feat: adding first unit test, it's failing because of module exports in reducer - fixing this next --- .../components/Canvas/CanvasControls.test.js | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 client/src/components/Canvas/CanvasControls.test.js diff --git a/client/src/components/Canvas/CanvasControls.test.js b/client/src/components/Canvas/CanvasControls.test.js new file mode 100644 index 0000000..512040a --- /dev/null +++ b/client/src/components/Canvas/CanvasControls.test.js @@ -0,0 +1,23 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import CanvasControls from "./CanvasControls"; +import { unmountComponentAtNode } from "react-dom"; + +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(, container); +}); + +// tear down method that unmounts our react component +afterEach(() => { + unmountComponentAtNode(container); + container.remove(); + container = null; +}); From 46d1bcc9cfb02521c6df777ff3c9c405bb4f4d2b Mon Sep 17 00:00:00 2001 From: Yuliya Kandratsyeva Date: Mon, 22 Feb 2021 20:09:29 -0500 Subject: [PATCH 2/3] fix" cleaning up reducer code as a workaround for the issue with module exports --- client/src/components/App/App.test.js | 8 -------- client/src/components/Canvas/Canvas.js | 2 +- client/src/components/Canvas/CanvasControls.js | 2 +- client/src/components/Canvas/CanvasControls.test.js | 12 +++++++++--- client/src/components/Editor/index.js | 3 +-- client/src/components/NavBar/NavBar.js | 2 +- client/src/store/canvas.js | 2 ++ client/src/store/elements.js | 2 ++ client/src/store/index.js | 5 +---- client/src/store/pages.js | 2 ++ client/src/store/user.js | 12 +++++++----- 11 files changed, 27 insertions(+), 25 deletions(-) delete mode 100644 client/src/components/App/App.test.js diff --git a/client/src/components/App/App.test.js b/client/src/components/App/App.test.js deleted file mode 100644 index 0257af9..0000000 --- a/client/src/components/App/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from "@testing-library/react"; -import App from "./index"; - -test("renders learn react link", () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/client/src/components/Canvas/Canvas.js b/client/src/components/Canvas/Canvas.js index cf11001..c3f7573 100644 --- a/client/src/components/Canvas/Canvas.js +++ b/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"; diff --git a/client/src/components/Canvas/CanvasControls.js b/client/src/components/Canvas/CanvasControls.js index f7ad594..09f739b 100644 --- a/client/src/components/Canvas/CanvasControls.js +++ b/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"; diff --git a/client/src/components/Canvas/CanvasControls.test.js b/client/src/components/Canvas/CanvasControls.test.js index 512040a..936342c 100644 --- a/client/src/components/Canvas/CanvasControls.test.js +++ b/client/src/components/Canvas/CanvasControls.test.js @@ -1,7 +1,8 @@ import React from "react"; -import ReactDOM from "react-dom"; +import ReactDOM, { unmountComponentAtNode } from "react-dom"; +import { Provider } from "react-redux"; +import store from "../../store/index"; import CanvasControls from "./CanvasControls"; -import { unmountComponentAtNode } from "react-dom"; let container = null; @@ -12,7 +13,12 @@ beforeEach(() => { }); it("renders CanvasControls component", () => { - ReactDOM.render(, container); + ReactDOM.render( + + + , + container + ); }); // tear down method that unmounts our react component diff --git a/client/src/components/Editor/index.js b/client/src/components/Editor/index.js index 9b1b5a2..fa2e9e3 100644 --- a/client/src/components/Editor/index.js +++ b/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 { diff --git a/client/src/components/NavBar/NavBar.js b/client/src/components/NavBar/NavBar.js index 8ae583f..3917d7e 100644 --- a/client/src/components/NavBar/NavBar.js +++ b/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"; diff --git a/client/src/store/canvas.js b/client/src/store/canvas.js index 33fcbd9..a94b755 100644 --- a/client/src/store/canvas.js +++ b/client/src/store/canvas.js @@ -81,3 +81,5 @@ export default function canvas(state = initialState, action) { return state; } } + +export * from "./canvas"; diff --git a/client/src/store/elements.js b/client/src/store/elements.js index 15d85e4..a808cba 100644 --- a/client/src/store/elements.js +++ b/client/src/store/elements.js @@ -28,3 +28,5 @@ export default function elementsA(state = initialState, action) { return state; } } + +export * from "./elements"; diff --git a/client/src/store/index.js b/client/src/store/index.js index b6d994b..9b56a5f 100644 --- a/client/src/store/index.js +++ b/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"; diff --git a/client/src/store/pages.js b/client/src/store/pages.js index dcd672c..532d8a8 100644 --- a/client/src/store/pages.js +++ b/client/src/store/pages.js @@ -30,3 +30,5 @@ export default function pages(state = initialState, action) { return state; } } + +export * from "./pages"; diff --git a/client/src/store/user.js b/client/src/store/user.js index 909c08d..ac84e9b 100644 --- a/client/src/store/user.js +++ b/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"; From 75680fed12aa823222e659cf01d73b0219107b71 Mon Sep 17 00:00:00 2001 From: Yuliya Kandratsyeva Date: Tue, 23 Feb 2021 10:20:00 -0500 Subject: [PATCH 3/3] feat: adding tests for navbar --- client/src/components/NavBar/NavBar.js | 2 +- client/src/components/NavBar/NavBar.test.js | 38 +++++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 client/src/components/NavBar/NavBar.test.js diff --git a/client/src/components/NavBar/NavBar.js b/client/src/components/NavBar/NavBar.js index 3917d7e..6996955 100644 --- a/client/src/components/NavBar/NavBar.js +++ b/client/src/components/NavBar/NavBar.js @@ -41,7 +41,7 @@ class NavigationBar extends React.Component { this.logout(); }} > - Log In or Sign Up + Log In or Sign Up )} diff --git a/client/src/components/NavBar/NavBar.test.js b/client/src/components/NavBar/NavBar.test.js new file mode 100644 index 0000000..27e26ac --- /dev/null +++ b/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( + + + + + , + 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; +});