73 lines
1.8 KiB
React
73 lines
1.8 KiB
React
|
import React from 'react';
|
||
|
|
import { Box } from '@chakra-ui/react';
|
||
|
|
import { http, HttpResponse } from 'msw'; // Import MSW
|
||
|
|
import LlmAlChangesQuadPlot from './LlmAlChangesQuadPlot';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: 'Dashboard Widgets/LLM AL Changes Quad Plot',
|
||
|
|
component: LlmAlChangesQuadPlot,
|
||
|
|
decorators: [
|
||
|
|
(Story) => (
|
||
|
|
<Box
|
||
|
|
w="100%" maxW="1800px" h="400px"
|
||
|
|
border="2px dashed" borderColor="gray.600" p={2}
|
||
|
|
resize="both" overflow="auto"
|
||
|
|
>
|
||
|
|
<Story />
|
||
|
|
</Box>
|
||
|
|
),
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
const mockData = [
|
||
|
|
{ tp: 50 },
|
||
|
|
{ tn: 250 },
|
||
|
|
{ fp: 10 },
|
||
|
|
{ fn: 5 },
|
||
|
|
{ tot_count: 315}
|
||
|
|
];
|
||
|
|
|
||
|
|
// Scenario LIVE: call our API for real
|
||
|
|
export const LivePopulated = {};
|
||
|
|
|
||
|
|
// Scenario 1: Successful API Call
|
||
|
|
export const Populated = {
|
||
|
|
parameters: {
|
||
|
|
msw: {
|
||
|
|
handlers: [
|
||
|
|
// Intercept the exact URL your component is trying to fetch
|
||
|
|
http.get('*/api/v2/llm_quadrant_plot', () => {
|
||
|
|
// Return a 200 OK with the mock JSON
|
||
|
|
return HttpResponse.json(mockData);
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// Scenario 2: The 500 Server Crash
|
||
|
|
export const ServerCrash = {
|
||
|
|
parameters: {
|
||
|
|
msw: {
|
||
|
|
handlers: [
|
||
|
|
http.get('*/api/v2/llm_quad_plot', () => {
|
||
|
|
// Return a 500 Error
|
||
|
|
return new HttpResponse(null, { status: 500 });
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
// Scenario 3: Empty State (API works, but no data returned)
|
||
|
|
export const EmptyData = {
|
||
|
|
parameters: {
|
||
|
|
msw: {
|
||
|
|
handlers: [
|
||
|
|
http.get('*/api/v2/llm_quad_plot', () => {
|
||
|
|
return HttpResponse.json([]);
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|