test: be able to drop + open local diagrams

Improves ability to integration test.

package.json

@@ -71,9 +71,11 @@
     "chai": "^4.3.7",
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
+    "downloadjs": "^1.4.7",
     "eslint": "^8.24.0",
     "eslint-plugin-bpmn-io": "^0.16.0",
     "execa": "^5.0.0",
+    "file-drops": "^0.5.0",
     "karma": "^6.4.1",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.1",

test/TestHelper.js

@@ -4,14 +4,18 @@ import {
   attr as domAttr,
   query as domQuery,
   queryAll as domQueryAll
-
 } from 'min-dom';
 
 import {
   bootstrapBpmnJS,
+  getBpmnJS,
   insertCSS
 } from 'bpmn-js/test/helper';
 
+import fileDrop from 'file-drops';
+
+import download from 'downloadjs';
+
 import CamundaCloudModeler from '../lib/camunda-cloud/Modeler';
 import CamundaPlatformModeler from '../lib/camunda-platform/Modeler';
 
@@ -183,3 +187,45 @@ export function selectedByIndex(element) {
 
   return element.options[element.selectedIndex];
 }
+
+// be able to load files into running bpmn-js test cases
+document.documentElement.addEventListener('dragover', fileDrop('Drop a BPMN diagram to open it in the currently active test.', function(files) {
+  const bpmnJS = getBpmnJS();
+
+  if (bpmnJS && files.length === 1) {
+    bpmnJS.importXML(files[0].contents);
+  }
+}));
+
+insertCSS('file-drops.css', `
+  .drop-overlay .box {
+    background: orange;
+    border-radius: 3px;
+    display: inline-block;
+    font-family: sans-serif;
+    padding: 4px 10px;
+    position: fixed;
+    top: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+`);
+
+// be able to download diagrams using CTRL/CMD+S
+document.addEventListener('keydown', function(event) {
+  const bpmnJS = getBpmnJS();
+
+  if (!bpmnJS) {
+    return;
+  }
+
+  if (!(event.ctrlKey || event.metaKey) || event.code !== 'KeyS') {
+    return;
+  }
+
+  event.preventDefault();
+
+  bpmnJS.saveXML({ format: true }).then(function(result) {
+    download(result.xml, 'test.bpmn', 'application/xml');
+  });
+});