From 4d9814648185492fa39ba9c2a5b3e724410d9b0a Mon Sep 17 00:00:00 2001
From: Hiroshiba Kazuyuki <kazuyuki_hiroshiba@dwango.co.jp>
Date: Sat, 21 Dec 2024 05:38:40 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=82=AF=E3=82=BB=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=83=95=E3=83=AC=E3=83=BC=E3=82=BA=E3=81=AE=E3=82=AF=E3=83=A9?=
 =?UTF-8?q?=E3=82=B9=E5=90=8D=E3=82=92=E5=A4=89=E6=9B=B4=E3=81=97=E3=80=81?=
 =?UTF-8?q?E2E=E3=83=86=E3=82=B9=E3=83=88=E3=82=92=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Talk/AccentPhrase.vue                | 13 ++++++++-----
 ...257\343\202\273\343\203\263\343\203\210.spec.ts" | 13 ++++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Talk/AccentPhrase.vue b/src/components/Talk/AccentPhrase.vue
index 5e167b9878..86ab2e1856 100644
--- a/src/components/Talk/AccentPhrase.vue
+++ b/src/components/Talk/AccentPhrase.vue
@@ -1,8 +1,11 @@
 <template>
   <div
     ref="container"
-    class="mora-table"
-    :class="[isActive && 'mora-table-focus', uiLocked || 'mora-table-hover']"
+    class="accent-phrase"
+    :class="[
+      isActive && 'accent-phrase-focus',
+      uiLocked || 'accent-phrase-hover',
+    ]"
     @click="$emit('click', index)"
   >
     <ContextMenu :menudata="contextMenudata" />
@@ -468,7 +471,7 @@ const handleChangeVoicing = (mora: Mora, moraIndex: number) => {
   position: relative;
 }
 
-.mora-table {
+.accent-phrase {
   display: inline-grid;
   align-self: stretch;
   grid-template-rows: 1fr 60px 30px;
@@ -478,12 +481,12 @@ const handleChangeVoicing = (mora: Mora, moraIndex: number) => {
   }
 }
 
-.mora-table-hover:hover {
+.accent-phrase-hover:hover {
   cursor: pointer;
   background-color: colors.$active-point-hover;
 }
 
-.mora-table-focus {
+.accent-phrase-focus {
   // hover色に負けるので、importantが必要
   background-color: colors.$active-point-focus !important;
 }
diff --git "a/tests/e2e/browser/\343\202\242\343\202\257\343\202\273\343\203\263\343\203\210.spec.ts" "b/tests/e2e/browser/\343\202\242\343\202\257\343\202\273\343\203\263\343\203\210.spec.ts"
index 6f079a94f2..79e483c6fe 100644
--- "a/tests/e2e/browser/\343\202\242\343\202\257\343\202\273\343\203\263\343\203\210.spec.ts"
+++ "b/tests/e2e/browser/\343\202\242\343\202\257\343\202\273\343\203\263\343\203\210.spec.ts"
@@ -24,12 +24,15 @@ test("アクセントの読み部分をクリックすると読みを変更で
   await page.getByRole("textbox", { name: "1行目" }).click();
   await page.getByRole("textbox", { name: "1行目" }).fill("テストです");
   await page.getByRole("textbox", { name: "1行目" }).press("Enter");
-  await page.locator(".text-cell").first().waitFor();
+  const accentPhrase = page.locator(".accent-phrase");
+  await expect(accentPhrase).toHaveText("テストデス");
 
   await expect(page.locator(".text-cell").first()).toBeVisible();
   await page.locator(".text-cell").first().click();
-  const qMenu = page.locator(".q-menu > label > div > div > div");
-  expect(await qMenu.first().inputValue()).toBe("テストデス");
-  await qMenu.fill("テストテスト");
-  expect(await qMenu.first().inputValue()).toBe("テストテスト");
+  const input = page.getByLabel("1番目のアクセント区間の読み");
+  await input.evaluate((node) => console.log(node.outerHTML));
+  expect(await input.inputValue()).toBe("テストデス");
+  await input.fill("テストテスト");
+  await input.press("Enter");
+  await expect(accentPhrase).toHaveText("テストテスト");
 });