Fix incorrect branching for some authentication flow diagrams. Fixes k…

…eycloak#28479 (keycloak#28480)

* Refactor node creation in FlowDiagram

Signed-off-by: Anil Dhurjaty <[email protected]>

* Fix flow diagram incorrect branching display

Signed-off-by: Anil Dhurjaty <[email protected]>

* Enable react unit testing with vitest

Signed-off-by: Anil Dhurjaty <[email protected]>

* Add react tests for FlowDiagram

Signed-off-by: Anil Dhurjaty <[email protected]>

* Add cypress test for browser flow diagram

Signed-off-by: Anil Dhurjaty <[email protected]>

---------

Signed-off-by: Anil Dhurjaty <[email protected]>

js/apps/admin-ui/cypress/e2e/authentication_test.spec.ts

@@ -15,6 +15,7 @@ import BindFlowModal from "../support/pages/admin-ui/manage/authentication/BindF
 import OTPPolicies from "../support/pages/admin-ui/manage/authentication/OTPPolicies";
 import WebAuthnPolicies from "../support/pages/admin-ui/manage/authentication/WebAuthnPolicies";
 import CIBAPolicyPage from "../support/pages/admin-ui/manage/authentication/CIBAPolicyPage";
+import FlowDiagram from "../support/pages/admin-ui/manage/authentication/FlowDiagram";
 
 const loginPage = new LoginPage();
 const masthead = new Masthead();
@@ -25,6 +26,7 @@ const realmName = "test" + uuid();
 
 describe("Authentication test", () => {
   const detailPage = new FlowDetails();
+  const diagramView = new FlowDiagram();
   const duplicateFlowModal = new DuplicateFlowModal();
   const modalUtil = new ModalUtils();
 
@@ -118,7 +120,7 @@ describe("Authentication test", () => {
 
     detailPage.goToDiagram();
 
-    cy.get(".react-flow").should("exist");
+    diagramView.exists();
   });
 
   it("Should add a execution", () => {
@@ -207,6 +209,29 @@ describe("Authentication test", () => {
     new BindFlowModal().fill("Direct grant flow").save();
     masthead.checkNotificationMessage("Flow successfully updated");
   });
+
+  it("Should display the default browser flow diagram", () => {
+    listingPage.goToItemDetails("browser");
+
+    detailPage.goToDiagram();
+
+    diagramView.exists();
+
+    diagramView.edgesExist([
+      { from: "Start", to: "Cookie" },
+      { from: "Cookie", to: "End" },
+      { from: "Start", to: "Kerberos" },
+      { from: "Kerberos", to: "End" },
+      { from: "Start", to: "Identity Provider Redirector" },
+      { from: "Identity Provider Redirector", to: "End" },
+      { from: "Start", to: "Start forms" },
+      { from: "Start forms", to: "Username Password Form" },
+      { from: "Username Password Form", to: "Condition - user configured" },
+      { from: "Condition - user configured", to: "OTP Form" },
+      { from: "Condition - user configured", to: "End forms" },
+      { from: "End forms", to: "End" },
+    ]);
+  });
 });
 
 describe("Required actions", () => {

js/apps/admin-ui/cypress/support/pages/admin-ui/SidebarPage.ts

@@ -1,7 +1,7 @@
 import CommonElements from "../CommonElements";
 
 export default class SidebarPage extends CommonElements {
-  #realmsDrpDwn = "realmSelectorToggle";
+  #realmsDrpDwn = "realmSelector";
   #createRealmBtn = "add-realm";
 
   #clientsBtn = "#nav-item-clients";

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/FlowDiagram.ts

@@ -0,0 +1,35 @@
+type Edge = { from: string; to: string };
+
+export default class FlowDiagram {
+  exists() {
+    cy.get(".react-flow").should("exist");
+  }
+
+  edgesExist(edges: Edge[]) {
+    edges.forEach((edge) => {
+      this.#labelToId(edge.from).then((fromId) => {
+        this.#labelToId(edge.to).then((toId) => {
+          const label = `Edge from ${fromId} to ${toId}`;
+          cy.get(`[aria-label="${label}"]`);
+        });
+      });
+    });
+    return this;
+  }
+
+  #labelToId(label: string) {
+    return cy.findByText(label).then((node) => {
+      const id = node.attr("data-id");
+      if (id) {
+        return cy.wrap(id);
+      }
+      // if data-id does not exist, we're looking at a subflow, which has the data-id
+      // on the grandparent
+      return cy
+        .wrap(node)
+        .parent()
+        .parent()
+        .then((n) => cy.wrap(n.attr("data-id")));
+    });
+  }
+}