Fix for incorrect mock-sender progress

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-    "parser": "@babel/eslint-parser",
+    parser: "@babel/eslint-parser",
     parserOptions: {
         ecmaVersion: 2018,
         sourceType: "module",

.flowconfig

@@ -29,10 +29,10 @@ module.system.node.resolve_dirname=node_modules
 #dealing with deps without index.js entry
 module.name_mapper='^invariant$' -> '<PROJECT_ROOT>/node_modules/invariant/invariant'
 module.name_mapper='^html-dir-content$' -> '<PROJECT_ROOT>/node_modules/html-dir-content/dist/html-dir-content'
-module.name_mapper='^react-image-crop$' -> '<PROJECT_ROOT>/node_modules/react-image-crop/dist/ReactCrop.min.js'
+module.name_mapper='^react-image-crop$' -> '<PROJECT_ROOT>/node_modules/react-image-crop/dist/index.js'
 module.name_mapper='^styled-components$' -> '<PROJECT_ROOT>/node_modules/styled-components/dist/styled-components.cjs.js'
 module.name_mapper='^react-dnd$' -> '<PROJECT_ROOT>/node_modules/react-dnd/dist/index.js'
-module.name_mapper='^react-dnd-html5-backend$' -> '<PROJECT_ROOT>/node_modules/react-dnd-html5-backend/dist/cjs/index.js'
+module.name_mapper='^react-dnd-html5-backend$' -> '<PROJECT_ROOT>/node_modules/react-dnd-html5-backend/dist/index.js'
 module.name_mapper='^rc-progress$' -> '<PROJECT_ROOT>/node_modules/rc-progress/es/index.js'
 module.name_mapper='^@storybook/addon-knobs' -> '<PROJECT_ROOT>/node_modules/@storybook/addon-knobs/dist/index.js'
 

cypress.config.mjs

@@ -9,6 +9,7 @@ export default {
         env: {
             storybookPath: "/?path=/story/",
             components: {
+                mockSender :"core-mock-sender",
                 uploader: "core-uploader",
                 uploady: "ui-uploady",
                 chunkedUploady: "ui-chunked-uploady",

cypress/constants.js

@@ -20,10 +20,14 @@ export const BATCH_FINALIZE = /BATCH_FINALIZE/;
 
 export const BATCH_ABORT = /BATCH_ABORT/;
 
+export const BATCH_PROGRESS = /BATCH_PROGRESS/;
+
 export const ITEM_START = /ITEM_START/;
 
 export const ITEM_ABORT = /ITEM_ABORT/;
 
+export const ITEM_PROGRESS = /ITEM_PROGRESS/;
+
 export const ITEM_FINISH = /ITEM_FINISH/;
 
 export const ITEM_ERROR = /ITEM_ERROR/;

cypress/integration/mock-sender/MockSender-progress-spec.js

@@ -0,0 +1,88 @@
+import uploadFile, { uploadFileTimes } from "../uploadFile";
+import {
+    BATCH_ADD,
+    BATCH_FINALIZE,
+    BATCH_PROGRESS,
+    ITEM_FINISH,
+    ITEM_PROGRESS,
+    ITEM_START,
+} from "../../constants";
+
+//Tests in this spec rely on mock sender config progress intervals to be at 10% increments
+describe("MockSender - Progress", () => {
+    const fileName = "flower.jpg";
+    const fileName2 = "sea.jpg";
+
+    const loadStory = () =>
+        cy.visitStory(
+            "mockSender",
+            "with-mock-progress",
+        );
+
+    it("should provide the progress based on configuration", () => {
+        loadStory();
+
+        uploadFile(fileName, () => {
+            cy.waitMedium();
+
+            cy.storyLog().assertLogPattern(ITEM_START, { times: 1 });
+            cy.storyLog().assertLogPattern(ITEM_FINISH, { times: 1 });
+
+            cy.storyLog().customAssertLogEntry(BATCH_PROGRESS, (logLines) => {
+                const batchProgress = logLines.map(({ args }) => args[0].completed);
+
+                cy.storyLog().customAssertLogEntry(ITEM_PROGRESS, (logLines) => {
+                    const itemProgress = logLines.map(({ args }) => args[0].completed);
+
+                    batchProgress.forEach((p, index) => {
+                        if (p < 100) {
+                            expect(p, `expect batch progress (index: ${index}) ${p} to match item progress ${itemProgress[index]}
+                            items: ${itemProgress.join(",")}`)
+                                .to.equal(itemProgress[index] / 100);
+                        }
+                    });
+
+                });
+            });
+        }, "#upload-button");
+    });
+
+    it("should provide progress for multiple items", () => {
+        loadStory();
+
+        uploadFileTimes(fileName, () => {
+            cy.waitLong();
+
+            cy.storyLog().assertLogPattern(BATCH_ADD, { times: 1 });
+            cy.storyLog().assertLogPattern(ITEM_START, { times: 2 });
+            cy.storyLog().assertLogPattern(ITEM_FINISH, { times: 2 });
+            cy.storyLog().assertLogPattern(BATCH_FINALIZE, { times: 1 });
+
+            cy.storyLog().customAssertLogEntry(BATCH_PROGRESS, (logLines) => {
+                const batchProgress = logLines.map(({ args }) => args[0].completed);
+
+                cy.storyLog().customAssertLogEntry(ITEM_PROGRESS, (logLines) => {
+                    const itemProgress = logLines.map(({ args }) => args[0].completed);
+
+                    let prev = 0;
+                    batchProgress.forEach((completed, index) => {
+                        const current = completed === 100 ? 1 : completed;
+
+                        if (itemProgress[index] !== 100) {
+                            expect(current - prev, `expect current completed ${current} to be 0.05 higher than prev: ${prev}`)
+                                .to.be.closeTo(0.05, 0.001);
+                        } else {
+                            //on 10% intervals, the 10th event also begins the new item so jump is by 0.10 instead of 0.05
+                            expect(current - prev, `expect current (index = ${index}) completed ${current} to be 0.1 higher than prev: ${prev}
+                            items: ${itemProgress.join(",")}`)
+                                .to.be.closeTo(0.1, 0.001);
+                        }
+
+                        prev = current;
+                    });
+                });
+            });
+
+        }, 2, "#upload-button");
+    });
+});

cypress/integration/upload-button/UploadButton-progress-spec.js

@@ -1,5 +1,4 @@
 import { uploadFileTimes } from "../uploadFile";
-import { WAIT_X_LONG } from "../../constants";
 
 describe("UploadButton - With Progress", () => {
     const fileName = "flower.jpg";
@@ -10,14 +9,14 @@ describe("UploadButton - With Progress", () => {
 
     it("should show upload progress", () => {
         uploadFileTimes(fileName, () => {
-            cy.wait(WAIT_X_LONG);
+            cy.waitMedium();
 
-            cy.storyLog().assertLogPattern(/progress event uploaded: \d+, completed: \d+ - batch-1.item-\d$/, {
+            cy.storyLog().assertLogPattern(/progress event uploaded: [\d.]+, completed: \d+ - batch-1.item-\d/, {
                 between: [4, 6],
                 different: true
             });
 
-            cy.storyLog().assertLogPattern(/Batch Progress - batch-1 : completed = [\d.]+, loaded = \d+$/, {
+            cy.storyLog().assertLogPattern(/Batch Progress - batch-1 : completed = [\d.]+, loaded = [\d.]+/, {
                 between: [3, 5],
             });
 

cypress/integration/upload-preview/UploadPreview-crop-form-spec.js

@@ -1,6 +1,7 @@
 import intercept from "../intercept";
 import uploadFile from "../uploadFile";
 import { BATCH_ADD } from "../../constants";
+import { CROPPED_MAX_SIZE } from "./examineCroppedUploadReq";
 
 describe("UploadPreview - Crop in Form", () => {
     const fileName = "flower.jpg";
@@ -44,7 +45,7 @@ describe("UploadPreview - Crop in Form", () => {
                 .its("request.headers")
                 .its("content-length")
                 .then((length) => {
-                    expect(parseInt(length)).to.be.lessThan(5000);
+                    expect(parseInt(length)).to.be.lessThan(CROPPED_MAX_SIZE);
 
                     cy.storyLog().assertFileItemStartFinish(fileName, 1);
                 });

cypress/integration/upload-preview/UploadPreview-crop-spec.js

@@ -1,7 +1,7 @@
 import intercept from "../intercept";
 import uploadFile from "../uploadFile";
 import { BATCH_ADD, ITEM_START, ITEM_FINISH, ITEM_CANCEL } from "../../constants";
-import { WAIT_SHORT } from "../../constants";
+import { CROPPED_MAX_SIZE } from "./examineCroppedUploadReq";
 
 describe("UploadPreview - Crop", () => {
     const fileName = "flower.jpg";
@@ -43,7 +43,7 @@ describe("UploadPreview - Crop", () => {
                 .its("request.headers")
                 .its("content-length")
                 .then((length) => {
-                    expect(parseInt(length)).to.be.lessThan(4000);
+                    expect(parseInt(length)).to.be.lessThan(CROPPED_MAX_SIZE);
 
                     cy.storyLog().assertFileItemStartFinish(fileName, 1);
                 });

cypress/integration/upload-preview/UploadPreview-custom-method-spec.js

@@ -1,5 +1,4 @@
 import { uploadFileTimes } from "../uploadFile";
-import { WAIT_MEDIUM, WAIT_X_SHORT } from "../../constants";
 import { ITEM_START } from "../../constants";
 
 describe("UploadPreview - Custom Batch Items Method", () => {
@@ -11,7 +10,7 @@ describe("UploadPreview - Custom Batch Items Method", () => {
 
     it("should show upload previews for pending batch", () => {
         uploadFileTimes(fileName, () => {
-            cy.wait(WAIT_X_SHORT);
+            cy.waitExtraShort();
 
             cy.get("img[data-test='upload-preview']")
                 .should("have.length", 3);
@@ -20,7 +19,7 @@ describe("UploadPreview - Custom Batch Items Method", () => {
 
             cy.get("#upload-pending-btn").click();
 
-            cy.wait(WAIT_MEDIUM);
+            cy.waitMedium();
 
             cy.storyLog().assertFileItemStartFinish(fileName, 1);
             cy.storyLog().assertFileItemStartFinish("flower2.jpg", 3);

cypress/integration/upload-preview/UploadPreview-removePreview-spec.js

@@ -1,7 +1,6 @@
 import { interceptWithDelay } from "../intercept";
 import { uploadFileTimes } from "../uploadFile";
-import { BATCH_ADD, ITEM_START, ITEM_FINISH } from "../../constants";
-import { WAIT_SHORT, WAIT_X_SHORT } from "../../constants";
+import { ITEM_START, ITEM_FINISH } from "../../constants";
 import { examineCroppedUploadReq, examineFullUploadRequest } from "./examineCroppedUploadReq";
 
 describe("UploadPreview - Multi Crop", () => {

cypress/integration/upload-preview/examineCroppedUploadReq.js

@@ -1,11 +1,13 @@
+const CROPPED_MAX_SIZE = 70_000;
+
 const examineCroppedUploadReq = (req, name) =>
     req.interceptFormData((formData) => {
         expect(formData["file"]).to.eq(name);
     })
         .its("request.headers")
         .its("content-length")
         .then((length) => {
-            expect(parseInt(length)).to.be.lessThan(5000);
+            expect(parseInt(length)).to.be.lessThan(CROPPED_MAX_SIZE);
         });
 
 const examineFullUploadRequest = (req, name) =>
@@ -19,6 +21,7 @@ const examineFullUploadRequest = (req, name) =>
         });
 
 export {
+    CROPPED_MAX_SIZE,
     examineCroppedUploadReq,
     examineFullUploadRequest,
 }

cypress/integration/uploader/Uploader-recover-from-error-spec.js

@@ -1,6 +1,5 @@
 import uploadFile from "../uploadFile";
 import { ITEM_START, ITEM_ERROR } from "../../constants";
-import { WAIT_MEDIUM } from "../../constants";
 
 describe("Uploader - recover from sender error test", () => {
     const fileName = "flower.jpg";
@@ -12,7 +11,7 @@ describe("Uploader - recover from sender error test", () => {
     it("should upload again after unexpected sender error", () => {
         uploadFile(fileName, () => {
             uploadFile(fileName, () => {
-                cy.wait(WAIT_MEDIUM);
+                cy.waitMedium()
 
                 cy.storyLog().assertLogPattern(ITEM_START, { times: 2 });
                 cy.storyLog().assertLogPattern(ITEM_ERROR, { times: 2 });

cypress/support/index.d.ts

@@ -8,7 +8,7 @@ declare namespace Cypress {
         assertUrlItemStartFinish: (fileName: string, startIndex?: number) => void;
         assertLogEntryCount: (count: number, obj: any) => void;
         assertLogEntryContains: (index: number, obj: any) => void;
-        customAssertLogEntry: (event: string, asserter: (logLine: any[], env: string) => void, options?: { index?: number, all?: boolean }) => void;
+        customAssertLogEntry: (event: string | RegExp, asserter: (logLine: any[], env: string) => void, options?: { index?: number, all?: boolean }) => void;
         assertLogPattern: (pattern: RegExp, options: { times?: number, index?: number, different?: boolean }) => Promise<PATTERN_MATCH[]>;
         assertNoLogPattern: (pattern: RegExp, options: { index?: number, different?: boolean }) => Promise<PATTERN_MATCH[]>;
         resetStoryLog: () => void;

cypress/support/storyLog.js

@@ -97,6 +97,10 @@ Cypress.Commands.add("customAssertLogEntry", { prevSubject: true }, (storyLog, e
     try {
         if (options.all) {
             logLine = storyLog.filter((item) => item.args[0] === eventName).map((item) => item.args.slice(1));
+        } else if (eventName instanceof RegExp) {
+            logLine = storyLog.filter((item) =>  eventName.test( item.args[0]));
+            expect(logLine).to.have.lengthOf.at.least(2, `expect to find at least one match for ${eventName}`);
+            logLine = logLine.map((ll) => ({ ...ll, args: ll.args.slice(1) }));
         } else if (options.index) {
             logLine = storyLog[options.index];
             expect(logLine.args[0], `expect log line ${options.index} with ${logLine.args[0]} to equal = ${eventName}`).to.equal(eventName);

package.json

@@ -62,8 +62,8 @@
     "url": "https://opencollective.com/react-uploady"
   },
   "devDependencies": {
-    "@actions/core": "^1.10.0",
-    "@actions/github": "^5.1.1",
+    "@actions/core": "^1.10.1",
+    "@actions/github": "^6.0.0",
     "@babel/cli": "^7.23.0",
     "@babel/core": "^7.23.2",
     "@babel/eslint-parser": "^7.19.1",
@@ -75,10 +75,10 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/runtime-corejs3": "^7.23.2",
     "@bunchtogether/vite-plugin-flow": "^1.0.2",
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
-    "@commitlint/config-lerna-scopes": "^18.1.0",
-    "@monorepo-utils/package-utils": "^2.10.2",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/config-lerna-scopes": "^18.4.3",
+    "@monorepo-utils/package-utils": "^2.10.4",
     "@storybook/addon-essentials": "^7.5.1",
     "@storybook/addon-interactions": "^7.5.1",
     "@storybook/addon-knobs": "^7.0.2",
@@ -97,19 +97,19 @@
     "@vitest/coverage-istanbul": "^0.34.6",
     "@vitest/coverage-v8": "^0.34.6",
     "@vitest/ui": "^0.34.5",
-    "async": "^3.2.3",
+    "async": "^3.2.5",
     "babel-loader": "9",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-minify-dead-code-elimination": "^0.5.1",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "bundlesize2": "^0.0.31",
-    "bytes": "^3.1.0",
+    "bytes": "^3.1.2",
     "chai": "^4.3.10",
     "chai-dom": "^1.11.0",
     "chalk": "^4.1.2",
     "concurrently": "^8.2.1",
-    "core-js": "^3.33.1",
+    "core-js": "^3.33.3",
     "cypress": "^13.3.1",
     "cypress-intercept-formdata": "^0.6.0",
     "eslint": "^8.20.0",
@@ -128,34 +128,34 @@
     "http-server": "^14.0.0",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
-    "lerna": "^7.2.0",
+    "lerna": "^7.4.2",
     "license-webpack-plugin": "^4.0.2",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
-    "mocha-junit-reporter": "^2.0.2",
+    "mocha-junit-reporter": "^2.2.1",
     "mocha-multi-reporters": "^1.5.1",
     "octokit-plugin-create-pull-request": "^5.1.1",
     "pacote": "^17.0.4",
-    "rc-progress": "^3.1.4",
-    "react": "^18",
-    "react-dnd-html5-backend": "^14.0.2",
-    "react-dom": "^18",
-    "react-icons": "^4.3.1",
-    "rimraf": "^5.0.1",
+    "rc-progress": "^3.5.1",
+    "react": "^18.2.0",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
+    "rimraf": "^5.0.5",
     "semver-utils": "^1.1.4",
-    "shelljs": "^0.8.4",
+    "shelljs": "^0.8.5",
     "storybook": "^7.5.1",
-    "styled-components": "^6.1.0",
-    "typescript": "^5.2.2",
+    "styled-components": "^6.1.1",
+    "typescript": "^5.3.2",
     "vite": "^4.4.9",
     "vite-plugin-babel": "^1.1.3",
     "vitest": "^0.34.5",
     "wait-on": "^7.2.0",
     "weak-napi": "^2.0.2",
     "webpack": "latest",
     "webpack-cli": "^5.1.4",
-    "webpack-merge": "^5.8.0",
-    "webpack-virtual-modules": "^0.5.0",
+    "webpack-merge": "^5.10.0",
+    "webpack-virtual-modules": "^0.6.1",
     "xml2js": "^0.6.2",
     "yargs": "^17.7.2"
   },