Add e2e test for account expiry notifications

2 files changed, 63 insertions, 4 deletions

diff --git a/gui/src/renderer/components/NotificationArea.tsx b/gui/src/renderer/components/NotificationArea.tsx
index ebd87b58b7..fff30300d0 100644
--- a/gui/src/renderer/components/NotificationArea.tsx
+++ b/gui/src/renderer/components/NotificationArea.tsx
@@ -96,11 +96,18 @@ export default function NotificationArea(props: IProps) {
 
     if (notification) {
       return (
-        <NotificationBanner className={props.className}>
-          <NotificationIndicator $type={notification.indicator} />
+        <NotificationBanner className={props.className} data-testid="notificationBanner">
+          <NotificationIndicator
+            $type={notification.indicator}
+            data-testid="notificationIndicator"
+          />
           <NotificationContent role="status" aria-live="polite">
-            <NotificationTitle>{notification.title}</NotificationTitle>
-            <NotificationSubtitle>{formatHtml(notification.subtitle ?? '')}</NotificationSubtitle>
+            <NotificationTitle data-testid="notificationTitle">
+              {notification.title}
+            </NotificationTitle>
+            <NotificationSubtitle data-testid="notificationSubTitle">
+              {formatHtml(notification.subtitle ?? '')}
+            </NotificationSubtitle>
           </NotificationContent>
           {notification.action && <NotificationActionWrapper action={notification.action} />}
         </NotificationBanner>
diff --git a/gui/test/e2e/mocked/notifications.spec.ts b/gui/test/e2e/mocked/notifications.spec.ts
new file mode 100644
index 0000000000..7af0d1297a
--- /dev/null
+++ b/gui/test/e2e/mocked/notifications.spec.ts
@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test';
+import { Page } from 'playwright';
+
+import { colors } from '../../../src/config.json';
+import { IAccountData } from '../../../src/shared/daemon-rpc-types';
+import { getBackgroundColor } from '../utils';
+import { MockedTestUtils, startMockedApp } from './mocked-utils';
+
+let page: Page;
+let util: MockedTestUtils;
+
+test.beforeAll(async () => {
+  ({ page, util } = await startMockedApp());
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+/**
+ * Expires soon
+ */
+test('App should notify user about account expiring soon', async () => {
+  await util.sendMockIpcResponse<IAccountData>({
+    channel: 'account-',
+    response: { expiry: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString() },
+  });
+
+  const title = page.getByTestId('notificationTitle');
+  await expect(title).toContainText(/account credit expires soon/i);
+
+  let subTitle = page.getByTestId('notificationSubTitle');
+  await expect(subTitle).toContainText(/1 day left\. buy more credit\./i);
+
+  const indicator = page.getByTestId('notificationIndicator');
+  const indicatorColor = await getBackgroundColor(indicator);
+  expect(indicatorColor).toBe(colors.yellow);
+
+  await util.sendMockIpcResponse<IAccountData>({
+    channel: 'account-',
+    response: { expiry: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString() },
+  });
+  subTitle = page.getByTestId('notificationSubTitle');
+  await expect(subTitle).toContainText(/2 days left\. buy more credit\./i);
+
+  await util.sendMockIpcResponse<IAccountData>({
+    channel: 'account-',
+    response: { expiry: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString() },
+  });
+  subTitle = page.getByTestId('notificationSubTitle');
+  await expect(subTitle).toContainText(/less than a day left\. buy more credit\./i);
+});