Masthead new tests & refactoring (#4439)

apps/admin-ui/cypress/e2e/masthead_test.spec.ts

@@ -1,4 +1,3 @@
-import ListingPage from "../support/pages/admin-ui/ListingPage";
 import LoginPage from "../support/pages/LoginPage";
 import SidebarPage from "../support/pages/admin-ui/SidebarPage";
 import Masthead from "../support/pages/admin-ui/Masthead";
@@ -6,61 +5,69 @@ import { keycloakBefore } from "../support/util/keycloak_hooks";
 
 const loginPage = new LoginPage();
 const masthead = new Masthead();
-const listingPage = new ListingPage();
 const sidebarPage = new SidebarPage();
+const helpLabel = ".pf-c-form__group-label-help";
 
-const logOutTest = () => {
+describe("Masthead tests", () => {
-  sidebarPage.waitForPageLoad();
-  masthead.signOut();
-  sidebarPage.waitForPageLoad();
-  loginPage.isLogInPage();
-};
-
-const goToAcctMgtTest = () => {
-  sidebarPage.waitForPageLoad();
-  masthead.accountManagement();
-  cy.get("h1").contains("Welcome to Keycloak account management");
-  cy.get("#landingReferrerLink").click({ force: true });
-  masthead.checkIsAdminUI();
-};
-
-describe("Masthead tests in desktop mode", () => {
   beforeEach(() => {
     loginPage.logIn();
     keycloakBefore();
   });
 
-  it("Test dropdown in desktop mode", () => {
+  describe("Desktop view", () => {
-    goToAcctMgtTest();
+    it("Go to account console and back to admin console", () => {
+      sidebarPage.waitForPageLoad();
+      masthead.accountManagement();
+      cy.get("h1").contains("Welcome to Keycloak account management");
+      masthead.goToAdminConsole();
+      masthead.checkIsAdminUI();
+    });
 
-    sidebarPage.goToClientScopes();
+    it("Sign out reachs to log in screen", () => {
-    listingPage.goToItemDetails("address");
+      sidebarPage.waitForPageLoad();
+      masthead.signOut();
+      sidebarPage.waitForPageLoad();
+      loginPage.isLogInPage();
+    });
 
-    cy.get("#view-header-subkey").should("exist");
+    it("Go to realm info", () => {
-    cy.findByTestId("help-label-name").should("exist");
+      sidebarPage.goToClients();
+      masthead.toggleUsernameDropdown().clickRealmInfo();
+      cy.get(".pf-c-card__title").should("contain.text", "Server info");
+    });
 
-    masthead.toggleGlobalHelp();
+    it("Should go to documentation page", () => {
+      masthead.clickGlobalHelp();
+      masthead.clickDocumentationLink();
+      cy.get("#header").should("contain.text", "Server Administration Guide");
+    });
 
-    cy.get("#view-header-subkey").should("not.exist");
+    it("Enable/disable help mode in desktop mode", () => {
-    cy.findByTestId("help-label-name").should("not.exist");
+      masthead.assertIsDesktopView();
+      cy.get(helpLabel).should("exist");
+      masthead.toggleGlobalHelp();
+      masthead.clickGlobalHelp();
+      cy.get(helpLabel).should("not.exist");
+      masthead.toggleGlobalHelp();
+      cy.get(helpLabel).should("exist");
+    });
+  });
 
-    logOutTest();
+  describe("Mobile view", () => {
+    it("Mobile menu is shown when in mobile view", () => {
+      cy.viewport("samsung-s10");
+      masthead.assertIsMobileView();
+    });
+
+    it("Enable/disable help mode in mobile view", () => {
+      cy.viewport("samsung-s10");
+      masthead
+        .assertIsMobileView()
+        .toggleUsernameDropdown()
+        .toggleMobileViewHelp();
+      cy.get(helpLabel).should("not.exist");
+      masthead.toggleMobileViewHelp();
+      cy.get(helpLabel).should("exist");
+    });
   });
 });
-
-describe("Masthead tests with kebab menu", () => {
-  beforeEach(() => {
-    loginPage.logIn();
-    keycloakBefore();
-    masthead.setMobileMode(true);
-  });
-
-  it("Test dropdown in mobile mode", () => {
-    masthead.checkKebabShown();
-    goToAcctMgtTest();
-    logOutTest();
-  });
-
-  // TODO: Add test for help when using kebab menu.
-  //       Feature not yet implemented for kebab.
-});

apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts

@@ -10,6 +10,9 @@ export default class Masthead extends CommonElements {
   private userDrpDwn = "#user-dropdown";
   private userDrpDwnKebab = "#user-dropdown-kebab";
   private globalAlerts = "global-alerts";
+  private documentationLink = "#link";
+  private backToAdminConsoleLink = "#landingReferrerLink";
+  private userDrpdwnItem = ".pf-c-dropdown__menu-item";
 
   private getAlertsContainer() {
     return cy.findByTestId(this.globalAlerts);
@@ -35,6 +38,39 @@ export default class Masthead extends CommonElements {
     cy.get("#enableHelp").click({ force: true });
   }
 
+  toggleUsernameDropdown() {
+    this.userDropdown().click();
+    return this;
+  }
+
+  toggleMobileViewHelp() {
+    cy.get(this.userDrpdwnItem).contains("Help").click();
+    return this;
+  }
+
+  clickRealmInfo() {
+    cy.get(this.userDrpdwnItem).contains("Realm info").click();
+    return this;
+  }
+
+  clickGlobalHelp() {
+    cy.get(this.helpBtn).click();
+    return this;
+  }
+
+  clickDocumentationLink() {
+    cy.get(this.documentationLink)
+      .find("a")
+      .invoke("removeAttr", "target")
+      .click();
+    return this;
+  }
+
+  goToAdminConsole() {
+    cy.get(this.backToAdminConsoleLink).click({ force: true });
+    return this;
+  }
+
   userDropdown() {
     return cy
       .document()
@@ -45,13 +81,13 @@ export default class Masthead extends CommonElements {
   }
 
   signOut() {
-    this.userDropdown().click();
+    this.toggleUsernameDropdown();
     cy.get("#sign-out").click();
     Cypress.session.clearAllSavedSessions();
   }
 
   accountManagement() {
-    this.userDropdown().click();
+    this.toggleUsernameDropdown();
     cy.get("#manage-account").click();
   }
 
@@ -83,9 +119,16 @@ export default class Masthead extends CommonElements {
     return this;
   }
 
-  checkKebabShown() {
+  assertIsDesktopView() {
+    cy.get(this.userDrpDwn).should("be.visible");
+    cy.get(this.userDrpDwnKebab).should("not.be.visible");
+
+    return this;
+  }
+
+  assertIsMobileView() {
     cy.get(this.userDrpDwn).should("not.be.visible");
-    cy.get(this.userDrpDwnKebab).should("exist");
+    cy.get(this.userDrpDwnKebab).should("be.visible");
 
     return this;
   }