diff --git a/packages/frontend/package.json b/packages/frontend/package.json index a22870b3e..0bc553ca1 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -89,6 +89,7 @@ "@storybook/types": "7.0.0-rc.10", "@storybook/vue3": "7.0.0-rc.10", "@storybook/vue3-vite": "7.0.0-rc.10", + "@testing-library/jest-dom": "^5.16.5", "@testing-library/vue": "^6.6.1", "@types/escape-regexp": "0.0.1", "@types/estree": "^1.0.0", @@ -99,6 +100,7 @@ "@types/punycode": "2.1.0", "@types/sanitize-html": "2.9.0", "@types/seedrandom": "3.0.5", + "@types/testing-library__jest-dom": "^5.14.5", "@types/throttle-debounce": "5.0.0", "@types/tinycolor2": "1.4.3", "@types/uuid": "9.0.1", diff --git a/packages/frontend/src/components/global/MkAd.stories.impl.ts b/packages/frontend/src/components/global/MkAd.stories.impl.ts index c5c535422..767f8c691 100644 --- a/packages/frontend/src/components/global/MkAd.stories.impl.ts +++ b/packages/frontend/src/components/global/MkAd.stories.impl.ts @@ -2,6 +2,7 @@ import { expect } from '@storybook/jest'; import { userEvent, within } from '@storybook/testing-library'; import { StoryObj } from '@storybook/vue3'; +import { i18n } from '@/i18n'; import MkAd from './MkAd.vue'; const common = { render(args) { @@ -38,13 +39,15 @@ const common = { await expect(a).not.toBeInTheDocument(); await expect(i).not.toBeInTheDocument(); buttons = canvas.getAllByRole('button'); - await expect(buttons).toHaveLength(args._hasReduce ? 2 : 1); - const reduce = args._hasReduce ? buttons[0] : null; - const back = buttons[args._hasReduce ? 1 : 0]; + await expect(buttons).toHaveLength(args.__hasReduce ? 2 : 1); + const reduce = args.__hasReduce ? buttons[0] : null; + const back = buttons[args.__hasReduce ? 1 : 0]; if (reduce) { await expect(reduce).toBeInTheDocument(); + await expect(reduce.textContent).toBe(i18n.ts._ad.reduceFrequencyOfThisAd); } await expect(back).toBeInTheDocument(); + await expect(back.textContent).toBe(i18n.ts._ad.back); await userEvent.click(back); if (reduce) { await expect(reduce).not.toBeInTheDocument(); @@ -62,7 +65,7 @@ const common = { radio: 1, url: '#test', }, - _hasReduce: true, + __hasReduce: true, }, parameters: { layout: 'centered', @@ -112,6 +115,6 @@ export const ZeroRatio = { ...Square.args.specify, ratio: 0, }, - _hasReduce: false, + __hasReduce: false, }, }; diff --git a/packages/frontend/src/components/global/MkAd.stories.ts b/packages/frontend/src/components/global/MkAd.stories.ts index 29b3fd53e..23afa7c36 100644 --- a/packages/frontend/src/components/global/MkAd.stories.ts +++ b/packages/frontend/src/components/global/MkAd.stories.ts @@ -10,6 +10,7 @@ export default meta; import { expect } from '@storybook/jest'; import { userEvent, within } from '@storybook/testing-library'; import { StoryObj } from '@storybook/vue3'; +import { i18n } from '@/i18n'; import MkAd from './MkAd.vue'; const common = { render(args) { @@ -51,8 +52,12 @@ const common = { const back = buttons[args._hasReduce ? 1 : 0]; if (reduce) { await expect(reduce).toBeInTheDocument(); + await expect(reduce.textContent).toBe( + i18n.ts._ad.reduceFrequencyOfThisAd + ); } await expect(back).toBeInTheDocument(); + await expect(back.textContent).toBe(i18n.ts._ad.back); await userEvent.click(back); if (reduce) { await expect(reduce).not.toBeInTheDocument(); diff --git a/packages/frontend/src/scripts/test-utils.ts b/packages/frontend/src/scripts/test-utils.ts index c526fc156..3e018f2d7 100644 --- a/packages/frontend/src/scripts/test-utils.ts +++ b/packages/frontend/src/scripts/test-utils.ts @@ -1,3 +1,5 @@ +/// + export async function tick(): Promise { // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition await new Promise((globalThis.requestIdleCallback ?? setTimeout) as never); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79750eef2..852fc9496 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -817,6 +817,9 @@ importers: '@storybook/vue3-vite': specifier: 7.0.0-rc.10 version: 7.0.0-rc.10(react-dom@18.2.0)(react@18.2.0)(typescript@5.0.2)(vite@4.2.1)(vue@3.2.47) + '@testing-library/jest-dom': + specifier: ^5.16.5 + version: 5.16.5 '@testing-library/vue': specifier: ^6.6.1 version: 6.6.1(@vue/compiler-sfc@3.2.47)(vue@3.2.47) @@ -847,6 +850,9 @@ importers: '@types/seedrandom': specifier: 3.0.5 version: 3.0.5 + '@types/testing-library__jest-dom': + specifier: ^5.14.5 + version: 5.14.5 '@types/throttle-debounce': specifier: 5.0.0 version: 5.0.0 @@ -3927,7 +3933,7 @@ packages: chalk: 4.1.2 ci-info: 3.7.1 exit: 0.1.2 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 jest-changed-files: 29.5.0 jest-config: 29.5.0(@types/node@18.15.11) jest-haste-map: 29.5.0 @@ -11806,6 +11812,7 @@ packages: /graceful-fs@4.2.10: resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==} + dev: false /graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} @@ -13109,7 +13116,7 @@ packages: '@jest/types': 29.5.0 chalk: 4.1.2 exit: 0.1.2 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 import-local: 3.1.0 jest-config: 29.5.0(@types/node@18.15.11) jest-util: 29.5.0