From 1b6b12679970dc14d2090dbef81152ddb89b2c64 Mon Sep 17 00:00:00 2001
From: Pengoose <pengoose_dev@naver.com>
Date: Sun, 15 Dec 2024 00:56:56 +0900
Subject: [PATCH] test: add aria-invalid regressioin tests

---
 tests/page/expect-misc.spec.ts | 50 ++++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/tests/page/expect-misc.spec.ts b/tests/page/expect-misc.spec.ts
index 9e0be32bc3..c5e507938d 100644
--- a/tests/page/expect-misc.spec.ts
+++ b/tests/page/expect-misc.spec.ts
@@ -510,16 +510,48 @@ test('toHaveAccessibleErrorMessage', async ({ page }) => {
   await expect(locator).not.toHaveAccessibleErrorMessage('This should not be considered.');
 });
 
-test('toHaveAccessibleErrorMessage fails when aria-invalid is not true', async ({ page }) => {
-  await page.setContent(`
-      <form>
-        <input id="username" aria-invalid="false" aria-errormessage="username-error" />
-        <div id="username-error">Username is required.</div>
-      </form>
-    `);
+test.describe('toHaveAccessibleErrorMessage should handle aria-invalid attribute', () => {
+  const errorMessageText = 'Error message';
 
-  const input = page.locator('#username');
-  await expect(input).not.toHaveAccessibleErrorMessage('Username is required.');
+  async function setupPage(page, ariaInvalidValue: string | null) {
+    const ariaInvalidAttr = ariaInvalidValue === null ? '' : `aria-invalid="${ariaInvalidValue}"`;
+    await page.setContent(`
+        <form>
+          <input id="node" type="text" ${ariaInvalidAttr} aria-errormessage="error-msg" />
+          <div id="error-msg">${errorMessageText}</div>
+        </form>
+      `);
+    return page.locator('#node');
+  }
+
+  test.describe('evaluated in false', () => {
+    test('no aria-invalid attribute', async ({ page }) => {
+      const locator = await setupPage(page, null);
+      await expect(locator).not.toHaveAccessibleErrorMessage(errorMessageText);
+    });
+
+    test('aria-invalid="false"', async ({ page }) => {
+      const locator = await setupPage(page, 'false');
+      await expect(locator).not.toHaveAccessibleErrorMessage(errorMessageText);
+    });
+  });
+
+  test.describe('evaluated in true', () => {
+    test('aria-invalid="true"', async ({ page }) => {
+      const locator = await setupPage(page, 'true');
+      await expect(locator).toHaveAccessibleErrorMessage(errorMessageText);
+    });
+
+    test('aria-invalid="" (empty string)', async ({ page }) => {
+      const locator = await setupPage(page, '');
+      await expect(locator).toHaveAccessibleErrorMessage(errorMessageText);
+    });
+
+    test('aria-invalid="foo" (unrecognized value)', async ({ page }) => {
+      const locator = await setupPage(page, 'foo');
+      await expect(locator).toHaveAccessibleErrorMessage(errorMessageText);
+    });
+  });
 });
 
 test('toHaveRole', async ({ page }) => {