test: improve test coverage

src/taxonomy/tag-list/TagListTable.test.jsx

@@ -1,29 +1,84 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import MockAdapter from 'axios-mock-adapter';
 
-import { useTagListData } from './data/api';
 import initializeStore from '../../store';
 import TagListTable from './TagListTable';
 
 let store;
-
-jest.mock('./data/api', () => ({
-  useTagListData: jest.fn(),
-}));
+let axiosMock;
+const queryClient = new QueryClient();
 
 const RootWrapper = () => (
   <AppProvider store={store}>
     <IntlProvider locale="en" messages={{}}>
-      <TagListTable taxonomyId="1" />
+      <QueryClientProvider client={queryClient}>
+        <TagListTable taxonomyId={1} />
+      </QueryClientProvider>
     </IntlProvider>
   </AppProvider>
 );
 
-describe('<TagListPage />', async () => {
-  beforeEach(async () => {
+const tagDefaults = { depth: 0, external_id: null, parent_value: null };
+const mockTagsResponse = {
+  next: null,
+  previous: null,
+  count: 3,
+  num_pages: 1,
+  current_page: 1,
+  start: 0,
+  results: [
+    {
+      ...tagDefaults,
+      value: 'two level tag 1',
+      child_count: 1,
+      _id: 1001,
+      sub_tags_url: '/request/to/load/subtags/1',
+    },
+    {
+      ...tagDefaults,
+      value: 'two level tag 2',
+      child_count: 1,
+      _id: 1002,
+      sub_tags_url: '/request/to/load/subtags/2',
+    },
+    {
+      ...tagDefaults,
+      value: 'two level tag 3',
+      child_count: 1,
+      _id: 1003,
+      sub_tags_url: '/request/to/load/subtags/3',
+    },
+  ],
+};
+const rootTagsListUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/?page=1';
+const subTagsResponse = {
+  next: null,
+  previous: null,
+  count: 1,
+  num_pages: 1,
+  current_page: 1,
+  start: 0,
+  results: [
+    {
+      ...tagDefaults,
+      depth: 1,
+      value: 'the child tag',
+      child_count: 0,
+      _id: 1111,
+      sub_tags_url: null,
+    },
+  ],
+};
+const subTagsUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/?full_depth_threshold=10000&parent_tag=two+level+tag+1';
+
+describe('<TagListPage />', () => {
+  beforeAll(async () => {
     initializeMockApp({
       authenticatedUser: {
         userId: 3,
@@ -32,36 +87,45 @@ describe('<TagListPage />', async () => {
         roles: [],
       },
     });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+  beforeEach(async () => {
     store = initializeStore();
+    axiosMock.reset();
   });
 
   it('shows the spinner before the query is complete', async () => {
-    useTagListData.mockReturnValue({
-      isLoading: true,
-      isFetched: false,
-    });
-    const { getByRole } = render(<RootWrapper />);
-    const spinner = getByRole('status');
+    // Simulate an actual slow response from the API:
+    let resolveResponse;
+    const promise = new Promise(resolve => { resolveResponse = resolve; });
+    axiosMock.onGet(rootTagsListUrl).reply(() => promise);
+    const result = render(<RootWrapper />);
+    const spinner = result.getByRole('status');
     expect(spinner.textContent).toEqual('loading');
+    resolveResponse([200, {}]);
+    await waitFor(() => {
+      expect(result.getByText('No results found')).toBeInTheDocument();
+    });
   });
 
   it('should render page correctly', async () => {
-    useTagListData.mockReturnValue({
-      isSuccess: true,
-      isFetched: true,
-      isError: false,
-      data: {
-        count: 3,
-        numPages: 1,
-        results: [
-          { value: 'Tag 1' },
-          { value: 'Tag 2' },
-          { value: 'Tag 3' },
-        ],
-      },
+    axiosMock.onGet(rootTagsListUrl).reply(200, mockTagsResponse);
+    const result = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(result.getByText('two level tag 1')).toBeInTheDocument();
     });
-    const { getAllByRole } = render(<RootWrapper />);
-    const rows = getAllByRole('row');
+    const rows = result.getAllByRole('row');
     expect(rows.length).toBe(3 + 1); // 3 items plus header
   });
+
+  it('should render page correctly with subtags', async () => {
+    axiosMock.onGet(rootTagsListUrl).reply(200, mockTagsResponse);
+    axiosMock.onGet(subTagsUrl).reply(200, subTagsResponse);
+    const result = render(<RootWrapper />);
+    const expandButton = result.getAllByLabelText('Expand row')[0];
+    expandButton.click();
+    await waitFor(() => {
+      expect(result.getByText('the child tag')).toBeInTheDocument();
+    });
+  });
 });