@@ -125,6 +125,120 @@ describe('<Table />', () => {
125125 expect ( queryByText ( 'Alice' ) ) . not . toBeInTheDocument ( ) ;
126126 } ) ;
127127
128+ it ( 'should preserve uncontrolled current page when pagination object rerenders without current' , ( ) => {
129+ const RerenderingTable = ( ) => {
130+ const [ version , setVersion ] = React . useState ( 1 ) ;
131+ return (
132+ < >
133+ < Table
134+ columns = { columns }
135+ dataSource = { [
136+ ...dataSource ,
137+ { key : '4' , name : 'David' , age : 22 } ,
138+ { key : '5' , name : 'Eve' , age : 28 } ,
139+ ] }
140+ pagination = { { pageSize : 2 , showQuickJumper : version > 1 } }
141+ />
142+ < button onClick = { ( ) => setVersion ( ( current ) => current + 1 ) } > rerender</ button >
143+ </ >
144+ ) ;
145+ } ;
146+
147+ const { getByText, queryByText } = render ( < RerenderingTable /> ) ;
148+ fireEvent . click ( getByText ( '2' ) ) ;
149+
150+ expect ( getByText ( 'Charlie' ) ) . toBeInTheDocument ( ) ;
151+ expect ( queryByText ( 'Alice' ) ) . not . toBeInTheDocument ( ) ;
152+
153+ fireEvent . click ( getByText ( 'rerender' ) ) ;
154+
155+ expect ( getByText ( 'Charlie' ) ) . toBeInTheDocument ( ) ;
156+ expect ( queryByText ( 'Alice' ) ) . not . toBeInTheDocument ( ) ;
157+ } ) ;
158+
159+ it ( 'should preserve active sort when columns rerender without changing the chosen sort' , ( ) => {
160+ const SortingTable = ( ) => {
161+ const [ wide , setWide ] = React . useState ( false ) ;
162+ return (
163+ < >
164+ < Table
165+ columns = { [
166+ { title : 'Name' , dataIndex : 'name' , key : 'name' , width : wide ? 180 : 160 } ,
167+ { title : 'Age' , dataIndex : 'age' , key : 'age' , sorter : ( a : any , b : any ) => a . age - b . age } ,
168+ ] }
169+ dataSource = { dataSource }
170+ pagination = { false }
171+ />
172+ < button onClick = { ( ) => setWide ( ( current ) => ! current ) } > rerender</ button >
173+ </ >
174+ ) ;
175+ } ;
176+
177+ const { container, getByText } = render ( < SortingTable /> ) ;
178+ const ageHeader = container . querySelector ( '.ty-table__cell_sortable' ) ;
179+ fireEvent . click ( ageHeader ! ) ;
180+
181+ let rows = container . querySelectorAll ( '.ty-table__tbody .ty-table__row' ) ;
182+ expect ( rows [ 0 ] ) . toHaveTextContent ( / B o b / ) ;
183+
184+ fireEvent . click ( getByText ( 'rerender' ) ) ;
185+
186+ rows = container . querySelectorAll ( '.ty-table__tbody .ty-table__row' ) ;
187+ expect ( rows [ 0 ] ) . toHaveTextContent ( / B o b / ) ;
188+ } ) ;
189+
190+ it ( 'should prune uncontrolled selected keys when the data source removes those rows' , ( ) => {
191+ const DynamicSelectionTable = ( ) => {
192+ const [ rows , setRows ] = React . useState ( dataSource ) ;
193+ return (
194+ < >
195+ < Table
196+ columns = { columns }
197+ dataSource = { rows }
198+ pagination = { false }
199+ rowSelection = { { } }
200+ />
201+ < button onClick = { ( ) => setRows ( dataSource . slice ( 1 ) ) } > shrink</ button >
202+ </ >
203+ ) ;
204+ } ;
205+
206+ const { container, getByText } = render ( < DynamicSelectionTable /> ) ;
207+ const checkboxes = container . querySelectorAll ( 'input[type="checkbox"]' ) ;
208+ fireEvent . click ( checkboxes [ 1 ] ) ;
209+ expect ( checkboxes [ 1 ] ) . toBeChecked ( ) ;
210+
211+ fireEvent . click ( getByText ( 'shrink' ) ) ;
212+
213+ const nextCheckboxes = container . querySelectorAll ( 'input[type="checkbox"]' ) ;
214+ expect ( nextCheckboxes [ 1 ] ) . not . toBeChecked ( ) ;
215+ } ) ;
216+
217+ it ( 'should clamp uncontrolled current page when the data source shrinks' , ( ) => {
218+ const DynamicPaginationTable = ( ) => {
219+ const [ rows , setRows ] = React . useState ( [
220+ ...dataSource ,
221+ { key : '4' , name : 'David' , age : 22 } ,
222+ { key : '5' , name : 'Eve' , age : 28 } ,
223+ ] ) ;
224+ return (
225+ < >
226+ < Table columns = { columns } dataSource = { rows } pagination = { { pageSize : 2 } } />
227+ < button onClick = { ( ) => setRows ( dataSource . slice ( 0 , 2 ) ) } > shrink</ button >
228+ </ >
229+ ) ;
230+ } ;
231+
232+ const { getByText, queryByText } = render ( < DynamicPaginationTable /> ) ;
233+ fireEvent . click ( getByText ( '3' ) ) ;
234+ expect ( getByText ( 'Eve' ) ) . toBeInTheDocument ( ) ;
235+
236+ fireEvent . click ( getByText ( 'shrink' ) ) ;
237+
238+ expect ( getByText ( 'Alice' ) ) . toBeInTheDocument ( ) ;
239+ expect ( queryByText ( 'Eve' ) ) . not . toBeInTheDocument ( ) ;
240+ } ) ;
241+
128242 it ( 'should show loading state' , ( ) => {
129243 const { getByText } = render ( < Table columns = { columns } dataSource = { dataSource } loading /> ) ;
130244 expect ( getByText ( 'Loading...' ) ) . toBeInTheDocument ( ) ;
0 commit comments