fix(frontend): fix Storybook type errors (#13779)

* fix(frontend): fix Storybook type errors

* fix: `hasReduce` doesn't work in args
This commit is contained in:
zyoshoka 2024-05-01 16:39:16 +09:00 committed by GitHub
parent d2a5bb39e3
commit 9c057e6854
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 952 additions and 732 deletions

View file

@ -4,8 +4,10 @@
*/
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { expect, userEvent, waitFor, within } from '@storybook/test';
import { StoryObj } from '@storybook/vue3';
import MkAd from './MkAd.vue';
import { i18n } from '@/i18n.js';
let lock: Promise<undefined> | undefined;
@ -30,7 +32,6 @@ const common = {
template: '<MkAd v-bind="props" />',
};
},
/* FIXME: disabled because it still didnt pass after applying #11267
async play({ canvasElement, args }) {
if (lock) {
console.warn('This test is unexpectedly running twice in parallel, fix it!');
@ -44,7 +45,7 @@ const common = {
try {
const canvas = within(canvasElement);
const a = canvas.getByRole<HTMLAnchorElement>('link');
await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
const img = within(a).getByRole('img');
await expect(img).toBeInTheDocument();
let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
@ -52,13 +53,14 @@ const common = {
const i = buttons[0];
await expect(i).toBeInTheDocument();
await userEvent.click(i);
await waitFor(() => 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');
await expect(buttons).toHaveLength(args.__hasReduce ? 2 : 1);
const reduce = args.__hasReduce ? buttons[0] : null;
const back = buttons[args.__hasReduce ? 1 : 0];
const hasReduceFrequency = args.specify?.ratio !== 0;
await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1);
const reduce = hasReduceFrequency ? buttons[0] : null;
const back = buttons[hasReduceFrequency ? 1 : 0];
if (reduce) {
await expect(reduce).toBeInTheDocument();
await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
@ -80,15 +82,16 @@ const common = {
lock = undefined;
}
},
*/
args: {
prefer: [],
specify: {
id: 'someadid',
radio: 1,
ratio: 1,
url: '#test',
place: '',
imageUrl: '',
dayOfWeek: 7,
},
__hasReduce: true,
},
parameters: {
layout: 'centered',
@ -138,6 +141,5 @@ export const ZeroRatio = {
...Square.args.specify,
ratio: 0,
},
__hasReduce: false,
},
} satisfies StoryObj<typeof MkAd>;