diff --git a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts index 28db10b35fa..9202a5a3839 100644 --- a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts +++ b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts @@ -44,6 +44,40 @@ describe("OverlayNotificationsContentService", () => { expect(bodyAppendChildSpy).not.toHaveBeenCalled(); }); + it("applies correct styles when notificationRefreshFlag is true", async () => { + overlayNotificationsContentService["notificationRefreshFlag"] = true; + + sendMockExtensionMessage({ + command: "openNotificationBar", + data: { + type: "change", + typeData: mock(), + }, + }); + await flushPromises(); + + const barElement = overlayNotificationsContentService["notificationBarElement"]!; + expect(barElement.style.height).toBe("400px"); + expect(barElement.style.right).toBe("0px"); + }); + + it("applies correct styles when notificationRefreshFlag is false", async () => { + overlayNotificationsContentService["notificationRefreshFlag"] = false; + + sendMockExtensionMessage({ + command: "openNotificationBar", + data: { + type: "change", + typeData: mock(), + }, + }); + await flushPromises(); + + const barElement = overlayNotificationsContentService["notificationBarElement"]!; + expect(barElement.style.height).toBe("82px"); + expect(barElement.style.right).toBe("10px"); + }); + it("closes the notification bar if the notification bar type has changed", async () => { overlayNotificationsContentService["currentNotificationBarType"] = "add"; const closeNotificationBarSpy = jest.spyOn( diff --git a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts index ee005852a42..01f8237581d 100644 --- a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts +++ b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts @@ -21,24 +21,32 @@ export class OverlayNotificationsContentService private notificationBarIframeElement: HTMLIFrameElement | null = null; private currentNotificationBarType: NotificationType | null = null; private notificationRefreshFlag: boolean = false; - private notificationBarElementStyles: Partial = { - height: "82px", - width: "430px", - maxWidth: "calc(100% - 20px)", - minHeight: "initial", - top: "10px", - right: "10px", - padding: "0", - position: "fixed", - zIndex: "2147483647", - visibility: "visible", - borderRadius: "4px", - border: "none", - backgroundColor: "transparent", - overflow: "hidden", - transition: "box-shadow 0.15s ease", - transitionDelay: "0.15s", - }; + private getNotificationBarStyles(): Partial { + const styles: Partial = { + height: "400px", + width: "430px", + maxWidth: "calc(100% - 20px)", + minHeight: "initial", + top: "10px", + right: "0px", + padding: "0", + position: "fixed", + zIndex: "2147483647", + visibility: "visible", + borderRadius: "4px", + border: "none", + backgroundColor: "transparent", + overflow: "hidden", + transition: "box-shadow 0.15s ease", + transitionDelay: "0.15s", + }; + + if (!this.notificationRefreshFlag) { + styles.height = "82px"; + styles.right = "10px"; + } + return styles; + } private notificationBarIframeElementStyles: Partial = { width: "100%", height: "100%", @@ -60,7 +68,6 @@ export class OverlayNotificationsContentService void sendExtensionMessage("checkNotificationQueue"); void sendExtensionMessage("notificationRefreshFlagValue").then((notificationRefreshFlag) => { this.notificationRefreshFlag = !!notificationRefreshFlag; - this.setNotificationRefreshBarHeight(); }); } @@ -233,32 +240,12 @@ export class OverlayNotificationsContentService this.notificationBarElement = globalThis.document.createElement("div"); this.notificationBarElement.id = "bit-notification-bar"; - setElementStyles(this.notificationBarElement, this.notificationBarElementStyles, true); - this.setNotificationRefreshBarHeight(); + setElementStyles(this.notificationBarElement, this.getNotificationBarStyles(), true); this.notificationBarElement.appendChild(this.notificationBarIframeElement); } } - /** - * Sets the height of the notification bar based on the value of `notificationRefreshFlag`. - * If the flag is `true`, the bar is expanded to 400px and aligned right. - * If the flag is `false`, `null`, or `undefined`, it defaults to height of 82px. - * Skips if the notification bar element has not yet been created. - * - */ - private setNotificationRefreshBarHeight() { - const isNotificationV3 = !!this.notificationRefreshFlag; - - if (!this.notificationBarElement) { - return; - } - - if (isNotificationV3) { - setElementStyles(this.notificationBarElement, { height: "400px", right: "0" }, true); - } - } - /** * Sets up the message listener for the initialization of the notification bar. * This will send the initialization data to the notification bar iframe.