From 58b6361fe47682a000701b7b981f52d03d886344 Mon Sep 17 00:00:00 2001 From: Garrett Rabian <57802560+gmrabian@users.noreply.github.com> Date: Thu, 12 Dec 2024 13:09:18 -0500 Subject: [PATCH] Remove unnecessary prop drilling (#826) --- services/ui-src/src/components/app/App.tsx | 11 ++------ .../src/components/layout/Header.test.tsx | 10 ++----- .../ui-src/src/components/layout/Header.tsx | 8 ++---- .../ui-src/src/components/menus/Menu.test.tsx | 27 ++++++++++++++++--- services/ui-src/src/components/menus/Menu.tsx | 12 ++++----- 5 files changed, 35 insertions(+), 33 deletions(-) diff --git a/services/ui-src/src/components/app/App.tsx b/services/ui-src/src/components/app/App.tsx index ba4e54a38..01ec8d695 100644 --- a/services/ui-src/src/components/app/App.tsx +++ b/services/ui-src/src/components/app/App.tsx @@ -1,4 +1,4 @@ -import { useContext, useEffect } from "react"; +import { useEffect } from "react"; import { useLocation, Routes, Route } from "react-router-dom"; import { ErrorBoundary } from "react-error-boundary"; // components @@ -20,15 +20,12 @@ import { fireTealiumPageView, isApparentReportPage, makeMediaQueryClasses, - UserContext, useStore, } from "utils"; import { ReportProvider } from "components/reports/ReportProvider"; export const App = () => { const mqClasses = makeMediaQueryClasses(); - const context = useContext(UserContext); - const { logout } = context; const { user, showLocalLogins } = useStore(); const { pathname, key } = useLocation(); @@ -51,11 +48,7 @@ export const App = () => { - {!isExportPage ? ( -
- ) : ( - - )} + {!isExportPage ?
: } diff --git a/services/ui-src/src/components/layout/Header.test.tsx b/services/ui-src/src/components/layout/Header.test.tsx index 309a8ae75..4b7b2aa53 100644 --- a/services/ui-src/src/components/layout/Header.test.tsx +++ b/services/ui-src/src/components/layout/Header.test.tsx @@ -16,7 +16,7 @@ const mockedUseStore = useStore as jest.MockedFunction; const headerComponent = ( -
{}} /> +
); @@ -24,17 +24,11 @@ const headerComponent = ( const reportComponent = ( -
{}} /> +
); -/* - * jest.mock("utils/reports/routing", () => ({ - * isReportFormPage: jest.fn(() => true), - * })); - */ - describe("
", () => { describe("Test Header", () => { beforeEach(() => { diff --git a/services/ui-src/src/components/layout/Header.tsx b/services/ui-src/src/components/layout/Header.tsx index b472b762d..5eaf49e6d 100644 --- a/services/ui-src/src/components/layout/Header.tsx +++ b/services/ui-src/src/components/layout/Header.tsx @@ -12,7 +12,7 @@ import getHelpIcon from "assets/icons/icon_help.png"; import checkIcon from "assets/icons/icon_check_gray.png"; import closeIcon from "assets/icons/icon_cancel_x_circle.png"; -export const Header = ({ handleLogout }: Props) => { +export const Header = () => { const { isMobile } = useBreakpoint(); const { report } = useStore() ?? {}; const { lastSavedTime, isReportPage } = useContext(ReportContext); @@ -45,7 +45,7 @@ export const Header = ({ handleLogout }: Props) => { hideText={isMobile} /> - + @@ -90,10 +90,6 @@ export const Header = ({ handleLogout }: Props) => { ); }; -interface Props { - handleLogout: () => void; -} - const sx = { root: { position: "sticky", diff --git a/services/ui-src/src/components/menus/Menu.test.tsx b/services/ui-src/src/components/menus/Menu.test.tsx index a733394aa..1bdd8058e 100644 --- a/services/ui-src/src/components/menus/Menu.test.tsx +++ b/services/ui-src/src/components/menus/Menu.test.tsx @@ -1,13 +1,27 @@ import { render, screen } from "@testing-library/react"; -// utils -import { RouterWrappedComponent } from "utils/testing/setupJest"; +import userEvent from "@testing-library/user-event"; //components import { Menu } from "components"; +// utils +import { + mockUserContext, + RouterWrappedComponent, +} from "utils/testing/setupJest"; +import { UserContext } from "utils"; import { testA11y } from "utils/testing/commonTests"; +const mockLogout = jest.fn(); + +const mockContext = { + ...mockUserContext, + logout: mockLogout, +}; + const menuComponent = ( - {}} /> + + + ); @@ -17,5 +31,12 @@ describe("", () => { expect(screen.getByTestId("header-menu-dropdown-button")).toBeVisible(); }); + test("Menu button logout fires logout function", async () => { + render(menuComponent); + const logoutButton = screen.getByText("Log Out"); + await userEvent.click(logoutButton); + expect(mockLogout).toHaveBeenCalledTimes(1); + }); + testA11y(menuComponent); }); diff --git a/services/ui-src/src/components/menus/Menu.tsx b/services/ui-src/src/components/menus/Menu.tsx index 5b9c944d7..556efd6c6 100644 --- a/services/ui-src/src/components/menus/Menu.tsx +++ b/services/ui-src/src/components/menus/Menu.tsx @@ -1,3 +1,4 @@ +import { useContext } from "react"; import { Link as RouterLink } from "react-router-dom"; // components import { @@ -12,14 +13,15 @@ import { } from "@chakra-ui/react"; import { MenuOption } from "components"; // utils -import { useBreakpoint } from "utils"; +import { useBreakpoint, UserContext } from "utils"; // assets import accountCircleIcon from "assets/icons/icon_account_circle.png"; import chevronDownIcon from "assets/icons/icon_arrow_down.png"; import editIcon from "assets/icons/icon_edit_square.png"; import logoutIcon from "assets/icons/icon_arrow_right_square.png"; -export const Menu = ({ handleLogout }: Props) => { +export const Menu = () => { + const { logout } = useContext(UserContext); const { isMobile } = useBreakpoint(); return ( @@ -55,7 +57,7 @@ export const Menu = ({ handleLogout }: Props) => { { ); }; -interface Props { - handleLogout: () => void; -} - const sx = { menuButton: { padding: 0,