Adds snapshot tests for authenticated app and unauthenticated app components, which now logout properly

src/App.jsx

@@ -1,13 +1,17 @@
 import React from "react";
 import { hot } from "react-hot-loader";
 import "./App.css";
+import { useAuth } from "./context/AuthContext";
 import UnauthenticatedApp from "./components/UnauthenticatedApp";
+import AuthenticatedApp from "./components/AuthenticatedApp";
 
 function App() {
+	const { user } = useAuth();
+	console.log(user);
 	return (
 		<div className="App">
 			<h1>Frontend</h1>
-			<UnauthenticatedApp />
+			{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
 		</div>
 	);
 }

src/components/AuthenticatedApp-snapshot.test.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import AuthenticatedApp from "./AuthenticatedApp";
+import { AuthContext } from "../context/AuthContext";
+
+test("AuthenticatedApp Snapshot", () => {
+
+	const appRender = renderer.create(
+		<AuthContext.Provider value={{ login: jest.fn(), register: jest.fn(), logout: jest.fn() }}>
+			<AuthenticatedApp />
+		</AuthContext.Provider>
+	);
+
+	const tree = appRender.toJSON();
+
+	expect(tree).toMatchSnapshot();
+});

src/components/AuthenticatedApp.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { useAuth } from "../context/AuthContext";
+
+function AuthenticatedApp() {
+	const { logout } = useAuth();
+
+	return (
+		<div>
+			<p>Howdy partner.</p>
+			<button type="button" onClick={logout}>
+				Logout
+			</button>
+		</div>
+	);
+}
+
+export default AuthenticatedApp;

src/components/Register.test.jsx

@@ -8,7 +8,7 @@ test("Register inputs", () => {
 	const register = render(<Register register={registerFunc} />);
 
 	const usernameInput = register.getByRole("textbox", { name: /Username/ });
-	const displayNameInput = register.getByRole("textbox", { name: /Name/ })
+	const displayNameInput = register.getByRole("textbox", { name: /Name/ });
 	const passwordInput = register.getByLabelText("Password");
 	const buttonInput = register.getByRole("button", { name: /Sign me up/i });
 
@@ -17,7 +17,7 @@ test("Register inputs", () => {
 	const pw = "here's a password";
 
 	userEvent.type(usernameInput, username);
-	userEvent.type(displayNameInput, displayName)
+	userEvent.type(displayNameInput, displayName);
 	userEvent.type(passwordInput, pw);
 	userEvent.click(buttonInput);
 	expect(registerFunc).toHaveBeenCalledWith(username, displayName, pw);

src/components/UnauthenticatedApp-snapshot.test.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import UnauthenticatedApp from "./UnauthenticatedApp";
+import { AuthContext } from "../context/AuthContext";
+
+test("UnauthenticatedApp Snapshot", () => {
+
+	const appRender = renderer.create(
+		<AuthContext.Provider value={{ login: jest.fn(), register: jest.fn(), logout: jest.fn() }}>
+			<UnauthenticatedApp />
+		</AuthContext.Provider>
+	);
+
+	const tree = appRender.toJSON();
+
+	expect(tree).toMatchSnapshot();
+});

src/components/__snapshots__/AuthenticatedApp-snapshot.test.jsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AuthenticatedApp Snapshot 1`] = `
+<div>
+  <p>
+    Howdy partner.
+  </p>
+  <button
+    onClick={[MockFunction]}
+    type="button"
+  >
+    Logout
+  </button>
+</div>
+`;

src/components/__snapshots__/UnauthenticatedApp-snapshot.test.jsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnauthenticatedApp Snapshot 1`] = `
+<div>
+  <button
+    onClick={[Function]}
+    type="submit"
+  >
+    toggle signup
+  </button>
+  <div
+    className="login-wrapper"
+  >
+    <h1>
+      Please Log In
+    </h1>
+    <form
+      onSubmit={[Function]}
+    >
+      <label>
+        <p>
+          Username
+        </p>
+        <input
+          id="username"
+          onChange={[Function]}
+          type="text"
+        />
+      </label>
+      <label>
+        <p>
+          Password
+        </p>
+        <input
+          id="password"
+          onChange={[Function]}
+          type="password"
+        />
+      </label>
+      <div>
+        <button
+          type="submit"
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;

src/context/AuthContext.jsx

@@ -1,10 +1,51 @@
-import React from "react";
+import React, { useState } from "react";
 import { register, login } from "../services/auth-service";
 
+const localStorageKey = "__auth_token__";
 const AuthContext = React.createContext();
 
 const AuthProvider = (props) => {
-	return <AuthContext.Provider value={{ login, register }} {...props} />;
+	const [user, setUser] = useState(null);
+
+	const setUserWithToken = (token) => {
+		if (user !== null && user.token === token) {
+			// Already set don't re-set.
+			return;
+		}
+		setUser({ token: token });
+	};
+
+	const tok = window.localStorage.getItem(localStorageKey);
+
+	if (tok !== null) {
+		setUserWithToken(tok);
+	}
+
+	const wrappedLogin = (username, password) => {
+		login(username, password).then((token) => {
+			window.localStorage.setItem(localStorageKey, token);
+			setUserWithToken(token);
+		});
+	};
+
+	const wrappedRegister = register;
+
+	const wrappedLogout = () => {
+		window.localStorage.removeItem(localStorageKey);
+		setUser(null);
+	};
+
+	return (
+		<AuthContext.Provider
+			value={{
+				login: wrappedLogin,
+				register: wrappedRegister,
+				logout: wrappedLogout,
+				user,
+			}}
+			{...props}
+		/>
+	);
 };
 
 function useAuth() {
@@ -15,4 +56,4 @@ function useAuth() {
 	return context;
 }
 
-export { AuthProvider, useAuth };
+export { AuthProvider, AuthContext, useAuth };

src/context/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AuthProvider } from "./AuthContext.jsx";
+import { AuthProvider } from "./AuthContext";
 import PropTypes from "prop-types";
 
 function AppProviders({ children }) {

src/services/auth-service.js

@@ -40,9 +40,7 @@ export const login = (username, password) => {
 			return response.json();
 		})
 		.then((data) => {
-			console.log(data);
 			if (data.token) {
-				console.log(data.token);
 				return data.token;
 			}
 			throw Error("where's my token");