test(frontend): fix component error in MkChart
story (#14056)
This commit is contained in:
parent
2c84d06a66
commit
a9012d3d0c
3 changed files with 52 additions and 44 deletions
48
packages/frontend/.storybook/charts.ts
Normal file
48
packages/frontend/.storybook/charts.ts
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
/*
|
||||||
|
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||||
|
* SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { DefaultBodyType, HttpResponse, HttpResponseResolver, JsonBodyType, PathParams, http } from 'msw';
|
||||||
|
import seedrandom from 'seedrandom';
|
||||||
|
import { action } from '@storybook/addon-actions';
|
||||||
|
|
||||||
|
function getChartArray(seed: string, limit: number, option?: { accumulate?: boolean, mul?: number }): number[] {
|
||||||
|
const rng = seedrandom(seed);
|
||||||
|
const max = Math.floor(option?.mul ?? 250 * rng());
|
||||||
|
let accumulation = 0;
|
||||||
|
const array: number[] = [];
|
||||||
|
for (let i = 0; i < limit; i++) {
|
||||||
|
const num = Math.floor((max + 1) * rng());
|
||||||
|
if (option?.accumulate) {
|
||||||
|
accumulation += num;
|
||||||
|
array.unshift(accumulation);
|
||||||
|
} else {
|
||||||
|
array.push(num);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getChartResolver(fields: string[], option?: { accumulate?: boolean, mulMap?: Record<string, number> }): HttpResponseResolver<PathParams, DefaultBodyType, JsonBodyType> {
|
||||||
|
return ({ request }) => {
|
||||||
|
action(`GET ${request.url}`)();
|
||||||
|
const limitParam = new URL(request.url).searchParams.get('limit');
|
||||||
|
const limit = limitParam ? parseInt(limitParam) : 30;
|
||||||
|
const res = {};
|
||||||
|
for (const field of fields) {
|
||||||
|
const layers = field.split('.');
|
||||||
|
let current = res;
|
||||||
|
while (layers.length > 1) {
|
||||||
|
const currentKey = layers.shift()!;
|
||||||
|
if (current[currentKey] == null) current[currentKey] = {};
|
||||||
|
current = current[currentKey];
|
||||||
|
}
|
||||||
|
current[layers[0]] = getChartArray(field, limit, {
|
||||||
|
accumulate: option?.accumulate,
|
||||||
|
mul: option?.mulMap != null && field in option.mulMap ? option.mulMap[field] : undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return HttpResponse.json(res);
|
||||||
|
};
|
||||||
|
}
|
|
@ -6,52 +6,11 @@
|
||||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||||
/* eslint-disable import/no-default-export */
|
/* eslint-disable import/no-default-export */
|
||||||
import { StoryObj } from '@storybook/vue3';
|
import { StoryObj } from '@storybook/vue3';
|
||||||
import { DefaultBodyType, HttpResponse, HttpResponseResolver, JsonBodyType, PathParams, http } from 'msw';
|
import { http } from 'msw';
|
||||||
import seedrandom from 'seedrandom';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import { commonHandlers } from '../../.storybook/mocks.js';
|
import { commonHandlers } from '../../.storybook/mocks.js';
|
||||||
|
import { getChartResolver } from '../../.storybook/charts.js';
|
||||||
import MkChart from './MkChart.vue';
|
import MkChart from './MkChart.vue';
|
||||||
|
|
||||||
function getChartArray(seed: string, limit: number, option?: { accumulate?: boolean, mul?: number }): number[] {
|
|
||||||
const rng = seedrandom(seed);
|
|
||||||
const max = Math.floor(option?.mul ?? 250 * rng());
|
|
||||||
let accumulation = 0;
|
|
||||||
const array: number[] = [];
|
|
||||||
for (let i = 0; i < limit; i++) {
|
|
||||||
const num = Math.floor((max + 1) * rng());
|
|
||||||
if (option?.accumulate) {
|
|
||||||
accumulation += num;
|
|
||||||
array.unshift(accumulation);
|
|
||||||
} else {
|
|
||||||
array.push(num);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return array;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getChartResolver(fields: string[], option?: { accumulate?: boolean, mulMap?: Record<string, number> }): HttpResponseResolver<PathParams, DefaultBodyType, JsonBodyType> {
|
|
||||||
return ({ request }) => {
|
|
||||||
action(`GET ${request.url}`)();
|
|
||||||
const limitParam = new URL(request.url).searchParams.get('limit');
|
|
||||||
const limit = limitParam ? parseInt(limitParam) : 30;
|
|
||||||
const res = {};
|
|
||||||
for (const field of fields) {
|
|
||||||
const layers = field.split('.');
|
|
||||||
let current = res;
|
|
||||||
while (layers.length > 1) {
|
|
||||||
const currentKey = layers.shift()!;
|
|
||||||
if (current[currentKey] == null) current[currentKey] = {};
|
|
||||||
current = current[currentKey];
|
|
||||||
}
|
|
||||||
current[layers[0]] = getChartArray(field, limit, {
|
|
||||||
accumulate: option?.accumulate,
|
|
||||||
mul: option?.mulMap != null && field in option.mulMap ? option.mulMap[field] : undefined,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return HttpResponse.json(res);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const Base = {
|
const Base = {
|
||||||
render(args) {
|
render(args) {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -8,8 +8,9 @@ import { StoryObj } from '@storybook/vue3';
|
||||||
import { HttpResponse, http } from 'msw';
|
import { HttpResponse, http } from 'msw';
|
||||||
import { federationInstance } from '../../.storybook/fakes.js';
|
import { federationInstance } from '../../.storybook/fakes.js';
|
||||||
import { commonHandlers } from '../../.storybook/mocks.js';
|
import { commonHandlers } from '../../.storybook/mocks.js';
|
||||||
|
import { getChartResolver } from '../../.storybook/charts.js';
|
||||||
import MkInstanceCardMini from './MkInstanceCardMini.vue';
|
import MkInstanceCardMini from './MkInstanceCardMini.vue';
|
||||||
import { getChartResolver } from './MkChart.stories.impl.js';
|
|
||||||
export const Default = {
|
export const Default = {
|
||||||
render(args) {
|
render(args) {
|
||||||
return {
|
return {
|
||||||
|
|
Loading…
Reference in a new issue