アクセントの読み変更時のE2Eテストを追加 (#2420)

Co-authored-by: Hiroshiba Kazuyuki <[email protected]>

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;
 }

tests/e2e/browser/アクセント.spec.ts

@@ -10,8 +10,29 @@ test("アクセント分割したらアクセント区間が増える", async ({
   await page.locator(".audio-cell input").first().fill("こんにちは");
   await page.locator(".audio-cell input").first().press("Enter");
   await page.waitForTimeout(500);
-  expect(await page.locator(".mora-table").count()).toBe(1);
+  expect(await page.locator(".accent-phrase").count()).toBe(1);
   await (await page.locator(".splitter-cell").all())[1].click();
   await page.waitForTimeout(500);
-  expect(await page.locator(".mora-table").count()).toBe(2);
+  expect(await page.locator(".accent-phrase").count()).toBe(2);
+});
+
+test("アクセントの読み部分をクリックすると読みを変更できる", async ({
+  page,
+}) => {
+  await navigateToMain(page);
+
+  await page.getByRole("textbox", { name: "1行目" }).click();
+  await page.getByRole("textbox", { name: "1行目" }).fill("テストです");
+  await page.getByRole("textbox", { name: "1行目" }).press("Enter");
+  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 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("テストテスト");
 });

tests/e2e/browser/調整結果.spec.ts

@@ -8,7 +8,7 @@ test.beforeEach(gotoHome);
  * @param page
  */
 async function getSliderValues(page: Page) {
-  const moraTables = await page.locator(".mora-table").all();
+  const moraTables = await page.locator(".accent-phrase").all();
   return await Promise.all(
     moraTables.map(async (moraTable) => {
       const sliders = await moraTable.locator(".q-slider").all();
@@ -70,7 +70,7 @@ test("実験的機能：調整結果の保持", async ({ page }) => {
     [6.5, 6.5, 6.5, 6.5],
   ]);
   // 読点が追加されていることを確認
-  const firstAccentPhrase = page.locator(".mora-table").first();
+  const firstAccentPhrase = page.locator(".accent-phrase").first();
   expect(await firstAccentPhrase.getByText("、").isVisible()).toBeTruthy();
 
   // 句読点（pauseMora）だけの変更/削除：句読点部分以外は変わらない

tests/e2e/browser/音声パラメータ.spec.ts

@@ -34,6 +34,7 @@ test("音声パラメータ引き継ぎの設定", async ({ page }) => {
   // パラメータを引き継がないことの確認
   await page.locator(".audio-cell input").first().click();
   await page.getByRole("button").filter({ hasText: "add" }).click();
+  await inputTag.waitFor();
   await validateValue(inputTag, "1.00");
 
   // スライダーからパラメータの変更ができるかどうかを確認