glib-web 4.44.6 → 5.0.4

package/.github/workflows/lint.yml

@@ -2,9 +2,9 @@ name: Lint
 
 on:
   push:
-    branches:
-      - "**"
+    branches: [main]
   pull_request:
+    branches: [main]
 
 jobs:
   lint:

package/.nycrc.json

@@ -32,6 +32,8 @@
     "extensions/*",
     "components/treeView.vue",
     "actions/files/*",
-    "actions/bottom_banners/*"
+    "actions/bottom_banners/*",
+    "plugins/vuetify.js",
+    "components/composable/upload_delegator.js"
   ]
 }

package/README.md

@@ -6,6 +6,7 @@
 - Edit settings.json
   - `CTRL+SHIFT+P` -> `Preferences: Open User Settings (JSON)` -- This will open an editor for `settings.json`.
   - Copy content of `settings.json.example` into the editor.
+  - Disable format-on-save for Volar to avoid formatting conflicts with ESLint.
 
 ## Set up Javascript CI
 
@@ -19,7 +20,7 @@ module.exports = defineConfig({
   e2e: {
     specPattern: 'node_modules/glib-web/cypress/e2e',
     defaultBrowser: 'chrome',
-    supportFile: 'node_modules/glib-web/cypress/support/e2e.{js,jsx,ts,tsx}'
+    supportFile: 'node_modules/glib-web/cypress/support/e2e.js'
   },
 });
 ```
@@ -29,6 +30,13 @@ module.exports = defineConfig({
   - Run rails server `bin/rails s`
   - Execute `yarn run cypress run`
 
+## Run Cypress tests (glib-web-npm)
+
+1. Clone and set up the backend repo (`glib-web`) because Cypress tests require matching `test_page/*` fixtures.
+2. In `glib-web`, link this package: `yarn link glib-web`.
+3. In project that use `glib-web`, start Rails: `bin/rails s` and `bin/vite dev` separately.
+4. In this repo, run tests: `yarn test`.
+
 ## Best practices
 
 - To prevent circular dependencies between components:

package/agent/commands/generate_test.yaml

@@ -7,7 +7,7 @@ description: >
 inputs:
   doc_dir: doc/garage/test_page
   test_dir: cypress/e2e/glib-web
-  test_helper: cypress/helper.ts
+  test_helper: cypress/helper.js
   ai_test_prompt: |
     Generate a Cypress e2e test for the glib test page: {{page_slug}}.
     Inputs you can use:
@@ -79,10 +79,10 @@ steps:
 
   - id: collect-test-page-slugs
     instruction: |
-      Scan every *.cy.ts under {{inputs.test_dir}} and extract all occurrences of
+      Scan every *.cy.js under {{inputs.test_dir}} and extract all occurrences of
       testPageUrl('...'). Collect the string values into test_page_slugs.
       If a file contains no testPageUrl calls, derive a fallback slug by:
-        - Removing the .cy.ts suffix.
+        - Removing the .cy.js suffix.
         - Converting camelCase to snake_case.
       Output: test_page_slugs.
 
@@ -102,8 +102,8 @@ steps:
   - id: scaffold-missing-tests
     instruction: |
       For each slug in missing_page_slugs:
-        1) Derive a filename by converting snake_case to camelCase and append ".cy.ts".
-           Example: file_upload_new -> fileUploadNew.cy.ts
+        1) Derive a filename by converting snake_case to camelCase and append ".cy.js".
+           Example: file_upload_new -> fileUploadNew.cy.js
         2) Create {{inputs.test_dir}}/<filename> if it does not already exist.
         3) Write generated_tests_map[<slug>] to the file.
       Output: created_test_files.

package/components/charts/series.js

@@ -33,7 +33,7 @@ const installChartkick = () => {
 const multipleDataSeries = (dataSeries) => {
     return dataSeries.map((value) => {
         let points = null;
-        if (Array.isArray(value.points)) {
+        if (TypeUtils.isArray(value.points)) {
             points = value.points.reduce((prev, curr) => {
                 return Object.assign(prev, { [curr.x]: curr.y });
             }, {});
@@ -73,7 +73,11 @@ const getOrCreateTooltip = (chart) => {
 
 const externalTooltipHandler = (multiple, dataSeries) => {
     return (context) => {
-        const tooltipData = getData(multiple, dataSeries, context.tooltip.dataPoints[0]);
+        const tooltipContext = TypeUtils.isObject(context) && TypeUtils.isObject(context.tooltip) ? context.tooltip : null;
+        const dataPoints = TypeUtils.isObject(tooltipContext) ? tooltipContext.dataPoints : null;
+        if (!TypeUtils.isArray(dataPoints) || dataPoints.length === 0) return;
+
+        const tooltipData = getData(multiple, dataSeries, dataPoints[0]);
 
         if (!tooltipData) return;
 
@@ -111,9 +115,13 @@ const externalTooltipHandler = (multiple, dataSeries) => {
 };
 
 const getData = (multiple, dataSeries, context) => {
+    if (!TypeUtils.isArray(dataSeries) || !TypeUtils.isObject(context)) return null;
+
     const { dataIndex, datasetIndex } = context;
+    if (!TypeUtils.isNumber(dataIndex) || !TypeUtils.isNumber(datasetIndex)) return null;
+
     const dataset = dataSeries[datasetIndex];
-    if (multiple && Array.isArray(dataset.points) && dataset.points[dataIndex]) {
+    if (multiple && TypeUtils.isObject(dataset) && TypeUtils.isArray(dataset.points) && dataset.points[dataIndex]) {
         return dataset.points[dataIndex];
     }
     if (!multiple && dataSeries[dataIndex]) {
@@ -123,15 +131,16 @@ const getData = (multiple, dataSeries, context) => {
 
 function useChart({ dataSeries, spec, multiple = true }) {
     installChartkick();
+    const normalizedDataSeries = TypeUtils.isArray(dataSeries) ? dataSeries : [];
     const isDonut = [spec.styleClasses].flat().includes('donut');
     const { datalabels, centerLabel, customTooltip } = spec.plugins || {};
     const legend = spec.legend || { display: true };
 
     let series = null;
     if (multiple) {
-        series = computed(() => multipleDataSeries(dataSeries));
+        series = computed(() => multipleDataSeries(normalizedDataSeries));
     } else {
-        series = computed(() => singleDataSeries(dataSeries));
+        series = computed(() => singleDataSeries(normalizedDataSeries));
     }
 
     let colors = undefined;
@@ -175,12 +184,15 @@ function useChart({ dataSeries, spec, multiple = true }) {
             }
 
             const { dataIndex, datasetIndex } = context;
-            const dataset = dataSeries[datasetIndex];
-            if (multiple && Array.isArray(dataset.points) && dataset.points[dataIndex].label) {
-                val = dataset.points[dataIndex].label;
+            const dataset = normalizedDataSeries[datasetIndex];
+            if (multiple && TypeUtils.isObject(dataset) && TypeUtils.isArray(dataset.points)) {
+                const point = dataset.points[dataIndex];
+                if (TypeUtils.isObject(point) && point.label) {
+                    val = point.label;
+                }
             }
-            if (!multiple && dataSeries[dataIndex].label) {
-                val = dataSeries[dataIndex].label;
+            if (!multiple && TypeUtils.isObject(normalizedDataSeries[dataIndex]) && normalizedDataSeries[dataIndex].label) {
+                val = normalizedDataSeries[dataIndex].label;
             }
 
             return val;
@@ -195,7 +207,7 @@ function useChart({ dataSeries, spec, multiple = true }) {
     if (customTooltip) {
         options.plugins.tooltip = {
             enabled: false,
-            external: externalTooltipHandler(multiple, dataSeries)
+            external: externalTooltipHandler(multiple, normalizedDataSeries)
         };
     }
 

package/components/component.vue

@@ -15,7 +15,6 @@
   /> -->
 
     <!-- <fields-latLong v-else-if="spec.view == 'fields/latLong-v1'" :spec="spec" /> -->
-    <fields-googlePlace v-else-if="spec.view == 'fields/googlePlace-v1'" ref="delegate" :spec="spec" />
 
     <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
 
@@ -72,7 +71,6 @@ import TextAreaField from "./fields/textarea.vue";
 const RichTextField2 = defineAsyncComponent(() => import("./fields/richText2.vue"));
 // import NewRichTextField from "./fields/newRichText.vue";
 const FileField = defineAsyncComponent(() => import("./fields/file.vue"));
-const MultiUploadField = defineAsyncComponent(() => import("./fields/multiUpload.vue"));
 const UploadField = defineAsyncComponent(() => import('./fields/upload.vue'));
 import SignField from "./fields/sign.vue";
 import SelectField from "./fields/_select.vue";
@@ -85,7 +83,6 @@ import CheckField from "./fields/check.vue";
 import DateField from "./fields/date.vue";
 import DateTimeField from "./fields/datetime.vue";
 const LocationField = defineAsyncComponent(() => import("./fields/location.vue"));
-import GooglePlaceField from "./fields/googlePlace.vue";
 // import DynamicGroupField from "./fields/dynamicGroup.vue";
 import DynamicGroupField from "./fields/dynamicGroup2.vue";
 import StripeTokenField from "./fields/stripeToken.vue";
@@ -179,7 +176,6 @@ export default {
     "fields-richText": RichTextField2,
     // "fields-newRichText": NewRichTextField,
     "fields-file": FileField,
-    "fields-multiUpload": MultiUploadField,
     "fields-upload": UploadField,
     "fields-sign": SignField,
     "fields-select": SelectField,
@@ -192,7 +188,6 @@ export default {
     "fields-date": DateField,
     "fields-datetime": DateTimeField,
     "fields-location": LocationField,
-    "fields-googlePlace": GooglePlaceField,
     "fields-dynamicGroup": DynamicGroupField,
     "fields-stripeToken": StripeTokenField,
     "fields-stripeExternalAccount": StripeExternalAccount,

package/components/fields/checkGroup.vue

@@ -19,6 +19,14 @@ import GlibBase from "../base/glibBase.js";
 import { defineComponent, ref, provide, toRef } from "vue";
 import { useGlibInput } from "../composable/form";
 import { useGlibSelectable, watchNoneOfAbove } from "../composable/selectable";
+import { isArray, isNull, isString } from "../../utils/type";
+
+const normalizeValue = (value) => {
+  if (isNull(value)) return [];
+  if (isArray(value)) return value;
+  if (isString(value)) return value.length > 0 ? [value] : [];
+  return [value];
+};
 
 export default defineComponent({
   extends: GlibBase,
@@ -39,7 +47,7 @@ export default defineComponent({
     const parentSpec = props.spec;
     provide('parentSpec', parentSpec);
 
-    const fieldModel = toRef(props.spec.value);
+    const fieldModel = toRef(normalizeValue(props.spec.value));
     provide('parentModel', fieldModel);
 
     useGlibInput({ props });
@@ -60,18 +68,17 @@ export default defineComponent({
     }
 
     // watch(
-    //   () => props.spec,
-    //   (spec) => {
-    //     fieldModel.value = [spec.value || []].flat();
-    //   },
-    //   { immediate: true, deep: true }
+    //   () => props.spec.value,
+    //   (value) => {
+    //     fieldModel.value = normalizeValue(value);
+    //   }
     // );
 
     return { options, fieldModel, checkAll };
   },
   computed: {
     values() {
-      return this.fieldModel || [];
+      return normalizeValue(this.fieldModel);
     }
   },
   watch: {

package/components/fields/richText2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="loadIf" :style="$styles()" :class="$classes()">
+  <div v-if="loadIf" :style="$styles()" :class="[$classes(), { 'glib-quill-disabled': inputDisabled }]">
     <div ref="editor"></div>
     <input type="hidden" :name="fieldName" :value="producedValue" />
     <template v-if="Object.keys(files).length > 0">
@@ -51,6 +51,7 @@ import { useFileUtils } from "../composable/file";
 import { setBusyWhenUploading, uploadFiles } from "../composable/upload";
 import dom from "../../utils/dom";
 import RawText from "./rawText.vue";
+import { isBoolean } from "../../utils/type";
 
 const { Item, makeKey } = useFileUtils();
 
@@ -74,6 +75,15 @@ export default defineComponent({
     const files = ref({});
     setBusyWhenUploading({ files });
 
+    const inputDisabled = computed(() => {
+      const disabled = instance.proxy.inputDisabled;
+      return isBoolean(disabled) ? disabled : false;
+    });
+    const isReadOnly = computed(() => {
+      const readOnly = props.spec.readOnly;
+      return (isBoolean(readOnly) ? readOnly : false) || inputDisabled.value;
+    });
+
 
     function sanitizedValue() {
       if (!quill) return props.spec.value || '';
@@ -254,11 +264,12 @@ export default defineComponent({
     }
     onMounted(() => {
       quill = new Quill(editor.value, {
-        readOnly: props.spec.readOnly,
+        readOnly: isReadOnly.value,
         placeholder: props.spec.placeholder,
         theme: 'snow',
         modules
       });
+      quill.enable(!isReadOnly.value);
 
       let value = props.spec.value;
       switch (accept.value) {
@@ -296,7 +307,12 @@ export default defineComponent({
       }
     });
 
-    return { producedValue, editor, files, rawTextProps };
+    watch(isReadOnly, (readOnly) => {
+      if (!quill) return;
+      quill.enable(!readOnly);
+    });
+
+    return { producedValue, editor, files, rawTextProps, inputDisabled };
   }
 });
 </script>
@@ -344,4 +360,18 @@ export default defineComponent({
   max-height: 300px; 
   overflow-y: auto;
 }
+
+.glib-quill-disabled .ql-editor {
+  caret-color: transparent;
+  cursor: not-allowed;
+}
+
+.glib-quill-disabled .ql-toolbar {
+  opacity: var(--v-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.glib-quill-disabled .ql-container {
+  opacity: var(--v-disabled-opacity);
+}
 </style>

package/components/fields/upload.vue

@@ -29,9 +29,11 @@ const childSpec = computed(() => {
     return Object.assign({}, props.spec, { placeholderView: null }, props.spec.placeholderView);
   } else if (props.spec.inputView) {
     return Object.assign({}, props.spec, { inputView: null }, props.spec.inputView);
-  } else {
-    return Object.assign({}, props.spec, { multiProgressView: null }, props.spec.placeholderView);
+  } else if (props.spec.multiProgressView) {
+    return Object.assign({}, props.spec, { multiProgressView: null }, props.spec.multiProgressView);
   }
+
+  return props.spec;
 });
 
 function trigger() {
@@ -43,4 +45,4 @@ function reset() {
 }
 
 defineExpose({trigger, reset})
-</script>
+</script>

package/components/mixins/styles.js

@@ -131,7 +131,6 @@ export default {
       const forceUpdate = (Math.random() + 1).toString(36).substring(7);
       if (item.view.startsWith('charts/')) return forceUpdate;
       if (item.view.startsWith('fields/richText')) return forceUpdate;
-      if (item.view.startsWith('fields/multiUpload')) return forceUpdate;
       if (item.view.startsWith('panels/custom')) return forceUpdate;
 
       const childViewLength = item.childViews ? item.childViews.length : 0;

package/components/popover.vue

@@ -1,100 +1,129 @@
 <template>
-    <!-- Placement options:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end'
+  <!-- Placement options:
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
   -->
 
-    <common-responsive v-if="toggle" :key="key" ref="container" :class="`views-popovers ${spec.styleClass}`"
-        :spec="spec.body" />
-
+  <common-responsive v-if="toggle" :key="key" ref="container" :class="`views-popovers ${spec.styleClass}`"
+    :spec="popoverBody" />
 </template>
 
 <script>
 import { popovers } from "../store";
 import bus from "../utils/eventBus";
 import { driver } from "driver.js";
-import 'driver.js/dist/driver.css';
+import "driver.js/dist/driver.css";
 import { strandom } from "./helper";
 import { APP_ID } from "..";
 import GlibBase from "./base/glibBase.js";
+import * as TypeUtils from "../utils/type";
 
 export default {
   extends: GlibBase,
-    props: ['spec', 'reference', 'placeholder', 'styleClass'],
-    data() {
-        const allowClose = this.spec.overlay ? this.spec.overlay.closeOnFocus : true;
-        return {
-            key: null,
-            toggle: true,
-            driverObj: driver({
-                allowClose,
-                onDestroyed: () => {
-                    this.close();
-                }
-            }),
-        };
+  props: ["spec", "reference", "placeholder", "styleClass"],
+  data() {
+    const allowClose = this.spec.overlay ? this.spec.overlay.closeOnFocus : true;
+    return {
+      key: null,
+      toggle: true,
+      driverObj: driver({
+        allowClose,
+        onDestroyed: () => {
+          this.close();
+        }
+      }),
+      busOpenHandler: null,
+      busCloseHandler: null,
+      onAppClick: null,
+      onResize: null,
+      body: null,
+    };
+  },
+  computed: {
+    popoverBody() {
+      if (TypeUtils.isNotNull(this.body)) {
+        return this.body;
+      }
+      return this.spec.body;
+    }
+  },
+  mounted() {
+    popovers.value.push(this);
+    this.busOpenHandler = (body) => {
+      this.body = body;
+      this.key = strandom();
+    };
+    bus.$on(`popovers/open-${this.spec.key}`, this.busOpenHandler);
+  },
+  methods: {
+    $mounted() {
+      const appEl = document.getElementById(APP_ID);
+      this.busCloseHandler = () => {
+        if (appEl) {
+          appEl.removeEventListener("click", this.onAppClick);
+        }
+        this.close();
+      };
+      bus.$once(`popover/close-${this.spec.key}`, this.busCloseHandler);
+      if (!this.spec.persistent) {
+        this.onAppClick = this.handleClose;
+        if (appEl) {
+          appEl.addEventListener("click", this.onAppClick);
+        }
+        this.onResize = () => this.close();
+        window.addEventListener("resize", this.onResize);
+      }
+      if (this.spec.overlay) {
+        this.driverObj.highlight({ element: this.reference });
+      }
     },
-    mounted() {
-        popovers.value.push(this);
-        bus.$on(`popovers/open-${this.spec.key}`, (body) => {
-            Object.assign(this.spec, { body });
-            this.key = strandom();
-        });
+    $tearDown() {
+      if (TypeUtils.isFunction(this.busCloseHandler)) {
+        bus.$off(`popover/close-${this.spec.key}`, this.busCloseHandler);
+      }
+      if (TypeUtils.isFunction(this.busOpenHandler)) {
+        bus.$off(`popovers/open-${this.spec.key}`, this.busOpenHandler);
+      }
+      if (!this.spec.persistent) {
+        const appEl = document.getElementById(APP_ID);
+        if (TypeUtils.isFunction(this.onAppClick) && appEl) {
+          appEl.removeEventListener("click", this.onAppClick);
+        }
+        if (TypeUtils.isFunction(this.onResize)) {
+          window.removeEventListener("resize", this.onResize);
+        }
+      }
     },
-    methods: {
-        $mounted() {
-            const appEl = document.getElementById(APP_ID);
-            bus.$once(`popover/close-${this.spec.key}`, () => {
-                appEl.removeEventListener('click', this.handleClose);
-                this.close();
-            });
-            if (!this.spec.persistent) {
-                appEl.addEventListener('click', this.handleClose);
-                window.addEventListener('resize', () => this.close());
-            }
-            if (this.spec.overlay) {
-                this.driverObj.highlight({ element: this.reference });
-            }
-
-        },
-        $tearDown() {
-            bus.$off(`popover/close-${this.spec.key}`);
-            bus.$off(`popover/open-${this.spec.key}`);
-            if (!this.spec.persistent) {
-                appEl.removeEventListener('click', this.handleClose);
-                window.removeEventListener('resize', () => this.close());
-            }
-        },
-        handleClose(event) {
-            let element = null;
-            if (this.$refs.container) {
-                element = this.$refs.container.$el;
-            } else {
-                element = this.$el;
-            }
-            const isClickInside = element.contains(event.target);
+    handleClose(event) {
+      let element = null;
+      if (this.$refs.container) {
+        element = this.$refs.container.$el;
+      } else {
+        element = this.$el;
+      }
+      const isClickInside = element.contains(event.target);
 
-            if (!isClickInside) {
-                this.close();
-            }
-        },
-        close() {
-            if (this.placeholder) this.placeholder.remove();
-            if (this.driverObj) this.driverObj.destroy();
-            this.toggle = false;
-            popovers.value.remove(this);
-        }
+      if (!isClickInside) {
+        this.close();
+      }
+    },
+    close() {
+      if (this.placeholder) this.placeholder.remove();
+      if (this.driverObj) this.driverObj.destroy();
+      this.toggle = false;
+      popovers.value.remove(this);
     }
+  }
 };
 </script>
 

package/cypress/component/{inputUpload.cy.ts → inputUpload.cy.js}

@@ -2,14 +2,14 @@ import inputUpload from "../../components/fields/inputUpload.vue";
 import Uploader from "../../utils/glibDirectUpload";
 import { mountWithGlib, restoreUploaderStartStub, setupGlibGlobals } from "./testUtils";
 
-const buildSpec = (overrides: Record<string, unknown> = {}) => ({
+const buildSpec = (overrides = {}) => ({
   name: "user[file]",
   label: "Upload file",
   accepts: { fileType: "txt" },
   ...overrides,
 });
 
-const mountComponent = (spec: Record<string, unknown>) => {
+const mountComponent = (spec) => {
   mountWithGlib(inputUpload, spec);
 };
 
@@ -24,7 +24,7 @@ describe("inputUpload", () => {
 
   it("uploads via direct upload and sets hidden signed ids", () => {
     cy.stub(Uploader.prototype, "start")
-      .callsFake((callback: (error: unknown, blob: { signed_id: string }) => void) => {
+      .callsFake((callback) => {
         callback(null, { signed_id: "signed-123" });
       })
       .as("directUploadStart");

package/cypress/component/{multiUpload.cy.ts → multiUpload.cy.js}

@@ -2,7 +2,7 @@ import multiUpload from "../../components/fields/multiUpload.vue";
 import Uploader from "../../utils/glibDirectUpload";
 import { mountWithGlib, restoreUploaderStartStub, setupGlibGlobals } from "./testUtils";
 
-const buildSpec = (overrides: Record<string, unknown> = {}) => ({
+const buildSpec = (overrides = {}) => ({
   name: "user[files][]",
   accepts: { fileType: "txt" },
   placeholder: "Drop files",
@@ -10,7 +10,7 @@ const buildSpec = (overrides: Record<string, unknown> = {}) => ({
   ...overrides,
 });
 
-const mountComponent = (spec: Record<string, unknown>) => {
+const mountComponent = (spec) => {
   mountWithGlib(multiUpload, spec);
 };
 
@@ -25,7 +25,7 @@ describe("multiUpload", () => {
 
   it("uploads via direct upload and sets hidden signed ids", () => {
     cy.stub(Uploader.prototype, "start")
-      .callsFake((callback: (error: unknown, blob: { signed_id: string }) => void) => {
+      .callsFake((callback) => {
         callback(null, { signed_id: "signed-123" });
       })
       .as("directUploadStart");

package/cypress/component/{placeholderUpload.cy.ts → placeholderUpload.cy.js}

@@ -2,7 +2,7 @@ import placeholderUpload from "../../components/fields/placeholderUpload.vue";
 import Uploader from "../../utils/glibDirectUpload";
 import { mountWithGlib, restoreUploaderStartStub, setupGlibGlobals } from "./testUtils";
 
-const buildSpec = (overrides: Record<string, unknown> = {}) => ({
+const buildSpec = (overrides = {}) => ({
   name: "user[file]",
   type: "image",
   width: 120,
@@ -12,7 +12,7 @@ const buildSpec = (overrides: Record<string, unknown> = {}) => ({
   ...overrides,
 });
 
-const mountComponent = (spec: Record<string, unknown>) => {
+const mountComponent = (spec) => {
   mountWithGlib(placeholderUpload, spec);
 };
 
@@ -27,7 +27,7 @@ describe("placeholderUpload", () => {
 
   it("uploads via direct upload and sets hidden signed id", () => {
     cy.stub(Uploader.prototype, "start")
-      .callsFake((callback: (error: unknown, blob: { signed_id: string }) => void) => {
+      .callsFake((callback) => {
         callback(null, { signed_id: "signed-123" });
       })
       .as("directUploadStart");