From 2c4acbbc1adfb45207b5b245f3fc0b5bd93f0d8a Mon Sep 17 00:00:00 2001 From: Sanket Saikia Date: Thu, 12 Dec 2024 13:13:58 +0530 Subject: [PATCH] chore(e2e-test): [Test automation] Verify Home Page can be customized (#2035) * chore(e2e-test): [Test automation] Verify Home Page can be customized * Fixed appConfig * Updated test names * Added new config for homepage and sidebar --- .../resources/config_map/app-config-rhdh.yaml | 38 ---- .../dynamic-homepage-and-sidebar-config.yaml | 180 ++++++++++++++++++ .ibm/pipelines/utils.sh | 4 + .../value_files/values_showcase.yaml | 2 + .../e2e/home-page-customization.spec.ts | 33 ++++ e2e-tests/playwright/utils/ui-helper.ts | 6 +- 6 files changed, 221 insertions(+), 42 deletions(-) create mode 100644 .ibm/pipelines/resources/config_map/dynamic-homepage-and-sidebar-config.yaml create mode 100644 e2e-tests/playwright/e2e/home-page-customization.spec.ts diff --git a/.ibm/pipelines/resources/config_map/app-config-rhdh.yaml b/.ibm/pipelines/resources/config_map/app-config-rhdh.yaml index c58cf65ce6..a2a5411046 100644 --- a/.ibm/pipelines/resources/config_map/app-config-rhdh.yaml +++ b/.ibm/pipelines/resources/config_map/app-config-rhdh.yaml @@ -14,44 +14,6 @@ app: headerColor1: 'rgb(190, 122, 45)' headerColor2: 'rgb(45, 190, 50)' navigationIndicatorColor: 'rgb(45, 113, 190)' -dynamicPlugins: - rootDirectory: dynamic-plugins-root - frontend: - default.main-menu-items: - menuItems: - default.list: - title: References - icon: bookmarks - default.apis: - parent: default.list - default.learning-path: - parent: default.list - backstage.plugin-techdocs: - menuItems: - favorites: - title: Favorites - icon: star - priority: 10 - docs: - parent: favorites - priority: 1 - pataknight.backstage-plugin-rhdh-qe-theme: - appIcons: - - importName: LightIcon - name: lightIcon - - importName: DarkIcon - name: darkIcon - themes: - - icon: lightIcon - id: light-dynamic - importName: lightThemeProvider - title: Light Dynamic - variant: light - - icon: darkIcon - id: dark-dynamic - importName: darkThemeProvider - title: Dark Dynamic - variant: dark backend: reading: allow: diff --git a/.ibm/pipelines/resources/config_map/dynamic-homepage-and-sidebar-config.yaml b/.ibm/pipelines/resources/config_map/dynamic-homepage-and-sidebar-config.yaml new file mode 100644 index 0000000000..1abff694d5 --- /dev/null +++ b/.ibm/pipelines/resources/config_map/dynamic-homepage-and-sidebar-config.yaml @@ -0,0 +1,180 @@ +dynamicPlugins: + rootDirectory: dynamic-plugins-root + frontend: + red-hat-developer-hub.backstage-plugin-dynamic-home-page: + mountPoints: + - mountPoint: home.page/cards + importName: SearchBar + config: + layouts: + xl: { w: 10, h: 1, x: 1 } + lg: { w: 10, h: 1, x: 1 } + md: { w: 10, h: 1, x: 1 } + sm: { w: 10, h: 1, x: 1 } + xs: { w: 12, h: 1 } + xxs: { w: 12, h: 1 } + - mountPoint: home.page/cards + importName: QuickAccessCard + config: + layouts: + xl: { w: 7, h: 8 } + lg: { w: 7, h: 8 } + md: { w: 7, h: 8 } + sm: { w: 12, h: 8 } + xs: { w: 12, h: 8 } + xxs: { w: 12, h: 8 } + - mountPoint: home.page/cards + importName: CatalogStarredEntitiesCard + config: + layouts: + xl: { w: 5, h: 4, x: 7 } + lg: { w: 5, h: 4, x: 7 } + md: { w: 5, h: 4, x: 7 } + sm: { w: 12, h: 4 } + xs: { w: 12, h: 4 } + xxs: { w: 12, h: 4 } + + - mountPoint: home.page/cards + importName: Headline + config: + layouts: + xl: { w: 12, h: 1 } + lg: { w: 12, h: 1 } + md: { w: 12, h: 1 } + sm: { w: 12, h: 1 } + xs: { w: 12, h: 1 } + xxs: { w: 12, h: 1 } + props: + title: Placeholder tests + align: center + + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { x: 1, y: 0, w: 10, h: 1 } + lg: { x: 1, y: 0, w: 10, h: 1 } + md: { x: 1, y: 0, w: 10, h: 1 } + sm: { x: 0, y: 0, w: 12, h: 1 } + xs: { x: 0, y: 0, w: 12, h: 1 } + xxs: { x: 0, y: 0, w: 12, h: 1 } + props: + showBorder: true + debugContent: Home page customization test 1 + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { x: 0, y: 0, w: 7, h: 4 } + lg: { x: 0, y: 0, w: 7, h: 4 } + md: { x: 0, y: 0, w: 7, h: 4 } + sm: { x: 0, y: 0, w: 12, h: 4 } + xs: { x: 0, y: 0, w: 12, h: 4 } + xxs: { x: 0, y: 0, w: 12, h: 4 } + props: + showBorder: true + debugContent: Home page customization test 2 + - mountPoint: home.page/cards + importName: Placeholder + config: + layouts: + xl: { x: 7, y: 0, w: 5, h: 4 } + lg: { x: 7, y: 0, w: 5, h: 4 } + md: { x: 7, y: 0, w: 5, h: 4 } + sm: { x: 0, y: 0, w: 12, h: 4 } + xs: { x: 0, y: 0, w: 12, h: 4 } + xxs: { x: 0, y: 0, w: 12, h: 4 } + props: + showBorder: true + debugContent: Home page customization test 3 + - mountPoint: home.page/cards + importName: Headline + config: + layouts: + xl: { w: 12, h: 1 } + lg: { w: 12, h: 1 } + md: { w: 12, h: 1 } + sm: { w: 12, h: 1 } + xs: { w: 12, h: 1 } + xxs: { w: 12, h: 1 } + props: + title: Markdown tests + align: center + + - mountPoint: home.page/cards + importName: MarkdownCard + config: + layouts: + xl: { w: 6, h: 4 } + lg: { w: 6, h: 4 } + md: { w: 6, h: 4 } + sm: { w: 6, h: 4 } + xs: { w: 6, h: 4 } + xxs: { w: 6, h: 4 } + props: + title: Company links + content: | + ### RHDH + + * [Website](https://developers.redhat.com/rhdh/overview) + * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/) + * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase) + * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins) + - mountPoint: home.page/cards + importName: Markdown + config: + layouts: + xl: { w: 6, h: 4, x: 6 } + lg: { w: 6, h: 4, x: 6 } + md: { w: 6, h: 4, x: 6 } + sm: { w: 6, h: 4, x: 6 } + xs: { w: 6, h: 4, x: 6 } + xxs: { w: 6, h: 4, x: 6 } + props: + title: Important company links + content: | + ### RHDH + + * [Website](https://developers.redhat.com/rhdh/overview) + * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/) + * [GitHub Showcase](https://github.com/janus-idp/backstage-showcase) + * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins) + - mountPoint: home.page/cards + importName: FeaturedDocsCard + - mountPoint: home.page/cards + importName: JokeCard + default.main-menu-items: + menuItems: + default.list: + title: References + icon: bookmarks + default.apis: + parent: default.list + default.learning-path: + parent: default.list + backstage.plugin-techdocs: + menuItems: + favorites: + title: Favorites + icon: star + priority: 10 + docs: + parent: favorites + priority: 1 + pataknight.backstage-plugin-rhdh-qe-theme: + appIcons: + - importName: LightIcon + name: lightIcon + - importName: DarkIcon + name: darkIcon + themes: + - icon: lightIcon + id: light-dynamic + importName: lightThemeProvider + title: Light Dynamic + variant: light + - icon: darkIcon + id: dark-dynamic + importName: darkThemeProvider + title: Dark Dynamic + variant: dark \ No newline at end of file diff --git a/.ibm/pipelines/utils.sh b/.ibm/pipelines/utils.sh index 6d5801a003..adc81983dc 100755 --- a/.ibm/pipelines/utils.sh +++ b/.ibm/pipelines/utils.sh @@ -449,6 +449,10 @@ apply_yaml_files() { create_app_config_map_k8s "$config_file" "$project" else create_app_config_map "$config_file" "$project" + oc create configmap dynamic-homepage-and-sidebar-config \ + --from-file="dynamic-homepage-and-sidebar-config.yaml"="$dir/resources/config_map/dynamic-homepage-and-sidebar-config.yaml" \ + --namespace="${project}" \ + --dry-run=client -o yaml | oc apply -f - fi oc create configmap rbac-policy \ --from-file="rbac-policy.csv"="$dir/resources/config_map/rbac-policy.csv" \ diff --git a/.ibm/pipelines/value_files/values_showcase.yaml b/.ibm/pipelines/value_files/values_showcase.yaml index cc739c0021..a714d1653a 100644 --- a/.ibm/pipelines/value_files/values_showcase.yaml +++ b/.ibm/pipelines/value_files/values_showcase.yaml @@ -148,6 +148,8 @@ upstream: extraAppConfig: - configMapRef: app-config-rhdh filename: app-config-rhdh.yaml + - configMapRef: dynamic-homepage-and-sidebar-config + filename: dynamic-homepage-and-sidebar-config.yaml extraEnvVarsSecrets: - rhdh-secrets - redis-secret diff --git a/e2e-tests/playwright/e2e/home-page-customization.spec.ts b/e2e-tests/playwright/e2e/home-page-customization.spec.ts new file mode 100644 index 0000000000..70d3f94ad7 --- /dev/null +++ b/e2e-tests/playwright/e2e/home-page-customization.spec.ts @@ -0,0 +1,33 @@ +import { test } from "@playwright/test"; +import { UIhelper } from "../utils/ui-helper"; +import { Common } from "../utils/common"; + +test.describe("Home page customization", () => { + let common: Common; + let uiHelper: UIhelper; + + test.beforeEach(async ({ page }) => { + uiHelper = new UIhelper(page); + common = new Common(page); + await common.loginAsGuest(); + }); + + test("Verify that home page is customized", async () => { + await uiHelper.verifyTextinCard("Quick Access", "Quick Access"); + await uiHelper.verifyTextinCard( + "Your Starred Entities", + "Your Starred Entities", + ); + await uiHelper.verifyHeading("Placeholder tests"); + await uiHelper.verifyDivHasText("Home page customization test 1"); + await uiHelper.verifyDivHasText("Home page customization test 2"); + await uiHelper.verifyDivHasText("Home page customization test 3"); + await uiHelper.verifyHeading("Markdown tests"); + await uiHelper.verifyTextinCard("Company links", "Company links"); + await uiHelper.verifyHeading("Important company links"); + await uiHelper.verifyHeading("RHDH"); + await uiHelper.verifyTextinCard("Featured Docs", "Featured Docs"); + await uiHelper.verifyTextinCard("Random Joke", "Random Joke"); + await uiHelper.clickButton("Reroll"); + }); +}); diff --git a/e2e-tests/playwright/utils/ui-helper.ts b/e2e-tests/playwright/utils/ui-helper.ts index d3b854800f..9d2f5167f2 100644 --- a/e2e-tests/playwright/utils/ui-helper.ts +++ b/e2e-tests/playwright/utils/ui-helper.ts @@ -84,10 +84,8 @@ export class UIhelper { await element.click(); } - async verifyDivHasText(divText: string) { - await expect( - this.page.locator(`div`).filter({ hasText: divText }), - ).toBeVisible(); + async verifyDivHasText(divText: string | RegExp) { + await expect(this.page.locator(`div`).getByText(divText)).toBeVisible(); } async clickLink(linkText: string) {