Skip to content

Commit 46b7091

Browse files
Lukas742Lukas742
committed
add test
1 parent 7c953c0 commit 46b7091

File tree

2 files changed

+90
-47
lines changed

2 files changed

+90
-47
lines changed

‎packages/main/src/components/SplitterLayout/SplitterLayout.cy.tsx‎

Lines changed: 85 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from 'react';
2-
import { FlexBox, SplitterLayoutPropTypes, Text } from '../..';
3-
import { Button, Label, SplitterElement, SplitterLayout } from '../..';
2+
import type { SplitterLayoutPropTypes } from '../..';
3+
import { FlexBox, Text, Button, Label, SplitterElement, SplitterLayout } from '../..';
44
import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
55

66
function TestComp({ vertical, dir }: { vertical: SplitterLayoutPropTypes['vertical']; dir: string }) {
@@ -130,72 +130,130 @@ describe('SplitterLayout', () => {
130130
});
131131

132132
[true, false].forEach((vertical) => {
133-
it.only(`controlled width (${vertical ? 'vertical' : 'horizontal'})`, () => {
133+
it(`controlled width (${vertical ? 'vertical' : 'horizontal'})`, () => {
134+
function getMouseMoveArgs(amount: number): [number, number] {
135+
return vertical ? [0, amount] : [amount, 0];
136+
}
134137
const resize = cy.spy().as('resize');
135138
const TestComp = () => {
136139
const [size0, setSize0] = useState('200px');
137-
const [size1, setSize1] = useState('200px');
138-
const [size2, setSize2] = useState('200px');
140+
const [size1, setSize1] = useState(200);
141+
const [size2, setSize2] = useState('auto');
139142
const [size3, setSize3] = useState('200px');
140143
const setter = [setSize0, setSize1, setSize2, setSize3];
141144
return (
142145
<>
143146
<SplitterLayout
144147
vertical={vertical}
145-
style={{ height: '600px' }}
148+
style={{ height: '900px', width: '900px', backgroundColor: 'black' }}
146149
onResize={(e) => {
147150
resize(e);
148151
e.areas.forEach((item) => {
149-
setter[Number(item.area.dataset.index)](item.size + 'px');
152+
if (item.area.dataset.index === '1') {
153+
setter[Number(item.area.dataset.index)](item.size);
154+
} else {
155+
//@ts-expect-error: supported
156+
setter[Number(item.area.dataset.index)](item.size + 'px');
157+
}
150158
});
151159
}}
152160
>
153-
<SplitterElement size={size0} data-index={0}>
161+
<SplitterElement size={size0} data-index={0} style={{ backgroundColor: 'lightcoral' }}>
154162
<FlexBox style={{ height: '100%', width: '100%' }} alignItems="Center" justifyContent="Center">
155163
<Text>Content 1</Text>
156164
</FlexBox>
157165
</SplitterElement>
158-
<SplitterElement size={size1} data-index={1}>
166+
<SplitterElement size={size1} data-index={1} style={{ backgroundColor: 'lightblue' }}>
159167
<FlexBox style={{ height: '100%', width: '100%' }} alignItems="Center" justifyContent="Center">
160-
<Text style={{ whiteSpace: 'pre-line' }}>{`Content 2
161-
with
162-
multi
163-
lines
164-
`}</Text>
168+
<Text style={{ whiteSpace: 'pre-line' }}>{`Content 2
169+
with
170+
multi
171+
lines`}</Text>
165172
</FlexBox>
166173
</SplitterElement>
167-
<SplitterElement size={'auto'} data-index={2}>
174+
<SplitterElement size={'auto'} data-index={2} style={{ backgroundColor: 'lightgreen' }}>
168175
<FlexBox style={{ height: '100%', width: '100%' }} alignItems="Center" justifyContent="Center">
169176
<Text>
170177
Content 3 with long text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
171178
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
172179
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
173-
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
174-
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
175-
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
176-
Lorem ipsum dolor sit amet."
180+
Lorem ipsum dolor sit amet.
177181
</Text>
178182
</FlexBox>
179183
</SplitterElement>
180-
<SplitterElement data-index={3} size={size3}>
184+
<SplitterElement size={size3} data-index={3} style={{ backgroundColor: 'lightgoldenrodyellow' }}>
181185
<FlexBox style={{ height: '100%', width: '100%' }} alignItems="Center" justifyContent="Center">
182186
<Text>Content 4</Text>
183187
</FlexBox>
184188
</SplitterElement>
185189
</SplitterLayout>
190+
<span data-testid="0">{size0}</span>
191+
<br />
192+
<span data-testid="1">{size1}</span>
193+
<br />
194+
<span data-testid="2">{size2}</span>
195+
<br />
196+
<span data-testid="3">{size3}</span>
186197
</>
187198
);
188199
};
189200

190201
cy.mount(<TestComp />);
191202

192-
cy.get('[data-index="0"]').as('se0');
193-
cy.get('[data-index="1"]').as('se1');
194-
cy.get('[data-index="2"]').as('se2');
195-
cy.get('[data-index="3"]').as('se3');
196-
cy.findAllByRole('separator').each(($splitter, index) => {
197-
cy.wrap($splitter).as(`splitter${index}`);
198-
});
203+
cy.get('@resize').should('not.have.been.called');
204+
cy.findAllByRole('separator')
205+
.eq(0)
206+
.realMouseDown({ position: 'center' })
207+
.realMouseMove(...getMouseMoveArgs(-100), {
208+
position: 'center',
209+
scrollBehavior: false,
210+
})
211+
.realMouseUp({ position: 'center' });
212+
213+
cy.findByTestId('0')
214+
.invoke('text')
215+
.then((txt) => parseInt(txt, 10))
216+
.should('be.within', 99, 101);
217+
cy.findByTestId('1')
218+
.invoke('text')
219+
.then((txt) => parseInt(txt, 10))
220+
.should('be.within', 299, 301);
221+
cy.findByTestId('2').should('have.text', 'auto');
222+
cy.findByTestId('3').invoke('text').should('equal', '200px');
223+
224+
cy.findAllByRole('separator').eq(0).realMouseDown({ position: 'center' });
225+
// drag across bounding box
226+
cy.get('body')
227+
.realMouseMove(...getMouseMoveArgs(300), {
228+
position: 'center',
229+
scrollBehavior: false,
230+
})
231+
.realMouseUp({ position: 'center' });
232+
233+
cy.wait(50);
234+
cy.findByTestId('0')
235+
.invoke('text')
236+
.then((txt) => parseInt(txt, 10))
237+
.should('be.within', 383, 385);
238+
cy.findByTestId('1')
239+
.invoke('text')
240+
.then((txt) => parseInt(txt, 10))
241+
.should('be.within', 15, 17);
242+
cy.findByTestId('2').should('have.text', 'auto');
243+
cy.findByTestId('3').invoke('text').should('equal', '200px');
244+
245+
cy.findAllByRole('separator').eq(2).click().realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowDown');
246+
247+
cy.findByTestId('0')
248+
.invoke('text')
249+
.then((txt) => parseInt(txt, 10))
250+
.should('be.within', 383, 385);
251+
cy.findByTestId('1')
252+
.invoke('text')
253+
.then((txt) => parseInt(txt, 10))
254+
.should('be.within', 15, 17);
255+
cy.findByTestId('2').should('have.text', '360px');
256+
cy.findByTestId('3').should('have.text', '140px');
199257
});
200258
});
201259

‎packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,29 +30,14 @@ export const Default: Story = {
3030
},
3131
},
3232
render(args) {
33-
const [size0, setSize0] = useState('200px');
34-
const [size1, setSize1] = useState('200px');
35-
const [size2, setSize2] = useState('200px');
36-
const [size3, setSize3] = useState('200px');
37-
const setter = [setSize0, setSize1, setSize2, setSize3];
3833
return (
39-
<SplitterLayout
40-
{...args}
41-
onResize={(e) => {
42-
e.areas.forEach((item) => {
43-
console.log('Area', item.area.dataset.index, 'resized:', item.size + 'px');
44-
setter[Number(item.area.dataset.index)](item.size + 'px');
45-
});
46-
// setSize0(e.areas[0].size + 'px');
47-
// setSize1(e.areas[1].size + 'px');
48-
}}
49-
>
50-
<SplitterElement size={size0} data-index={0}>
34+
<SplitterLayout {...args}>
35+
<SplitterElement>
5136
<FlexBox style={{ height: '100%', width: '100%' }} alignItems="Center" justifyContent="Center">
5237
<Text>Content 1</Text>
5338
</FlexBox>
5439
</SplitterElement>
55-
<SplitterElement size={size1} data-index={1}>
40+
<SplitterElement>
5641
<FlexBox style={{ height: '100%', width: '100%' }} alignItems="Center" justifyContent="Center">
5742
<Text style={{ whiteSpace: 'pre-line' }}>{`Content 2
5843
with
@@ -61,7 +46,7 @@ export const Default: Story = {
6146
`}</Text>
6247
</FlexBox>
6348
</SplitterElement>
64-
<SplitterElement size={'auto'} data-index={2}>
49+
<SplitterElement>
6550
<FlexBox style={{ height: '100%', width: '100%' }} alignItems="Center" justifyContent="Center">
6651
<Text>
6752
Content 3 with long text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
@@ -73,7 +58,7 @@ export const Default: Story = {
7358
</Text>
7459
</FlexBox>
7560
</SplitterElement>
76-
<SplitterElement data-index={3} size={size3}>
61+
<SplitterElement>
7762
<FlexBox style={{ height: '100%', width: '100%' }} alignItems="Center" justifyContent="Center">
7863
<Text>Content 4</Text>
7964
</FlexBox>

0 commit comments

Comments
 (0)