Skip to content

Commit 71afd18

Browse files
SidnioulzSidnioulz
committed
Improve Drag stories
1 parent afc7a55 commit 71afd18

File tree

1 file changed

+75
-97
lines changed

1 file changed

+75
-97
lines changed

‎code/core/src/manager/components/layout/Drag.stories.tsx‎

Lines changed: 75 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,15 @@ const meta = {
2121
decorators: [
2222
(storyFn) => (
2323
// Drag uses `position: absolute` so it needs a positioned parent.
24-
<div style={{ position: 'relative', width: 200, height: 200, border: '1px dashed #aaa' }}>
24+
<div
25+
style={{
26+
position: 'relative',
27+
width: 200,
28+
height: 200,
29+
border: '2px dashed #aaa',
30+
background: 'thistle',
31+
}}
32+
>
2533
{storyFn()}
2634
</div>
2735
),
@@ -40,6 +48,20 @@ export const PositionLeft: Story = {
4048
'aria-valuenow': 200,
4149
'aria-valuemax': 500,
4250
},
51+
play: async ({ canvas, step }) => {
52+
const handle = canvas.getByRole('separator');
53+
54+
await step('Has aria-orientation="vertical" for left position', async () => {
55+
expect(handle).toHaveAttribute('aria-orientation', 'vertical');
56+
});
57+
58+
await step('Shows on the right of the parent element', async () => {
59+
handle.focus();
60+
const parentRect = handle.parentElement?.getBoundingClientRect();
61+
const handleRect = handle.getBoundingClientRect();
62+
expect(handleRect.left).toBeGreaterThan(parentRect?.left ?? 0);
63+
});
64+
},
4365
};
4466

4567
export const PositionRight: Story = {
@@ -50,6 +72,20 @@ export const PositionRight: Story = {
5072
'aria-valuenow': 300,
5173
'aria-valuemax': 600,
5274
},
75+
play: async ({ canvas, step }) => {
76+
const handle = canvas.getByRole('separator');
77+
78+
await step('Has aria-orientation="vertical" for right position', async () => {
79+
expect(handle).toHaveAttribute('aria-orientation', 'vertical');
80+
});
81+
82+
await step('Shows on the left of the parent element', async () => {
83+
handle.focus();
84+
const parentRect = handle.parentElement?.getBoundingClientRect();
85+
const handleRect = handle.getBoundingClientRect();
86+
expect(handleRect.left).toBeLessThan(parentRect?.left ?? 0);
87+
});
88+
},
5389
};
5490

5591
export const PositionBottom: Story = {
@@ -60,6 +96,20 @@ export const PositionBottom: Story = {
6096
'aria-valuenow': 150,
6197
'aria-valuemax': 400,
6298
},
99+
play: async ({ canvas, step }) => {
100+
const handle = canvas.getByRole('separator');
101+
102+
await step('Has aria-orientation="horizontal" for bottom position', async () => {
103+
expect(handle).toHaveAttribute('aria-orientation', 'horizontal');
104+
});
105+
106+
await step('Shows on the top of the parent element', async () => {
107+
handle.focus();
108+
const parentRect = handle.parentElement?.getBoundingClientRect();
109+
const handleRect = handle.getBoundingClientRect();
110+
expect(handleRect.top).toBeLessThan(parentRect?.top ?? 0);
111+
});
112+
},
63113
};
64114

65115
export const PositionTop: Story = {
@@ -70,79 +120,19 @@ export const PositionTop: Story = {
70120
'aria-valuenow': 150,
71121
'aria-valuemax': 400,
72122
},
73-
};
74-
75-
export const OverlappingLeft: Story = {
76-
name: 'Overlapping: left',
77-
args: {
78-
position: 'left',
79-
overlapping: true,
80-
'aria-label': 'Sidebar resize handle',
81-
'aria-valuenow': 200,
82-
'aria-valuemax': 500,
83-
},
84-
};
85-
86-
export const NonOverlappingLeft: Story = {
87-
name: 'Non-overlapping: left',
88-
args: {
89-
position: 'left',
90-
overlapping: false,
91-
'aria-label': 'Sidebar resize handle',
92-
'aria-valuenow': 200,
93-
'aria-valuemax': 500,
94-
},
95-
};
96-
97-
export const OverlappingBottom: Story = {
98-
name: 'Overlapping: bottom',
99-
args: {
100-
position: 'bottom',
101-
overlapping: true,
102-
'aria-label': 'Bottom panel resize handle',
103-
'aria-valuenow': 150,
104-
'aria-valuemax': 400,
105-
},
106-
};
107-
108-
export const NonOverlappingBottom: Story = {
109-
name: 'Non-overlapping: bottom',
110-
args: {
111-
position: 'bottom',
112-
overlapping: false,
113-
'aria-label': 'Bottom panel resize handle',
114-
'aria-valuenow': 150,
115-
'aria-valuemax': 400,
116-
},
117-
};
118-
119-
export const ValueAtMinimum: Story = {
120-
name: 'Value: at minimum (collapsed)',
121-
args: {
122-
position: 'left',
123-
'aria-label': 'Sidebar resize handle',
124-
'aria-valuenow': 0,
125-
'aria-valuemax': 500,
126-
},
127-
};
123+
play: async ({ canvas, step }) => {
124+
const handle = canvas.getByRole('separator');
128125

129-
export const ValueAtMidpoint: Story = {
130-
name: 'Value: at midpoint',
131-
args: {
132-
position: 'left',
133-
'aria-label': 'Sidebar resize handle',
134-
'aria-valuenow': 250,
135-
'aria-valuemax': 500,
136-
},
137-
};
126+
await step('Has aria-orientation="horizontal" for top position', async () => {
127+
expect(handle).toHaveAttribute('aria-orientation', 'horizontal');
128+
});
138129

139-
export const ValueAtMaximum: Story = {
140-
name: 'Value: at maximum',
141-
args: {
142-
position: 'left',
143-
'aria-label': 'Sidebar resize handle',
144-
'aria-valuenow': 500,
145-
'aria-valuemax': 500,
130+
await step('Shows on the bottom of the parent element', async () => {
131+
handle.focus();
132+
const parentRect = handle.parentElement?.getBoundingClientRect();
133+
const handleRect = handle.getBoundingClientRect();
134+
expect(handleRect.top).toBeGreaterThan(parentRect?.top ?? 0);
135+
});
146136
},
147137
};
148138

@@ -154,11 +144,9 @@ export const AriaRole: Story = {
154144
'aria-valuenow': 240,
155145
'aria-valuemax': 480,
156146
},
157-
play: async ({ canvasElement, step }) => {
158-
const canvas = within(canvasElement);
159-
const handle = canvas.getByRole('separator');
160-
147+
play: async ({ canvas, step }) => {
161148
await step('Has role="separator"', async () => {
149+
const handle = canvas.getByRole('separator');
162150
expect(handle).toBeInTheDocument();
163151
});
164152
},
@@ -172,11 +160,9 @@ export const AriaOrientationVertical: Story = {
172160
'aria-valuenow': 240,
173161
'aria-valuemax': 480,
174162
},
175-
play: async ({ canvasElement, step }) => {
176-
const canvas = within(canvasElement);
177-
const handle = canvas.getByRole('separator');
178-
163+
play: async ({ canvas, step }) => {
179164
await step('Has aria-orientation="vertical" for left position', async () => {
165+
const handle = canvas.getByRole('separator');
180166
expect(handle).toHaveAttribute('aria-orientation', 'vertical');
181167
});
182168
},
@@ -190,11 +176,9 @@ export const AriaOrientationHorizontal: Story = {
190176
'aria-valuenow': 150,
191177
'aria-valuemax': 400,
192178
},
193-
play: async ({ canvasElement, step }) => {
194-
const canvas = within(canvasElement);
195-
const handle = canvas.getByRole('separator');
196-
179+
play: async ({ canvas, step }) => {
197180
await step('Has aria-orientation="horizontal" for bottom position', async () => {
181+
const handle = canvas.getByRole('separator');
198182
expect(handle).toHaveAttribute('aria-orientation', 'horizontal');
199183
});
200184
},
@@ -208,11 +192,9 @@ export const AriaLabel: Story = {
208192
'aria-valuenow': 150,
209193
'aria-valuemax': 400,
210194
},
211-
play: async ({ canvasElement, step }) => {
212-
const canvas = within(canvasElement);
213-
const handle = canvas.getByRole('separator');
214-
195+
play: async ({ canvas, step }) => {
215196
await step('Has correct aria-label', async () => {
197+
const handle = canvas.getByRole('separator');
216198
expect(handle).toHaveAttribute('aria-label', 'Specific resize handle label');
217199
});
218200
},
@@ -226,11 +208,9 @@ export const AriaValue: Story = {
226208
'aria-valuenow': 150,
227209
'aria-valuemax': 400,
228210
},
229-
play: async ({ canvasElement, step }) => {
230-
const canvas = within(canvasElement);
231-
const handle = canvas.getByRole('separator');
232-
211+
play: async ({ canvas, step }) => {
233212
await step('Has correct aria-value* attributes', async () => {
213+
const handle = canvas.getByRole('separator');
234214
expect(handle).toHaveAttribute('aria-valuemin', '0');
235215
expect(handle).toHaveAttribute('aria-valuenow', '150');
236216
expect(handle).toHaveAttribute('aria-valuemax', '400');
@@ -246,8 +226,7 @@ export const FocusTooltipVertical: Story = {
246226
'aria-valuenow': 200,
247227
'aria-valuemax': 500,
248228
},
249-
play: async ({ canvasElement, step }) => {
250-
const canvas = within(canvasElement);
229+
play: async ({ canvas, step }) => {
251230
const handle = canvas.getByRole('separator');
252231

253232
await step('Tab onto the handle', async () => {
@@ -256,7 +235,7 @@ export const FocusTooltipVertical: Story = {
256235
});
257236

258237
await step('Tooltip with ← → hint is visible', async () => {
259-
// The tooltip is rendered in a portal outside canvasElement.
238+
// The tooltip is rendered in a portal outside canvas.
260239
const tooltip = await within(document.body).findByText('← → to resize');
261240
expect(tooltip).toBeInTheDocument();
262241
});
@@ -279,8 +258,7 @@ export const FocusTooltipHorizontal: Story = {
279258
'aria-valuenow': 150,
280259
'aria-valuemax': 400,
281260
},
282-
play: async ({ canvasElement, step }) => {
283-
const canvas = within(canvasElement);
261+
play: async ({ canvas, step }) => {
284262
const handle = canvas.getByRole('separator');
285263

286264
await step('Tab onto the handle', async () => {

0 commit comments

Comments
 (0)