@@ -39,7 +39,7 @@ describe('useResizable', () => {
3939
4040 it ( 'should initialize with the provided width' , ( ) => {
4141 const { result } = renderHook ( ( ) => useResizable ( 20 ) ) ;
42- expect ( result . current . width ) . toBe ( 20 ) ;
42+ expect ( result . current . size ) . toBe ( 20 ) ;
4343 } ) ;
4444
4545 it ( 'should handle right resize correctly' , ( ) => {
@@ -57,7 +57,7 @@ describe('useResizable', () => {
5757
5858 // Moving right should decrease width for right panel
5959 // Delta: 100px = 10% of window width
60- expect ( result . current . width ) . toBe ( 10 ) ; // 20 - 10
60+ expect ( result . current . size ) . toBe ( 10 ) ; // 20 - 10
6161 } ) ;
6262
6363 it ( 'should handle left resize correctly' , ( ) => {
@@ -75,7 +75,7 @@ describe('useResizable', () => {
7575
7676 // Moving right should increase width for left panel
7777 // Delta: 100px = 10% of window width
78- expect ( result . current . width ) . toBe ( 30 ) ; // 20 + 10
78+ expect ( result . current . size ) . toBe ( 30 ) ; // 20 + 10
7979 } ) ;
8080
8181 it ( 'should respect minimum width constraint' , ( ) => {
@@ -90,7 +90,7 @@ describe('useResizable', () => {
9090 fireEvent ( document , moveEvent ) ;
9191 } ) ;
9292
93- expect ( result . current . width ) . toBe ( 10 ) ; // Should not go below MIN_PANEL_WIDTH_PERCENT
93+ expect ( result . current . size ) . toBe ( 10 ) ; // Should not go below MIN_PANEL_WIDTH_PERCENT
9494 } ) ;
9595
9696 it ( 'should respect maximum width constraint' , ( ) => {
@@ -106,7 +106,7 @@ describe('useResizable', () => {
106106 } ) ;
107107
108108 // Max width should be (1000 - 25) / 1000 * 100 = 97.5%
109- expect ( result . current . width ) . toBeLessThanOrEqual ( 97.5 ) ;
109+ expect ( result . current . size ) . toBeLessThanOrEqual ( 97.5 ) ;
110110 } ) ;
111111
112112 it ( 'should cleanup event listeners on unmount' , ( ) => {
@@ -130,6 +130,103 @@ describe('useResizable', () => {
130130 expect . any ( Function ) ,
131131 ) ;
132132 } ) ;
133+
134+ describe ( 'vertical resizing' , ( ) => {
135+ const originalInnerHeight = window . innerHeight ;
136+ const originalOffsetHeight = document . body . offsetHeight ;
137+
138+ beforeEach ( ( ) => {
139+ Object . defineProperty ( window , 'innerHeight' , {
140+ writable : true ,
141+ configurable : true ,
142+ value : 1000 ,
143+ } ) ;
144+
145+ Object . defineProperty ( document . body , 'offsetHeight' , {
146+ writable : true ,
147+ configurable : true ,
148+ value : 1000 ,
149+ } ) ;
150+ } ) ;
151+
152+ afterEach ( ( ) => {
153+ Object . defineProperty ( window , 'innerHeight' , {
154+ writable : true ,
155+ configurable : true ,
156+ value : originalInnerHeight ,
157+ } ) ;
158+ Object . defineProperty ( document . body , 'offsetHeight' , {
159+ writable : true ,
160+ configurable : true ,
161+ value : originalOffsetHeight ,
162+ } ) ;
163+ } ) ;
164+
165+ it ( 'should handle bottom resize correctly' , ( ) => {
166+ const { result } = renderHook ( ( ) => useResizable ( 20 , 'bottom' ) ) ;
167+
168+ act ( ( ) => {
169+ const startEvent = new MouseEvent ( 'mousedown' , { clientY : 500 } ) ;
170+ result . current . startResize ( startEvent as any ) ;
171+
172+ // Move mouse down by 100px
173+ const moveEvent = new MouseEvent ( 'mousemove' , { clientY : 600 } ) ;
174+ fireEvent ( document , moveEvent ) ;
175+ } ) ;
176+
177+ // Moving down should decrease height for bottom panel
178+ // Delta: 100px = 10% of window height
179+ expect ( result . current . size ) . toBe ( 30 ) ; // 20 + 10
180+ } ) ;
181+
182+ it ( 'should handle top resize correctly' , ( ) => {
183+ const { result } = renderHook ( ( ) => useResizable ( 20 , 'top' ) ) ;
184+
185+ act ( ( ) => {
186+ const startEvent = new MouseEvent ( 'mousedown' , { clientY : 500 } ) ;
187+ result . current . startResize ( startEvent as any ) ;
188+
189+ // Move mouse down by 100px
190+ const moveEvent = new MouseEvent ( 'mousemove' , { clientY : 600 } ) ;
191+ fireEvent ( document , moveEvent ) ;
192+ } ) ;
193+
194+ // Moving down should increase height for top panel
195+ // Delta: 100px = 10% of window height
196+ expect ( result . current . size ) . toBe ( 10 ) ; // 20 - 10
197+ } ) ;
198+
199+ it ( 'should respect minimum height constraint (bottom)' , ( ) => {
200+ const { result } = renderHook ( ( ) => useResizable ( 20 , 'bottom' ) ) ;
201+
202+ act ( ( ) => {
203+ const startEvent = new MouseEvent ( 'mousedown' , { clientY : 500 } ) ;
204+ result . current . startResize ( startEvent as any ) ;
205+
206+ // Try to resize smaller than minimum (10%)
207+ const moveEvent = new MouseEvent ( 'mousemove' , { clientY : 800 } ) ;
208+ fireEvent ( document , moveEvent ) ;
209+ } ) ;
210+
211+ expect ( result . current . size ) . toBe ( 50 ) ; // Should not go below MIN_PANEL_WIDTH_PERCENT
212+ } ) ;
213+
214+ it ( 'should respect maximum height constraint (top)' , ( ) => {
215+ const { result } = renderHook ( ( ) => useResizable ( 20 , 'top' ) ) ;
216+
217+ act ( ( ) => {
218+ const startEvent = new MouseEvent ( 'mousedown' , { clientY : 500 } ) ;
219+ result . current . startResize ( startEvent as any ) ;
220+
221+ // Try to resize larger than maximum
222+ const moveEvent = new MouseEvent ( 'mousemove' , { clientY : 1000 } ) ;
223+ fireEvent ( document , moveEvent ) ;
224+ } ) ;
225+
226+ // Max height should be (1000 - 25) / 1000 * 100 = 97.5%
227+ expect ( result . current . size ) . toBeLessThanOrEqual ( 97.5 ) ;
228+ } ) ;
229+ } ) ;
133230} ) ;
134231
135232export { } ;
0 commit comments