added test for the groups tab of the account-ui (#22371)

* added test for the groups tab of the account-ui

* simplified groups realm setup

* fixed url

* changed login to add realm

* set account ui v3 as theme

js/apps/account-ui/playwright.config.ts

@@ -21,13 +21,13 @@ export default defineConfig({
   projects: [
     { name: "setup", testMatch: /.auth\.setup\.ts/ },
     {
-      name: "import realm",
-      testMatch: /import\.setup\.ts/,
-      teardown: "del realm",
+      name: "import test realm",
+      testMatch: /test-realm\.setup\.ts/,
+      teardown: "del test realm",
     },
     {
-      name: "del realm",
-      testMatch: /import\.teardown\.ts/,
+      name: "del test realm",
+      testMatch: /test-realm\.teardown\.ts/,
     },
     {
       name: "chromium",
@@ -50,9 +50,9 @@ export default defineConfig({
     },
 
     {
-      name: "photoz realm chromium",
+      name: "resources",
       use: { ...devices["Desktop Chrome"] },
-      dependencies: ["import realm"],
+      dependencies: ["import test realm"],
       testMatch: ["**/*my-resources.spec.ts"],
     },
   ],

js/apps/account-ui/src/groups/Groups.tsx

@@ -96,7 +96,7 @@ const Groups = () => {
               <DataListItemCells
                 dataListCells={[
                   <DataListCell
-                    id={`${appIndex}-group-name`}
+                    data-testid={`group[${appIndex}].name`}
                     width={2}
                     key={"name-" + appIndex}
                   >

js/apps/account-ui/test/groups-realm.json

@@ -0,0 +1,150 @@
+{
+  "realm": "groups",
+  "accountTheme": "keycloak.v3",
+  "enabled": true,
+  "userManagedAccessAllowed": true,
+  "sslRequired": "external",
+  "privateKey": "MIICXAIBAAKBgQCrVrCuTtArbgaZzL1hvh0xtL5mc7o0NqPVnYXkLvgcwiC3BjLGw1tGEGoJaXDuSaRllobm53JBhjx33UNv+5z/UMG4kytBWxheNVKnL6GgqlNabMaFfPLPCF8kAgKnsi79NMo+n6KnSY8YeUmec/p2vjO2NjsSAVcWEQMVhJ31LwIDAQABAoGAfmO8gVhyBxdqlxmIuglbz8bcjQbhXJLR2EoS8ngTXmN1bo2L90M0mUKSdc7qF10LgETBzqL8jYlQIbt+e6TH8fcEpKCjUlyq0Mf/vVbfZSNaVycY13nTzo27iPyWQHK5NLuJzn1xvxxrUeXI6A2WFpGEBLbHjwpx5WQG9A+2scECQQDvdn9NE75HPTVPxBqsEd2z10TKkl9CZxu10Qby3iQQmWLEJ9LNmy3acvKrE3gMiYNWb6xHPKiIqOR1as7L24aTAkEAtyvQOlCvr5kAjVqrEKXalj0Tzewjweuxc0pskvArTI2Oo070h65GpoIKLc9jf+UA69cRtquwP93aZKtW06U8dQJAF2Y44ks/mK5+eyDqik3koCI08qaC8HYq2wVl7G2QkJ6sbAaILtcvD92ToOvyGyeE0flvmDZxMYlvaZnaQ0lcSQJBAKZU6umJi3/xeEbkJqMfeLclD27XGEFoPeNrmdx0q10Azp4NfJAY+Z8KRyQCR2BEG+oNitBOZ+YXF9KCpH3cdmECQHEigJhYg+ykOvr1aiZUMFT72HU0jnmQe2FVekuG+LJUt2Tm7GtMjTFoGpf0JwrVuZN39fOYAlo+nTixgeW7X8Y=",
+  "publicKey": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCrVrCuTtArbgaZzL1hvh0xtL5mc7o0NqPVnYXkLvgcwiC3BjLGw1tGEGoJaXDuSaRllobm53JBhjx33UNv+5z/UMG4kytBWxheNVKnL6GgqlNabMaFfPLPCF8kAgKnsi79NMo+n6KnSY8YeUmec/p2vjO2NjsSAVcWEQMVhJ31LwIDAQAB",
+  "requiredCredentials": [
+    "password"
+  ],
+  "users": [
+    {
+      "username": "jdoe",
+      "enabled": true,
+      "realmRoles": [],
+      "clientRoles": {
+        "account": ["view-groups"]
+      },
+      "credentials": [
+        {
+          "type": "password",
+          "value": "jdoe"
+        }
+      ],
+      "groups" : [ "/one", "/two", "/three" ]
+    },
+    {
+      "username": "alice",
+      "enabled": true,
+      "realmRoles": [],
+      "clientRoles": {
+        "account": ["view-groups"]
+      },
+      "credentials": [
+        {
+          "type": "password",
+          "value": "alice"
+        }
+      ],
+      "groups" : [ "/one/subgroup", "/four", "/five" ]
+    }
+  ],
+  "groups": [
+    {
+      "id": "2a81d08d-9720-46c3-b66f-b566bcc7bce7",
+      "name": "five",
+      "path": "/five",
+      "attributes": {},
+      "realmRoles": [],
+      "clientRoles": {},
+      "subGroups": []
+    },
+    {
+      "id": "68582f84-e8a3-4e74-b4ab-6a75d85c690d",
+      "name": "four",
+      "path": "/four",
+      "attributes": {},
+      "realmRoles": [],
+      "clientRoles": {},
+      "subGroups": []
+    },
+    {
+      "id": "2b96c84d-cf09-4bc7-8292-d84a346bcc77",
+      "name": "one",
+      "path": "/one",
+      "attributes": {},
+      "realmRoles": [],
+      "clientRoles": {},
+      "subGroups": [
+        {
+          "id": "7722ed31-0d9a-438a-895d-1cb7c1691c38",
+          "name": "subgroup",
+          "path": "/one/subgroup",
+          "attributes": {},
+          "realmRoles": [],
+          "clientRoles": {},
+          "subGroups": []
+        }
+      ]
+    },
+    {
+      "id": "fd9ec69b-aad3-426a-9412-a9c6819f72ff",
+      "name": "three",
+      "path": "/three",
+      "attributes": {},
+      "realmRoles": [],
+      "clientRoles": {},
+      "subGroups": []
+    },
+    {
+      "id": "c2153a9f-b300-4843-9663-fdfb42a973ad",
+      "name": "two",
+      "path": "/two",
+      "attributes": {},
+      "realmRoles": [],
+      "clientRoles": {},
+      "subGroups": []
+    }
+  ],
+  "clients": [
+    {
+      "clientId": "security-admin-console-v2",
+      "rootUrl": "http://localhost:8080/",
+      "adminUrl": "http://localhost:8080/",
+      "surrogateAuthRequired": false,
+      "enabled": true,
+      "alwaysDisplayInConsole": false,
+      "clientAuthenticatorType": "client-secret",
+      "redirectUris": [
+          "http://localhost:8080/*"
+      ],
+      "webOrigins": [
+          "http://localhost:8080"
+      ],
+      "notBefore": 0,
+      "bearerOnly": false,
+      "consentRequired": false,
+      "standardFlowEnabled": true,
+      "implicitFlowEnabled": false,
+      "directAccessGrantsEnabled": true,
+      "serviceAccountsEnabled": false,
+      "publicClient": true,
+      "frontchannelLogout": false,
+      "protocol": "openid-connect",
+      "attributes": {},
+      "authenticationFlowBindingOverrides": {},
+      "fullScopeAllowed": true,
+      "nodeReRegistrationTimeout": -1,
+      "defaultClientScopes": [
+          "web-origins",
+          "role_list",
+          "roles",
+          "profile",
+          "email"
+      ],
+      "optionalClientScopes": [
+          "address",
+          "phone",
+          "offline_access",
+          "microprofile-jwt"
+      ],
+      "access": {
+          "view": true,
+          "configure": true,
+          "manage": true
+      }
+    }
+  ]
+}

js/apps/account-ui/test/groups.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from "@playwright/test";
+import { login } from "./login";
+import { deleteRealm, importRealm } from "./admin-client";
+import groupsRealm from "./groups-realm.json" assert { type: "json" };
+import RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
+
+test.describe("Groups page", () => {
+  test.beforeAll(() => importRealm(groupsRealm as RealmRepresentation));
+  test.afterAll(() => deleteRealm("groups"));
+
+  test("List my groups", async ({ page }) => {
+    await login(page, "jdoe", "jdoe", "groups");
+    await page.getByTestId("groups").click();
+    await expect(page.getByTestId("group[0].name")).toHaveText("one");
+  });
+});

js/apps/account-ui/test/login.ts

@@ -1,6 +1,15 @@
 import { Page } from "@playwright/test";
 
-export const login = async (page: Page, username: string, password: string) => {
+export const login = async (
+  page: Page,
+  username: string,
+  password: string,
+  realm?: string,
+) => {
+  if (realm)
+    await page.goto(
+      process.env.CI ? `/realms/${realm}/account` : `/?realm=${realm}`,
+    );
   await page.getByLabel("Username").fill(username);
   await page.getByLabel("Password").fill(password);
   await page.getByRole("button", { name: "Sign In" }).click();

js/apps/account-ui/test/my-resources.spec.ts

@@ -3,10 +3,7 @@ import { login } from "./login";
 
 test.describe("My resources page", () => {
   test("List my resources", async ({ page }) => {
-    await page.goto(
-      process.env.CI ? "/realms/photoz/account" : "/?realm=photoz",
-    );
-    login(page, "jdoe", "jdoe");
+    await login(page, "jdoe", "jdoe", "photoz");
     await page.getByTestId("resources").click();
     //await expect(page.getByTestId("row[0].name")).toHaveText("one");
     await expect(page.getByRole("gridcell", { name: "one" })).toBeVisible();