Adds login tests

.eslintrc.yml

@@ -17,6 +17,7 @@ parserOptions:
 plugins:
   - react
   - jest
+  - testing-library
 rules:
   no-tabs: 0
   indent:

package-lock.json

@@ -2006,6 +2006,15 @@
 				"@testing-library/dom": "^7.28.1"
 			}
 		},
+		"@testing-library/user-event": {
+			"version": "12.6.2",
+			"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.6.2.tgz",
+			"integrity": "sha512-4OsiTSo2vbQm+eOnm1un8b9i2Re4mn+D7d7ET6HXtzYKY7vPe3O01iYKRmSW9vS5mNrQcCLwvRhVq1gWs5YGKA==",
+			"dev": true,
+			"requires": {
+				"@babel/runtime": "^7.12.5"
+			}
+		},
 		"@types/aria-query": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.1.tgz",
@@ -4705,6 +4714,91 @@
 				}
 			}
 		},
+		"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",
+			"integrity": "sha512-nQIFe2muIFv2oR2zIuXE4vTbcFNx8hZKRzgHZqJg8rfopIWwoTwtlbCCNELT/jXzVe1uZF68ALGYoDXjLczKiQ==",
+			"dev": true,
+			"requires": {
+				"@typescript-eslint/experimental-utils": "^3.10.1"
+			},
+			"dependencies": {
+				"@typescript-eslint/experimental-utils": {
+					"version": "3.10.1",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz",
+					"integrity": "sha512-DewqIgscDzmAfd5nOGe4zm6Bl7PKtMG2Ad0KG8CUZAHlXfAKTF9Ol5PXhiMh39yRL2ChRH1cuuUGOcVyyrhQIw==",
+					"dev": true,
+					"requires": {
+						"@types/json-schema": "^7.0.3",
+						"@typescript-eslint/types": "3.10.1",
+						"@typescript-eslint/typescript-estree": "3.10.1",
+						"eslint-scope": "^5.0.0",
+						"eslint-utils": "^2.0.0"
+					}
+				},
+				"@typescript-eslint/types": {
+					"version": "3.10.1",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.10.1.tgz",
+					"integrity": "sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==",
+					"dev": true
+				},
+				"@typescript-eslint/typescript-estree": {
+					"version": "3.10.1",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz",
+					"integrity": "sha512-QbcXOuq6WYvnB3XPsZpIwztBoquEYLXh2MtwVU+kO8jgYCiv4G5xrSP/1wg4tkvrEE+esZVquIPX/dxPlePk1w==",
+					"dev": true,
+					"requires": {
+						"@typescript-eslint/types": "3.10.1",
+						"@typescript-eslint/visitor-keys": "3.10.1",
+						"debug": "^4.1.1",
+						"glob": "^7.1.6",
+						"is-glob": "^4.0.1",
+						"lodash": "^4.17.15",
+						"semver": "^7.3.2",
+						"tsutils": "^3.17.1"
+					}
+				},
+				"@typescript-eslint/visitor-keys": {
+					"version": "3.10.1",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz",
+					"integrity": "sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ==",
+					"dev": true,
+					"requires": {
+						"eslint-visitor-keys": "^1.1.0"
+					}
+				},
+				"debug": {
+					"version": "4.3.1",
+					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+					"integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+					"dev": true,
+					"requires": {
+						"ms": "2.1.2"
+					}
+				},
+				"eslint-visitor-keys": {
+					"version": "1.3.0",
+					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+					"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+					"dev": true
+				},
+				"ms": {
+					"version": "2.1.2",
+					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+					"dev": true
+				},
+				"semver": {
+					"version": "7.3.4",
+					"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+					"integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+					"dev": true,
+					"requires": {
+						"lru-cache": "^6.0.0"
+					}
+				}
+			}
+		},
 		"eslint-scope": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",

package.json

@@ -36,6 +36,7 @@
 		"@babel/preset-env": "^7.12.11",
 		"@babel/preset-react": "^7.12.10",
 		"@testing-library/react": "^11.2.3",
+		"@testing-library/user-event": "^12.6.2",
 		"babel-loader": "^8.2.2",
 		"css-loader": "^5.0.1",
 		"eslint": "^7.17.0",
@@ -46,6 +47,7 @@
 		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-promise": "^4.2.1",
 		"eslint-plugin-react": "^7.22.0",
+		"eslint-plugin-testing-library": "^3.10.1",
 		"jest": "^26.6.3",
 		"jest-junit": "^12.0.0",
 		"prettier": "2.2.1",

src/components/Login-snapshot.test.jsx

@@ -3,7 +3,6 @@ import renderer from "react-test-renderer";
 import Login from "./Login";
 
 test("Login Snapshot", () => {
-
 	const loginFunc = jest.fn();
 
 	const login = renderer.create(<Login login={loginFunc} />);
@@ -11,5 +10,4 @@ test("Login Snapshot", () => {
 	const tree = login.toJSON();
 
 	expect(tree).toMatchSnapshot();
-
 });

src/components/Login.test.jsx

@@ -1,17 +1,21 @@
 import React from "react";
-import { render } from '@testing-library/react'
+import { render } from "@testing-library/react";
-import { logRoles } from "@testing-library/dom"
+import userEvent from "@testing-library/user-event";
-// import '@testing-library/jest-dom/extend-expect'
 import Login from "./Login";
 
 test("Login inputs", () => {
-	const login = render(<Login login={ jest.fn } />)
+	const loginFunc = jest.fn();
+	const login = render(<Login login={loginFunc} />);
 
-	const usernameInput = login.getByRole("textbox", {name: /Username/i})
+	const usernameInput = login.getByRole("textbox", { name: /Username/i });
-	expect(usernameInput).toBeTruthy();
+	const passwordInput = login.getByLabelText("Password");
+	const buttonInput = login.getByRole("button", { name: /Submit/i });
 
-	const passwordInput = login.getByLabelText("Password")
+	const username = "here's a username";
-	expect(passwordInput).toBeTruthy();
+	const pw = "here's a password";
-	logRoles(login.container)
+
-	expect(true).toBeTruthy();
+	userEvent.type(usernameInput, username);
-})
+	userEvent.type(passwordInput, pw);
+	userEvent.click(buttonInput);
+	expect(loginFunc).toHaveBeenCalledWith(username, pw);
+});