From d3829e6224e398d924b3a37a5840b6378a064334 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Wed, 3 Jul 2024 12:04:43 -0400 Subject: [PATCH 1/3] hide tab when no results --- .../SearchDisplay/ResourceCategoryTabs.tsx | 48 +++++++++++-------- frontends/ol-components/src/index.ts | 2 +- 2 files changed, 30 insertions(+), 20 deletions(-) diff --git a/frontends/mit-open/src/page-components/SearchDisplay/ResourceCategoryTabs.tsx b/frontends/mit-open/src/page-components/SearchDisplay/ResourceCategoryTabs.tsx index 95e74ff481..ffc0ebcaa5 100644 --- a/frontends/mit-open/src/page-components/SearchDisplay/ResourceCategoryTabs.tsx +++ b/frontends/mit-open/src/page-components/SearchDisplay/ResourceCategoryTabs.tsx @@ -5,6 +5,7 @@ import { TabButtonList, TabPanel, styled, + useTabContext, } from "ol-components" import { ResourceCategoryEnum, LearningResourcesSearchResponse } from "api" @@ -73,13 +74,22 @@ const ResourceCategoryTabList: React.FC = ({ onTabChange, className, }) => { - const counts = resourceCategoryCounts(aggregations) + const tabContext = useTabContext() + const activeTab = tabContext?.value + const categoryCounts = resourceCategoryCounts(aggregations) const allCount = aggregations?.resource_category ? (aggregations.resource_category || []).reduce((count, bucket) => { count = count + bucket.doc_count return count }, 0) : undefined + const counts = categoryCounts + ? { + ...categoryCounts, + all: allCount ?? 0, + } + : null + const countsLoaded = !!counts return ( = ({ onTabChange?.() }} > - {tabs.map((t) => { - let count: number | undefined - if (t.name === "all") { - count = allCount - } else { - count = - counts && t.resource_category - ? counts[t.resource_category] ?? 0 - : undefined - } - return ( - - ) - })} + {tabs + .map((tab) => ({ + tab, + count: counts?.[tab.resource_category ?? "all"] ?? 0, + })) + .filter(({ count, tab }) => { + if (!countsLoaded || activeTab === tab.name) return true + return count + }) + .map(({ tab, count }) => { + return ( + + ) + })} ) } diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts index 9913ff4a29..281f6fe22c 100644 --- a/frontends/ol-components/src/index.ts +++ b/frontends/ol-components/src/index.ts @@ -109,7 +109,7 @@ export { TabButtonList, } from "./components/TabButtons/TabButtonList" -export { default as TabContext } from "@mui/lab/TabContext" +export { default as TabContext, useTabContext } from "@mui/lab/TabContext" export type { TabContextProps } from "@mui/lab/TabContext" export { default as TabPanel } from "@mui/lab/TabPanel" export type { TabPanelProps } from "@mui/lab/TabPanel" From e2bfe98d64e64aa4d812fdc2f0a0d7ff46ea96e5 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Mon, 8 Jul 2024 10:23:28 -0400 Subject: [PATCH 2/3] add some tests --- .../src/pages/SearchPage/SearchPage.test.tsx | 62 +++++++++++++++++-- 1 file changed, 56 insertions(+), 6 deletions(-) diff --git a/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx b/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx index 2ded93dd1c..caa7ce4173 100644 --- a/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx +++ b/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx @@ -64,9 +64,9 @@ describe("SearchPage", () => { count: 1000, metadata: { aggregations: { - resource_type: [ + resource_category: [ { key: "course", doc_count: 100 }, - { key: "podcast", doc_count: 200 }, + { key: "learning_materials", doc_count: 200 }, { key: "program", doc_count: 300 }, { key: "irrelevant", doc_count: 400 }, ], @@ -231,9 +231,9 @@ describe("Search Page Tabs", () => { count: 1000, metadata: { aggregations: { - resource_type: [ + resource_category: [ { key: "course", doc_count: 100 }, - { key: "podcast", doc_count: 200 }, + { key: "learning_materials", doc_count: 200 }, { key: "program", doc_count: 300 }, { key: "irrelevant", doc_count: 400 }, ], @@ -247,13 +247,57 @@ describe("Search Page Tabs", () => { expect(tab).toHaveAccessibleName(expectedActive) }) + test.each([ + { programCount: 0, programsVisible: false, url: "?" }, + { + programCount: 0, + programsVisible: true, + url: "?resource_category=program", + }, + { programCount: 123, programsVisible: true, url: "?" }, + ])( + "Tabs only visible if there are results or tab is active (count: $programCount, url: $url, visible: $programsVisible)", + async ({ programCount, programsVisible, url }) => { + setMockApiResponses({ + search: { + count: 0, + metadata: { + aggregations: { + resource_category: [ + { key: "course", doc_count: 0 }, + { key: "learning_material", doc_count: 0 }, + { key: "program", doc_count: programCount }, + ], + }, + suggestions: [], + }, + }, + }) + renderWithProviders(, { url }) + + // getBy is syncrhonous. The tab is initially visible while API call is pending. + const tabPrograms = screen.getByRole("tab", { name: /Programs/ }) + // Now wait either for the count or for the tab to disappear + if (programsVisible) { + await waitFor(() => { + expect(tabPrograms).toHaveTextContent(`${programCount}`) + }) + expect(tabPrograms).toBeVisible() + } else { + await waitFor(() => { + expect(tabPrograms).not.toBeVisible() + }) + } + }, + ) + test("Clicking tabs updates URL", async () => { setMockApiResponses({ search: { count: 1000, metadata: { aggregations: { - resource_type: [ + resource_category: [ { key: "course", doc_count: 100 }, { key: "podcast", doc_count: 200 }, { key: "program", doc_count: 300 }, @@ -329,7 +373,13 @@ describe("Search Page Tabs", () => { search: { count: 1000, metadata: { - aggregations: {}, + aggregations: { + resource_category: [ + { key: "course", doc_count: 100 }, + { key: "learning_materials", doc_count: 200 }, + { key: "program", doc_count: 300 }, + ], + }, suggestions: [], }, }, From 3607ecdf3d03e0e6f231da008b053fc9e6251918 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Mon, 8 Jul 2024 11:57:54 -0400 Subject: [PATCH 3/3] add another test --- .../src/pages/SearchPage/SearchPage.test.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx b/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx index caa7ce4173..f0ad07a8d7 100644 --- a/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx +++ b/frontends/mit-open/src/pages/SearchPage/SearchPage.test.tsx @@ -247,6 +247,30 @@ describe("Search Page Tabs", () => { expect(tab).toHaveAccessibleName(expectedActive) }) + test("Clearing facets does NOT reset tab", async () => { + setMockApiResponses({ + search: { + count: 0, + metadata: { + aggregations: { + resource_category: [ + { key: "course", doc_count: 100 }, + { key: "program", doc_count: 10 }, + ], + }, + suggestions: [], + }, + }, + }) + const { location } = renderWithProviders(, { + url: "?topic=Physics&resource_category=course", + }) + const activeTab = screen.getByRole("tab", { selected: true }) + expect(activeTab).toHaveTextContent("Courses") + await user.click(screen.getByRole("button", { name: /clear all/i })) + expect(location.current.search).toBe("?resource_category=course") + }) + test.each([ { programCount: 0, programsVisible: false, url: "?" }, {