diff --git a/apps/admin-ui/cypress/e2e/masthead_test.spec.ts b/apps/admin-ui/cypress/e2e/masthead_test.spec.ts index 0ba879ebc0..8d4910f10d 100644 --- a/apps/admin-ui/cypress/e2e/masthead_test.spec.ts +++ b/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 = () => { - 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", () => { +describe("Masthead tests", () => { beforeEach(() => { loginPage.logIn(); keycloakBefore(); }); - it("Test dropdown in desktop mode", () => { - goToAcctMgtTest(); + describe("Desktop view", () => { + 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(); - listingPage.goToItemDetails("address"); + it("Sign out reachs to log in screen", () => { + sidebarPage.waitForPageLoad(); + masthead.signOut(); + sidebarPage.waitForPageLoad(); + loginPage.isLogInPage(); + }); - cy.get("#view-header-subkey").should("exist"); - cy.findByTestId("help-label-name").should("exist"); + it("Go to realm info", () => { + 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"); - cy.findByTestId("help-label-name").should("not.exist"); + it("Enable/disable help mode in desktop mode", () => { + 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. -}); diff --git a/apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts b/apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts index 33e7119036..cfab4abbeb 100644 --- a/apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts +++ b/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; }