fix(keycloak): Switch keycloak sign in flow (#66)

* Switch keycloak sign in flow

Signed-off-by: Dominika Zemanovicova <dzemanov@redhat.com>

* Update docs about how to test locally with Overlays

Signed-off-by: Dominika Zemanovicova <dzemanov@redhat.com>

---------

Signed-off-by: Dominika Zemanovicova <dzemanov@redhat.com>

Author: dzemanov

docs/changelog.md

@@ -2,7 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
-## [1.1.22] - Current
+## [1.1.23] - Current
+
+### Fixed
+
+- Fixed popup flow for Keycloak sign in. Before, if the popup opened fast, the "popup" event could fire before the listener was attached resulting in test hanging and timeouts.
+
+## [1.1.22]
 
 ### Added
 

docs/overlay/tutorials/running-locally.md

@@ -86,6 +86,7 @@ yarn report
 ### Report Location
 
 Reports are saved to `playwright-report/`:
+
 - `playwright-report/index.html` - HTML report
 - Test artifacts (screenshots, videos, traces)
 
@@ -136,6 +137,50 @@ For failed tests, traces are automatically captured:
 npx playwright show-trace playwright-report/trace.zip
 ```
 
+## Test local changes to e2e-test-utils in Overlays
+
+If you want to try your local changes to `@red-hat-developer-hub/e2e-test-utils` work for [Overlays](https://github.com/redhat-developer/rhdh-plugin-export-overlays):
+
+1. Build the utils package:
+
+```bash
+cd /Your/Path/Projects/rhdh-e2e-test-utils
+yarn build
+```
+
+1. Point the Overlays workspace `e2e-test-utils` dependency to your local checkout:
+
+```bash
+cd /Your/Path/Projects/rhdh-plugin-export-overlays/workspaces/<plugin>/e2e-tests
+```
+
+Update `package.json`:
+
+```json
+{
+  "dependencies": {
+    "@red-hat-developer-hub/e2e-test-utils": "file:/Your/Path/Projects/rhdh-e2e-test-utils"
+  }
+}
+```
+
+1. Reinstall dependencies and run tests:
+
+```bash
+yarn install
+yarn test:headed
+```
+
+When you change the utils package again, re-run `yarn build` in `rhdh-e2e-test-utils`, then run `yarn install` again in the overlay `e2e-tests` workspace.
+
+### Troubleshooting local linking
+
+If you see odd module-resolution issues while testing a locally linked `e2e-test-utils` package, try running the Overlays tests with:
+
+```bash
+NODE_PRESERVE_SYMLINKS=1 yarn test:headed
+```
+
 ## Environment Variables
 
 ### Using .env File
@@ -151,11 +196,11 @@ SKIP_KEYCLOAK_DEPLOYMENT=false
 
 ### Common Variables
 
-| Variable | Description | Default |
-|----------|-------------|---------|
-| `RHDH_VERSION` | RHDH version to deploy | `next` (latest) |
-| `INSTALLATION_METHOD` | `helm` or `operator` | `helm` |
-| `SKIP_KEYCLOAK_DEPLOYMENT` | Skip Keycloak deployment entirely (for guest auth) | `false` |
+| Variable                   | Description                                        | Default         |
+| -------------------------- | -------------------------------------------------- | --------------- |
+| `RHDH_VERSION`             | RHDH version to deploy                             | `next` (latest) |
+| `INSTALLATION_METHOD`      | `helm` or `operator`                               | `helm`          |
+| `SKIP_KEYCLOAK_DEPLOYMENT` | Skip Keycloak deployment entirely (for guest auth) | `false`         |
 
 See [Environment Variables Reference](/overlay/reference/environment-variables) for all available variables.
 
@@ -251,7 +296,7 @@ test("screenshot test", async ({ page }) => {
 
 ```typescript
 test("console test", async ({ page }) => {
-  page.on("console", msg => console.log(msg.text()));
+  page.on("console", (msg) => console.log(msg.text()));
   await page.goto("/");
 });
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/e2e-test-utils",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "description": "Test utilities for RHDH E2E tests",
   "license": "Apache-2.0",
   "repository": {

src/playwright/helpers/common.ts

@@ -78,16 +78,11 @@ export class LoginHelper {
     await this.page.waitForTimeout(3_000);
   }
 
-  async logintoKeycloak(userid: string, password: string) {
-    await new Promise<void>((resolve) => {
-      this.page.once("popup", async (popup) => {
-        await popup.waitForLoadState();
-        await popup.locator("#username").fill(userid);
-        await popup.locator("#password").fill(password);
-        await popup.locator("#kc-login").click();
-        resolve();
-      });
-    });
+  async logintoKeycloak(popup: Page, userid: string, password: string) {
+    await popup.waitForLoadState();
+    await popup.locator("#username").fill(userid);
+    await popup.locator("#password").fill(password);
+    await popup.locator("#kc-login").click();
   }
 
   async loginAsKeycloakUser(
@@ -96,8 +91,10 @@ export class LoginHelper {
   ) {
     await this.page.goto("/");
     await this.uiHelper.waitForLoad(240000);
+    const popupPromise = this.page.waitForEvent("popup");
     await this.uiHelper.clickButton("Sign In");
-    await this.logintoKeycloak(userid, password);
+    const popup = await popupPromise;
+    await this.logintoKeycloak(popup, userid, password);
     await this.page.waitForSelector("nav a", { timeout: 10_000 });
   }