Merge pull request #806 from classtranscribe/hd/remove-jquery

Remove jQuery from Instructor List (Fix #777 Part 1/2)

Author: angrave

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",

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(<NewEPubModal {...baseProps} />);
 

src/screens/Admin/Instructors/InstructorList.jsx

@@ -1,12 +1,12 @@
 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';
 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
           <input
             id="inst-filter"
             placeholder="Name or email"
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
             onKeyDown={({ keyCode }) => {
               return onSearch(keyCode);
             }}

src/screens/Admin/Instructors/InstructorList.test.js

@@ -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: "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(<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: 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(<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();
+
+        // Email
+        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);
+    });
+});

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"