Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitc3f0db3

Browse files
test(site): make loading snapshots more predictable (#14564)
Abstracts the Spinner component to control the display of the CircularProgress component. This allows us to make it static during Chromatic tests, making loading tests easier to visualize.
1 parent8f07d33 commitc3f0db3

File tree

2 files changed

+29
-2
lines changed

2 files changed

+29
-2
lines changed

‎site/src/components/Loader/Loader.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
importtype{Interpolation,Theme}from"@emotion/react";
2-
importCircularProgressfrom"@mui/material/CircularProgress";
2+
import{Spinner}from"components/Spinner/Spinner";
33
importtype{FC,HTMLAttributes}from"react";
44

55
interfaceLoaderPropsextendsHTMLAttributes<HTMLDivElement>{
66
fullscreen?:boolean;
77
size?:number;
8+
/**
9+
* A label for the loader. This is used for accessibility purposes.
10+
*/
11+
label?:string;
812
}
913

1014
exportconstLoader:FC<LoaderProps>=({
1115
fullscreen,
1216
size=26,
17+
label="Loading...",
1318
...attrs
1419
})=>{
1520
return(
@@ -18,7 +23,7 @@ export const Loader: FC<LoaderProps> = ({
1823
data-testid="loader"
1924
{...attrs}
2025
>
21-
<CircularProgresssize={size}/>
26+
<Spinneraria-label={label}size={size}/>
2227
</div>
2328
);
2429
};
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
importCircularProgress,{
2+
typeCircularProgressProps,
3+
}from"@mui/material/CircularProgress";
4+
importisChromaticfrom"chromatic/isChromatic";
5+
importtype{FC}from"react";
6+
7+
/**
8+
* Spinner component used to indicate loading states. This component abstracts
9+
* the MUI CircularProgress to provide better control over its rendering,
10+
* especially in snapshot tests with Chromatic.
11+
*/
12+
exportconstSpinner:FC<CircularProgressProps>=(props)=>{
13+
/**
14+
* During Chromatic snapshots, we render the spinner as determinate to make it
15+
* static without animations, using a deterministic value (75%).
16+
*/
17+
if(isChromatic()){
18+
props.variant="determinate";
19+
props.value=75;
20+
}
21+
return<CircularProgress{...props}/>;
22+
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp