fix(frontend): workaround storybook issue (#11334)
This commit is contained in:
parent
509e3f979e
commit
df2b61fcc6
|
@ -4,6 +4,9 @@ import { userEvent, waitFor, within } from '@storybook/testing-library';
|
||||||
import { StoryObj } from '@storybook/vue3';
|
import { StoryObj } from '@storybook/vue3';
|
||||||
import MkAd from './MkAd.vue';
|
import MkAd from './MkAd.vue';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
|
let lock: Promise<undefined> | undefined;
|
||||||
|
|
||||||
const common = {
|
const common = {
|
||||||
render(args) {
|
render(args) {
|
||||||
return {
|
return {
|
||||||
|
@ -26,39 +29,53 @@ const common = {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async play({ canvasElement, args }) {
|
async play({ canvasElement, args }) {
|
||||||
const canvas = within(canvasElement);
|
if (lock) {
|
||||||
const a = canvas.getByRole<HTMLAnchorElement>('link');
|
console.warn('This test is unexpectedly running twice in parallel, fix it!');
|
||||||
await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
|
console.warn('See also: https://github.com/misskey-dev/misskey/issues/11267');
|
||||||
const img = within(a).getByRole('img');
|
await lock;
|
||||||
await expect(img).toBeInTheDocument();
|
|
||||||
let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
|
|
||||||
await expect(buttons).toHaveLength(1);
|
|
||||||
const i = buttons[0];
|
|
||||||
await expect(i).toBeInTheDocument();
|
|
||||||
await userEvent.click(i);
|
|
||||||
await waitFor(() => 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];
|
|
||||||
if (reduce) {
|
|
||||||
await expect(reduce).toBeInTheDocument();
|
|
||||||
await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
|
|
||||||
}
|
}
|
||||||
await expect(back).toBeInTheDocument();
|
|
||||||
await expect(back).toHaveTextContent(i18n.ts._ad.back);
|
let resolve: (value?: any) => void;
|
||||||
await userEvent.click(back);
|
lock = new Promise(r => resolve = r);
|
||||||
await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy());
|
|
||||||
if (reduce) {
|
try {
|
||||||
await expect(reduce).not.toBeInTheDocument();
|
const canvas = within(canvasElement);
|
||||||
|
const a = canvas.getByRole<HTMLAnchorElement>('link');
|
||||||
|
await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
|
||||||
|
const img = within(a).getByRole('img');
|
||||||
|
await expect(img).toBeInTheDocument();
|
||||||
|
let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
|
||||||
|
await expect(buttons).toHaveLength(1);
|
||||||
|
const i = buttons[0];
|
||||||
|
await expect(i).toBeInTheDocument();
|
||||||
|
await userEvent.click(i);
|
||||||
|
await waitFor(() => 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];
|
||||||
|
if (reduce) {
|
||||||
|
await expect(reduce).toBeInTheDocument();
|
||||||
|
await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
|
||||||
|
}
|
||||||
|
await expect(back).toBeInTheDocument();
|
||||||
|
await expect(back).toHaveTextContent(i18n.ts._ad.back);
|
||||||
|
await userEvent.click(back);
|
||||||
|
await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy());
|
||||||
|
if (reduce) {
|
||||||
|
await expect(reduce).not.toBeInTheDocument();
|
||||||
|
}
|
||||||
|
await expect(back).not.toBeInTheDocument();
|
||||||
|
const aAgain = canvas.getByRole<HTMLAnchorElement>('link');
|
||||||
|
await expect(aAgain).toBeInTheDocument();
|
||||||
|
const imgAgain = within(aAgain).getByRole('img');
|
||||||
|
await expect(imgAgain).toBeInTheDocument();
|
||||||
|
} finally {
|
||||||
|
resolve!();
|
||||||
|
lock = undefined;
|
||||||
}
|
}
|
||||||
await expect(back).not.toBeInTheDocument();
|
|
||||||
const aAgain = canvas.getByRole<HTMLAnchorElement>('link');
|
|
||||||
await expect(aAgain).toBeInTheDocument();
|
|
||||||
const imgAgain = within(aAgain).getByRole('img');
|
|
||||||
await expect(imgAgain).toBeInTheDocument();
|
|
||||||
},
|
},
|
||||||
args: {
|
args: {
|
||||||
prefer: [],
|
prefer: [],
|
||||||
|
|
Loading…
Reference in New Issue