Merge pull request #11 from CPSECapstone/setup-tests

Setup tests

Author: nguyen-darianhuy

docs/testing.md

@@ -0,0 +1,17 @@
+How to write a UI unit test
+---
+1. See `src/tests/course.test.tsx` and my changes to `src/course/create-course-dialog.tsx`
+   - We'll organize these the same way we'll organize interfaces: by scene/page/feature/namespace
+2. Add to an existing test file if testing the same namespace, or create a new test file. Import react and all that other stuff
+3. Import react-testing-library functions from `src/tests/test-utils.tsx`
+   - This is our wrapper library that includes a custom render function to mock Apollo requests.
+4. Add a test(). Here are some handy functions:
+   - `render()`: Render your component
+   - `fireEvent`: This is the mocked user. Use it to mock `.click()` events, for example.
+   - `screen.getBy...()`: This is called a query, used to grab UI components. Think of them like querySelectors.
+       - The ones we'll use the most is probably `getByTestId` or `getByLabelText`
+   - `expect()`: Basically our assert
+   - RTL Docs for more: [react-testing-library](https://testing-library.com/docs/react-testing-library/cheatsheet)
+   - List of expect() chains: [jest-dom](https://github.com/testing-library/jest-dom#table-of-contents)
+5. Add necessary `data-testid`'s to components that you want to be grabbable by the tests.
+6. Run `npm test` 

package.json

@@ -16,7 +16,6 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
     "@types/jest": "^26.0.22",
     "@types/node": "^12.20.7",
@@ -30,6 +29,7 @@
     "formik": "^2.2.6",
     "get-video-id": "^3.2.0",
     "graphql": "^15.5.0",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
@@ -77,9 +77,12 @@
     "@graphql-codegen/typescript-operations": "1.17.16",
     "@graphql-codegen/typescript-react-apollo": "2.2.4",
     "@graphql-typed-document-node/core": "^3.1.0",
+    "@testing-library/dom": "^7.30.3",
+    "@testing-library/react": "^11.2.6",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-table": "^7.0.29",
     "@types/styled-components": "^5.1.7",
+    "cypress": "^7.1.0",
     "es-to-primitive": "^1.2.1",
     "eslint": "^7.23.0",
     "eslint-config-airbnb-typescript": "^12.3.1",