test(multi file upload): Multi file upload tests (#1091)

* test(file upload): wip - tests

* test(multifile upload): add tests for multi file upload component

* test(multi file upload): complete tests for multiple files and accessibility

jest.config.js

@@ -1,8 +1,11 @@
 const config = {
   testEnvironment: "jsdom",
   testEnvironmentOptions: {
-    url: "https://design-patterns.service.juice.gov.uk/",
   },
-  setupFilesAfterEnv: ["./jest.setup.js"],
+  setupFilesAfterEnv: ["./jest.setup.js", "jest-sinon"],
+  // See: https://github.com/sinonjs/sinon/issues/2522#issuecomment-1612555284
+  moduleNameMapper: {
+    sinon: "<rootDir>/node_modules/sinon/pkg/sinon.js",
+  },
 };
 module.exports = config;

package.json

@@ -90,6 +90,7 @@
     "jest": "^29.2.2",
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-sinon": "^1.1.0",
     "jquery": "^3.7.1",
     "js-beautify": "^1.13.13",
     "lodash": "^4.17.21",
@@ -98,7 +99,8 @@
     "mock-match-media": "^0.4.3",
     "npm-run-all2": "^6.0.0",
     "postcss": "^8.4.31",
-    "semantic-release": "^23.0.0"
+    "semantic-release": "^23.0.0",
+    "sinon": "^19.0.2"
   },
   "config": {
     "commitizen": {

src/moj/components/multi-file-upload/multi-file-upload.js

@@ -78,7 +78,7 @@ if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJF
     this.uploadFiles(e.currentTarget.files);
     this.fileInput.replaceWith($(e.currentTarget).val('').clone(true));
     this.setupFileInput();
-    this.fileInput.focus();
+    this.fileInput.get(0).focus();
   };
 
   MOJFrontend.MultiFileUpload.prototype.onFileFocus = function(e) {