[dragdrop] Add html.drag-drop-active class tests

After CL:2262772, when a drag drop operation is active over FilesApp, a CSS .drag-drop-active class is added to the root <html> element, and is removed when the drag drop operation ends. Add html.drag-drop-active tests to test its addition and removal when a drag drop operation begins and ends. There are two end cases to test: drag drop ends with a dragleave event, or with a drop event. Add tests for both cases: transferDragDropActiveLeave, transferDragDropActiveDrop. Note: since file-list can navigate (logically any time on a bot) due to file_transfer_controller's drag target hover time, we use #file-list as the source when calling fakeDragLeaveOrDrop. No-try: true Bug: 1062902, 1002394 Change-Id: I1426e769b33d1d5a72a1321fdc3319ae940cf31d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2275979 Commit-Queue: Noel Gordon <noel@chromium.org> Reviewed-by: Alex Danilo <adanilo@chromium.org> Reviewed-by: Luciano Pacheco <lucmult@chromium.org> Cr-Commit-Position: refs/heads/master@{#784389}

[dragdrop] Add html.drag-drop-active class tests
After CL:2262772, when a drag drop operation is active over FilesApp, a CSS .drag-drop-active class is added to the root <html> element, and is removed when the drag drop operation ends. Add html.drag-drop-active tests to test its addition and removal when a drag drop operation begins and ends. There are two end cases to test: drag drop ends with a dragleave event, or with a drop event. Add tests for both cases: transferDragDropActiveLeave, transferDragDropActiveDrop. Note: since file-list can navigate (logically any time on a bot) due to file_transfer_controller's drag target hover time, we use #file-list as the source when calling fakeDragLeaveOrDrop. No-try: true Bug: 1062902, 1002394 Change-Id: I1426e769b33d1d5a72a1321fdc3319ae940cf31d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2275979 Commit-Queue: Noel Gordon <noel@chromium.org> Reviewed-by: Alex Danilo <adanilo@chromium.org> Reviewed-by: Luciano Pacheco <lucmult@chromium.org> Cr-Commit-Position: refs/heads/master@{#784389}
5fe998dc · Noel Gordon · Commit Bot · 4e1b301b · 5fe998dc · 5fe998dc
Commit 5fe998dc authored Jul 01, 2020 by Noel Gordon Committed by Commit Bot Jul 01, 2020
2 changed files
--- a/chrome/browser/chromeos/file_manager/file_manager_browsertest.cc
+++ b/chrome/browser/chromeos/file_manager/file_manager_browsertest.cc
@@ -621,6 +621,8 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
        TestCase("transferFromDownloadsToTeamDrive").FilesNg(),
        TestCase("transferBetweenTeamDrives").DisableFilesNg(),
        TestCase("transferBetweenTeamDrives").FilesNg(),
+        TestCase("transferDragDropActiveLeave"),
+        TestCase("transferDragDropActiveDrop"),
        TestCase("transferDragAndDrop"),
        TestCase("transferDragAndHover"),
        TestCase("transferFromDownloadsToDownloads"),

--- a/ui/file_manager/integration_tests/file_manager/transfer.js
+++ b/ui/file_manager/integration_tests/file_manager/transfer.js
@@ -492,6 +492,103 @@ testcase.transferFromDownloadsToDownloads = async () => {
      (await remoteCall.waitForElement(appId, '.progress-frame label')).text);
 };

+/**
+ * Tests that the root html element .drag-drop-active class appears when drag
+ * drop operations are active, and is removed when the operations complete.
+ */
+testcase.transferDragDropActiveLeave = async () => {
+  const entries = [ENTRIES.hello, ENTRIES.photos];
+
+  // Open files app.
+  const appId = await setupAndWaitUntilReady(RootPath.DOWNLOADS, entries, []);
+
+  // The drag has to start in the file list column "name" text, otherwise it
+  // starts a drag-selection instead of a drag operation.
+  const source =
+      `#file-list li[file-name="${ENTRIES.hello.nameText}"] .entry-name`;
+
+  // Select the source file.
+  await remoteCall.waitAndClickElement(appId, source);
+
+  // Wait for the directory tree target.
+  const target = '#directory-tree [entry-label="My files"]';
+  await remoteCall.waitForElement(appId, target);
+
+  // Check: the html element should not have drag-drop-active class.
+  const htmlDragDropActive = ['html.drag-drop-active'];
+  await remoteCall.waitForElementLost(appId, htmlDragDropActive);
+
+  // Drag the source and hover it over the target.
+  const skipDrop = true;
+  chrome.test.assertTrue(
+      await remoteCall.callRemoteTestUtil(
+          'fakeDragAndDrop', appId, [source, target, skipDrop]),
+      'fakeDragAndDrop failed');
+
+  // Check: the html element should have drag-drop-active class.
+  await remoteCall.waitForElementsCount(appId, htmlDragDropActive, 1);
+
+  // Send a dragleave event to the target to end drag-drop operations.
+  const dragLeave = true;
+  chrome.test.assertTrue(
+      await remoteCall.callRemoteTestUtil(
+          'fakeDragLeaveOrDrop', appId, ['#file-list', target, dragLeave]),
+      'fakeDragLeaveOrDrop failed');
+
+  // Check: the html element should not have drag-drop-active class.
+  await remoteCall.waitForElementLost(appId, htmlDragDropActive);
+};
+
+/**
+ * Tests that the root html element .drag-drop-active class appears when drag
+ * drop operations are active, and is removed when the operations complete.
+ */
+testcase.transferDragDropActiveDrop = async () => {
+  const entries = [ENTRIES.hello, ENTRIES.photos];
+
+  // Open files app.
+  const appId = await setupAndWaitUntilReady(RootPath.DOWNLOADS, entries, []);
+
+  // Expand Downloads to display "photos" folder in the directory tree.
+  await expandTreeItem(appId, '#directory-tree [entry-label="Downloads"]');
+
+  // The drag has to start in the file list column "name" text, otherwise it
+  // starts a drag-selection instead of a drag operation.
+  const source =
+      `#file-list li[file-name="${ENTRIES.hello.nameText}"] .entry-name`;
+
+  // Select the source file.
+  await remoteCall.waitAndClickElement(appId, source);
+
+  // Wait for the directory tree target.
+  const target = '#directory-tree [entry-label="photos"]';
+  await remoteCall.waitForElement(appId, target);
+
+  // Check: the html element should not have drag-drop-active class.
+  const htmlDragDropActive = ['html.drag-drop-active'];
+  await remoteCall.waitForElementLost(appId, htmlDragDropActive);
+
+  // Drag the source and hover it over the target.
+  const skipDrop = true;
+  chrome.test.assertTrue(
+      await remoteCall.callRemoteTestUtil(
+          'fakeDragAndDrop', appId, [source, target, skipDrop]),
+      'fakeDragAndDrop failed');
+
+  // Check: the html element should have drag-drop-active class.
+  await remoteCall.waitForElementsCount(appId, htmlDragDropActive, 1);
+
+  // Send a drop event to the target to end drag-drop operations.
+  const dragLeave = false;
+  chrome.test.assertTrue(
+      await remoteCall.callRemoteTestUtil(
+          'fakeDragLeaveOrDrop', appId, ['#file-list', target, dragLeave]),
+      'fakeDragLeaveOrDrop failed');
+
+  // Check: the html element should not have drag-drop-active class.
+  await remoteCall.waitForElementLost(appId, htmlDragDropActive);
+};
+
 /**
 * Tests that we can drag a file from #file-list to #directory-tree.
 * It copies the file from Downloads to Downloads/photos.