Adds tests for unauthenticated app

.eslintrc.yml

@@ -9,6 +9,7 @@ extends:
   - plugin:jest/style
   - prettier
   - prettier/standard
+  - plugin:react-hooks/recommended
 parserOptions:
   ecmaFeatures:
     jsx: true

package-lock.json

@@ -1100,7 +1100,6 @@
 			"version": "7.12.5",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
 			"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
-			"dev": true,
 			"requires": {
 				"regenerator-runtime": "^0.13.4"
 			}
@@ -1996,6 +1995,73 @@
 				}
 			}
 		},
+		"@testing-library/jest-dom": {
+			"version": "5.11.9",
+			"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.9.tgz",
+			"integrity": "sha512-Mn2gnA9d1wStlAIT2NU8J15LNob0YFBVjs2aEQ3j8rsfRQo+lAs7/ui1i2TGaJjapLmuNPLTsrm+nPjmZDwpcQ==",
+			"dev": true,
+			"requires": {
+				"@babel/runtime": "^7.9.2",
+				"@types/testing-library__jest-dom": "^5.9.1",
+				"aria-query": "^4.2.2",
+				"chalk": "^3.0.0",
+				"css": "^3.0.0",
+				"css.escape": "^1.5.1",
+				"lodash": "^4.17.15",
+				"redent": "^3.0.0"
+			},
+			"dependencies": {
+				"ansi-styles": {
+					"version": "4.3.0",
+					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+					"dev": true,
+					"requires": {
+						"color-convert": "^2.0.1"
+					}
+				},
+				"chalk": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+					"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+					"dev": true,
+					"requires": {
+						"ansi-styles": "^4.1.0",
+						"supports-color": "^7.1.0"
+					}
+				},
+				"color-convert": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+					"dev": true,
+					"requires": {
+						"color-name": "~1.1.4"
+					}
+				},
+				"color-name": {
+					"version": "1.1.4",
+					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+					"dev": true
+				},
+				"has-flag": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+					"dev": true
+				},
+				"supports-color": {
+					"version": "7.2.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+					"dev": true,
+					"requires": {
+						"has-flag": "^4.0.0"
+					}
+				}
+			}
+		},
 		"@testing-library/react": {
 			"version": "11.2.3",
 			"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.3.tgz",
@@ -2131,6 +2197,16 @@
 				"@types/istanbul-lib-report": "*"
 			}
 		},
+		"@types/jest": {
+			"version": "26.0.20",
+			"resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.20.tgz",
+			"integrity": "sha512-9zi2Y+5USJRxd0FsahERhBwlcvFh6D2GLQnY2FH2BzK8J9s9omvNHIbvABwIluXa0fD8XVKMLTO0aOEuUfACAA==",
+			"dev": true,
+			"requires": {
+				"jest-diff": "^26.0.0",
+				"pretty-format": "^26.0.0"
+			}
+		},
 		"@types/json-schema": {
 			"version": "7.0.6",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
@@ -2173,6 +2249,15 @@
 			"integrity": "sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==",
 			"dev": true
 		},
+		"@types/testing-library__jest-dom": {
+			"version": "5.9.5",
+			"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
+			"integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
+			"dev": true,
+			"requires": {
+				"@types/jest": "*"
+			}
+		},
 		"@types/yargs": {
 			"version": "15.0.12",
 			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.12.tgz",
@@ -3709,6 +3794,35 @@
 				"which": "^2.0.1"
 			}
 		},
+		"css": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
+			"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
+			"dev": true,
+			"requires": {
+				"inherits": "^2.0.4",
+				"source-map": "^0.6.1",
+				"source-map-resolve": "^0.6.0"
+			},
+			"dependencies": {
+				"source-map": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+					"dev": true
+				},
+				"source-map-resolve": {
+					"version": "0.6.0",
+					"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+					"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+					"dev": true,
+					"requires": {
+						"atob": "^2.1.2",
+						"decode-uri-component": "^0.2.0"
+					}
+				}
+			}
+		},
 		"css-loader": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.0.1.tgz",
@@ -3771,6 +3885,12 @@
 				}
 			}
 		},
+		"css.escape": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+			"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
+			"dev": true
+		},
 		"cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4714,6 +4834,12 @@
 				}
 			}
 		},
+		"eslint-plugin-react-hooks": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
+			"integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
+			"dev": true
+		},
 		"eslint-plugin-testing-library": {
 			"version": "3.10.1",
 			"resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.10.1.tgz",
@@ -5710,6 +5836,19 @@
 				}
 			}
 		},
+		"history": {
+			"version": "4.10.1",
+			"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+			"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+			"requires": {
+				"@babel/runtime": "^7.1.2",
+				"loose-envify": "^1.2.0",
+				"resolve-pathname": "^3.0.0",
+				"tiny-invariant": "^1.0.2",
+				"tiny-warning": "^1.0.0",
+				"value-equal": "^1.0.1"
+			}
+		},
 		"hoist-non-react-statics": {
 			"version": "3.3.2",
 			"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -5885,6 +6024,12 @@
 			"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
 			"dev": true
 		},
+		"indent-string": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+			"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+			"dev": true
+		},
 		"indexes-of": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -8445,6 +8590,21 @@
 				"dom-walk": "^0.1.0"
 			}
 		},
+		"min-indent": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+			"dev": true
+		},
+		"mini-create-react-context": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+			"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+			"requires": {
+				"@babel/runtime": "^7.12.1",
+				"tiny-warning": "^1.0.3"
+			}
+		},
 		"minimalistic-assert": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -9471,6 +9631,52 @@
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
 			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
 		},
+		"react-router": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+			"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+			"requires": {
+				"@babel/runtime": "^7.1.2",
+				"history": "^4.9.0",
+				"hoist-non-react-statics": "^3.1.0",
+				"loose-envify": "^1.3.1",
+				"mini-create-react-context": "^0.4.0",
+				"path-to-regexp": "^1.7.0",
+				"prop-types": "^15.6.2",
+				"react-is": "^16.6.0",
+				"tiny-invariant": "^1.0.2",
+				"tiny-warning": "^1.0.0"
+			},
+			"dependencies": {
+				"isarray": {
+					"version": "0.0.1",
+					"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+					"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+				},
+				"path-to-regexp": {
+					"version": "1.8.0",
+					"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+					"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+					"requires": {
+						"isarray": "0.0.1"
+					}
+				}
+			}
+		},
+		"react-router-dom": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+			"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+			"requires": {
+				"@babel/runtime": "^7.1.2",
+				"history": "^4.9.0",
+				"loose-envify": "^1.3.1",
+				"prop-types": "^15.6.2",
+				"react-router": "5.2.0",
+				"tiny-invariant": "^1.0.2",
+				"tiny-warning": "^1.0.0"
+			}
+		},
 		"react-shallow-renderer": {
 			"version": "16.14.1",
 			"resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz",
@@ -9608,6 +9814,16 @@
 				"resolve": "^1.9.0"
 			}
 		},
+		"redent": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+			"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+			"dev": true,
+			"requires": {
+				"indent-string": "^4.0.0",
+				"strip-indent": "^3.0.0"
+			}
+		},
 		"regenerate": {
 			"version": "1.4.2",
 			"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -9626,8 +9842,7 @@
 		"regenerator-runtime": {
 			"version": "0.13.7",
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-			"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+			"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-			"dev": true
 		},
 		"regenerator-transform": {
 			"version": "0.14.5",
@@ -9846,6 +10061,11 @@
 			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
 			"dev": true
 		},
+		"resolve-pathname": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+			"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+		},
 		"resolve-url": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -10825,6 +11045,15 @@
 			"integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
 			"dev": true
 		},
+		"strip-indent": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+			"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+			"dev": true,
+			"requires": {
+				"min-indent": "^1.0.0"
+			}
+		},
 		"strip-json-comments": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -11092,6 +11321,16 @@
 			"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
 			"dev": true
 		},
+		"tiny-invariant": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+			"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+		},
+		"tiny-warning": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+			"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+		},
 		"tmpl": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -11446,6 +11685,11 @@
 				"spdx-expression-parse": "^3.0.0"
 			}
 		},
+		"value-equal": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+			"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+		},
 		"vary": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -35,6 +35,7 @@
 		"@babel/core": "^7.12.10",
 		"@babel/preset-env": "^7.12.11",
 		"@babel/preset-react": "^7.12.10",
+		"@testing-library/jest-dom": "^5.11.9",
 		"@testing-library/react": "^11.2.3",
 		"@testing-library/user-event": "^12.6.2",
 		"babel-loader": "^8.2.2",
@@ -47,6 +48,7 @@
 		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-promise": "^4.2.1",
 		"eslint-plugin-react": "^7.22.0",
+		"eslint-plugin-react-hooks": "^4.2.0",
 		"eslint-plugin-testing-library": "^3.10.1",
 		"jest": "^26.6.3",
 		"jest-junit": "^12.0.0",
@@ -61,7 +63,8 @@
 		"prop-types": "^15.7.2",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
-		"react-hot-loader": "^4.13.0"
+		"react-hot-loader": "^4.13.0",
+		"react-router-dom": "^5.2.0"
 	},
 	"browserslist": [
 		"since 2017-06"

src/components/AuthenticatedApp-snapshot.test.jsx

@@ -6,7 +6,12 @@ import { AuthContext } from "../context/AuthContext";
 test("AuthenticatedApp Snapshot", () => {
 	const appRender = renderer.create(
 		<AuthContext.Provider
-			value={{ login: jest.fn(), register: jest.fn(), logout: jest.fn(), user: {display_name: "Ted"} }}
+			value={{
+				login: jest.fn(),
+				register: jest.fn(),
+				logout: jest.fn(),
+				user: { display_name: "Ted" },
+			}}
 		>
 			<AuthenticatedApp />
 		</AuthContext.Provider>

src/components/AuthenticatedApp.jsx

@@ -6,7 +6,7 @@ function AuthenticatedApp() {
 
 	return (
 		<div>
-			<p>Howdy partner. Your name looks like it&apos;s { user.display_name }.</p>
+			<p>Howdy partner. Your name looks like it&apos;s {user.display_name}.</p>
 			<button type="button" onClick={logout}>
 				Logout
 			</button>

src/components/UnauthenticatedApp.jsx

@@ -8,20 +8,29 @@ function UnauthenticatedApp() {
 
 	const [showRegister, setShowRegister] = useState(false);
 
-	function toggle() {
-		setShowRegister(!showRegister);
-	}
-
 	const form = showRegister ? (
 		<Register register={register} />
 	) : (
 		<Login login={login} />
 	);
 	return (
-		<div>
+		<div className="UnauthenticatedApp">
-			<button type="submit" onClick={toggle}>
+			<div className="loginRegisterButtonsWrapper">
-				toggle signup
+				<button
-			</button>
+					type="submit"
+					onClick={() => setShowRegister(false)}
+					className="login"
+				>
+					Login
+				</button>
+				<button
+					type="submit"
+					onClick={() => setShowRegister(true)}
+					className="register"
+				>
+					Register
+				</button>
+			</div>
 			{form}
 		</div>
 	);

src/components/UnauthenticatedApp.test.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import UnauthenticatedApp from "./UnauthenticatedApp";
+import '@testing-library/jest-dom/extend-expect';
+import { AuthContext } from "../context/AuthContext";
+
+test("Login inputs", () => {
+	const loginFunc = jest.fn();
+	const registerFunc = jest.fn();
+	const app = render(
+		<AuthContext.Provider
+			value={{ login: loginFunc, register: registerFunc, logout: jest.fn() }}
+		>
+			<UnauthenticatedApp />
+		</AuthContext.Provider>
+	);
+
+	const chooseLoginButton = app.getByRole("button", { name: /Login/i });
+	const chooseRegisterButton = app.getByRole("button", { name: /Register/i });
+
+	userEvent.click(chooseLoginButton);
+	expect(app.getByRole('heading')).toHaveTextContent('Please Log In')
+
+	userEvent.click(chooseRegisterButton);
+	expect(app.getByRole('heading')).toHaveTextContent('Enter your data to register.')
+
+});

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

@@ -1,13 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UnauthenticatedApp Snapshot 1`] = `
-<div>
+<div
-  <button
+  className="UnauthenticatedApp"
-    onClick={[Function]}
+>
-    type="submit"
+  <div
+    className="loginRegisterButtonsWrapper"
   >
-    toggle signup
+    <button
-  </button>
+      className="login"
+      onClick={[Function]}
+      type="submit"
+    >
+      Login
+    </button>
+    <button
+      className="register"
+      onClick={[Function]}
+      type="submit"
+    >
+      Register
+    </button>
+  </div>
   <div
     className="login-wrapper"
   >

src/components/lib/Header.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+function Header() {
+	return (
+		<nav>
+			<NavLink exact activeClassName="active" to="/">
+				Home
+			</NavLink>
+			<NavLink activeClassName="active" to="/users">
+				Users
+			</NavLink>
+			<NavLink activeClassName="active" to="/contact">
+				Contact
+			</NavLink>
+		</nav>
+	);
+}
+export default Header;