diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index a22870b3ee..0bc553ca13 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 c5c5354222..767f8c691b 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<HTMLButtonElement>('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 29b3fd53eb..23afa7c366 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 c526fc156a..3e018f2d7e 100644
--- a/packages/frontend/src/scripts/test-utils.ts
+++ b/packages/frontend/src/scripts/test-utils.ts
@@ -1,3 +1,5 @@
+/// <reference types="@testing-library/jest-dom"/>
+
export async function tick(): Promise<void> {
// 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 79750eef2b..852fc9496a 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