@@ -39,6 +39,96 @@ describe('Table.Expand', () => {
3939 expect ( rowRender ) . toHaveBeenLastCalledWith ( sampleData [ 0 ] , 0 , 1 , false ) ;
4040 } ) ;
4141
42+ it ( 'force renders expanded rows before expansion' , ( ) => {
43+ const rowRender = vi . fn ( record => < div > { record . name } expanded row</ div > ) ;
44+ const { container } = render (
45+ createTable ( {
46+ expandable : {
47+ expandedRowRender : rowRender ,
48+ forceRender : true ,
49+ } ,
50+ } ) ,
51+ ) ;
52+
53+ const expandedRows = container . querySelectorAll ( '.rc-table-expanded-row' ) ;
54+
55+ expect ( rowRender ) . toHaveBeenCalledTimes ( 2 ) ;
56+ expect ( rowRender ) . toHaveBeenNthCalledWith ( 1 , sampleData [ 0 ] , 0 , 1 , false ) ;
57+ expect ( rowRender ) . toHaveBeenNthCalledWith ( 2 , sampleData [ 1 ] , 1 , 1 , false ) ;
58+ expect ( expandedRows ) . toHaveLength ( 2 ) ;
59+ expect ( expandedRows [ 0 ] ) . toHaveStyle ( { display : 'none' } ) ;
60+ expect ( expandedRows [ 1 ] ) . toHaveStyle ( { display : 'none' } ) ;
61+
62+ fireEvent . click ( container . querySelector ( '.rc-table-row-expand-icon' ) ) ;
63+
64+ expect ( expandedRows [ 0 ] ) . not . toHaveStyle ( { display : 'none' } ) ;
65+ expect ( expandedRows [ 1 ] ) . toHaveStyle ( { display : 'none' } ) ;
66+
67+ fireEvent . click ( container . querySelector ( '.rc-table-row-expand-icon' ) ) ;
68+
69+ expect ( expandedRows [ 0 ] ) . toHaveStyle ( { display : 'none' } ) ;
70+ expect ( expandedRows [ 1 ] ) . toHaveStyle ( { display : 'none' } ) ;
71+ } ) ;
72+
73+ it ( 'keeps force-rendered expanded content mounted across expand and collapse' , ( ) => {
74+ const onMount = vi . fn ( ) ;
75+ const onUnmount = vi . fn ( ) ;
76+
77+ class StatefulContent extends React . Component {
78+ state = { count : 0 } ;
79+
80+ componentDidMount ( ) {
81+ onMount ( ) ;
82+ }
83+
84+ componentWillUnmount ( ) {
85+ onUnmount ( ) ;
86+ }
87+
88+ render ( ) {
89+ return (
90+ < button
91+ type = "button"
92+ className = "stateful-expanded-content"
93+ onClick = { ( ) => this . setState ( ( { count } ) => ( { count : count + 1 } ) ) }
94+ >
95+ { this . state . count }
96+ </ button >
97+ ) ;
98+ }
99+ }
100+
101+ const { container } = render (
102+ createTable ( {
103+ data : [ sampleData [ 0 ] ] ,
104+ expandable : {
105+ expandedRowRender : ( ) => < StatefulContent /> ,
106+ forceRender : true ,
107+ } ,
108+ } ) ,
109+ ) ;
110+
111+ const expandIcon = container . querySelector ( '.rc-table-row-expand-icon' ) ;
112+ const content = container . querySelector ( '.stateful-expanded-content' ) ;
113+
114+ expect ( onMount ) . toHaveBeenCalledTimes ( 1 ) ;
115+ expect ( onUnmount ) . not . toHaveBeenCalled ( ) ;
116+
117+ fireEvent . click ( expandIcon ) ;
118+ fireEvent . click ( content ) ;
119+ expect ( content ) . toHaveTextContent ( '1' ) ;
120+
121+ fireEvent . click ( expandIcon ) ;
122+ expect ( container . querySelector ( '.stateful-expanded-content' ) ) . toBe ( content ) ;
123+ expect ( onUnmount ) . not . toHaveBeenCalled ( ) ;
124+
125+ fireEvent . click ( expandIcon ) ;
126+ expect ( container . querySelector ( '.stateful-expanded-content' ) ) . toBe ( content ) ;
127+ expect ( content ) . toHaveTextContent ( '1' ) ;
128+ expect ( onMount ) . toHaveBeenCalledTimes ( 1 ) ;
129+ expect ( onUnmount ) . not . toHaveBeenCalled ( ) ;
130+ } ) ;
131+
42132 it ( 'renders tree row correctly' , ( ) => {
43133 const data = [
44134 {
0 commit comments