Fix Signing in page (#27935)

Fixes: #27820

Signed-off-by: Hynek Mlnarik <hmlnarik@redhat.com>

js/apps/account-ui/src/account-security/SigningIn.tsx

@@ -86,8 +86,8 @@ export const SigningIn = () => {
     const maxWidth = { "--pf-u-max-width--MaxWidth": "300px" } as CSSProperties;
     const items = [
       <DataListCell
-        id={`cred-${credMetadata.credential.id}`}
         key="title"
+        data-testrole="label"
         className="pf-u-max-width"
         style={maxWidth}
       >
@@ -97,7 +97,10 @@ export const SigningIn = () => {
 
     if (credential.createdDate) {
       items.push(
-        <DataListCell key={"created" + credential.id}>
+        <DataListCell
+          key={"created" + credential.id}
+          data-testrole="created-at"
+        >
           <Trans i18nKey="credentialCreatedAt">
             <strong className="pf-u-mr-md"></strong>
             {{ date: formatDate(new Date(credential.createdDate)) }}
@@ -115,25 +118,39 @@ export const SigningIn = () => {
     return <Spinner />;
   }
 
+  const credentialUniqueCategories = [
+    ...new Set(credentials.map((c) => c.category)),
+  ];
+
   return (
     <Page title={t("signingIn")} description={t("signingInDescription")}>
-      {credentials.map((container) => (
-        <PageSection
-          key={container.category + container.type}
-          variant="light"
-          className="pf-u-px-0"
-        >
-          <Title headingLevel="h2" size="xl">
-            {t(container.category as TFuncKey)}
+      {credentialUniqueCategories.map((category) => (
+        <PageSection key={category} variant="light" className="pf-u-px-0">
+          <Title headingLevel="h2" size="xl" id={`${category}-categ-title`}>
+            {t(category as TFuncKey)}
           </Title>
+          {credentials
+            .filter((cred) => cred.category == category)
+            .map((container) => (
+              <>
                 <Split className="pf-u-mt-lg pf-u-mb-lg">
                   <SplitItem>
-              <Title headingLevel="h3" size="md" className="pf-u-mb-md">
-                <span className="cred-title pf-u-display-block">
+                    <Title
+                      headingLevel="h3"
+                      size="md"
+                      className="pf-u-mb-md"
+                      data-testid={`${container.type}/help`}
+                    >
+                      <span
+                        className="cred-title pf-u-display-block"
+                        data-testid={`${container.type}/title`}
+                      >
                         {t(container.displayName as TFuncKey)}
                       </span>
                     </Title>
+                    <span data-testid={`${container.type}/help-text`}>
                       {t(container.helptext as TFuncKey)}
+                    </span>
                   </SplitItem>
                   {container.createAction && (
                     <SplitItem isFilled>
@@ -145,9 +162,11 @@ export const SigningIn = () => {
                             })
                           }
                           title={t("setUpNew", {
-                      name: t(container.displayName as TFuncKey),
+                            name: t(
+                              `${container.type}-display-name` as TFuncKey,
+                            ),
                           })}
-                    testid={`${container.category}/create`}
+                          testid={`${container.type}/create`}
                         />
                       </div>
                     </SplitItem>
@@ -157,19 +176,20 @@ export const SigningIn = () => {
                 <DataList
                   aria-label="credential list"
                   className="pf-u-mb-xl"
-            data-testid={`${container.category}/credential-list`}
+                  data-testid={`${container.type}/credential-list`}
                 >
                   {container.userCredentialMetadatas.length === 0 && (
                     <EmptyRow
                       message={t("notSetUp", {
                         name: t(container.displayName as TFuncKey),
                       })}
+                      data-testid={`${container.type}/not-set-up`}
                     />
                   )}
 
                   {container.userCredentialMetadatas.map((meta) => (
                     <DataListItem key={meta.credential.id}>
-                <DataListItemRow>
+                      <DataListItemRow id={`cred-${meta.credential.id}`}>
                         <DataListItemCells
                           className="pf-u-py-0"
                           dataListCells={[
@@ -183,6 +203,7 @@ export const SigningIn = () => {
                               {container.removeable ? (
                                 <ContinueCancelModal
                                   buttonTitle={t("delete")}
+                                  buttonTestRole="remove"
                                   modalTitle={t("removeCred", {
                                     name: label(meta.credential),
                                   })}
@@ -222,6 +243,7 @@ export const SigningIn = () => {
                                     if (container.updateAction)
                                       login({ action: container.updateAction });
                                   }}
+                                  data-testrole="update"
                                 >
                                   {t("update")}
                                 </Button>
@@ -233,6 +255,8 @@ export const SigningIn = () => {
                     </DataListItem>
                   ))}
                 </DataList>
+              </>
+            ))}
         </PageSection>
       ))}
     </Page>

js/apps/account-ui/src/components/datalist/EmptyRow.tsx

@@ -9,12 +9,16 @@ type EmptyRowProps = {
   message: string;
 };
 
-export const EmptyRow = ({ message }: EmptyRowProps) => {
+export const EmptyRow = ({ message, ...props }: EmptyRowProps) => {
   return (
     <DataListItem className="pf-u-align-items-center pf-p-b-0">
       <DataListItemRow>
         <DataListItemCells
-          dataListCells={[<DataListCell key="0">{message}</DataListCell>]}
+          dataListCells={[
+            <DataListCell key="0" {...props}>
+              {message}
+            </DataListCell>,
+          ]}
         />
       </DataListItemRow>
     </DataListItem>

js/apps/account-ui/test/account-security/signing-in.spec.ts

@@ -21,26 +21,22 @@ test.describe("Signing in", () => {
     page.getByTestId("account-security/signing-in").click();
 
     await expect(
-      page
-        .getByTestId("basic-authentication/credential-list")
-        .getByRole("listitem"),
+      page.getByTestId("password/credential-list").getByRole("listitem"),
     ).toHaveCount(1);
     await expect(
-      page
-        .getByTestId("basic-authentication/credential-list")
-        .getByRole("listitem"),
+      page.getByTestId("password/credential-list").getByRole("listitem"),
     ).toContainText("My password");
-    await expect(page.getByTestId("basic-authentication/create")).toBeHidden();
+    await expect(page.getByTestId("password/create")).toBeHidden();
 
     await expect(
-      page.getByTestId("two-factor/credential-list").getByRole("listitem"),
+      page.getByTestId("otp/credential-list").getByRole("listitem"),
     ).toHaveCount(1);
     await expect(
-      page.getByTestId("two-factor/credential-list").getByRole("listitem"),
+      page.getByTestId("otp/credential-list").getByRole("listitem"),
     ).toContainText("not set up");
-    await expect(page.getByTestId("two-factor/create")).toBeVisible();
+    await expect(page.getByTestId("otp/create")).toBeVisible();
 
-    await page.getByTestId("two-factor/create").click();
+    await page.getByTestId("otp/create").click();
     await expect(page.locator("#kc-page-title")).toContainText(
       "Mobile Authenticator Setup",
     );
@@ -65,26 +61,22 @@ test.describe("Signing in 2", () => {
     page.getByTestId("account-security/signing-in").click();
 
     await expect(
-      page
-        .getByTestId("basic-authentication/credential-list")
-        .getByRole("listitem"),
+      page.getByTestId("password/credential-list").getByRole("listitem"),
     ).toHaveCount(1);
     await expect(
-      page
-        .getByTestId("basic-authentication/credential-list")
-        .getByRole("listitem"),
+      page.getByTestId("password/credential-list").getByRole("listitem"),
     ).toContainText("not set up");
-    await expect(page.getByTestId("basic-authentication/create")).toBeVisible();
+    await expect(page.getByTestId("password/create")).toBeVisible();
 
     await expect(
-      page.getByTestId("two-factor/credential-list").getByRole("listitem"),
+      page.getByTestId("otp/credential-list").getByRole("listitem"),
     ).toHaveCount(1);
     await expect(
-      page.getByTestId("two-factor/credential-list").getByRole("listitem"),
+      page.getByTestId("otp/credential-list").getByRole("listitem"),
     ).toContainText("not set up");
-    await expect(page.getByTestId("two-factor/create")).toBeVisible();
+    await expect(page.getByTestId("otp/create")).toBeVisible();
 
-    await page.getByTestId("basic-authentication/create").click();
+    await page.getByTestId("password/create").click();
     await expect(page.locator("#kc-page-title")).toContainText(
       "Update password",
     );

js/libs/ui-shared/src/continue-cancel/ContinueCancelModal.tsx

@@ -7,6 +7,7 @@ export type ContinueCancelModalProps = Omit<ModalProps, "ref" | "children"> & {
   cancelLabel: string;
   buttonTitle: string | ReactNode;
   buttonVariant?: ButtonProps["variant"];
+  buttonTestRole?: string;
   isDisabled?: boolean;
   onContinue: () => void;
   component?: React.ElementType<any> | React.ComponentType<any>;
@@ -20,6 +21,7 @@ export const ContinueCancelModal = ({
   buttonTitle,
   isDisabled,
   buttonVariant,
+  buttonTestRole,
   onContinue,
   component = Button,
   children,
@@ -34,6 +36,7 @@ export const ContinueCancelModal = ({
         variant={buttonVariant}
         onClick={() => setOpen(true)}
         isDisabled={isDisabled}
+        data-testrole={buttonTestRole}
       >
         {buttonTitle}
       </Component>