New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(e2e): add e2e tests for global header #2412

Open

ciiay wants to merge 10 commits into redhat-developer:main from ciiay:rhidp-5474-e2e-test-for-global-header

+230 −57

Contributor

ciiay commented Feb 18, 2025 •

edited

Loading

Description

Update e2e tests for global header.

Changes including:

enabled global-header plugin in "showcase-rabc" and "showcase" test values
added support field to the default configMap app-config-rhdh.yaml
enabled notifications plugins to as it's a default component in global header
added appConfig field to upstream.backstage config in order to test notification unread amount badge
replaced openSidebar("Settings") with a new uiHelper function goToSettingsPage()`
added default-global-header.spec.ts
replaced openSidebar("Create...") with new clickLinkByAriaLabel("Create...")
updated getByPlaceholder("Search") to getByPlaceholder("Search", { exact: true }) so that it only specify the filter search element from main content
added a few new uiHelper functions

Which issue(s) does this PR fix

Fixes RHIDP-5474

PR acceptance criteria

Please make sure that the following steps are complete:

GitHub Actions are completed and successful
Unit Tests are updated and passing
E2E Tests are updated and passing
Documentation is updated if necessary (requirement for new features)
Add a screenshot if the change is UX/UI related

How to test changes / Special notes to the reviewer

openshift-ci bot added the do-not-merge/work-in-progress label

openshift-ci bot requested review from subhashkhileri and zdrapela

February 18, 2025 23:29

openshift-ci bot commented Feb 18, 2025

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign subhashkhileri for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

.ibm/OWNERS
e2e-tests/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

Contributor Author

ciiay commented Feb 19, 2025

/test e2e-tests

ciiay force-pushed the rhidp-5474-e2e-test-for-global-header branch from 741341b to b49056d Compare

February 19, 2025 16:17

ciiay changed the title ~~[WIP]fix(global-header): add e2e tests for global header~~ fix(global-header): add e2e tests for global header

openshift-ci bot removed the do-not-merge/work-in-progress label

ciiay changed the title ~~fix(global-header): add e2e tests for global header~~ chore(e2e): add e2e tests for global header

ciiay force-pushed the rhidp-5474-e2e-test-for-global-header branch from 845f5a7 to 99f4cbf Compare

February 19, 2025 23:36

ciiay requested a review from christoph-jerolimov

February 20, 2025 13:21

ciiay added 9 commits

February 20, 2025 08:41


          fix(global-header): add e2e tests for global header

3a96f55

Signed-off-by: Yi Cai <[email protected]>


          Added global header e2e tests

a47268f

Signed-off-by: Yi Cai <[email protected]>


          fixed prettier issues

f1a9c42

Signed-off-by: Yi Cai <[email protected]>


          added header search bar test

2a4e726

Signed-off-by: Yi Cai <[email protected]>


          added notifications button tests

4f7ef05

Signed-off-by: Yi Cai <[email protected]>


          updated config

4a50ffb

Signed-off-by: Yi Cai <[email protected]>


          updated failed tests

5fda780

Signed-off-by: Yi Cai <[email protected]>


          updated failed tests

eb42cdc

Signed-off-by: Yi Cai <[email protected]>


          fixed profile dropdown label

8dfbd1b

Signed-off-by: Yi Cai <[email protected]>

ciiay force-pushed the rhidp-5474-e2e-test-for-global-header branch from 6f6fd76 to 8dfbd1b Compare

February 20, 2025 13:41

Contributor Author

ciiay commented Feb 20, 2025

/test e2e-tests


          fixed failed tests

d7b09f0

Signed-off-by: Yi Cai <[email protected]>

subhashkhileri reviewed

View reviewed changes

e2e-tests/playwright/e2e/authProviders/rhsso-76-provider.spec.ts

@@ @@ -445,7 +445,8 @@ for (const version of ["RHBK"]) { @@
                       expect(statusBefore).toBe(403);
                       // logout
-                      await uiHelper.openSidebar("Settings");
+                      await uiHelper.clickByDataTestId("KeyboardArrowDownOutlinedIcon");

Member

subhashkhileri Feb 24, 2025

what if there are multiple Icon on sidebar? instead can we click based on the nav item like setting?

subhashkhileri reviewed

View reviewed changes

e2e-tests/playwright/e2e/default-global-header.spec.ts

+                    "[data-testid='KeyboardArrowDownOutlinedIcon']",
+                  );
+                  await profileDropdown.click();
+                  expect(await uiHelper.isLinkVisible("Settings")).toBeTruthy();

Member

subhashkhileri Feb 24, 2025

Suggested change

      
                expect(await uiHelper.isLinkVisible("Settings")).toBeTruthy();
          
               await uiHelper.verifyLink("Settings");

similarly can we replace all expect(await isLinkVisible.()) as above?

subhashkhileri reviewed

View reviewed changes

e2e-tests/playwright/utils/ui-helper.ts

@@ @@ -95,6 +95,26 @@ export class UIhelper { @@
                   await this.page.locator(`a`).filter({ hasText: linkText }).first().click();
                 }
+                async clickLinkByAriaLabel(ariaLabel: string) {
+                  await this.page.locator(`div[aria-label='${ariaLabel}'] a`).first().click();

Member

subhashkhileri Feb 24, 2025 •

edited

Loading

you can update the existing clickLink() method to handle this locator.

subhashkhileri reviewed

View reviewed changes

e2e-tests/playwright/utils/ui-helper.ts

+                async goToSettingsPage() {
+                  await expect(this.page.locator("nav[id='global-header']")).toBeVisible();
+                  await this.clickByDataTestId("KeyboardArrowDownOutlinedIcon");

Member

subhashkhileri Feb 24, 2025

https://github.com/redhat-developer/rhdh/pull/2412/files#r1967793235

Member

christoph-jerolimov Feb 24, 2025

We should find the item by the label, not the icon

subhashkhileri reviewed

View reviewed changes

e2e-tests/playwright/utils/ui-helper.ts

+                  await link.dispatchEvent("click");
+                }
+                async clickPbyText(text: string) {

Member

subhashkhileri Feb 24, 2025

lets not create methods for tags, you can directly use this await this.page.locator(p).getByText(text).first().click(); in test instead of putting here.

subhashkhileri reviewed

View reviewed changes

e2e-tests/playwright/utils/ui-helper.ts

@@ @@ -150,11 +170,21 @@ export class UIhelper { @@
                   return await this.isElementVisible(locator, timeout);
                 }
+                async isSearchBarVisible(): Promise<boolean> {

Member

subhashkhileri Feb 24, 2025

you may directly use expect(await this.isElementVisible(locator)).toBeTruthy(); in test instead of new method in uihelper.

Idea is to have generic methods in uihelper while keeping it small. if you still want you can move it to respective pages under e2e-tests/playwright/support/pages and the locators to e2e-tests/playwright/support/pageObjects

subhashkhileri reviewed

View reviewed changes

e2e-tests/playwright/utils/ui-helper.ts

                 async isLinkVisible(text: string): Promise<boolean> {
                   const locator = `a:has-text("${text}")`;
                   return await this.isElementVisible(locator);
                 }
+                async isLinkVisibleByLabel(label: string): Promise<boolean> {

Member

subhashkhileri Feb 24, 2025

instead of new method you may update verifyLink() to handle this.

subhashkhileri reviewed

View reviewed changes

e2e-tests/playwright/utils/ui-helper.ts

+                  await this.page.locator(`div[aria-label='${ariaLabel}'] a`).first().click();
+                }
+                async clickLinkByHref(href: string) {

Member

subhashkhileri Feb 24, 2025

you can update the existing clickLink() method to handle this

subhashkhileri reviewed

View reviewed changes

e2e-tests/playwright/utils/ui-helper.ts

+                async clickLinkByHref(href: string) {
+                  const link = this.page.locator(`a[href="${href}"]`);
+                  await link.waitFor({ state: "visible" });
+                  await link.dispatchEvent("click");

Member

subhashkhileri Feb 24, 2025 •

edited

Loading

Suggested change

      
                await link.dispatchEvent("click");
          
                await link.click({force:true});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet