From 7de831b6fee633f5be1fa0a33ce442a80460de56 Mon Sep 17 00:00:00 2001 From: Hynek Mlnarik Date: Wed, 6 Mar 2024 13:12:36 +0100 Subject: [PATCH] Fix account console tests for dev Fixes: #27604 Signed-off-by: Hynek Mlnarik --- js/apps/account-ui/src/main.tsx | 5 +---- js/apps/account-ui/src/root/PageNav.tsx | 9 +++++++-- js/apps/account-ui/src/routes.tsx | 4 ++-- .../test/account-security/linked-accounts.spec.ts | 8 +++----- js/apps/account-ui/test/admin-client.ts | 4 ++-- js/apps/account-ui/test/utils.ts | 11 ++++++++--- 6 files changed, 23 insertions(+), 18 deletions(-) diff --git a/js/apps/account-ui/src/main.tsx b/js/apps/account-ui/src/main.tsx index 9b965d99c405..1955609d117b 100644 --- a/js/apps/account-ui/src/main.tsx +++ b/js/apps/account-ui/src/main.tsx @@ -5,10 +5,8 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import { environment } from "./environment"; import { i18n } from "./i18n"; import { routes } from "./routes"; -import { getRootPath } from "./utils/getRootPath"; // Initialize required components before rendering app. await i18n.init(); @@ -16,8 +14,7 @@ await i18n.init(); const container = document.getElementById("app"); const root = createRoot(container!); -const basename = getRootPath(environment.realm); -const router = createBrowserRouter(routes, { basename }); +const router = createBrowserRouter(routes); root.render( diff --git a/js/apps/account-ui/src/root/PageNav.tsx b/js/apps/account-ui/src/root/PageNav.tsx index 1fbbf6b9f997..c3522851394e 100644 --- a/js/apps/account-ui/src/root/PageNav.tsx +++ b/js/apps/account-ui/src/root/PageNav.tsx @@ -20,12 +20,14 @@ import { useHref, useLinkClickHandler, useLocation, + useParams, } from "react-router-dom"; import fetchContentJson from "../content/fetchContent"; import type { Feature } from "../environment"; import { TFuncKey } from "../i18n"; import { usePromise } from "../utils/usePromise"; import { useEnvironment } from "./KeycloakContext"; +import { getRootPath } from "../utils/getRootPath"; type RootMenuItem = { label: TFuncKey; @@ -132,8 +134,11 @@ export const NavLink = ({ isActive, children, }: PropsWithChildren) => { - const href = useHref(to); - const handleClick = useLinkClickHandler(to); + const { realm } = useParams(); + + const menuItemPath = `${getRootPath(realm)}/${to}`; + const href = useHref(menuItemPath); + const handleClick = useLinkClickHandler(menuItemPath); return ( , }; @@ -58,7 +58,7 @@ export const PersonalInfoRoute: IndexRouteObject = { }; export const RootRoute: RouteObject = { - path: "/", + path: "/realms/:realm/account", element: , errorElement: , children: [ diff --git a/js/apps/account-ui/test/account-security/linked-accounts.spec.ts b/js/apps/account-ui/test/account-security/linked-accounts.spec.ts index 83c54dca6f42..bcf68a67c5be 100644 --- a/js/apps/account-ui/test/account-security/linked-accounts.spec.ts +++ b/js/apps/account-ui/test/account-security/linked-accounts.spec.ts @@ -14,7 +14,7 @@ import { inRealm, } from "../admin-client"; import groupsIdPClient from "../realms/groups-idp.json" assert { type: "json" }; -import { getBaseUrl } from "../utils"; +import { getKeycloakServerUrl } from "../utils"; const realm = "groups"; @@ -32,7 +32,7 @@ test.describe("Account linking", () => { groupIdPClientId = await createClient( groupsIdPClient as ClientRepresentation, ); - const baseUrl = getBaseUrl(); + const baseUrl = getKeycloakServerUrl(); const idp: IdentityProviderRepresentation = { alias: "master-idp", providerId: "oidc", @@ -65,9 +65,7 @@ test.describe("Account linking", () => { test("Linking", async ({ page }) => { // If refactoring this, consider introduction of helper functions for individual pages - login, update profile etc. - await page.goto( - process.env.CI ? `/realms/${realm}/account` : `/?realm=${realm}`, - ); + await page.goto(`/realms/${realm}/account`); // Click the login via master-idp provider button await loginWithIdp(page, "master-idp"); diff --git a/js/apps/account-ui/test/admin-client.ts b/js/apps/account-ui/test/admin-client.ts index 91d62a28ce32..7824a0532e52 100644 --- a/js/apps/account-ui/test/admin-client.ts +++ b/js/apps/account-ui/test/admin-client.ts @@ -6,10 +6,10 @@ import type { UserProfileConfig } from "@keycloak/keycloak-admin-client/lib/defs import UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation"; import { DEFAULT_REALM } from "../src/constants"; -import { getBaseUrl } from "./utils"; +import { getKeycloakServerUrl } from "./utils"; const adminClient = new KeycloakAdminClient({ - baseUrl: getBaseUrl(), + baseUrl: getKeycloakServerUrl(), realmName: DEFAULT_REALM, }); diff --git a/js/apps/account-ui/test/utils.ts b/js/apps/account-ui/test/utils.ts index e23c46af3ef3..f7aebfbba2cc 100644 --- a/js/apps/account-ui/test/utils.ts +++ b/js/apps/account-ui/test/utils.ts @@ -1,13 +1,18 @@ import { getRootPath } from "../src/utils/getRootPath"; -export function getBaseUrl(): string { +function getTestServerUrl(): string { return process.env.KEYCLOAK_SERVER ?? "http://localhost:8080"; } +export function getKeycloakServerUrl(): string { + // In CI, the Keycloak server is running in the same server as tested console, while in dev, it is running on a different port + return process.env.CI ? getTestServerUrl() : "http://localhost:8180"; +} + export function getAccountUrl() { - return getBaseUrl() + getRootPath(); + return getTestServerUrl() + getRootPath(); } export function getAdminUrl() { - return getBaseUrl() + "/admin/master/console/"; + return getKeycloakServerUrl() + "/admin/master/console/"; }