-
Notifications
You must be signed in to change notification settings - Fork 312
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Hiroshiba <hihokaruta@gmail.com> Co-authored-by: Hiroshiba <Hiroshiba@users.noreply.github.com>
- Loading branch information
1 parent
0723a89
commit 1343325
Showing
10 changed files
with
511 additions
and
52 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,194 @@ | ||
import { test, expect, Page } from "@playwright/test"; | ||
import { toggleSetting, navigateToMain } from "../navigators"; | ||
|
||
test.beforeEach(async ({ page }) => { | ||
const BASE_URL = "http://localhost:5173/#/home"; | ||
await page.setViewportSize({ width: 800, height: 600 }); | ||
await page.goto(BASE_URL); | ||
|
||
await navigateToMain(page); | ||
await page.waitForTimeout(100); | ||
await toggleSetting(page, "複数選択"); | ||
|
||
await addAudioCells(page, 3); | ||
}); | ||
|
||
const ctrlLike = process.platform === "darwin" ? "Meta" : "Control"; | ||
|
||
type SelectedStatus = { | ||
active: number; | ||
selected: number[]; | ||
}; | ||
/** | ||
* アクティブなAudioCellと選択されているAudioCellを取得する。 | ||
* 戻り値のインデックスは1から始まる。(nth-childのインデックスと揃えるため) | ||
*/ | ||
async function getSelectedStatus(page: Page): Promise<SelectedStatus> { | ||
const selectedAudioKeys = await page.evaluate(() => { | ||
const audioCells = [...document.querySelectorAll(".audio-cell")]; | ||
let active: number | undefined; | ||
const selected: number[] = []; | ||
for (let i = 0; i < audioCells.length; i++) { | ||
const audioCell = audioCells[i]; | ||
if (audioCell.classList.contains("active")) { | ||
active = i + 1; | ||
} | ||
if (audioCell.classList.contains("selected")) { | ||
selected.push(i + 1); | ||
} | ||
} | ||
if (active === undefined) { | ||
throw new Error("No active audio cell"); | ||
} | ||
|
||
return { active, selected }; | ||
}); | ||
return selectedAudioKeys; | ||
} | ||
|
||
async function addAudioCells(page: Page, count: number) { | ||
for (let i = 0; i < count; i++) { | ||
await page.getByRole("button", { name: "テキストを追加" }).click(); | ||
await page.waitForTimeout(100); | ||
} | ||
} | ||
|
||
test("複数選択:マウス周り", async ({ page }) => { | ||
let selectedStatus: SelectedStatus; | ||
|
||
// 複数選択していない状態でactiveのAudioCellをクリックしても何も起こらない | ||
await page.locator(".audio-cell:nth-child(1)").click(); | ||
|
||
await page.waitForTimeout(100); | ||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(1); | ||
expect(selectedStatus.selected).toEqual([1]); | ||
|
||
// Shift+クリックは前回選択していたAudioCellから今回クリックしたAudioCellまでを選択する | ||
await page.locator(".audio-cell:nth-child(2)").click(); | ||
await page.keyboard.down("Shift"); | ||
await page.locator(".audio-cell:nth-child(4)").click(); | ||
await page.keyboard.up("Shift"); | ||
|
||
await page.waitForTimeout(100); | ||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(4); | ||
expect(selectedStatus.selected).toEqual([2, 3, 4]); | ||
|
||
// ただのクリックはactiveAudioKeyとselectedAudioKeysをクリックしたAudioCellだけにする | ||
await page.locator(".audio-cell:nth-child(2)").click(); | ||
|
||
await page.waitForTimeout(100); | ||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(2); | ||
expect(selectedStatus.selected).toEqual([2]); | ||
|
||
if (process.platform === "darwin" && !!process.env.CI) { | ||
// なぜかCmd(Meta)+クリックが動かないのでスキップする | ||
// FIXME: 動くようにする | ||
return; | ||
} | ||
|
||
// Ctrl+クリックは選択範囲を追加する | ||
await page.keyboard.down(ctrlLike); | ||
await page.locator(".audio-cell:nth-child(4)").click(); | ||
await page.keyboard.up(ctrlLike); | ||
await page.waitForTimeout(100); | ||
|
||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(4); | ||
expect(selectedStatus.selected).toEqual([2, 4]); | ||
|
||
// Ctrl+クリックは選択範囲から削除する | ||
await page.keyboard.down(ctrlLike); | ||
await page.locator(".audio-cell:nth-child(2)").click(); | ||
await page.keyboard.up(ctrlLike); | ||
await page.waitForTimeout(100); | ||
|
||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(4); | ||
expect(selectedStatus.selected).toEqual([4]); | ||
|
||
// activeのAudioCellをCtrl+クリックすると選択範囲から削除して次のselectedのAudioCellをactiveにする | ||
await page.keyboard.down(ctrlLike); | ||
await page.locator(".audio-cell:nth-child(2)").click(); | ||
await page.locator(".audio-cell:nth-child(2)").click(); | ||
await page.keyboard.up(ctrlLike); | ||
await page.waitForTimeout(100); | ||
|
||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(4); | ||
expect(selectedStatus.selected).toEqual([4]); | ||
|
||
// selected内のCharacterButtonをクリックしても選択範囲は変わらない | ||
await page.locator(".audio-cell:nth-child(2)").click(); | ||
await page.keyboard.down("Shift"); | ||
await page.locator(".audio-cell:nth-child(4)").click(); | ||
await page.keyboard.up("Shift"); | ||
|
||
await page.locator(".audio-cell:nth-child(2) .character-button").click(); | ||
|
||
await page.waitForTimeout(100); | ||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(4); | ||
expect(selectedStatus.selected).toEqual([2, 3, 4]); | ||
|
||
// selected外のCharacterButtonをクリックすると選択範囲をそのAudioCellだけにする | ||
await page.locator(".audio-cell:nth-child(1)").click(); | ||
|
||
await page.waitForTimeout(100); | ||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(1); | ||
expect(selectedStatus.selected).toEqual([1]); | ||
}); | ||
|
||
test("複数選択:キーボード", async ({ page }) => { | ||
let selectedStatus: SelectedStatus; | ||
// Shift+下で下方向を選択範囲にする | ||
await page.locator(".audio-cell:nth-child(2)").click(); | ||
await page.keyboard.down("Shift"); | ||
await page.keyboard.press("ArrowDown"); | ||
await page.keyboard.up("Shift"); | ||
await page.waitForTimeout(100); | ||
|
||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(3); | ||
expect(selectedStatus.selected).toEqual([2, 3]); | ||
|
||
// ただの下で下方向をactiveにして他の選択を解除する | ||
await page.keyboard.press("ArrowDown"); | ||
|
||
await page.waitForTimeout(100); | ||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(4); | ||
expect(selectedStatus.selected).toEqual([4]); | ||
|
||
// Shift+上で上方向を選択範囲にする | ||
await page.keyboard.down("Shift"); | ||
await page.keyboard.press("ArrowUp"); | ||
await page.keyboard.up("Shift"); | ||
await page.waitForTimeout(100); | ||
|
||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(3); | ||
expect(selectedStatus.selected).toEqual([3, 4]); | ||
|
||
// ただの上で上方向をactiveにして他の選択を解除する | ||
await page.keyboard.press("ArrowUp"); | ||
await page.waitForTimeout(100); | ||
|
||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(2); | ||
expect(selectedStatus.selected).toEqual([2]); | ||
|
||
// EnterでactiveのAudioCellのテキストフィールドにフォーカスし、複数選択を解除する | ||
await page.keyboard.down("Shift"); | ||
await page.keyboard.press("ArrowDown"); | ||
await page.keyboard.up("Shift"); | ||
await page.keyboard.press("Enter"); | ||
|
||
await page.waitForTimeout(100); | ||
selectedStatus = await getSelectedStatus(page); | ||
expect(selectedStatus.active).toBe(3); | ||
expect(selectedStatus.selected).toEqual([3]); | ||
}); |
Oops, something went wrong.