test: stabilize portfolio chatbot smoke

Author: Nguyen Son

frontend/e2e/portfolio-cta-smoke.spec.ts

@@ -7,10 +7,13 @@ declare global {
   }
 }
 
-const CUSTOMER_EMAIL = process.env.TEST_USER_EMAIL || "customer@example.com";
+const CUSTOMER_EMAIL =
+  process.env.TEST_USER_EMAIL || `portfolio-e2e-${Date.now()}@example.com`;
 const CUSTOMER_PASSWORD =
-  process.env.TEST_USER_PASSWORD || "E2ETestDemoCustomerPasswordForBookStore123!";
+  process.env.TEST_USER_PASSWORD ||
+  "E2ETestDemoCustomerPasswordForBookStore123!";
 const API_URL = process.env.API_URL || "http://localhost:3001/api";
+let customerAccountSeeded = false;
 
 function escapeRegExp(value: string) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -49,6 +52,32 @@ async function installBrowserActionSpies(page: Page) {
   });
 }
 
+async function ensureCustomerAccount(page: Page) {
+  if (customerAccountSeeded) {
+    return;
+  }
+
+  const response = await page
+    .context()
+    .request.post(`${API_URL}/auth/register`, {
+      data: {
+        email: CUSTOMER_EMAIL,
+        password: CUSTOMER_PASSWORD,
+        firstName: "Portfolio",
+        lastName: "Customer",
+        phoneNumber: "0901231234",
+      },
+    });
+
+  if (!response.ok() && ![400, 409].includes(response.status())) {
+    throw new Error(
+      `Unable to prepare the portfolio customer account. Status: ${response.status()}`,
+    );
+  }
+
+  customerAccountSeeded = true;
+}
+
 async function expectImageLoaded(image: Locator) {
   await image.scrollIntoViewIfNeeded();
   await expect(image).toBeVisible({ timeout: 15000 });
@@ -93,6 +122,7 @@ async function getFlashSaleCard(page: Page, index = 0) {
 }
 
 async function login(page: Page) {
+  await ensureCustomerAccount(page);
   await page.waitForLoadState("networkidle");
 
   let loginSucceeded = false;
@@ -108,7 +138,7 @@ async function login(page: Page) {
       );
     });
 
-    await page.locator('button[type="submit"]').click();
+    await page.getByTestId("login-submit").click();
 
     const loginResponse = await loginResponsePromise;
     if (loginResponse.ok()) {
@@ -381,20 +411,17 @@ test.describe("Portfolio CTA smoke", () => {
     expect(openCalls[0]?.[0]).toContain("mailto:contact@bookstore.com");
 
     await page.getByTestId("chatbot-launcher").click();
-    await expect(page.getByTestId("chatbot-login-cta")).toBeVisible();
     await expect(page.getByTestId("chatbot-status-badge")).toBeVisible();
+    await expect(page.getByText(/demo|portfolio/i)).toBeVisible();
 
-    await Promise.all([
-      page.waitForURL(/\/login\?redirect=%2F$/),
-      page.getByTestId("chatbot-login-cta").click(),
-    ]);
-
-    await login(page);
-    await expect(page).toHaveURL(/\/$/);
-
-    await page.getByTestId("chatbot-launcher").click();
-    await expect(page.getByTestId("chatbot-status-badge")).toContainText(
-      /grok|dự phòng|fallback|degraded/i,
-    );
+    await page
+      .getByTestId("chatbot-message-input")
+      .fill("Có coupon nào đang dùng được không?");
+    await page.getByTestId("chatbot-send-message").click();
+    await expect(
+      page
+        .getByTestId("chatbot-assistant-message")
+        .filter({ hasText: /Khuyến mãi|Promotions/i }),
+    ).toBeVisible({ timeout: 10000 });
   });
 });

frontend/src/app/login/page.tsx

@@ -297,6 +297,7 @@ function LoginContent() {
 
             <button
               type="submit"
+              data-testid="login-submit"
               disabled={isLoading}
               className="w-full h-12 flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 disabled:bg-red-400 text-white font-semibold rounded-md transition-colors disabled:cursor-not-allowed"
             >

frontend/src/components/chatbot/ChatInput.tsx

@@ -46,6 +46,8 @@ export function ChatInput({
       <div className="flex items-end gap-2">
         <div className="relative flex-1">
           <textarea
+            data-testid="chatbot-message-input"
+            aria-label={placeholder}
             value={message}
             onChange={(e) => setMessage(e.target.value)}
             onKeyDown={handleKeyDown}
@@ -72,6 +74,8 @@ export function ChatInput({
 
         <Button
           type="submit"
+          data-testid="chatbot-send-message"
+          aria-label="Send message"
           size="icon"
           disabled={!message.trim() || isTyping || disabled}
           className={cn(

frontend/src/components/chatbot/ChatMessage.tsx

@@ -194,7 +194,12 @@ export function ChatMessage({
   };
 
   return (
-    <div className={cn("flex items-start gap-3", isUser && "flex-row-reverse")}>
+    <div
+      data-testid={
+        isUser ? "chatbot-user-message" : "chatbot-assistant-message"
+      }
+      className={cn("flex items-start gap-3", isUser && "flex-row-reverse")}
+    >
       {isUser ? (
         <div className="w-8 h-8 rounded-full bg-black flex items-center justify-center shadow-[rgba(0,0,0,0.4)_0px_0px_1px,rgba(0,0,0,0.04)_0px_4px_4px] shrink-0">
           <span className="text-white text-xs font-medium">B</span>