From 602fdd43e011970bbb9a36e23be1da8a2511382e Mon Sep 17 00:00:00 2001 From: Hiroshiba Date: Sun, 4 Aug 2024 00:42:13 +0900 Subject: [PATCH] =?UTF-8?q?=E3=82=B9=E3=83=8A=E3=83=83=E3=83=97=E3=82=B7?= =?UTF-8?q?=E3=83=A7=E3=83=83=E3=83=88=E3=81=A7=E3=81=8D=E3=81=9F=EF=BC=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.ts | 5 + .storybook/test-runner.ts | 18 ++ package-lock.json | 6 - src/components/Talk/TalkEditor.stories.ts | 10 +- .../__snapshots__/TalkEditor.stories.ts.snap | 158 ++++++++++++++++++ src/type/globals.d.ts | 3 + 6 files changed, 190 insertions(+), 10 deletions(-) create mode 100644 .storybook/test-runner.ts create mode 100644 src/components/Talk/__snapshots__/TalkEditor.stories.ts.snap diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 5ec33581a9..94a02d104a 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -3,6 +3,7 @@ import { Quasar, Dialog, Loading, Notify } from "quasar"; import iconSet from "quasar/icon-set/material-icons"; import { addActionsWithEmits } from "./utils/argTypesEnhancers"; import { markdownItPlugin } from "@/plugins/markdownItPlugin"; +import { resetMockMode } from "@/helpers/random"; import "@quasar/extras/material-icons/material-icons.css"; import "quasar/dist/quasar.sass"; @@ -35,6 +36,10 @@ const preview: Preview = { }, }, argTypesEnhancers: [addActionsWithEmits], + + beforeEach() { + resetMockMode(); + }, }; export default preview; diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts new file mode 100644 index 0000000000..82e374ac6c --- /dev/null +++ b/.storybook/test-runner.ts @@ -0,0 +1,18 @@ +import { type TestRunnerConfig } from "@storybook/test-runner"; + +const config: TestRunnerConfig = { + async preVisit(page) { + // テスト用のスナップショット関数を追加する。 + // *.stories.ts内で`window.storybookTestSnapshot`を使って呼び出せる。 + if (await page.evaluate(() => !("storybookTestSnapshot" in window))) { + await page.exposeBinding( + "storybookTestSnapshot", + async (_, obj: unknown) => { + expect(obj).toMatchSnapshot(); + }, + ); + } + }, +}; + +export default config; diff --git a/package-lock.json b/package-lock.json index a50e0c8ed0..573dfd88a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3009,12 +3009,6 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, - "node_modules/@fal-works/esbuild-plugin-global-externals": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz", - "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==", - "dev": true - }, "node_modules/@floating-ui/core": { "version": "1.6.3", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.3.tgz", diff --git a/src/components/Talk/TalkEditor.stories.ts b/src/components/Talk/TalkEditor.stories.ts index d3b965be24..2ebb3361e8 100644 --- a/src/components/Talk/TalkEditor.stories.ts +++ b/src/components/Talk/TalkEditor.stories.ts @@ -29,7 +29,6 @@ import { } from "@/mock/engineMock/speakerResourceMock"; import { setFont, themeToCss } from "@/domain/dom"; import defaultTheme from "@/../public/themes/default.json"; -import { State } from "@/store/type"; const meta: Meta = { component: TalkEditor, @@ -57,13 +56,13 @@ const meta: Meta = { }); provide(storeKey, store); - context.parameters.vuexState = store.state; - // なぜか必要、これがないとdispatch内でcommitしたときにエラーになる store.replaceState({ ...structuredClone(toRaw(store.state)), }); + context.parameters.vuexState = store.state; + // エンジンの情報 const engineManifest = getEngineManifestMock(); const engineId = EngineId(engineManifest.uuid); @@ -157,7 +156,7 @@ export const NowLoading: Story = { export const TextInput: Story = { name: "テキスト入力のテスト", - play: async ({ context, canvasElement, component }) => { + play: async ({ context, canvasElement, parameters }) => { await Default.play(context); const canvas = within(canvasElement); @@ -165,5 +164,8 @@ export const TextInput: Story = { // テキスト欄を取得 const textInput = await canvas.findByLabelText("1行目"); await userEvent.type(textInput, "こんにちは、これはテストです。{enter}"); + + const { audioItems, audioKeys } = parameters.vuexState; + await window.storybookTestSnapshot?.({ audioItems, audioKeys }); }, }; diff --git a/src/components/Talk/__snapshots__/TalkEditor.stories.ts.snap b/src/components/Talk/__snapshots__/TalkEditor.stories.ts.snap new file mode 100644 index 0000000000..582241a182 --- /dev/null +++ b/src/components/Talk/__snapshots__/TalkEditor.stories.ts.snap @@ -0,0 +1,158 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/Talk/TalkEditor TextInput play-test 1`] = ` +{ + "audioItems": { + "00000000-0000-4000-0000-000000000001": { + "presetKey": undefined, + "query": { + "accentPhrases": [ + { + "accent": 5, + "moras": [ + { + "consonant": "k", + "consonantLength": 0.1103125, + "pitch": 4.7734375, + "text": "コ", + "vowel": "o", + "vowelLength": 0.1140625, + }, + { + "consonant": undefined, + "consonantLength": undefined, + "pitch": 3.609375, + "text": "ン", + "vowel": "N", + "vowelLength": 0.08312499999999999, + }, + { + "consonant": "n", + "consonantLength": 0.11312499999999999, + "pitch": 4.75, + "text": "ニ", + "vowel": "i", + "vowelLength": 0.10843749999999999, + }, + { + "consonant": "ch", + "consonantLength": 0.2003125, + "pitch": 4.0234375, + "text": "チ", + "vowel": "i", + "vowelLength": 0.10843749999999999, + }, + { + "consonant": "h", + "consonantLength": 0.1575, + "pitch": 4.796875, + "text": "ハ", + "vowel": "a", + "vowelLength": 0.1509375, + }, + ], + "pauseMora": { + "pitch": 0, + "text": "、", + "vowel": "", + "vowelLength": 0, + }, + }, + { + "accent": 2, + "moras": [ + { + "consonant": "k", + "consonantLength": 0.12031249999999999, + "pitch": 4.7834375, + "text": "コ", + "vowel": "o", + "vowelLength": 0.12406249999999999, + }, + { + "consonant": "r", + "consonantLength": 0.126875, + "pitch": 4.72875, + "text": "レ", + "vowel": "e", + "vowelLength": 0.11468749999999998, + }, + { + "consonant": "h", + "consonantLength": 0.1675, + "pitch": 5.106875, + "text": "ハ", + "vowel": "a", + "vowelLength": 0.1609375, + }, + ], + }, + { + "accent": 2, + "moras": [ + { + "consonant": "t", + "consonantLength": 0.13874999999999998, + "pitch": 4.723125, + "text": "テ", + "vowel": "e", + "vowelLength": 0.12468749999999999, + }, + { + "consonant": "s", + "consonantLength": 0.13781249999999998, + "pitch": 4.7309375, + "text": "ス", + "vowel": "u", + "vowelLength": 0.1396875, + }, + { + "consonant": "t", + "consonantLength": 0.13874999999999998, + "pitch": 5.023124999999999, + "text": "ト", + "vowel": "o", + "vowelLength": 0.1340625, + }, + { + "consonant": "d", + "consonantLength": 0.12375, + "pitch": 4.848125, + "text": "デ", + "vowel": "e", + "vowelLength": 0.12468749999999999, + }, + { + "consonant": "s", + "consonantLength": 0.18781249999999997, + "pitch": 4.7309375, + "text": "ス", + "vowel": "u", + "vowelLength": 0.18968749999999998, + }, + ], + "pauseMora": undefined, + }, + ], + "intonationScale": 1, + "outputSamplingRate": 24000, + "outputStereo": false, + "pitchScale": 0, + "postPhonemeLength": 0.1, + "prePhonemeLength": 0.1, + "speedScale": 1, + "volumeScale": 1, + }, + "text": "こんにちは、これはテストです。", + "voice": { + "engineId": "c7b58856-bd56-4aa1-afb7-b8415f824b06", + "speakerId": "7ffcb7ce-00ec-4bdc-82cd-45a8889e43ff", + "styleId": 0, + }, + }, + }, + "audioKeys": [ + "00000000-0000-4000-0000-000000000001", + ], +} +`; diff --git a/src/type/globals.d.ts b/src/type/globals.d.ts index 6c761fa17f..4155ff9c84 100644 --- a/src/type/globals.d.ts +++ b/src/type/globals.d.ts @@ -11,6 +11,9 @@ declare global { interface Window { readonly [SandboxKey]: import("./preload").Sandbox; + + // Storybookのtest-runnerのみで使用できるスナップショット関数 + storybookTestSnapshot?: (obj: unknown) => Promise; } interface Navigator {