From cab504b96d56bd1b85cbba7b4f7d21546d4999d9 Mon Sep 17 00:00:00 2001
From: Pengoose <pengoose_dev@naver.com>
Date: Wed, 18 Dec 2024 10:34:11 +0900
Subject: [PATCH] test: update regression tests to align with logic changes

---
 tests/page/expect-misc.spec.ts | 46 +++++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/tests/page/expect-misc.spec.ts b/tests/page/expect-misc.spec.ts
index 25c24fc44d..a1fb6637b1 100644
--- a/tests/page/expect-misc.spec.ts
+++ b/tests/page/expect-misc.spec.ts
@@ -568,23 +568,46 @@ test.describe('toHaveAccessibleErrorMessage should handle aria-invalid attribute
   });
 });
 
-test.describe('toHaveAccessibleErrorMessage should handle validity state', () => {
+test.describe('toHaveAccessibleErrorMessage should handle validity state with aria-invalid', () => {
   const errorMessageText = 'Error message';
-  test('should ignore aria-invalid="true" when HTMLElement.validity.valid is true', async ({ page }) => {
+
+  test('should show error message when validity is false and aria-invalid is true', async ({ page }) => {
     await page.setContent(`
-        <form>
-          <input id="node" role="textbox" type="number" min="1" max="100" aria-invalid="true" aria-errormessage="error-msg" />
-          <div id="error-msg">${errorMessageText}</div>
-        </form>
-      `);
+      <form>
+        <input id="node" role="textbox" type="number" min="1" max="100" aria-invalid="true" aria-errormessage="error-msg" />
+        <div id="error-msg">${errorMessageText}</div>
+      </form>
+    `);
     const locator = page.locator('#node');
-    await locator.fill('99');
-    await expect(locator).not.toHaveAccessibleErrorMessage(errorMessageText);
     await locator.fill('101');
     await expect(locator).toHaveAccessibleErrorMessage(errorMessageText);
   });
 
-  test('should ignore aria-invalid="false" when HTMLElement.validity.valid is false', async ({ page }) => {
+  test('should show error message when validity is true and aria-invalid is true', async ({ page }) => {
+    await page.setContent(`
+      <form>
+        <input id="node" role="textbox" type="number" min="1" max="100" aria-invalid="true" aria-errormessage="error-msg" />
+        <div id="error-msg">${errorMessageText}</div>
+      </form>
+    `);
+    const locator = page.locator('#node');
+    await locator.fill('99');
+    await expect(locator).toHaveAccessibleErrorMessage(errorMessageText);
+  });
+
+  test('should show error message when validity is false and aria-invalid is false', async ({ page }) => {
+    await page.setContent(`
+      <form>
+        <input id="node" role="textbox" type="number" min="1" max="100" aria-invalid="false" aria-errormessage="error-msg" />
+        <div id="error-msg">${errorMessageText}</div>
+      </form>
+    `);
+    const locator = page.locator('#node');
+    await locator.fill('101');
+    await expect(locator).toHaveAccessibleErrorMessage(errorMessageText);
+  });
+
+  test('should not show error message when validity is true and aria-invalid is false', async ({ page }) => {
     await page.setContent(`
       <form>
         <input id="node" role="textbox" type="number" min="1" max="100" aria-invalid="false" aria-errormessage="error-msg" />
@@ -594,11 +617,10 @@ test.describe('toHaveAccessibleErrorMessage should handle validity state', () =>
     const locator = page.locator('#node');
     await locator.fill('99');
     await expect(locator).not.toHaveAccessibleErrorMessage(errorMessageText);
-    await locator.fill('101');
-    await expect(locator).toHaveAccessibleErrorMessage(errorMessageText);
   });
 });
 
+
 test('toHaveRole', async ({ page }) => {
   await page.setContent(`<div role="button">Button!</div>`);
   await expect(page.locator('div')).toHaveRole('button');