[WIP] エンジンのモック作成＋それを使ったコンポーネントテスト #2152

Hiroshiba · 2024-07-02T00:30:01Z

内容

Vuexのレイヤーでエンジンのmockを作る #2144

の解決を目指したプルリクエストです。
ついでにストーリーブック上でコンポーネントテストする方法を色々試そうとしてます。

TalkEditorの表示と、モックエンジンを使ったピッチ推論までできたのですが、なぜかscssが読み込まれずにスプリッターの色指定がうまくいってないです。
Viteとかの設定な気がしないでもないので、詳しい方いらっしゃったらヘルプいただけると助かります 🙇

追記：わかりました！！！たぶん色の初期化をしてないからでした！！

スクリーンショット・動画など

こんな感じで境界線がない。多分正確には透明になってる。

その他

Hiroshiba · 2024-07-06T13:24:26Z

テーマ周りで気になった挙動まとめ

ipcのset/getが同じ関数になってる
availableThemesだけセットしたいのにcurrentThemeもセットするmutationしかない
currentThemeのセッターに副作用がある

Hiroshiba · 2024-08-03T16:28:58Z

とりあえずスナップショットテストができた！
それとは関係ないところでeslintエラーが出たのでissue立ててみました

Support for new context syntax in rules/context-in-play-function not working as expected storybookjs/eslint-plugin-storybook#162

Hiroshiba · 2024-09-28T14:56:13Z

メモ

ソング系統でエンジンを使ったVuexのunitテストは（おそらく）できない
- エンジンを使う機能はほとんどがRENDER関数の中にある
- RENDER関数はブラウザのAudioContextがある前提のコードになってる
- 現状ユニットテストはAudioContextが使えないので、エンジンを使ったテストが書けないことになる
- vitest 2.0からexperimentalでブラウザモードが追加されているので、それを使えばRENDER関数も動くかも
現状のプルリクエストは３種の機能追加がある
- エンジンのmock・テーマの設定・ソングでノートIDを使えるようにする
- エンジンのモック作成以外は別プルリクエストで出すのが良さそう
e2eでエンジンモックが使えるようにしたい
- けどこのプルリクエストではVuexのunitテストで使えるようにするところまでが良さそうかな

sigprogramming · 2024-09-29T11:02:20Z

RENDER関数はブラウザのAudioContextがある前提のコードになってる

AudioContextはシーケンスの作成で使用しています、この処理を関数化して外に出すPR（#2275）を作ってみました。

Hiroshiba · 2024-09-30T06:44:26Z

おおなるほどです！！ありがとうございます！！

Hiroshiba · 2024-10-05T13:35:49Z

適当にノートを足してRENDERしてみた感じ、ちょっとさすがAudioContextがないと大変そうだなとなりました！！
（次はgenerateNoteSequenceで落ちました。たぶんあと何度もあるだろうなと。）

ちなみに書いたコードはこんな感じです。
vitestのブラウザーモードだったら動くかも。

import { createStoreWrapper } from "@/store";
import { NoteId, TrackId } from "@/type/preload";
import { resetMockMode, uuid4 } from "@/helpers/random";
import { cloneWithUnwrapProxy } from "@/helpers/cloneWithUnwrapProxy";
import { createDefaultTrack } from "@/sing/domain";
import { proxyStoreCreator } from "@/store/proxy";
import { createOpenAPIEngineMock } from "@/mock/engineMock";
import { SandboxKey, Sandbox } from "@/type/preload";

const store = createStoreWrapper({
  proxyStoreDI: proxyStoreCreator(createOpenAPIEngineMock()),
});
const initialState = cloneWithUnwrapProxy(store.state);
beforeEach(() => {
  store.replaceState(initialState);

  resetMockMode();
});

describe("RENDER", async () => {
  // FIXME: あとで汎用的にする
  // @ts-expect-error mockのためにreadonlyに代入している
  window[SandboxKey] = {
    logInfo: (...args: unknown[]) => {
      console.log("[logInfo]", ...args);
    },
    logWarn: (...args: unknown[]) => {
      console.warn("[logWarn]", ...args);
    },
    logError: (...args: unknown[]) => {
      console.error("[logError]", ...args);
    },
  };

  it("空のトラックをレンダリングできる", async () => {
    const { trackId, track } = await store.actions.CREATE_TRACK();
    store.mutations.INSERT_TRACK({
      trackId,
      track,
      prevTrackId: undefined,
    });

    await store.actions.RENDER();

    await vi.waitFor(() => {
      if (store.state.nowRendering) {
        throw new Error("now rendering");
      }
    });
  });

  it("ノートがあるトラックをレンダリングできる", async () => {
    const { trackId, track } = await store.actions.CREATE_TRACK();
    track.notes.push({
      id: NoteId(uuid4()),
      position: 0,
      duration: 1,
      noteNumber: 60,
      lyric: "あ",
    });
    store.mutations.INSERT_TRACK({
      trackId,
      track,
      prevTrackId: undefined,
    });

    await store.actions.RENDER();

    await vi.waitFor(() => {
      if (store.state.nowRendering) {
        throw new Error("now rendering");
      }
    });
  });
});

Hiroshiba · 2024-10-05T14:06:01Z

ノート IDのプルリクを分けました！

add: リクエストのノートにNoteIdを代入可能にし、音素ごとに元のノートIDが紐づくようにする #2283

テーマ周りもプルリグ分けました！

refactor: テーマ周りのコードを整理し、設定を取得する汎用関数に合流させたり、テーマ変更関数を切り出したりした #2284

Hiroshiba

できました。
でもプルリクエストが大きすぎてどうしようか迷い中です･･･。
とりあえずe2eテストでも使えるようにできるのか試してみようと思います。それができてからどうやってマージして行こうか考えようと思います。

Hiroshiba · 2024-10-19T22:45:52Z

📝 kuromojiはデフォルトで（デバッグ用に）入ってる感じで良さそう。
辞書はこんな感じで必要なときに持ってこれば良さそう。
https://github.com/sevenc-nanashi/kuromoji-test/blob/ae5292c8f117fa070b38ab12f53b46f4948d4240/src/App.vue

Hiroshiba · 2024-10-26T13:43:08Z

playwrightの通信をモックする形でエンジンAPIを偽装していたけど、VuexにDIする形にするならこれが不要になるはず。
けどなんかもったいないのと、いつか使うかもなので、ここにメモしておきます。

  await page.route(/\/version$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify("mock"),
    });
  });

  await page.route(/\/engine_manifest$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(EngineManifestToJSON(getEngineManifestMock())),
    });
  });

  await page.route(/\/supported_devices$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(
        SupportedDevicesInfoToJSON({ cpu: true, cuda: false, dml: false }),
      ),
    });
  });

  await page.route(new RegExp(`/${assetsPath}/`), async (route) => {
    const filePath = path.join(
      __dirname,
      "..",
      "..",
      "..",
      new URL(route.request().url()).pathname,
    );
    const body = await fs.readFile(filePath);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "image/png",
      },
      body,
    });
  });

  await page.route(/\/speakers$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(speakers.map(SpeakerToJSON)),
    });
  });

  await page.route(/\/speaker_info\?/, async (route) => {
    const query = new URLSearchParams(route.request().url().split("?")[1]);
    const speakerUuid = query.get("speaker_uuid");
    if (speakerUuid == null) {
      throw new Error("speaker_uuid is required");
    }

    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(SpeakerInfoToJSON(getSpeakerInfoMock(speakerUuid))),
    });
  });

  await page.route(/\/singers$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(singers.map(SpeakerToJSON)),
    });
  });

  await page.route(/\/singer_info\?/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speakerUuid = payload.get("speaker_uuid");
    if (speakerUuid == undefined) {
      throw new Error("speaker_uuid is required");
    }

    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(SpeakerInfoToJSON(getSpeakerInfoMock(speakerUuid))),
    });
  });

  await page.route(/\/is_initialized_speaker/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(true),
    });
  });

  await page.route(/\/initialize_speaker/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
    });
  });

  // NOTE: 空のユーザ辞書を返す
  await page.route(/\/user_dict$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify([]),
    });
  });

  await page.route(/\/audio_query/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const text = payload.get("text");
    const speaker = Number(payload.get("speaker"));
    if (text == undefined || speaker == undefined) {
      throw new Error("text, speaker is required");
    }

    const accentPhrases = await textToActtentPhrasesMock(text, speaker);
    return route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(
        AudioQueryToJSON({
          accentPhrases,
          speedScale: 1.0,
          pitchScale: 0.0,
          intonationScale: 1.0,
          volumeScale: 1.0,
          prePhonemeLength: 0.1,
          postPhonemeLength: 0.1,
          outputSamplingRate: getEngineManifestMock().defaultSamplingRate,
          outputStereo: false,
        }),
      ),
    });
  });

  await page.route(/\/accent_phrases/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const text = payload.get("text");
    const speaker = Number(payload.get("speaker"));
    if (text == undefined || speaker == undefined) {
      throw new Error("text, speaker is required");
    }

    const isKana = payload.get("is_kana") === "true";
    if (isKana) {
      throw new Error("AquesTalk風記法は未対応です");
    }

    const accentPhrases = await textToActtentPhrasesMock(text, speaker);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(accentPhrases.map(AccentPhraseToJSON)),
    });
  });

  await page.route(/\/mora_data/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const accentPhraseRaw = route.request().postData();
    if (accentPhraseRaw == undefined || speaker == undefined) {
      throw new Error("accent_phrase, speaker is required");
    }

    const accentPhrase = (JSON.parse(accentPhraseRaw) as []).map(
      AccentPhraseFromJSON,
    );
    replaceLengthMock(accentPhrase, speaker);
    replacePitchMock(accentPhrase, speaker);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(accentPhrase.map(AccentPhraseToJSON)),
    });
  });

  await page.route(/\/synthesis/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const enableInterrogativeUpspeak =
      payload.get("enable_interrogative_upspeak") === "true";
    const audioQueryRaw = route.request().postData();
    if (audioQueryRaw == undefined || speaker == undefined) {
      throw new Error("audio_query, speaker is required");
    }

    const audioQuery = AudioQueryFromJSON(JSON.parse(audioQueryRaw));
    const frameAudioQuery = audioQueryToFrameAudioQueryMock(audioQuery, {
      enableInterrogativeUpspeak,
    });
    const buffer = synthesisFrameAudioQueryMock(frameAudioQuery, speaker);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "audio/wav",
      },
      body: Buffer.from(buffer),
    });
  });

  await page.route(/\/sing_frame_audio_query/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const scoreRaw = route.request().postData();
    if (scoreRaw == undefined || speaker == undefined) {
      throw new Error("score, speaker is required");
    }

    const score = ScoreFromJSON(JSON.parse(scoreRaw));
    const phonemes = notesToFramePhonemesMock(score.notes, speaker);
    const f0 = notesAndFramePhonemesToPitchMock(score.notes, phonemes, speaker);
    const volume = notesAndFramePhonemesAndPitchToVolumeMock(
      score.notes,
      phonemes,
      f0,
      speaker,
    );

    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(
        FrameAudioQueryToJSON({
          f0,
          volume,
          phonemes,
          volumeScale: 1.0,
          outputSamplingRate: getEngineManifestMock().defaultSamplingRate,
          outputStereo: false,
        }),
      ),
    });
  });

  await page.route(/\/sing_frame_volume/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const raw = route.request().postData();
    if (raw == undefined || speaker == undefined) {
      throw new Error("score, speaker is required");
    }

    const { score, frameAudioQuery } =
      BodySingFrameVolumeSingFrameVolumePostFromJSON(JSON.parse(raw));
    const volume = notesAndFramePhonemesAndPitchToVolumeMock(
      score.notes,
      frameAudioQuery.phonemes,
      frameAudioQuery.f0,
      speaker,
    );

    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(volume),
    });
  });

  await page.route(/\/frame_synthesis/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const frameAudioQueryRaw = route.request().postData();
    if (frameAudioQueryRaw == undefined || speaker == undefined) {
      throw new Error("frame_audio_query, speaker is required");
    }

    const frameAudioQuery = FrameAudioQueryFromJSON(
      JSON.parse(frameAudioQueryRaw),
    );
    const buffer = synthesisFrameAudioQueryMock(frameAudioQuery, speaker);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "audio/wav",
      },
      body: Buffer.from(buffer),
    });

Hiroshiba · 2024-10-26T19:45:56Z

📝 とりあえずデフォルトエンジンURLにhttp://mockを指定するとモックが動くようにはできた。
画像ファイルがどうしようもない。もうGithubの特定コミットハッシュのテスト用画像とかで良さそう。CORSが許すなら。
それか軽いSVGファイルをimportなりなんなりするか。

Hiroshiba added 6 commits July 1, 2024 00:42

stash

34dcfc2

scssが読み込めない！！！

c05f3b6

stash

b482e48

Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

0168fb7

mainに近づける

409ca08

テーマ周りをリファクタリング

1712692

stash

b1b10e4

Hiroshiba force-pushed the エンジンのmockを作る branch from ddc7f1b to b1b10e4 Compare July 12, 2024 14:51

Hiroshiba added 6 commits July 28, 2024 00:36

なぜかspec.ts側でStoryが動かせない･･･

0631c14

Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

79d4a66

スナップショットできた！

602fdd4

8.2.7

e29a8f4

typo

4d16516

いらなかった

aa38200

Hiroshiba and others added 2 commits August 4, 2024 01:32

ThemeConf[]

36382bd

トーク音声を再生できるように

1240838

Hiroshiba force-pushed the エンジンのmockを作る branch from e9a6b07 to 1240838 Compare August 10, 2024 15:24

Hiroshiba and others added 11 commits August 11, 2024 01:46

addActionsWithEmitsを削除

4d4524e

snapshot更新

518354c

Merge branch 'main' into エンジンのmockを作る

067a356

ちょっと型調整

c83f5cb

stash

2009e2d

Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

a47e3a3

stash

d7eee81

Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

2bc525f

openapi更新

315fff6

たぶんsing engineのモックができた、SingEditorのstoriesを作って試す

37c17ca

stash

208d9a5

Hiroshiba added 7 commits September 15, 2024 23:04

storybookへの追加やめる

2ddde64

忘れてた

5c58de9

stash。GENERATE_AUDIO_ITEMを解体するか、モックを刺す。

24cde26

メモ：ソフトウェアが正しく起動したあとのstateをモックとして用意しておく。speakerUuidとか。

0b277a4

audio.spec.ts追加

0cccb9a

これでいいのかなぁ

3cbb332

不要な変更を戻す

47688dd

sigprogramming mentioned this pull request Sep 29, 2024

ソング：シーケンスを作成する処理を関数化してRENDER関数の外に出す #2275

Merged

Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

aa84925

Hiroshiba added 5 commits October 12, 2024 22:41

Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

8aa41e8

Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

eb87e62

convertToUrlString関数導入

0d972b9

いろいろ調整

581fc30

微調整

79882dc

Hiroshiba commented Oct 12, 2024

View reviewed changes

Hiroshiba and others added 3 commits October 19, 2024 22:23

Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

df5efb7

（スナップショットを更新）

3144503

ブラウザ版e2eがたぶんエンジンなしで動く！

0080948

Hiroshiba added 4 commits October 26, 2024 23:02

dicPathを外部に指定

6f03c4f

revert

d59a090

Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

9ddecc6

とりあえず起動や再生はできるようになった

968a2bc

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] エンジンのモック作成＋それを使ったコンポーネントテスト #2152

[WIP] エンジンのモック作成＋それを使ったコンポーネントテスト #2152

Hiroshiba commented Jul 2, 2024 •

edited

Loading

Hiroshiba commented Jul 6, 2024

Hiroshiba commented Aug 3, 2024

Hiroshiba commented Sep 28, 2024

sigprogramming commented Sep 29, 2024

Hiroshiba commented Sep 30, 2024

Hiroshiba commented Oct 5, 2024

Hiroshiba commented Oct 5, 2024 •

edited

Loading

Hiroshiba left a comment

Hiroshiba commented Oct 19, 2024 •

edited

Loading

Hiroshiba commented Oct 26, 2024

Hiroshiba commented Oct 26, 2024 •

edited

Loading

[WIP] エンジンのモック作成＋それを使ったコンポーネントテスト #2152

Are you sure you want to change the base?

[WIP] エンジンのモック作成＋それを使ったコンポーネントテスト #2152

Conversation

Hiroshiba commented Jul 2, 2024 • edited Loading

内容

関連 Issue

スクリーンショット・動画など

その他

Hiroshiba commented Jul 6, 2024

Hiroshiba commented Aug 3, 2024

Hiroshiba commented Sep 28, 2024

sigprogramming commented Sep 29, 2024

Hiroshiba commented Sep 30, 2024

Hiroshiba commented Oct 5, 2024

Hiroshiba commented Oct 5, 2024 • edited Loading

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba commented Oct 19, 2024 • edited Loading

Hiroshiba commented Oct 26, 2024

Hiroshiba commented Oct 26, 2024 • edited Loading

Hiroshiba commented Jul 2, 2024 •

edited

Loading

Hiroshiba commented Oct 5, 2024 •

edited

Loading

Hiroshiba commented Oct 19, 2024 •

edited

Loading

Hiroshiba commented Oct 26, 2024 •

edited

Loading