From 7de9d9b14b54e9a435cd34214a594e484b818d42 Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf.musleh@gmail.com>
Date: Sun, 10 Dec 2023 16:22:17 +0300
Subject: [PATCH] test: Update/fix tests

---
 package-lock.json                             | 47 +++++++++++++++
 package.json                                  |  1 +
 .../ContentTagsCollapsible.test.jsx           | 58 ++++++++++++++----
 .../ContentTagsDropDownSelector.jsx           |  4 +-
 .../ContentTagsDropDownSelector.test.jsx      | 42 +++++++++----
 src/content-tags-drawer/data/api.test.js      | 28 +++++++--
 .../data/apiHooks.test.jsx                    | 60 +++++++++++++++----
 7 files changed, 200 insertions(+), 40 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1593f5447f..0f7bdda88b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "@edx/typescript-config": "^1.0.1",
         "@testing-library/jest-dom": "5.17.0",
         "@testing-library/react": "12.1.5",
+        "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^13.2.1",
         "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
         "axios-mock-adapter": "1.22.0",
@@ -5651,6 +5652,36 @@
         "react-dom": "<18.0.0"
       }
     },
+    "node_modules/@testing-library/react-hooks": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz",
+      "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-error-boundary": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
+        "react-test-renderer": "^16.9.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-test-renderer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "13.5.0",
       "dev": true,
@@ -23363,6 +23394,22 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz",
+      "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
       "license": "MIT"
diff --git a/package.json b/package.json
index 4264dd7f4c..ea7be09bb7 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "@edx/typescript-config": "^1.0.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "axios-mock-adapter": "1.22.0",
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
index 096eb27457..4b590da1a9 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
@@ -18,8 +18,12 @@ jest.mock('./data/apiHooks', () => ({
     mutate: jest.fn(),
   })),
   useTaxonomyTagsData: jest.fn(() => ({
-    isSuccess: false,
-    data: {},
+    hasMorePages: false,
+    tagPages: [{
+      isLoading: true,
+      isError: false,
+      data: [],
+    }],
   })),
 }));
 
@@ -83,19 +87,36 @@ describe('<ContentTagsCollapsible />', () => {
 
   it('should render new tags as they are checked in the dropdown', async () => {
     useTaxonomyTagsData.mockReturnValue({
-      isSuccess: true,
-      data: {
-        results: [{
+      hasMorePages: false,
+      tagPages: [{
+        isLoading: false,
+        isError: false,
+        data: [{
           value: 'Tag 1',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
           subTagsUrl: null,
         }, {
           value: 'Tag 2',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12346,
           subTagsUrl: null,
         }, {
           value: 'Tag 3',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12347,
           subTagsUrl: null,
         }],
-      },
+      }],
     });
 
     await act(async () => {
@@ -141,19 +162,36 @@ describe('<ContentTagsCollapsible />', () => {
 
   it('should remove tag when they are unchecked in the dropdown', async () => {
     useTaxonomyTagsData.mockReturnValue({
-      isSuccess: true,
-      data: {
-        results: [{
+      hasMorePages: false,
+      tagPages: [{
+        isLoading: false,
+        isError: false,
+        data: [{
           value: 'Tag 1',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
           subTagsUrl: null,
         }, {
           value: 'Tag 2',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12346,
           subTagsUrl: null,
         }, {
           value: 'Tag 3',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12347,
           subTagsUrl: null,
         }],
-      },
+      }],
     });
 
     await act(async () => {
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
index 8cee9bfb1b..82592cd203 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
@@ -62,6 +62,8 @@ const ContentTagsDropDownSelector = ({
   return (
     <div style={{ marginLeft: `${level * 1 }rem` }}>
       {tagPages.map((tagPage, pageNum) => (
+        // Array index represents the page number
+        // eslint-disable-next-line react/no-array-index-key
         <React.Fragment key={`tag-page-${pageNum}`}>
           {tagPage.isLoading ? (
             <div className="d-flex justify-content-center align-items-center flex-row">
@@ -79,7 +81,6 @@ const ContentTagsDropDownSelector = ({
               <div
                 className="d-flex flex-row"
                 style={{
-                  // paddingLeft: `${level * 1}rem`,
                   minHeight: '44px',
                 }}
               >
@@ -131,7 +132,6 @@ const ContentTagsDropDownSelector = ({
         ? (
           <div className="d-flex justify-content-center align-items-center flex-row">
             <Button
-              // style={{ marginLeft: `${level * 1 }rem` }}
               variant="outline-primary"
               onClick={loadMoreTags}
               className="mb-2 taxonomy-tags-load-more-button"
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
index 5823feaac4..b775d321a3 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
@@ -8,8 +8,12 @@ import { useTaxonomyTagsData } from './data/apiHooks';
 
 jest.mock('./data/apiHooks', () => ({
   useTaxonomyTagsData: jest.fn(() => ({
-    isSuccess: false,
-    data: {},
+    hasMorePages: false,
+    tagPages: [{
+      isLoading: true,
+      isError: false,
+      data: [],
+    }],
   })),
 }));
 
@@ -68,14 +72,22 @@ describe('<ContentTagsDropDownSelector />', () => {
 
   it('should render taxonomy tags drop down selector with no sub tags', async () => {
     useTaxonomyTagsData.mockReturnValue({
-      isSuccess: true,
-      data: {
-        results: [{
+      hasMorePages: false,
+      tagPages: [{
+        isLoading: false,
+        isError: false,
+        data: [{
           value: 'Tag 1',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
           subTagsUrl: null,
         }],
-      },
+      }],
     });
+
     await act(async () => {
       const { container, getByText } = render(
         <ContentTagsDropDownSelectorComponent
@@ -94,14 +106,22 @@ describe('<ContentTagsDropDownSelector />', () => {
 
   it('should render taxonomy tags drop down selector with sub tags', async () => {
     useTaxonomyTagsData.mockReturnValue({
-      isSuccess: true,
-      data: {
-        results: [{
+      hasMorePages: false,
+      tagPages: [{
+        isLoading: false,
+        isError: false,
+        data: [{
           value: 'Tag 2',
-          subTagsUrl: 'https://example.com',
+          externalId: null,
+          childCount: 1,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
+          subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=Tag%202',
         }],
-      },
+      }],
     });
+
     await act(async () => {
       const { container, getByText } = render(
         <ContentTagsDropDownSelectorComponent
diff --git a/src/content-tags-drawer/data/api.test.js b/src/content-tags-drawer/data/api.test.js
index 0d474ee0c2..637cb148cc 100644
--- a/src/content-tags-drawer/data/api.test.js
+++ b/src/content-tags-drawer/data/api.test.js
@@ -47,13 +47,33 @@ describe('content tags drawer api calls', () => {
     expect(result).toEqual(taxonomyTagsMock);
   });
 
-  it('should get taxonomy tags data with fullPathProvided', async () => {
+  it('should get taxonomy tags data with parentTag', async () => {
     const taxonomyId = 123;
-    const fullPathProvided = 'http://example.com/';
+    const options = { parentTag: 'Sample Tag' };
     axiosMock.onGet().reply(200, taxonomyTagsMock);
-    const result = await getTaxonomyTagsData(taxonomyId, fullPathProvided);
+    const result = await getTaxonomyTagsData(taxonomyId, options);
 
-    expect(axiosMock.history.get[0].url).toEqual(new URL(`${fullPathProvided}`));
+    expect(axiosMock.history.get[0].url).toContain('parent_tag=Sample+Tag');
+    expect(result).toEqual(taxonomyTagsMock);
+  });
+
+  it('should get taxonomy tags data with page', async () => {
+    const taxonomyId = 123;
+    const options = { page: 2 };
+    axiosMock.onGet().reply(200, taxonomyTagsMock);
+    const result = await getTaxonomyTagsData(taxonomyId, options);
+
+    expect(axiosMock.history.get[0].url).toContain('page=2');
+    expect(result).toEqual(taxonomyTagsMock);
+  });
+
+  it('should get taxonomy tags data with searchTerm', async () => {
+    const taxonomyId = 123;
+    const options = { searchTerm: 'memo' };
+    axiosMock.onGet().reply(200, taxonomyTagsMock);
+    const result = await getTaxonomyTagsData(taxonomyId, options);
+
+    expect(axiosMock.history.get[0].url).toContain('search_term=memo');
     expect(result).toEqual(taxonomyTagsMock);
   });
 
diff --git a/src/content-tags-drawer/data/apiHooks.test.jsx b/src/content-tags-drawer/data/apiHooks.test.jsx
index 3abf33a223..216d918124 100644
--- a/src/content-tags-drawer/data/apiHooks.test.jsx
+++ b/src/content-tags-drawer/data/apiHooks.test.jsx
@@ -1,5 +1,6 @@
-import { useQuery, useMutation } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueries } from '@tanstack/react-query';
 import { act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import {
   useTaxonomyTagsData,
   useContentTaxonomyTagsData,
@@ -13,6 +14,7 @@ jest.mock('@tanstack/react-query', () => ({
   useQuery: jest.fn(),
   useMutation: jest.fn(),
   useQueryClient: jest.fn(),
+  useQueries: jest.fn(),
 }));
 
 jest.mock('./api', () => ({
@@ -20,20 +22,52 @@ jest.mock('./api', () => ({
 }));
 
 describe('useTaxonomyTagsData', () => {
-  it('should return success response', () => {
-    useQuery.mockReturnValueOnce({ isSuccess: true, data: 'data' });
+  it('should call useQueries with the correct arguments', () => {
     const taxonomyId = 123;
-    const result = useTaxonomyTagsData(taxonomyId);
-
-    expect(result).toEqual({ isSuccess: true, data: 'data' });
-  });
-
-  it('should return failure response', () => {
-    useQuery.mockReturnValueOnce({ isSuccess: false });
-    const taxonomyId = 123;
-    const result = useTaxonomyTagsData(taxonomyId);
+    const mockData1 = {
+      results: [
+        {
+          value: 'tag 1',
+          externalId: null,
+          childCount: 16,
+          depth: 0,
+          parentValue: null,
+          id: 635951,
+          subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%201',
+        },
+        {
+          value: 'tag 2',
+          externalId: null,
+          childCount: 16,
+          depth: 0,
+          parentValue: null,
+          id: 636992,
+          subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%202',
+        },
+      ],
+    };
+
+    useQueries.mockReturnValue([
+      { data: mockData1, isLoading: false, isError: false },
+    ]);
+
+    const { result } = renderHook(() => useTaxonomyTagsData(taxonomyId));
+
+    // Assert that useQueries was called with the correct arguments
+    expect(useQueries).toHaveBeenCalledWith({
+      queries: [
+        { queryKey: ['taxonomyTags', taxonomyId, null, 1, ''], queryFn: expect.any(Function), staleTime: Infinity },
+      ],
+    });
 
-    expect(result).toEqual({ isSuccess: false });
+    expect(result.current.hasMorePages).toEqual(false);
+    expect(result.current.tagPages).toEqual([
+      {
+        isLoading: false,
+        isError: false,
+        data: mockData1.results,
+      },
+    ]);
   });
 });