Refactor test to avoid fetch, change to userEvent

apache · Mar 13, 2024 · f7423a3 · f7423a3
1 parent 05f253e
commit f7423a3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/superset-frontend/src/features/home/ActivityTable.test.tsx b/superset-frontend/src/features/home/ActivityTable.test.tsx
@@ -17,9 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import { render, screen, fireEvent } from 'spec/helpers/testing-library';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
 import { TableTab } from 'src/views/CRUD/types';
+import userEvent from '@testing-library/user-event';
 import ActivityTable from './ActivityTable';
 
 const chartsEndpoint = 'glob:*/api/v1/chart/?*';
@@ -78,6 +79,14 @@ const activityProps = {
   isFetchingActivityData: false,
 };
 
+const activityEditedTabProps = {
+  activeChild: TableTab.Edited,
+  activityData: mockData,
+  setActiveChild: mockSetActiveChild,
+  user: { userId: '1' },
+  isFetchingActivityData: false,
+};
+
 const activityViewedTabProps = {
   activeChild: TableTab.Viewed,
   activityData: mockData,
@@ -115,17 +124,16 @@ test('renders Viewed tab with ActivityCards', async () => {
   expect(screen.getByText(/chartychart/i)).toBeInTheDocument();
 });
 test('calls the getEdited batch call when edited tab is clicked', async () => {
-  renderActivityTable(activityProps);
+  const { rerender } = renderActivityTable(activityProps);
   const editedButton = screen.getByText(/edited/i);
   expect(editedButton).toBeInTheDocument();
-  const dashboardCall = fetchMock.called(/dashboard\/\?q/);
-  const chartCall = fetchMock.called(/chart\/\?q/);
-  fireEvent.click(editedButton);
+  userEvent.click(editedButton);
   expect(mockSetActiveChild).toHaveBeenCalledWith(TableTab.Edited);
-  // `await waitFor()` does not work in this instance...
-  setTimeout(() => {
-    expect(chartCall).toBeTruthy();
-    expect(dashboardCall).toBeTruthy();
+  rerender(<ActivityTable {...activityEditedTabProps} />);
+  // simulate the render after getEditedObjects has been called
+  await waitFor(() => {
+    expect(screen.getByText(/chartychart/i)).toBeInTheDocument();
+    expect(screen.getByText(/dashboard_test/i)).toBeInTheDocument();
   });
 });
 test('show empty state if there is no data', () => {

diff --git a/superset-frontend/src/features/home/ChartTable.test.tsx b/superset-frontend/src/features/home/ChartTable.test.tsx
@@ -17,14 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import {
-  render,
-  screen,
-  waitFor,
-  fireEvent,
-} from 'spec/helpers/testing-library';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
 import { act } from 'react-dom/test-utils';
+import userEvent from '@testing-library/user-event';
 import ChartTable from './ChartTable';
 
 const chartsEndpoint = 'glob:*/api/v1/chart/?*';
@@ -98,7 +94,7 @@ test('renders with EmptyState if no data present', async () => {
 
 test('fetches chart favorites and renders chart cards', async () => {
   await renderChartTable(mockedProps);
-  fireEvent.click(screen.getByText(/favorite/i));
+  userEvent.click(screen.getByText(/favorite/i));
   await waitFor(() => {
     expect(fetchMock.calls(chartFavoriteStatusEndpoint)).toHaveLength(1);
     expect(screen.getAllByText(/cool chart/i)).toHaveLength(3);
@@ -112,7 +108,7 @@ test('renders other tab by default', async () => {
 
 test('renders mine tab on click', async () => {
   await renderChartTable(mineTabProps);
-  fireEvent.click(screen.getByText(/mine/i));
+  userEvent.click(screen.getByText(/mine/i));
   await waitFor(() => {
     expect(screen.getAllByText(/cool chart/i)).toHaveLength(3);
   });