update aap_31381

Author: justjais

ansible_ai_connect_admin_portal/package-lock.json

@@ -19,8 +19,7 @@
     "i18next-http-backend": "^2.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.1.2",
-    "react-router-dom": "^6.15.0"
+    "react-i18next": "^13.1.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.4",
@@ -82,7 +81,9 @@
     "webpack-dev-server": "^4.6.0",
     "webpack-manifest-plugin": "^4.0.2",
     "webpack-mock-server": "^1.0.18",
-    "workbox-webpack-plugin": "^6.4.1"
+    "workbox-webpack-plugin": "^6.4.1",
+    "react-router-dom": "^6.28.0",
+    "identity-obj-proxy": "^3.0.0"
   },
   "scripts": {
     "start": "node scripts/start.js",
@@ -145,9 +146,8 @@
     "moduleNameMapper": {
       "^react-native$": "react-native-web",
       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
-      "react-i18next": "<rootDir>/__mocks__/react-i18next.ts"
-    },
-    "module.exports": {
+      "react-i18next": "<rootDir>/__mocks__/react-i18next.ts",
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy",
       "monaco-editor": "<rootDir>/__mocks__/monaco-editor.ts",
       "monaco-yaml": "<rootDir>/__mocks__/monaco-yaml.ts"
     },

ansible_ai_connect_admin_portal/package.json

@@ -32,7 +32,7 @@ export function PageMastheadDropdown(props: PageMastheadDropdownProps) {
       id={id}
       onSelect={onSelect}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen} data-testid="page-masthead-dropdown__button">
           <Flex
             alignItems={{ default: "alignItemsCenter" }}
             flexWrap={{ default: "nowrap" }}
@@ -46,7 +46,7 @@ export function PageMastheadDropdown(props: PageMastheadDropdownProps) {
       isOpen={open}
       isPlain
       data-cy={id}
-      data-testid="page-masthead-dropdown"
+      data-testid="page-masthead-dropdown__button"
     >
       <DropdownList>
         <DropdownItem>{_children}</DropdownItem>

ansible_ai_connect_admin_portal/src/PageMastheadDropdown.tsx

@@ -16,7 +16,7 @@ describe("App", () => {
         adminDashboardUrl={"http://admin_dashboard-url/"}
       />,
     );
-    const accountMenu = await screen.findByTestId("page-masthead-dropdown");
+    const accountMenu = await screen.findByTestId("page-masthead-dropdown__button");
     expect(accountMenu).toBeInTheDocument();
     expect(accountMenu).toHaveTextContent("Batman");
   });

ansible_ai_connect_admin_portal/src/__tests__/App.test.tsx

@@ -1,7 +1,9 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { AppHeader } from "../AppHeader";
 import userEvent from "@testing-library/user-event";
+import { BrowserRouter } from 'react-router-dom';
+import { act } from 'react';
 
 describe("AppHeader", () => {
   // Store the original 'location' object so that it can be restored for other tests.
@@ -20,26 +22,40 @@ describe("AppHeader", () => {
   });
 
   it("Rendering", async () => {
-    render(<AppHeader userName={"Batman"} />);
-    const accountMenu = await screen.findByTestId("page-masthead-dropdown");
+    render(
+      <BrowserRouter>
+        <AppHeader userName={"Batman"} />
+      </BrowserRouter>
+    );
+    const accountMenu = await screen.findByTestId("page-masthead-dropdown__button");
     expect(accountMenu).toBeInTheDocument();
     expect(accountMenu).toHaveTextContent("Batman");
 
     // Check "Logout" option is not present
     expect(screen.queryByText("Logout")).toBeNull();
-
-    // Emulate click on menu button
-    const accountMenuToggle = await screen.findByTestId(
-      "page-masthead-dropdown__button",
-    );
-    await userEvent.click(accountMenuToggle);
-
+    const accountMenuToggle = await act(()=> {
+      screen.findByTestId(
+        "page-masthead-dropdown__button",
+      );
+    });
+    // const accountMenuToggle = await screen.findByTestId(
+    //   "page-masthead-dropdown__button",
+    // );
+    await act(() => {
+      userEvent.click(accountMenuToggle);
+    });
+    // await userEvent.click(accountMenuToggle);
     // "Logout" menu option should now be present
     expect(await screen.findByText("Logout")).toBeInTheDocument();
 
     // Emulate clicking on the logout button
-    const logoutMenuItem = await screen.findByTestId("app-header__logout");
+    const logoutMenuItem = await act(() => {
+      screen.findByTestId("app-header__logout");
+    });
+    // await act(() => {
+    //   userEvent.click(logoutMenuItem);
+    // });
     await userEvent.click(logoutMenuItem);
-    expect(window.location.assign).toBeCalledWith("/logout");
+    expect(window.location.assign).toHaveBeenCalledWith("/logout");
   });
 });

ansible_ai_connect_admin_portal/src/__tests__/AppHeader.test.tsx

@@ -6,15 +6,15 @@ describe("App", () => {
   it("Rendering::With Username", async () => {
     window.history.pushState({}, "Test page", "/console");
     render(<AppDenied userName={"Batman"} hasSubscription={true} />);
-    const accountMenu = await screen.findByTestId("page-masthead-dropdown");
+    const accountMenu = await screen.findByTestId("page-masthead-dropdown__button");
     expect(accountMenu).toBeInTheDocument();
     expect(accountMenu).toHaveTextContent("Batman");
   });
 
   it("Rendering::Without Username", async () => {
     window.history.pushState({}, "Test page", "/console");
     render(<AppDenied hasSubscription={false} />);
-    const accountMenu = await screen.findByTestId("page-masthead-dropdown");
+    const accountMenu = await screen.findByTestId("page-masthead-dropdown__button");
     expect(accountMenu).toBeInTheDocument();
     expect(accountMenu).toHaveTextContent("UnknownUser");
   });