Skip to content

Commit 14e6d1b

Browse files
haschekhaschek
committed
document tests bestter and track renderinging time in console
1 parent 5f7e547 commit 14e6d1b

1 file changed

Lines changed: 91 additions & 61 deletions

File tree

‎src/components/OverviewItem/stories/OverviewItemListPerformance.tsx‎

Lines changed: 91 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
OverviewItemDescription,
1515
OverviewItemLine,
1616
OverviewItemList,
17+
Spinner,
1718
Tooltip,
1819
} from "./../../../../index";
1920
import { Default as ContextMenuExample } from "./../../ContextOverlay/ContextMenu.stories";
@@ -28,14 +29,16 @@ interface OverviewItemListPerformanceProps {
2829
withDepiction: boolean;
2930
/** include description */
3031
withDescription: boolean;
31-
/** include hidden actions */
32-
withHiddenActions: boolean;
33-
/** include actions */
34-
withActions: boolean;
35-
/** inlcude tooltips */
32+
/** include icon button in hidden actions */
33+
withIconButtonInHiddenActions: boolean;
34+
/** include button in actions */
35+
withButtonInActions: boolean;
36+
/** inlcude context menu in actions */
37+
withContextMenuInActions: boolean;
38+
/** include tooltips on all elments that can have one */
3639
withTooltips: boolean;
37-
/** inlcude context menu */
38-
withContextMenu: boolean;
40+
/** delay rendering of action items */
41+
delayActions: number;
3942
}
4043

4144
const createTextArray = (items: number, length: number) => {
@@ -56,71 +59,98 @@ export const OverviewItemListPerformance = ({
5659
useOverviewitem = false,
5760
withDepiction = false,
5861
withDescription = true,
59-
withActions = false,
60-
withHiddenActions = false,
62+
withButtonInActions = false,
63+
withIconButtonInHiddenActions = false,
6164
withTooltips = false,
62-
withContextMenu = false,
65+
withContextMenuInActions = false,
66+
delayActions = 1,
6367
}: OverviewItemListPerformanceProps) => {
68+
const renderStart = new Date();
69+
const containerRef = React.useRef(null);
70+
6471
const iconNames = Object.keys(canonicalIcons);
6572

6673
const ItemWrapper = useOverviewitem ? OverviewItem : "div";
6774
const ItemDescription = useOverviewitem ? OverviewItemDescription : "div";
6875
const ItemLine = useOverviewitem ? OverviewItemLine : "div";
6976
const ItemActions = useOverviewitem ? OverviewItemActions : "span";
7077

78+
const actionsProps = useOverviewitem
79+
? { delayDisplayChildren: delayActions, delaySkeleton: <Spinner position="inline" size="tiny" /> }
80+
: {};
81+
const hiddenActionsProps = useOverviewitem ? { ...actionsProps, hiddenInteractions: true } : {};
82+
83+
React.useEffect(() => {
84+
const renderEnd = new Date();
85+
// eslint-disable-next-line no-console
86+
console.log(
87+
"OverviewItemListPerformance Rendering time (s)",
88+
(renderEnd.getTime() - renderStart.getTime()) / 1000
89+
);
90+
});
91+
7192
return (
72-
<ApplicationContainer>
73-
<OverviewItemList hasDivider hasSpacing columns={useOverviewitem ? 2 : 1}>
74-
{Array(length)
75-
.fill("x")
76-
.map((_, id) => {
77-
return (
78-
<ItemWrapper key={id}>
79-
{withDepiction && (
80-
<Depiction
81-
size="small"
82-
image={<Icon name={iconNames[id % iconNames.length] as ValidIconName} />}
83-
caption={withTooltips ? textShort[(id + 10) % textShort.length] : undefined}
84-
captionPosition={withTooltips ? "tooltip" : "none"}
85-
/>
86-
)}
87-
{withDescription && (
88-
<ItemDescription>
89-
<ItemLine large={useOverviewitem ? true : undefined}>
90-
{textShort[id % textShort.length]}
91-
</ItemLine>
92-
<ItemLine small={useOverviewitem ? true : undefined}>
93-
{withTooltips ? (
94-
<Tooltip content={textLong[id % textLong.length]}>
93+
<div ref={containerRef}>
94+
<ApplicationContainer>
95+
<OverviewItemList hasDivider hasSpacing columns={useOverviewitem ? 2 : 1}>
96+
{Array(length)
97+
.fill("x")
98+
.map((_, id) => {
99+
return (
100+
<ItemWrapper key={id}>
101+
{withDepiction && (
102+
<Depiction
103+
size="small"
104+
image={<Icon name={iconNames[id % iconNames.length] as ValidIconName} />}
105+
caption={withTooltips ? textShort[(id + 10) % textShort.length] : undefined}
106+
captionPosition={withTooltips ? "tooltip" : "none"}
107+
/>
108+
)}
109+
{withDescription && (
110+
<ItemDescription>
111+
<ItemLine large={useOverviewitem ? true : undefined}>
112+
{textShort[id % textShort.length]}
113+
</ItemLine>
114+
<ItemLine small={useOverviewitem ? true : undefined}>
115+
{withTooltips ? (
116+
<Tooltip content={textLong[id % textLong.length]}>
117+
<OverflowText>{textLong[id % textLong.length]}</OverflowText>
118+
</Tooltip>
119+
) : (
95120
<OverflowText>{textLong[id % textLong.length]}</OverflowText>
96-
</Tooltip>
97-
) : (
98-
<OverflowText>{textLong[id % textLong.length]}</OverflowText>
121+
)}
122+
</ItemLine>
123+
</ItemDescription>
124+
)}
125+
{withIconButtonInHiddenActions && (
126+
<ItemActions {...hiddenActionsProps}>
127+
<IconButton
128+
name={iconNames[(id + 23) % iconNames.length] as ValidIconName}
129+
text={textShort[(id + 27) % textShort.length]}
130+
tooltipAsTitle={!withTooltips}
131+
/>
132+
</ItemActions>
133+
)}
134+
{(withButtonInActions || withContextMenuInActions) && (
135+
<ItemActions {...actionsProps}>
136+
{withButtonInActions && (
137+
<Button onClick={() => alert("Button clicked")}>
138+
{textShort[(id + 77) % textShort.length]}
139+
</Button>
99140
)}
100-
</ItemLine>
101-
</ItemDescription>
102-
)}
103-
{withHiddenActions && (
104-
<ItemActions hiddenInteractions={useOverviewitem ? true : undefined}>
105-
<IconButton
106-
name={iconNames[(id + 23) % iconNames.length] as ValidIconName}
107-
text={textShort[(id + 27) % textShort.length]}
108-
tooltipAsTitle={!withTooltips}
109-
/>
110-
</ItemActions>
111-
)}
112-
{(withActions || withContextMenu) && (
113-
<ItemActions>
114-
<Button onClick={() => alert("Button clicked")}>
115-
{textShort[(id + 77) % textShort.length]}
116-
</Button>
117-
{withContextMenu && <ContextMenu {...ContextMenuExample.args} />}
118-
</ItemActions>
119-
)}
120-
</ItemWrapper>
121-
);
122-
})}
123-
</OverviewItemList>
124-
</ApplicationContainer>
141+
{withContextMenuInActions && (
142+
<ContextMenu
143+
{...ContextMenuExample.args}
144+
tooltipAsTitle={!withTooltips}
145+
/>
146+
)}
147+
</ItemActions>
148+
)}
149+
</ItemWrapper>
150+
);
151+
})}
152+
</OverviewItemList>
153+
</ApplicationContainer>
154+
</div>
125155
);
126156
};

0 commit comments

Comments
 (0)