test: fix org input by using async api

openedx · Jan 13, 2025 · a25a09e · a25a09e
1 parent 0773c4f
commit a25a09e
Showing 1 changed file with 32 additions and 30 deletions.
diff --git a/src/library-authoring/create-library/CreateLibrary.test.tsx b/src/library-authoring/create-library/CreateLibrary.test.tsx
@@ -3,9 +3,11 @@ import type MockAdapter from 'axios-mock-adapter';
 import userEvent from '@testing-library/user-event';
 
 import {
+  act,
   fireEvent,
   initializeMocks,
   render,
+  screen,
   waitFor,
 } from '../../testUtils';
 import { studioHomeMock } from '../../studio-home/__mocks__';
@@ -49,22 +51,22 @@ describe('<CreateLibrary />', () => {
       id: 'library-id',
     });
 
-    const { getByRole } = render(<CreateLibrary />);
+    render(<CreateLibrary />);
 
-    const titleInput = getByRole('textbox', { name: /library name/i });
+    const titleInput = await screen.findByRole('textbox', { name: /library name/i });
     userEvent.click(titleInput);
     userEvent.type(titleInput, 'Test Library Name');
 
-    const orgInput = getByRole('combobox', { name: /organization/i });
+    const orgInput = await screen.findByRole('combobox', { name: /organization/i });
     userEvent.click(orgInput);
     userEvent.type(orgInput, 'org1');
-    userEvent.tab();
+    act(() => userEvent.tab());
 
-    const slugInput = getByRole('textbox', { name: /library id/i });
+    const slugInput = await screen.findByRole('textbox', { name: /library id/i });
     userEvent.click(slugInput);
     userEvent.type(slugInput, 'test_library_slug');
 
-    fireEvent.click(getByRole('button', { name: /create/i }));
+    fireEvent.click(await screen.findByRole('button', { name: /create/i }));
     await waitFor(() => {
       expect(axiosMock.history.post.length).toBe(1);
       expect(axiosMock.history.post[0].data).toBe(
@@ -80,26 +82,26 @@ describe('<CreateLibrary />', () => {
       id: 'library-id',
     });
 
-    const { getByRole, getByText } = render(<CreateLibrary />);
+    render(<CreateLibrary />);
 
-    const titleInput = getByRole('textbox', { name: /library name/i });
+    const titleInput = await screen.findByRole('textbox', { name: /library name/i });
     userEvent.click(titleInput);
     userEvent.type(titleInput, 'Test Library Name');
 
-    const orgInput = getByRole('combobox', { name: /organization/i });
+    const orgInput = await screen.findByRole('combobox', { name: /organization/i });
     userEvent.click(orgInput);
     userEvent.type(orgInput, 'NewOrg');
-    userEvent.tab();
+    act(() => userEvent.tab());
 
-    const slugInput = getByRole('textbox', { name: /library id/i });
+    const slugInput = await screen.findByRole('textbox', { name: /library id/i });
     userEvent.click(slugInput);
     userEvent.type(slugInput, 'test_library_slug');
 
-    fireEvent.click(getByRole('button', { name: /create/i }));
+    fireEvent.click(await screen.findByRole('button', { name: /create/i }));
     await waitFor(() => {
       expect(axiosMock.history.post.length).toBe(0);
     });
-    expect(getByText('Required field.')).toBeInTheDocument();
+    expect(await screen.findByText('Required field.')).toBeInTheDocument();
   });
 
   test('can create new org if allowed', async () => {
@@ -112,22 +114,22 @@ describe('<CreateLibrary />', () => {
       id: 'library-id',
     });
 
-    const { getByRole } = render(<CreateLibrary />);
+    render(<CreateLibrary />);
 
-    const titleInput = getByRole('textbox', { name: /library name/i });
+    const titleInput = await screen.findByRole('textbox', { name: /library name/i });
     userEvent.click(titleInput);
     userEvent.type(titleInput, 'Test Library Name');
 
-    const orgInput = getByRole('combobox', { name: /organization/i });
+    const orgInput = await screen.findByRole('combobox', { name: /organization/i });
     userEvent.click(orgInput);
     userEvent.type(orgInput, 'NewOrg');
-    userEvent.tab();
+    act(() => userEvent.tab());
 
-    const slugInput = getByRole('textbox', { name: /library id/i });
+    const slugInput = await screen.findByRole('textbox', { name: /library id/i });
     userEvent.click(slugInput);
     userEvent.type(slugInput, 'test_library_slug');
 
-    fireEvent.click(getByRole('button', { name: /create/i }));
+    fireEvent.click(await screen.findByRole('button', { name: /create/i }));
     await waitFor(() => {
       expect(axiosMock.history.post.length).toBe(1);
       expect(axiosMock.history.post[0].data).toBe(
@@ -142,37 +144,37 @@ describe('<CreateLibrary />', () => {
     axiosMock.onPost(getContentLibraryV2CreateApiUrl()).reply(400, {
       field: 'Error message',
     });
-    const { getByRole, getByTestId } = render(<CreateLibrary />);
+    render(<CreateLibrary />);
 
-    const titleInput = getByRole('textbox', { name: /library name/i });
+    const titleInput = await screen.findByRole('textbox', { name: /library name/i });
     userEvent.click(titleInput);
     userEvent.type(titleInput, 'Test Library Name');
 
-    const orgInput = getByTestId('autosuggest-textbox-input');
+    const orgInput = await screen.findByTestId('autosuggest-textbox-input');
     userEvent.click(orgInput);
     userEvent.type(orgInput, 'org1');
-    userEvent.tab();
+    act(() => userEvent.tab());
 
-    const slugInput = getByRole('textbox', { name: /library id/i });
+    const slugInput = await screen.findByRole('textbox', { name: /library id/i });
     userEvent.click(slugInput);
     userEvent.type(slugInput, 'test_library_slug');
 
-    fireEvent.click(getByRole('button', { name: /create/i }));
-    await waitFor(() => {
+    fireEvent.click(await screen.findByRole('button', { name: /create/i }));
+    await waitFor(async () => {
       expect(axiosMock.history.post.length).toBe(1);
       expect(axiosMock.history.post[0].data).toBe(
         '{"description":"","title":"Test Library Name","org":"org1","slug":"test_library_slug"}',
       );
       expect(mockNavigate).not.toHaveBeenCalled();
-      expect(getByRole('alert')).toHaveTextContent('Request failed with status code 400');
-      expect(getByRole('alert')).toHaveTextContent('{"field":"Error message"}');
+      expect(await screen.findByRole('alert')).toHaveTextContent('Request failed with status code 400');
+      expect(await screen.findByRole('alert')).toHaveTextContent('{"field":"Error message"}');
     });
   });
 
   test('cancel creating library navigates to libraries page', async () => {
-    const { getByRole } = render(<CreateLibrary />);
+    render(<CreateLibrary />);
 
-    fireEvent.click(getByRole('button', { name: /cancel/i }));
+    fireEvent.click(await screen.findByRole('button', { name: /cancel/i }));
     await waitFor(() => {
       expect(mockNavigate).toHaveBeenCalledWith('/libraries');
     });