From 55464a0fc9e4566465234183897ea4325b4e823c Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Wed, 6 Aug 2025 09:49:23 -0400
Subject: [PATCH] PM-24242 Add IDs to AtRisk Notification for automation 
 (#15865)

* PM-24242

* fix ts issue in storybook
---
 .../autofill/content/components/buttons/action-button.ts  | 3 +++
 .../at-risk-notification/container.lit-stories.ts         | 8 ++++++--
 .../components/notification/at-risk-password/container.ts | 4 +++-
 .../components/notification/at-risk-password/footer.ts    | 1 +
 apps/browser/src/autofill/notification/bar.ts             | 3 ++-
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/browser/src/autofill/content/components/buttons/action-button.ts b/apps/browser/src/autofill/content/components/buttons/action-button.ts
index 339b628875c..b43bed7f96b 100644
--- a/apps/browser/src/autofill/content/components/buttons/action-button.ts
+++ b/apps/browser/src/autofill/content/components/buttons/action-button.ts
@@ -8,6 +8,7 @@ import { Spinner } from "../icons";
 
 export type ActionButtonProps = {
   buttonText: string | TemplateResult;
+  dataTestId?: string;
   disabled?: boolean;
   isLoading?: boolean;
   theme: Theme;
@@ -17,6 +18,7 @@ export type ActionButtonProps = {
 
 export function ActionButton({
   buttonText,
+  dataTestId,
   disabled = false,
   isLoading = false,
   theme,
@@ -32,6 +34,7 @@ export function ActionButton({
   return html`
     <button
       class=${actionButtonStyles({ disabled, fullWidth, isLoading, theme })}
+      data-testid="${dataTestId}"
       title=${buttonText}
       type="button"
       @click=${handleButtonClick}
diff --git a/apps/browser/src/autofill/content/components/lit-stories/notification/at-risk-notification/container.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/notification/at-risk-notification/container.lit-stories.ts
index 3d1fcf339e8..55d35869db4 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/notification/at-risk-notification/container.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/notification/at-risk-notification/container.lit-stories.ts
@@ -2,6 +2,8 @@ import { Meta, StoryObj } from "@storybook/web-components";
 
 import { ThemeTypes } from "@bitwarden/common/platform/enums";
 
+import { NotificationTypes } from "../../../../../notification/abstractions/notification-bar";
+import { getNotificationTestId } from "../../../../../notification/bar";
 import {
   AtRiskNotification,
   AtRiskNotificationProps,
@@ -30,8 +32,10 @@ export default {
   },
 } as Meta<AtRiskNotificationProps>;
 
-const Template = (args: AtRiskNotificationProps) => AtRiskNotification({ ...args });
-
+const Template = (args: AtRiskNotificationProps) => {
+  const notificationTestId = getNotificationTestId(NotificationTypes.AtRiskPassword);
+  return AtRiskNotification({ ...args, notificationTestId });
+};
 export const Default: StoryObj<AtRiskNotificationProps> = {
   render: Template,
 };
diff --git a/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts b/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts
index 90da0833fd9..001e9f24001 100644
--- a/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts
+++ b/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts
@@ -18,11 +18,13 @@ export type AtRiskNotificationProps = NotificationBarIframeInitData & {
   handleCloseNotification: (e: Event) => void;
 } & {
   i18n: I18n;
+  notificationTestId: string;
 };
 
 export function AtRiskNotification({
   handleCloseNotification,
   i18n,
+  notificationTestId,
   theme = ThemeTypes.Light,
   params,
 }: AtRiskNotificationProps) {
@@ -33,7 +35,7 @@ export function AtRiskNotification({
   );
 
   return html`
-    <div class=${atRiskNotificationContainerStyles(theme)}>
+    <div data-testid="${notificationTestId}" class=${atRiskNotificationContainerStyles(theme)}>
       ${NotificationHeader({
         handleCloseNotification,
         i18n,
diff --git a/apps/browser/src/autofill/content/components/notification/at-risk-password/footer.ts b/apps/browser/src/autofill/content/components/notification/at-risk-password/footer.ts
index d7805492fa6..e89edaf8b69 100644
--- a/apps/browser/src/autofill/content/components/notification/at-risk-password/footer.ts
+++ b/apps/browser/src/autofill/content/components/notification/at-risk-password/footer.ts
@@ -26,6 +26,7 @@ export function AtRiskNotificationFooter({
         open(passwordChangeUri, "_blank");
       },
       buttonText: AdditionalTasksButtonContent({ buttonText: i18n.changePassword, theme }),
+      dataTestId: "change-password-button",
       theme,
       fullWidth: false,
     })}
diff --git a/apps/browser/src/autofill/notification/bar.ts b/apps/browser/src/autofill/notification/bar.ts
index 285ae4aa257..6e20a07f81f 100644
--- a/apps/browser/src/autofill/notification/bar.ts
+++ b/apps/browser/src/autofill/notification/bar.ts
@@ -200,7 +200,7 @@ export function getNotificationTestId(
     [NotificationTypes.Unlock]: "unlock-notification-bar",
     [NotificationTypes.Add]: "save-notification-bar",
     [NotificationTypes.Change]: "update-notification-bar",
-    [NotificationTypes.AtRiskPassword]: "at-risk-password-notification-bar",
+    [NotificationTypes.AtRiskPassword]: "at-risk-notification-bar",
   }[notificationType];
 }
 
@@ -287,6 +287,7 @@ async function initNotificationBar(message: NotificationBarWindowMessage) {
           type: notificationBarIframeInitData.type as NotificationType,
           theme: resolvedTheme,
           i18n,
+          notificationTestId,
           params: initData.params,
           handleCloseNotification,
         }),