@@ -1223,281 +1223,6 @@ public async Task ShowToolbar_Ok()
12231223 Assert . Contains ( "test-toolbar-template" , cut . Markup ) ;
12241224 }
12251225
1226- #region DraggableTest
1227-
1228- [ Fact ]
1229- public async Task Draggable_Basic_MoveAsLastChild ( )
1230- {
1231- // Arrange
1232- var items = new List < TreeFoo >
1233- {
1234- new ( ) { Text = "Root1" , Id = "1" } ,
1235- new ( ) { Text = "Child1" , Id = "2" , ParentId = "1" } ,
1236- new ( ) { Text = "Child2" , Id = "3" , ParentId = "1" } ,
1237- new ( ) { Text = "Root2" , Id = "4" } ,
1238- new ( ) { Text = "Child3" , Id = "5" , ParentId = "4" }
1239- } ;
1240- var nodes = TreeFoo . CascadingTree ( items ) ;
1241- nodes [ 0 ] . IsExpand = true ;
1242- var cut = Context . RenderComponent < TreeView < TreeFoo > > ( pb =>
1243- {
1244- pb . Add ( a => a . Items , nodes ) ;
1245- pb . Add ( a => a . ItemDraggable , true ) ;
1246- } ) ;
1247-
1248- var rows = cut . FindComponents < TreeViewRow < TreeFoo > > ( ) ;
1249- var dragSource = rows [ 1 ] ; // Child1
1250- var dropTarget = rows [ 3 ] ; // Root2
1251-
1252- var sourceElement = dragSource . Find ( ".tree-node" ) ;
1253- // 拖动到节点中间的区域
1254- var targetDropZone = dropTarget . Find ( ".tree-drop-child-inside" ) ;
1255-
1256- await sourceElement . TriggerEventAsync ( "ondragstart" , new DragEventArgs ( ) ) ;
1257- await targetDropZone . TriggerEventAsync ( "ondragenter" , new DragEventArgs ( ) ) ;
1258- await targetDropZone . TriggerEventAsync ( "ondrop" , new DragEventArgs ( ) ) ;
1259-
1260- // Assert
1261- Assert . Single ( nodes [ 0 ] . Items ) ; // Root1 只剩下 Child2
1262- Assert . Equal ( 2 , nodes [ 1 ] . Items . Count ) ; // Root2 有 Child3 和 Child1
1263- Assert . Equal ( "Child1" , nodes [ 1 ] . Items [ 1 ] . Text ) ; // Child1 成为 Root2 的最后一个子节点
1264- Assert . Equal ( nodes [ 1 ] , nodes [ 1 ] . Items [ 1 ] . Parent ) ; // Child1 的父节点是 Root2
1265- }
1266-
1267- [ Fact ]
1268- public async Task Draggable_Basic_MoveAsFirstChild ( )
1269- {
1270- // Arrange
1271- var items = new List < TreeFoo >
1272- {
1273- new ( ) { Text = "Root1" , Id = "1" } ,
1274- new ( ) { Text = "Child1" , Id = "2" , ParentId = "1" } ,
1275- new ( ) { Text = "Child2" , Id = "3" , ParentId = "1" } ,
1276- new ( ) { Text = "Root2" , Id = "4" } ,
1277- new ( ) { Text = "Child3" , Id = "5" , ParentId = "4" }
1278- } ;
1279- var nodes = TreeFoo . CascadingTree ( items ) ;
1280- nodes [ 0 ] . IsExpand = true ;
1281- // 展开情况才能作为第一个子节点进行拖入
1282- nodes [ 1 ] . IsExpand = true ;
1283- var cut = Context . RenderComponent < TreeView < TreeFoo > > ( pb =>
1284- {
1285- pb . Add ( a => a . Items , nodes ) ;
1286- pb . Add ( a => a . ItemDraggable , true ) ;
1287- } ) ;
1288-
1289- var rows = cut . FindComponents < TreeViewRow < TreeFoo > > ( ) ;
1290- var dragSource = rows [ 1 ] ; // Child1
1291- var dragTarget = rows [ 3 ] ; // Root2
1292-
1293- var sourceElement = dragSource . Find ( ".tree-node" ) ;
1294- // 拖动到节点靠下的区域
1295- var targetDropZone = dragTarget . Find ( ".tree-drop-child-below" ) ;
1296-
1297- await sourceElement . TriggerEventAsync ( "ondragstart" , new DragEventArgs ( ) ) ;
1298- await targetDropZone . TriggerEventAsync ( "ondragenter" , new DragEventArgs ( ) ) ;
1299- await targetDropZone . TriggerEventAsync ( "ondrop" , new DragEventArgs ( ) ) ;
1300-
1301- // Assert
1302- Assert . Single ( nodes [ 0 ] . Items ) ; // Root1 只剩下 Child2
1303- Assert . Equal ( 2 , nodes [ 1 ] . Items . Count ) ; // Root2 有 Child1 和 Child3
1304- Assert . Equal ( "Child1" , nodes [ 1 ] . Items [ 0 ] . Text ) ; // Child1 成为 Root2 的第一个子节点
1305- Assert . Equal ( nodes [ 1 ] , nodes [ 1 ] . Items [ 0 ] . Parent ) ; // Child1 的父节点是 Root2
1306- }
1307-
1308- [ Fact ]
1309- public async Task Draggable_Basic_MoveAsSiblingBelow ( )
1310- {
1311- // Arrange
1312- var items = new List < TreeFoo >
1313- {
1314- new ( ) { Text = "Root1" , Id = "1" } ,
1315- new ( ) { Text = "Child1" , Id = "2" , ParentId = "1" } ,
1316- new ( ) { Text = "Child2" , Id = "3" , ParentId = "1" } ,
1317- new ( ) { Text = "Root2" , Id = "4" } ,
1318- new ( ) { Text = "Child3" , Id = "5" , ParentId = "4" } ,
1319- new ( ) { Text = "Child4" , Id = "6" , ParentId = "4" } ,
1320- new ( ) { Text = "Root3" , Id = "7" }
1321- } ;
1322- var nodes = TreeFoo . CascadingTree ( items ) ;
1323- nodes [ 0 ] . IsExpand = true ;
1324- nodes [ 1 ] . IsExpand = true ;
1325- var cut = Context . RenderComponent < TreeView < TreeFoo > > ( pb =>
1326- {
1327- pb . Add ( a => a . Items , nodes ) ;
1328- pb . Add ( a => a . ItemDraggable , true ) ;
1329- } ) ;
1330-
1331- var rowsA = cut . FindComponents < TreeViewRow < TreeFoo > > ( ) ;
1332- var source1 = rowsA [ 1 ] ; // Child1
1333- var target1 = rowsA [ 4 ] ; // Child3
1334-
1335- var drag1 = source1 . Find ( ".tree-node" ) ;
1336- // 拖动到 Child3 的下方,非最后一个兄弟节点
1337- var drop1 = target1 . Find ( ".tree-drop-child-below" ) ;
1338-
1339- await drag1 . TriggerEventAsync ( "ondragstart" , new DragEventArgs ( ) ) ;
1340- await drop1 . TriggerEventAsync ( "ondragenter" , new DragEventArgs ( ) ) ;
1341- await drop1 . TriggerEventAsync ( "ondrop" , new DragEventArgs ( ) ) ;
1342-
1343- // Assert
1344- Assert . Single ( nodes [ 0 ] . Items ) ; // Root1 只剩下 Child2
1345- Assert . Equal ( 3 , nodes [ 1 ] . Items . Count ) ; // Root2 有 Child3, Child1 和 Child4
1346- Assert . Equal ( "Child3" , nodes [ 1 ] . Items [ 0 ] . Text ) ;
1347- Assert . Equal ( "Child1" , nodes [ 1 ] . Items [ 1 ] . Text ) ; // Child1 成为 Child3 的下一个兄弟节点
1348-
1349- // 渲染变更后的内容
1350- cut . Render ( ) ;
1351-
1352- var rowsB = cut . FindComponents < TreeViewRow < TreeFoo > > ( ) ;
1353- var source2 = rowsB [ 1 ] ; // Child2
1354- var target2 = rowsB [ 5 ] ; // Child4
1355-
1356- var drag2 = source2 . Find ( ".tree-node" ) ;
1357- // 拖动到 Child4 的下方,成为最后一个兄弟节点
1358- var drop2 = target2 . Find ( ".tree-drop-child-below" ) ;
1359-
1360- await drag2 . TriggerEventAsync ( "ondragstart" , new DragEventArgs ( ) ) ;
1361- await drop2 . TriggerEventAsync ( "ondragenter" , new DragEventArgs ( ) ) ;
1362- await drop2 . TriggerEventAsync ( "ondrop" , new DragEventArgs ( ) ) ;
1363-
1364- // Assert
1365- Assert . Empty ( nodes [ 0 ] . Items ) ; // Root1 没有对象
1366- Assert . Equal ( 4 , nodes [ 1 ] . Items . Count ) ; // Root2 有 Child3, Child1, Child4 和 Child2
1367- Assert . Equal ( "Child3" , nodes [ 1 ] . Items [ 0 ] . Text ) ;
1368- Assert . Equal ( "Child1" , nodes [ 1 ] . Items [ 1 ] . Text ) ; // Child1 仍然是 Child3 的下一个兄弟节点
1369- Assert . Equal ( "Child4" , nodes [ 1 ] . Items [ 2 ] . Text ) ; // Child4 仍然是 Child1 的下一个兄弟节点
1370- Assert . Equal ( "Child2" , nodes [ 1 ] . Items [ 3 ] . Text ) ; // Child2 成为最后一个兄弟节点
1371-
1372- // 渲染变更后的内容
1373- cut . Render ( ) ;
1374-
1375- var rowsC = cut . FindComponents < TreeViewRow < TreeFoo > > ( ) ;
1376- var source3 = rowsC [ 0 ] ; // Root1
1377- var target3 = rowsC [ 6 ] ; // Root3
1378-
1379- var drag3 = source3 . Find ( ".tree-node" ) ;
1380- // 拖动到 Root 的下方,成为根节点,且为最后一个兄弟节点
1381- var drop3 = target3 . Find ( ".tree-drop-child-below" ) ;
1382-
1383- await drag3 . TriggerEventAsync ( "ondragstart" , new DragEventArgs ( ) ) ;
1384- await drop3 . TriggerEventAsync ( "ondragenter" , new DragEventArgs ( ) ) ;
1385- await drop3 . TriggerEventAsync ( "ondrop" , new DragEventArgs ( ) ) ;
1386-
1387- // Assert
1388- Assert . Equal ( 3 , nodes . Count ) ;
1389- Assert . Equal ( "Root2" , nodes [ 0 ] . Text ) ;
1390- Assert . Equal ( "Root1" , nodes [ 2 ] . Text ) ; // Root1 成为最后一个根节点
1391- }
1392-
1393- [ Fact ]
1394- public async Task Draggable_NothingDrop ( )
1395- {
1396- var items = new List < TreeFoo >
1397- {
1398- new ( ) { Text = "Root1" , Id = "1" } ,
1399- new ( ) { Text = "Child1" , Id = "2" , ParentId = "1" }
1400- } ;
1401-
1402- var nodes = TreeFoo . CascadingTree ( items ) ;
1403- nodes [ 0 ] . IsExpand = true ;
1404- var cut = Context . RenderComponent < TreeView < TreeFoo > > ( pb =>
1405- {
1406- pb . Add ( a => a . Items , nodes ) ;
1407- pb . Add ( a => a . ItemDraggable , true ) ;
1408- } ) ;
1409-
1410- var rows = cut . FindComponents < TreeViewRow < TreeFoo > > ( ) ;
1411- var dropTarget = rows [ 1 ] ; // Child1
1412- var targetDropZone = dropTarget . Find ( ".tree-drop-child-below" ) ;
1413-
1414- await Assert . ThrowsAsync < InvalidOperationException > ( ( ) => targetDropZone . TriggerEventAsync ( "ondrop" , new DragEventArgs ( ) ) ) ;
1415- }
1416-
1417- [ Fact ]
1418- public async Task Draggable_OnDrop_Cancel ( )
1419- {
1420- // Arrange
1421- var items = new List < TreeFoo >
1422- {
1423- new ( ) { Text = "Root" , Id = "1" } ,
1424- new ( ) { Text = "Child1" , Id = "2" , ParentId = "1" } ,
1425- new ( ) { Text = "Child2" , Id = "3" , ParentId = "1" }
1426- } ;
1427- var nodes = TreeFoo . CascadingTree ( items ) ;
1428- nodes [ 0 ] . IsExpand = true ;
1429- var cut = Context . RenderComponent < TreeView < TreeFoo > > ( pb =>
1430- {
1431- pb . Add ( a => a . Items , nodes ) ;
1432- pb . Add ( a => a . ItemDraggable , true ) ;
1433- pb . Add ( a => a . OnDrop , args => Task . FromResult ( false ) ) ; // 拒绝拖拽
1434- } ) ;
1435-
1436- var rows = cut . FindComponents < TreeViewRow < TreeFoo > > ( ) ;
1437- var dragSource = rows [ 1 ] ; // Child1
1438- var dragTarget = rows [ 2 ] ; // Child2
1439-
1440- // 获取可拖拽的 DOM 元素(DynamicElement)
1441- var dragSourceElement = dragSource . Find ( ".tree-node" ) ;
1442- var dragTargetDropZone = dragTarget . Find ( ".tree-drop-child-below" ) ;
1443- // 1. 触发 dragstart
1444- await dragSourceElement . TriggerEventAsync ( "ondragstart" , new DragEventArgs ( ) ) ;
1445- // 2. 触发 dragenter 到目标 drop zone
1446- await dragTargetDropZone . TriggerEventAsync ( "ondragenter" , new DragEventArgs ( ) ) ;
1447- // 3. 触发 drop 到目标 drop zone
1448- await dragTargetDropZone . TriggerEventAsync ( "ondrop" , new DragEventArgs ( ) ) ;
1449- // 4. 触发 dragend
1450- await dragSourceElement . TriggerEventAsync ( "ondragend" , new DragEventArgs ( ) ) ;
1451-
1452- // Assert: 顺序未变
1453- var parent = nodes [ 0 ] ;
1454- Assert . Equal ( "Child1" , parent . Items [ 0 ] . Text ) ;
1455- Assert . Equal ( "Child2" , parent . Items [ 1 ] . Text ) ;
1456- }
1457-
1458- [ Fact ]
1459- public async Task Draggable_DragClassState ( )
1460- {
1461- // Arrange
1462- var items = new List < TreeFoo >
1463- {
1464- new ( ) { Text = "Root" , Id = "1" }
1465- } ;
1466- var nodes = TreeFoo . CascadingTree ( items ) ;
1467- var cut = Context . RenderComponent < TreeView < TreeFoo > > ( pb =>
1468- {
1469- pb . Add ( a => a . Items , nodes ) ;
1470- pb . Add ( a => a . ItemDraggable , true ) ;
1471- } ) ;
1472-
1473- var row = cut . FindComponent < TreeViewRow < TreeFoo > > ( ) ;
1474-
1475- // 获取可拖拽的 DOM 元素
1476- var dragSourceElement = row . Find ( ".tree-node" ) ;
1477-
1478- // 触发拖拽开始
1479- await dragSourceElement . TriggerEventAsync ( "ondragstart" , new DragEventArgs ( ) ) ;
1480- Assert . Contains ( "tree-drop-pass" , row . Markup ) ;
1481-
1482- // 触发拖拽结束
1483- await dragSourceElement . TriggerEventAsync ( "ondragend" , new DragEventArgs ( ) ) ;
1484- Assert . DoesNotContain ( "tree-drop-pass" , row . Markup ) ;
1485-
1486- var dropBelow = cut . Find ( ".tree-drop-child-below" ) ;
1487- await dropBelow . TriggerEventAsync ( "ondragenter" , new DragEventArgs ( ) ) ;
1488- Assert . Contains ( "tree-preview-below" , cut . Markup ) ; // 检查是否有拖拽进入的样式
1489- await dropBelow . TriggerEventAsync ( "ondragleave" , new DragEventArgs ( ) ) ;
1490- Assert . DoesNotContain ( "tree-preview-below" , cut . Markup ) ; // 检查是否移除拖拽进入的样式
1491-
1492- var dropInside = cut . Find ( ".tree-drop-child-inside" ) ;
1493- await dropInside . TriggerEventAsync ( "ondragenter" , new DragEventArgs ( ) ) ;
1494- Assert . Contains ( "tree-preview-child-last" , cut . Markup ) ; // 检查是否有拖拽进入的样式
1495- await dropInside . TriggerEventAsync ( "ondragleave" , new DragEventArgs ( ) ) ;
1496- Assert . DoesNotContain ( "tree-preview-child-last" , cut . Markup ) ; // 检查是否移除拖拽进入的样式
1497- }
1498-
1499- #endregion
1500-
15011226 class MockTree < TItem > : TreeView < TItem > where TItem : class
15021227 {
15031228 public bool TestComparerItem ( TItem ? a , TItem ? b ) => base . Equals ( a , b ) ;
0 commit comments