@@ -1159,67 +1159,75 @@ describe('diff algorithm for rrdom', () => {
1159
1159
} ) ;
1160
1160
1161
1161
it ( 'should maintain correct order when duplicate node is found causing nextSibling traversal desync' , ( ) => {
1162
- const oldList = [
1163
- { tagName : 'STYLE' , id : 1 } ,
1164
- { tagName : 'STYLE' , id : 2 } ,
1165
- { tagName : 'BASE' , id : 3 } ,
1166
- { tagName : 'META' , id : 4 } ,
1167
- { tagName : 'META' , id : 5 } ,
1168
- { tagName : 'META' , id : 6 } ,
1169
- { tagName : 'TITLE' , id : 7 } ,
1170
- { tagName : 'STYLE' , id : 8 } ,
1171
- { tagName : 'STYLE' , id : 9 } ,
1172
- { tagName : 'LINK' , id : 10 } ,
1173
- { tagName : 'STYLE' , id : 11 } ,
1174
- { tagName : 'LINK' , id : 12 } ,
1175
- { tagName : 'NOSCRIPT' , id : 13 } ,
1176
- ] ;
1177
-
1178
- // Duplicate STYLE#1 at index 1
1179
- const newList = [ ...oldList ] ;
1180
- newList . splice ( 1 , 0 , { tagName : 'STYLE' , id : 1 } ) ;
1181
-
1182
- const mirror = createMirror ( ) ;
1183
- const oldHead = createTree (
1184
- { tagName : 'head' , id : 0 , children : oldList as unknown as ElementType [ ] } ,
1185
- undefined ,
1186
- mirror ,
1187
- ) as Node ;
1188
- expect ( oldHead . childNodes . length ) . toBe ( oldList . length ) ;
1189
-
1190
- const rrdom = new RRDocument ( ) ;
1191
- const newHead = createTree (
1192
- { tagName : 'head' , id : 0 , children : newList as unknown as ElementType [ ] } ,
1193
- rrdom
1194
- ) as RRNode ;
1195
-
1196
- // Add test attributes to each node in newHead
1197
- Array . from ( newHead . childNodes ) . forEach ( ( node , index ) => {
1198
- if ( node instanceof RRElement ) {
1199
- node . setAttribute ( 'data-test-id' , `${ newList [ index ] . id } ` ) ;
1200
- node . setAttribute ( 'data-test-tag' , node . tagName ) ;
1201
- }
1202
- } ) ;
1203
-
1204
- const replayer : ReplayerHandler = {
1205
- mirror,
1206
- applyCanvas : ( ) => { } ,
1207
- applyInput : ( ) => { } ,
1208
- applyScroll : ( ) => { } ,
1209
- applyStyleSheetMutation : ( ) => { } ,
1210
- } ;
1211
-
1212
- // Run diff
1213
- diff ( oldHead , newHead , replayer ) ;
1214
-
1215
- // Extract final IDs from real DOM
1216
- const finalIds = Array . from ( oldHead . childNodes )
1217
- . filter ( ( n ) : n is Element => n . nodeType === Node . ELEMENT_NODE )
1218
- . map ( ( el ) => el . getAttribute ( 'data-test-id' ) || el . getAttribute ( 'id' ) ) ;
1219
-
1220
- // Assert the real DOM now matches the RR DOM list
1221
- expect ( finalIds ) . toEqual ( oldList . map ( n => String ( n . id ) ) ) ;
1162
+ const oldList = [
1163
+ { tagName : 'STYLE' , id : 1 } ,
1164
+ { tagName : 'STYLE' , id : 2 } ,
1165
+ { tagName : 'BASE' , id : 3 } ,
1166
+ { tagName : 'META' , id : 4 } ,
1167
+ { tagName : 'META' , id : 5 } ,
1168
+ { tagName : 'META' , id : 6 } ,
1169
+ { tagName : 'TITLE' , id : 7 } ,
1170
+ { tagName : 'STYLE' , id : 8 } ,
1171
+ { tagName : 'STYLE' , id : 9 } ,
1172
+ { tagName : 'LINK' , id : 10 } ,
1173
+ { tagName : 'STYLE' , id : 11 } ,
1174
+ { tagName : 'LINK' , id : 12 } ,
1175
+ { tagName : 'NOSCRIPT' , id : 13 } ,
1176
+ ] ;
1177
+
1178
+ // Duplicate STYLE#1 at index 1
1179
+ const newList = [ ...oldList ] ;
1180
+ newList . splice ( 1 , 0 , { tagName : 'STYLE' , id : 1 } ) ;
1181
+
1182
+ const mirror = createMirror ( ) ;
1183
+ const oldHead = createTree (
1184
+ {
1185
+ tagName : 'head' ,
1186
+ id : 0 ,
1187
+ children : oldList as unknown as ElementType [ ] ,
1188
+ } ,
1189
+ undefined ,
1190
+ mirror ,
1191
+ ) as Node ;
1192
+ expect ( oldHead . childNodes . length ) . toBe ( oldList . length ) ;
1193
+
1194
+ const rrdom = new RRDocument ( ) ;
1195
+ const newHead = createTree (
1196
+ {
1197
+ tagName : 'head' ,
1198
+ id : 0 ,
1199
+ children : newList as unknown as ElementType [ ] ,
1200
+ } ,
1201
+ rrdom ,
1202
+ ) as RRNode ;
1203
+
1204
+ // Add test attributes to each node in newHead
1205
+ Array . from ( newHead . childNodes ) . forEach ( ( node , index ) => {
1206
+ if ( node instanceof RRElement ) {
1207
+ node . setAttribute ( 'data-test-id' , `${ newList [ index ] . id } ` ) ;
1208
+ node . setAttribute ( 'data-test-tag' , node . tagName ) ;
1209
+ }
1222
1210
} ) ;
1211
+
1212
+ const replayer : ReplayerHandler = {
1213
+ mirror,
1214
+ applyCanvas : ( ) => { } ,
1215
+ applyInput : ( ) => { } ,
1216
+ applyScroll : ( ) => { } ,
1217
+ applyStyleSheetMutation : ( ) => { } ,
1218
+ } ;
1219
+
1220
+ // Run diff
1221
+ diff ( oldHead , newHead , replayer ) ;
1222
+
1223
+ // Extract final IDs from real DOM
1224
+ const finalIds = Array . from ( oldHead . childNodes )
1225
+ . filter ( ( n ) : n is Element => n . nodeType === Node . ELEMENT_NODE )
1226
+ . map ( ( el ) => el . getAttribute ( 'data-test-id' ) || el . getAttribute ( 'id' ) ) ;
1227
+
1228
+ // Assert the real DOM now matches the RR DOM list
1229
+ expect ( finalIds ) . toEqual ( oldList . map ( ( n ) => String ( n . id ) ) ) ;
1230
+ } ) ;
1223
1231
} ) ;
1224
1232
1225
1233
describe ( 'diff shadow dom' , ( ) => {
0 commit comments