From 6a5186582763a4b90c21ce46710c8d545f4af1c5 Mon Sep 17 00:00:00 2001
From: Kai <combination.kyoukyou@gmail.com>
Date: Thu, 22 Feb 2024 17:57:50 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=BD=E3=83=B3=E3=82=B0=E9=96=A2=E9=80=A3?=
 =?UTF-8?q?=E3=81=AEe2e=E3=83=86=E3=82=B9=E3=83=88=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=20(#1849)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add: ソング関連のe2eテストを追加

* remove: consoleLogを削除

* refactor: ソングページに遷移する処理を関数で切り出し

* リファクタリング

* change: ファイル名を変更

* fix: navigateToSongがきちんと動くように修正

* fix: 入力処理が行われていなかったので修正

* Update tests/e2e/browser/song/song.test.ts

Co-authored-by: Yuto Ashida <y-chan@y-chan.dev>

* 調整してみた

* refactor: 関数のスコープが長いためテストケースの外へ移動

---------

Co-authored-by: Yuto Ashida <y-chan@y-chan.dev>
Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 src/components/Sing/ScoreSequencer.vue        |  2 +
 src/components/Sing/SequencerNote.vue         |  6 +-
 ...3\202\275\343\203\263\343\202\260.spec.ts" | 81 +++++++++++++++++++
 3 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 "tests/e2e/browser/song/\343\202\275\343\203\263\343\202\260.spec.ts"

diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index 10858a21fa..a8de3f9235 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/src/components/Sing/ScoreSequencer.vue
@@ -18,6 +18,7 @@
     <div
       ref="sequencerBody"
       class="sequencer-body"
+      aria-label="シーケンサ"
       @mousedown="onMouseDown"
       @mousemove="onMouseMove"
       @mouseup="onMouseUp"
@@ -147,6 +148,7 @@
       />
       <div
         class="sequencer-playhead"
+        data-testid="sequencer-playhead"
         :style="{
           transform: `translateX(${playheadX - scrollX}px)`,
         }"
diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
index b27d96c654..21c85423a0 100644
--- a/src/components/Sing/SequencerNote.vue
+++ b/src/components/Sing/SequencerNote.vue
@@ -16,7 +16,11 @@
       <div class="note-right-edge" @mousedown="onRightEdgeMouseDown"></div>
       <context-menu ref="contextMenu" :menudata="contextMenuData" />
     </div>
-    <div class="note-lyric" @mousedown="onLyricMouseDown">
+    <div
+      class="note-lyric"
+      data-testid="note-lyric"
+      @mousedown="onLyricMouseDown"
+    >
       {{ lyric }}
     </div>
     <input
diff --git "a/tests/e2e/browser/song/\343\202\275\343\203\263\343\202\260.spec.ts" "b/tests/e2e/browser/song/\343\202\275\343\203\263\343\202\260.spec.ts"
new file mode 100644
index 0000000000..c85a451ba0
--- /dev/null
+++ "b/tests/e2e/browser/song/\343\202\275\343\203\263\343\202\260.spec.ts"
@@ -0,0 +1,81 @@
+import { test, expect, Page, Locator } from "@playwright/test";
+
+import { gotoHome, navigateToMain } from "../../navigators";
+
+test.beforeEach(gotoHome);
+
+async function navigateToSong(page: Page) {
+  await navigateToMain(page);
+  expect(page.getByText("ソング")).toBeVisible();
+  await page.getByText("ソング").click();
+}
+
+async function getCurrentPlayhead(page: Page) {
+  const boundingBox = await page
+    .getByTestId("sequencer-playhead")
+    .boundingBox();
+  if (boundingBox == null) throw new Error("再生バーが見つかりません");
+  return boundingBox;
+}
+
+test("再生ボタンを押して再生できる", async ({ page }) => {
+  await navigateToSong(page);
+  // TODO: ページ内のオーディオを検出するテストを追加する
+
+  const sequencer = page.getByLabel("シーケンサ");
+
+  await sequencer.click({ position: { x: 107, y: 171 } }); // ノートを追加
+  const beforePosition = await getCurrentPlayhead(page); // 再生ヘッドの初期位置
+  await page.getByText("play_arrow").click(); // 再生ボタンを押す
+  await page.waitForTimeout(3000);
+  await page.getByText("stop").click(); // 停止ボタンを押す
+  const afterPosition = await getCurrentPlayhead(page); // 再生ヘッドの再生後の位置
+  expect(afterPosition.x).not.toEqual(beforePosition.x);
+  expect(afterPosition.y).toEqual(beforePosition.y);
+});
+
+test("ノートを追加・削除できる", async ({ page }) => {
+  await navigateToSong(page);
+
+  const sequencer = page.getByLabel("シーケンサ");
+
+  const getCurrentNoteCount = async () =>
+    await sequencer.locator(".note").count();
+
+  // ノートの追加
+  expect(await getCurrentNoteCount()).toBe(0);
+  await sequencer.click({ position: { x: 107, y: 171 } });
+  expect(await getCurrentNoteCount()).toBe(1);
+  await sequencer.click({ position: { x: 200, y: 171 } });
+  expect(await getCurrentNoteCount()).toBe(2);
+
+  // ノートの削除
+  expect(await getCurrentNoteCount()).toBe(2);
+  await sequencer.click({ position: { x: 107, y: 171 } });
+  await page.keyboard.press("Delete");
+  expect(await getCurrentNoteCount()).toBe(1);
+  await sequencer.click({ position: { x: 200, y: 171 } });
+  await page.keyboard.press("Delete");
+  expect(await getCurrentNoteCount()).toBe(0);
+});
+
+test("ダブルクリックで歌詞を編集できる", async ({ page }) => {
+  await navigateToSong(page);
+
+  const sequencer = page.getByLabel("シーケンサ");
+
+  const getCurrentNoteLyric = async (note: Locator) =>
+    await note.getByTestId("note-lyric").textContent();
+
+  await sequencer.click({ position: { x: 107, y: 171 } });
+
+  const note = sequencer.locator(".note");
+  const beforeLyric = await getCurrentNoteLyric(note);
+
+  await sequencer.click({ position: { x: 107, y: 171 }, clickCount: 2 }); // ダブルクリック
+
+  await note.getByRole("textbox").fill("あ");
+  await page.keyboard.press("Enter");
+  const afterLyric = await getCurrentNoteLyric(note);
+  expect(afterLyric).not.toEqual(beforeLyric);
+});