From e5e370368a5178541c6166cd10f2a5af7b503ce0 Mon Sep 17 00:00:00 2001 From: Harsh Deep Date: Sat, 1 Jun 2024 20:50:35 -0500 Subject: [PATCH 1/7] slight cleanup --- .../CTEPubListScreen/components/NewEPubModal.test.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/CTEPubListScreen/components/NewEPubModal.test.js b/src/components/CTEPubListScreen/components/NewEPubModal.test.js index b81d98121..60a715701 100644 --- a/src/components/CTEPubListScreen/components/NewEPubModal.test.js +++ b/src/components/CTEPubListScreen/components/NewEPubModal.test.js @@ -1,4 +1,4 @@ -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { LanguageConstants } from 'components/CTPlayer'; import NewEPubModal from './NewEPubModal'; @@ -14,7 +14,8 @@ describe('New EPubModal', () => { onClose: jest.fn(), onCreate: jest.fn(), defaultTitle: "" - } + }; + test('it renders with no languages', () => { render(); From 012d776134ac7c51a5ac08cc10c52040e9ccd83f Mon Sep 17 00:00:00 2001 From: Harsh Deep Date: Sat, 1 Jun 2024 22:12:56 -0500 Subject: [PATCH 2/7] add User Event to the project --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index ec573240f..3cd3f2bd2 100644 --- a/package.json +++ b/package.json @@ -105,6 +105,7 @@ "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "12.1.5", + "@testing-library/user-event": "14.5.2", "babel-jest": "^26.6.0", "cross-env": "^7.0.2", "eslint-config-airbnb": "^18.1.0", diff --git a/yarn.lock b/yarn.lock index 911d1fef7..5f45dba2b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3068,6 +3068,11 @@ "@testing-library/dom" "^8.0.0" "@types/react-dom" "<18.0.0" +"@testing-library/user-event@14.5.2": + version "14.5.2" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd" + integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ== + "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" From 1ec15488fe55ce708671cc26ffe4f462324f050b Mon Sep 17 00:00:00 2001 From: Harsh Deep Date: Sat, 1 Jun 2024 22:15:08 -0500 Subject: [PATCH 3/7] test cases for instructor list --- .../Admin/Instructors/InstructorList.test.js | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 src/screens/Admin/Instructors/InstructorList.test.js diff --git a/src/screens/Admin/Instructors/InstructorList.test.js b/src/screens/Admin/Instructors/InstructorList.test.js new file mode 100644 index 000000000..181799f90 --- /dev/null +++ b/src/screens/Admin/Instructors/InstructorList.test.js @@ -0,0 +1,80 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from "@testing-library/user-event"; +import InstructorList from './InstructorList'; +import * as KeyCode from 'keycode-js'; + +describe('Instructor List', () => { + const universityName = 'University of Test' + const baseProps = { + loading: false, + currUni: { name: universityName, id: 0 }, + onInactive: jest.fn() + }; + + const formatUniversityName = (universityName) => `University: ${universityName}` + // maybe a getNumberOfInstructors function instead + + test('it renders', () => { + render(); + + expect(screen.queryByText(formatUniversityName(universityName))).toBeNull(); + }); + + // Note: only setting up fields we use for display, add more as needed + const instructors = [ + { id: 0, firstName: "Harsh", lastName: "Deep", email: "harsh@example.com" }, + { id: 1, firstName: "Alan", email: "alan@example.com" }, + { id: 2, lastName: "Turing", email: "turing@example.com" }, + ] + + test('it shows all instructors', () => { + render(); + + expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(3); + + expect(screen.getByText("Harsh Deep")).toBeVisible(); + expect(screen.getByText("Alan")).toBeVisible(); + expect(screen.getByText("Unknown Turing")).toBeVisible(); + // do we want to still show unknown if we have a last name? - todo: make an issue + + expect(screen.getByText("Email: harsh@example.com")).toBeVisible(); + expect(screen.getByText("Email: alan@example.com")).toBeVisible(); + expect(screen.getByText("Email: harsh@example.com")).toBeVisible(); + }); + + test('it filters based on first, last and email and we can reset the filters', async () => { + render(); + + const searchField = screen.getByLabelText("Search:"); + const searchButton = screen.getByRole("button", { name: "search"}); + const resetButton = screen.getByRole("button", { name: "Reset" }); + + // First Name + await userEvent.type(searchField, "Harsh"); + await userEvent.click(searchButton); + + expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(1); + expect(screen.getByText("Harsh Deep")).toBeVisible(); + + // Last Name + await userEvent.clear(searchField); + await userEvent.type(searchField, "Turing"); + await userEvent.click(searchButton); + + expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(1); + expect(screen.getByText("Unknown Turing")).toBeVisible(); + + // Email + await userEvent.clear(searchField); + await userEvent.type(searchField, "alan@example"); + await userEvent.click(searchButton); + + expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(1); + expect(screen.getByText("Alan")).toBeVisible(); + + // Reset + await userEvent.click(resetButton); + expect(searchField.value).toBe(""); + expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(3); + }); +}); \ No newline at end of file From cd7f52e1bfd68663d6841542210dce81286bc435 Mon Sep 17 00:00:00 2001 From: Harsh Deep Date: Sat, 1 Jun 2024 22:23:38 -0500 Subject: [PATCH 4/7] cleanup number of instructor check --- .../Admin/Instructors/InstructorList.test.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/screens/Admin/Instructors/InstructorList.test.js b/src/screens/Admin/Instructors/InstructorList.test.js index 181799f90..e02359633 100644 --- a/src/screens/Admin/Instructors/InstructorList.test.js +++ b/src/screens/Admin/Instructors/InstructorList.test.js @@ -11,13 +11,13 @@ describe('Instructor List', () => { onInactive: jest.fn() }; - const formatUniversityName = (universityName) => `University: ${universityName}` - // maybe a getNumberOfInstructors function instead + // All instructors have the same univeristy display in common + const numberOfInstructors = () => screen.queryAllByText(`University: ${universityName}`).length test('it renders', () => { render(); - expect(screen.queryByText(formatUniversityName(universityName))).toBeNull(); + expect(numberOfInstructors()).toBe(0); }); // Note: only setting up fields we use for display, add more as needed @@ -30,7 +30,7 @@ describe('Instructor List', () => { test('it shows all instructors', () => { render(); - expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(3); + expect(numberOfInstructors()).toBe(3); expect(screen.getByText("Harsh Deep")).toBeVisible(); expect(screen.getByText("Alan")).toBeVisible(); @@ -53,7 +53,7 @@ describe('Instructor List', () => { await userEvent.type(searchField, "Harsh"); await userEvent.click(searchButton); - expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(1); + expect(numberOfInstructors()).toBe(1); expect(screen.getByText("Harsh Deep")).toBeVisible(); // Last Name @@ -61,7 +61,7 @@ describe('Instructor List', () => { await userEvent.type(searchField, "Turing"); await userEvent.click(searchButton); - expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(1); + expect(numberOfInstructors()).toBe(1); expect(screen.getByText("Unknown Turing")).toBeVisible(); // Email @@ -69,12 +69,12 @@ describe('Instructor List', () => { await userEvent.type(searchField, "alan@example"); await userEvent.click(searchButton); - expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(1); + expect(numberOfInstructors()).toBe(1); expect(screen.getByText("Alan")).toBeVisible(); // Reset await userEvent.click(resetButton); expect(searchField.value).toBe(""); - expect(screen.getAllByText(formatUniversityName(universityName))).toHaveLength(3); + expect(numberOfInstructors()).toBe(3); }); }); \ No newline at end of file From ab62e4318cde9f1e5c14ceb63cd70030fb373926 Mon Sep 17 00:00:00 2001 From: Harsh Deep Date: Sat, 1 Jun 2024 22:30:09 -0500 Subject: [PATCH 5/7] replace jquery from insturctor list with react state --- src/screens/Admin/Instructors/InstructorList.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/screens/Admin/Instructors/InstructorList.jsx b/src/screens/Admin/Instructors/InstructorList.jsx index d80db70dc..b11f7a33e 100644 --- a/src/screens/Admin/Instructors/InstructorList.jsx +++ b/src/screens/Admin/Instructors/InstructorList.jsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react'; -import $ from 'jquery'; import { Button } from 'semantic-ui-react'; import { search } from 'utils'; import * as KeyCode from 'keycode-js'; @@ -7,6 +6,7 @@ import { AdminListItem } from '../Components'; export default function InstructorList({ instructors, loading, currUni, onInactive }) { const [result, setResult] = useState([]); + const [searchText, setSearchText] = useState(""); useEffect(() => { setResult(instructors); @@ -15,7 +15,7 @@ export default function InstructorList({ instructors, loading, currUni, onInacti const onSearch = (keyCode) => { if (keyCode === KeyCode.KEY_RETURN) { setResult( - search.getResults(instructors, $('#inst-filter')[0].value, [ + search.getResults(instructors, searchText, [ 'firstName', 'lastName', 'email', @@ -26,7 +26,7 @@ export default function InstructorList({ instructors, loading, currUni, onInacti const onReset = () => { setResult(instructors); - $('#inst-filter')[0].value = ''; + setSearchText(''); }; return ( @@ -36,6 +36,8 @@ export default function InstructorList({ instructors, loading, currUni, onInacti setSearchText(e.target.value)} onKeyDown={({ keyCode }) => { return onSearch(keyCode); }} From 6b686eec5a6fb4984168f266aae619ec48609a5e Mon Sep 17 00:00:00 2001 From: Harsh Deep Date: Sat, 1 Jun 2024 22:55:16 -0500 Subject: [PATCH 6/7] make linter happy --- src/screens/Admin/Instructors/InstructorList.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/Admin/Instructors/InstructorList.test.js b/src/screens/Admin/Instructors/InstructorList.test.js index e02359633..7aec084c1 100644 --- a/src/screens/Admin/Instructors/InstructorList.test.js +++ b/src/screens/Admin/Instructors/InstructorList.test.js @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from "@testing-library/user-event"; -import InstructorList from './InstructorList'; import * as KeyCode from 'keycode-js'; +import InstructorList from './InstructorList'; describe('Instructor List', () => { const universityName = 'University of Test' @@ -15,7 +15,7 @@ describe('Instructor List', () => { const numberOfInstructors = () => screen.queryAllByText(`University: ${universityName}`).length test('it renders', () => { - render(); + render(); expect(numberOfInstructors()).toBe(0); }); From 5e45ad2053f2ce846df8f0806d1449b6cfeae277 Mon Sep 17 00:00:00 2001 From: Harsh Deep Date: Sat, 1 Jun 2024 23:05:21 -0500 Subject: [PATCH 7/7] remove comment --- src/screens/Admin/Instructors/InstructorList.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/Admin/Instructors/InstructorList.test.js b/src/screens/Admin/Instructors/InstructorList.test.js index 7aec084c1..f25cddb8e 100644 --- a/src/screens/Admin/Instructors/InstructorList.test.js +++ b/src/screens/Admin/Instructors/InstructorList.test.js @@ -35,7 +35,6 @@ describe('Instructor List', () => { expect(screen.getByText("Harsh Deep")).toBeVisible(); expect(screen.getByText("Alan")).toBeVisible(); expect(screen.getByText("Unknown Turing")).toBeVisible(); - // do we want to still show unknown if we have a last name? - todo: make an issue expect(screen.getByText("Email: harsh@example.com")).toBeVisible(); expect(screen.getByText("Email: alan@example.com")).toBeVisible();