-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #806 from classtranscribe/hd/remove-jquery
Remove jQuery from Instructor List (Fix #777 Part 1/2)
- Loading branch information
Showing
5 changed files
with
93 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import { render, screen } from '@testing-library/react'; | ||
import userEvent from "@testing-library/user-event"; | ||
import * as KeyCode from 'keycode-js'; | ||
import InstructorList from './InstructorList'; | ||
|
||
describe('Instructor List', () => { | ||
const universityName = 'University of Test' | ||
const baseProps = { | ||
loading: false, | ||
currUni: { name: universityName, id: 0 }, | ||
onInactive: jest.fn() | ||
}; | ||
|
||
// All instructors have the same univeristy display in common | ||
const numberOfInstructors = () => screen.queryAllByText(`University: ${universityName}`).length | ||
|
||
test('it renders', () => { | ||
render(<InstructorList {...baseProps} instructors={[]} />); | ||
|
||
expect(numberOfInstructors()).toBe(0); | ||
}); | ||
|
||
// Note: only setting up fields we use for display, add more as needed | ||
const instructors = [ | ||
{ id: 0, firstName: "Harsh", lastName: "Deep", email: "[email protected]" }, | ||
{ id: 1, firstName: "Alan", email: "[email protected]" }, | ||
{ id: 2, lastName: "Turing", email: "[email protected]" }, | ||
] | ||
|
||
test('it shows all instructors', () => { | ||
render(<InstructorList {...baseProps} instructors={instructors} />); | ||
|
||
expect(numberOfInstructors()).toBe(3); | ||
|
||
expect(screen.getByText("Harsh Deep")).toBeVisible(); | ||
expect(screen.getByText("Alan")).toBeVisible(); | ||
expect(screen.getByText("Unknown Turing")).toBeVisible(); | ||
|
||
expect(screen.getByText("Email: [email protected]")).toBeVisible(); | ||
expect(screen.getByText("Email: [email protected]")).toBeVisible(); | ||
expect(screen.getByText("Email: [email protected]")).toBeVisible(); | ||
}); | ||
|
||
test('it filters based on first, last and email and we can reset the filters', async () => { | ||
render(<InstructorList {...baseProps} instructors={instructors} />); | ||
|
||
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(numberOfInstructors()).toBe(1); | ||
expect(screen.getByText("Harsh Deep")).toBeVisible(); | ||
|
||
// Last Name | ||
await userEvent.clear(searchField); | ||
await userEvent.type(searchField, "Turing"); | ||
await userEvent.click(searchButton); | ||
|
||
expect(numberOfInstructors()).toBe(1); | ||
expect(screen.getByText("Unknown Turing")).toBeVisible(); | ||
|
||
await userEvent.clear(searchField); | ||
await userEvent.type(searchField, "alan@example"); | ||
await userEvent.click(searchButton); | ||
|
||
expect(numberOfInstructors()).toBe(1); | ||
expect(screen.getByText("Alan")).toBeVisible(); | ||
|
||
// Reset | ||
await userEvent.click(resetButton); | ||
expect(searchField.value).toBe(""); | ||
expect(numberOfInstructors()).toBe(3); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3068,6 +3068,11 @@ | |
"@testing-library/dom" "^8.0.0" | ||
"@types/react-dom" "<18.0.0" | ||
|
||
"@testing-library/[email protected]": | ||
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" | ||
|