From def7b8c55e342aea855e56da634994c02f56f600 Mon Sep 17 00:00:00 2001
From: zyoshoka <107108195+zyoshoka@users.noreply.github.com>
Date: Sat, 18 May 2024 12:42:26 +0900
Subject: [PATCH] fix(frontend): fix Chromatic test fails (#13826)
* fix: attempt to fix Chromatic test fails
* chore: add comment
---
packages/frontend/src/components/MkModal.vue | 5 ++++-
.../frontend/src/components/global/MkAd.stories.impl.ts | 8 +++++++-
2 files changed, 11 insertions(+), 2 deletions(-)
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index eb240da759..9e69ab2207 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -276,8 +276,11 @@ const align = () => {
const onOpened = () => {
emit('opened');
+ // NOTE: Chromatic テストの際に undefined になる場合がある
+ if (content.value == null) return;
+
// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
- const el = content.value!.children[0];
+ const el = content.value.children[0];
el.addEventListener('mousedown', ev => {
contentClicking = true;
window.addEventListener('mouseup', ev => {
diff --git a/packages/frontend/src/components/global/MkAd.stories.impl.ts b/packages/frontend/src/components/global/MkAd.stories.impl.ts
index a1d274382f..aef26ab92d 100644
--- a/packages/frontend/src/components/global/MkAd.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkAd.stories.impl.ts
@@ -11,6 +11,10 @@ import { i18n } from '@/i18n.js';
let lock: Promise<undefined> | undefined;
+function sleep(ms: number) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+}
+
const common = {
render(args) {
return {
@@ -43,6 +47,8 @@ const common = {
lock = new Promise(r => resolve = r);
try {
+ // NOTE: sleep しないと何故か落ちる
+ await sleep(100);
const canvas = within(canvasElement);
const a = canvas.getByRole<HTMLAnchorElement>('link');
// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
@@ -53,7 +59,7 @@ const common = {
const i = buttons[0];
await expect(i).toBeInTheDocument();
await userEvent.click(i);
- // await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
+ await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
await expect(a).not.toBeInTheDocument();
await expect(i).not.toBeInTheDocument();
buttons = canvas.getAllByRole<HTMLButtonElement>('button');