dashboard, updated tests, remove use of waitForElementToBeRemoved (re…

…act-testing-library#1033)

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

packages/dashboard/package.json

@@ -74,6 +74,7 @@
     "react-router": "^6.20.1",
     "react-router-dom": "^6.20.1",
     "rmf-auth": "workspace:*",
+    "@types/jest": "^27.0.6",
     "rmf-models": "workspace:*",
     "rxjs": "^7.8.1",
     "three": "^0.159.0"
@@ -87,10 +88,11 @@
     "@storybook/preset-create-react-app": "^7.6.3",
     "@storybook/react": "^7.6.3",
     "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.10",
+    "@types/jest": "^27.0.6",
+    "jest-environment-jsdom": "^27.0.6",
     "api-server": "file:../api-server",
     "canvas": "^2.11.2",
     "chalk": "^5.3.0",

packages/dashboard/src/components/admin/create-role-dialog.tsx

@@ -54,6 +54,7 @@ export function CreateRoleDialog({
       submitting={creating}
       onSubmit={submitForm}
       onClose={() => setOpen && setOpen(false)}
+      data-testid="create-role-dialog"
     >
       <TextField
         id="role"

packages/dashboard/src/components/admin/role-list-card.tsx

@@ -154,7 +154,11 @@ export function RoleListCard({
         titleTypographyProps={{ variant: 'h5' }}
         avatar={<SecurityIcon />}
         action={
-          <IconButton onClick={() => setOpenDialog(true)} aria-label="create role">
+          <IconButton
+            onClick={() => setOpenDialog(true)}
+            aria-label="create role"
+            data-testid="create-role"
+          >
             <AddIcon fontSize="large" />
           </IconButton>
         }

packages/dashboard/src/components/admin/tests/add-permission-dialog.test.tsx

@@ -1,4 +1,4 @@
-import { render, waitForElementToBeRemoved } from '@testing-library/react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { RmfAction } from '../../permissions';
@@ -8,15 +8,13 @@ describe('AddPermissionDialog', () => {
   it('calls savePermission when form is submitted', async () => {
     const savePermission = jest.fn();
     const root = render(<AddPermissionDialog open={true} savePermission={savePermission} />);
-    userEvent.click(root.getByLabelText('Action'));
-    userEvent.click(root.getByText('Task Read'));
-    userEvent.type(root.getByLabelText('Authorization Group'), 'test group');
-    userEvent.click(root.getByText('Save'));
+    const user = userEvent.setup();
+    await user.click(root.getByLabelText('Action'));
+    await user.click(root.getByText('Task Read'));
+    await user.type(root.getByLabelText('Authorization Group'), 'test group');
+    await user.click(root.getByText('Save'));
     expect(savePermission).toHaveBeenCalled();
     expect(savePermission.mock.calls[0][0].action).toBe(RmfAction.TaskRead);
     expect(savePermission.mock.calls[0][0].authz_grp).toBe('test group');
-    await expect(
-      waitForElementToBeRemoved(() => root.queryByLabelText('loading')),
-    ).resolves.not.toBeNull();
   });
 });

packages/dashboard/src/components/admin/tests/create-role-dialog.test.tsx

@@ -7,12 +7,10 @@ describe('CreateRoleDialog', () => {
   it('calls createRole when form is submitted', async () => {
     const createRole = jest.fn();
     const root = render(<CreateRoleDialog open={true} createRole={createRole} />);
-    userEvent.type(root.getByLabelText('Role'), 'role');
-    userEvent.click(root.getByText('Create'));
+    const user = userEvent.setup();
+    await user.type(root.getByLabelText('Role'), 'role');
+    await user.click(root.getByText('Create'));
     expect(createRole).toHaveBeenCalled();
     expect(createRole.mock.calls[0][0]).toBe('role');
-    await expect(
-      waitForElementToBeRemoved(() => root.queryByLabelText('loading')),
-    ).resolves.not.toBeNull();
   });
 });

packages/dashboard/src/components/admin/tests/create-user-dialog.test.tsx

@@ -7,12 +7,10 @@ describe('CreateUserDialog', () => {
   it('calls createUser when form is submitted', async () => {
     const createUser = jest.fn();
     const root = render(<CreateUserDialog open={true} createUser={createUser} />);
-    userEvent.type(root.getByLabelText('Username'), 'user');
-    userEvent.click(root.getByText('Create'));
+    const user = userEvent.setup();
+    await user.type(root.getByLabelText('Username'), 'user');
+    await user.click(root.getByText('Create'));
     expect(createUser).toHaveBeenCalled();
     expect(createUser.mock.calls[0][0]).toBe('user');
-    await expect(
-      waitForElementToBeRemoved(() => root.queryByLabelText('loading')),
-    ).resolves.not.toBeNull();
   });
 });

packages/dashboard/src/components/admin/tests/manage-roles-dialog.test.tsx

@@ -12,7 +12,8 @@ describe('ManageRolesCard', () => {
         saveRoles={async () => {}}
       />,
     );
-    userEvent.click(root.getByText('Add/Remove'));
+    const user = userEvent.setup();
+    await user.click(root.getByText('Add/Remove'));
     await expect(
       waitForElementToBeRemoved(() => root.queryByLabelText('loading')),
     ).resolves.not.toThrow();
@@ -31,11 +32,9 @@ describe('ManageRolesDialog', () => {
         saveRoles={saveRoles}
       />,
     );
+    const user = userEvent.setup();
     await waitFor(() => root.queryByText('role1'));
-    userEvent.click(root.getByText('Save'));
+    await user.click(root.getByText('Save'));
     expect(saveRoles).toHaveBeenCalled();
-    await expect(
-      waitForElementToBeRemoved(() => root.queryByLabelText('loading')),
-    ).resolves.not.toThrow();
   });
 });

packages/dashboard/src/components/admin/tests/permissions-card.test.tsx

@@ -36,9 +36,10 @@ describe('PermissionsCard', () => {
     await expect(waitFor(() => root.getByText('test_group'))).resolves.not.toThrow();
   });
 
-  it('opens add permission dialog when button is clicked', () => {
+  it('opens add permission dialog when button is clicked', async () => {
     const root = render(<PermissionsCard />);
-    userEvent.click(root.getByLabelText('add permission'));
+    const user = userEvent.setup();
+    await user.click(root.getByLabelText('add permission'));
     expect(() => root.getByText('Add Permission')).not.toThrow();
   });
 

packages/dashboard/src/components/admin/tests/role-list-card.test.tsx

@@ -1,4 +1,4 @@
-import { render, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { RoleListCard } from '../role-list-card';
@@ -10,9 +10,10 @@ describe('Role List', () => {
     await expect(waitFor(() => root.getByText('role2'))).resolves.not.toThrow();
   });
 
-  it('opens create role dialog when button is clicked', () => {
+  it('opens create role dialog when button is clicked', async () => {
     const root = render(<RoleListCard />);
-    userEvent.click(root.getByLabelText('create role'));
-    expect(() => root.getByText('Create Role')).not.toThrow();
+    const user = userEvent.setup();
+    await user.click(screen.getByTestId('create-role'));
+    expect(() => screen.getByTestId('create-role-dialog')).not.toThrow();
   });
 });

packages/dashboard/src/components/admin/tests/user-list-card.test.tsx

@@ -9,14 +9,16 @@ const render = (component: React.ReactNode) => render_(<MemoryRouter>{component}
 describe('UserListCard', () => {
   it('opens delete dialog when button is clicked', async () => {
     const root = render(<UserListCard searchUsers={() => ['user1']} />);
+    const user = userEvent.setup();
     await waitFor(() => root.getByText('Delete'));
-    userEvent.click(root.getByText('Delete'));
+    await user.click(root.getByText('Delete'));
     expect(() => root.getByText('Confirm Delete')).not.toThrow();
   });
 
   it('opens create user dialog when button is clicked', async () => {
     const root = render(<UserListCard />);
-    userEvent.click(root.getByLabelText('create user'));
+    const user = userEvent.setup();
+    await user.click(root.getByLabelText('create user'));
     expect(() => root.getByText('Create User')).not.toThrow();
   });
 

packages/dashboard/src/components/admin/tests/user-profile.test.tsx

@@ -24,9 +24,10 @@ describe('UserProfileCard', () => {
         makeAdmin={makeAdmin}
       />,
     );
+    const user = userEvent.setup();
 
-    userEvent.click(root.getByLabelText('more actions'));
-    userEvent.click(root.getByRole('menuitem', { name: 'Admin' }));
+    await user.click(root.getByLabelText('more actions'));
+    await user.click(root.getByRole('menuitem', { name: 'Admin' }));
     await waitFor(() => true); // let async effects run
     expect(makeAdmin).toHaveBeenCalledWith(true);
   });

packages/dashboard/src/components/tests/appbar.test.tsx

@@ -54,7 +54,7 @@ describe('AppBar', () => {
     expect(root.getByLabelText('user-btn')).toBeTruthy();
   });
 
-  test('logout is triggered when logout button is clicked', () => {
+  test('logout is triggered when logout button is clicked', async () => {
     const authenticator = new StubAuthenticator('test');
     const appConfig: AppConfig = {
       authenticator,
@@ -76,8 +76,9 @@ describe('AppBar', () => {
         </Base>
       </AppConfigContext.Provider>,
     );
-    userEvent.click(root.getByLabelText('user-btn'));
-    userEvent.click(root.getByText('Logout'));
+    const user = userEvent.setup();
+    await user.click(root.getByLabelText('user-btn'));
+    await user.click(root.getByText('Logout'));
     expect(spy).toHaveBeenCalledTimes(1);
   });