fix PictureEditor defaultCropSize

Since ae15cdc we use our
own max function and not the Underscore.js one. This function
does not take an array, nut just two arguments.

(cherry picked from commit 9a181a1)

app/javascript/alchemy_admin/picture_editors.js

@@ -7,7 +7,7 @@ const UPDATE_DELAY = 125
 const IMAGE_PLACEHOLDER = '<i class="icon ri-image-line ri-fw"></i>'
 const THUMBNAIL_SIZE = "160x120"
 
-class PictureEditor {
+export class PictureEditor {
   constructor(container) {
     this.container = container
     this.cropFromField = container.querySelector("[data-crop-from]")
@@ -131,10 +131,10 @@ class PictureEditor {
     if (!this.imageCropperEnabled) return []
 
     const mask = this.targetSize.split("x").map((n) => parseInt(n))
-    const zoom = max([
+    const zoom = max(
       mask[0] / this.imageFileWidth,
       mask[1] / this.imageFileHeight
-    ])
+    )
 
     return [Math.round(mask[0] / zoom), Math.round(mask[1] / zoom)]
   }

spec/javascript/alchemy_admin/picture_editors.spec.js

@@ -0,0 +1,148 @@
+import { PictureEditor } from "alchemy_admin/picture_editors"
+
+jest.mock("alchemy_admin/image_loader", () => ({
+  __esModule: true,
+  default: jest.fn().mockImplementation(() => ({
+    load: jest.fn()
+  }))
+}))
+
+describe("PictureEditor", () => {
+  describe("defaultCropSize", () => {
+    describe("when image cropper is enabled", () => {
+      beforeEach(() => {
+        document.body.innerHTML = `
+          <div class="ingredient-editor picture">
+            <div
+              data-target-size="1200x480"
+              data-image-cropper="true"
+              class="picture_thumbnail"
+            >
+              <div class="picture_image">
+                <button class="picture_tool delete"></button>
+                <div class="thumbnail_background">
+                  <img src="/image.jpg" />
+                </div>
+              </div>
+            </div>
+            <input
+              value="1"
+              data-picture-id="true"
+              data-image-file-width="5644"
+              data-image-file-height="3761"
+              type="hidden"
+            />
+            <input
+              data-link-value="true"
+              type="hidden"
+              value=""
+            />
+            <input
+              data-link-title="true"
+              type="hidden"
+              value=""
+            />
+            <input
+              data-link-class="true"
+              type="hidden"
+              value=""
+            />
+            <input
+              data-link-target="true"
+              type="hidden"
+              value=""
+            />
+            <input
+              data-crop-from="true"
+              type="hidden"
+              value="0x423"
+            />
+            <input
+              data-crop-size="true"
+              type="hidden"
+              value="5644x2258"
+            />
+            <input
+              type="hidden"
+              value="3"
+            />
+          </div>
+        `
+      })
+
+      it("is the image size", () => {
+        const container = document.querySelector(".ingredient-editor")
+        const editor = new PictureEditor(container)
+        expect(editor.defaultCropSize).toEqual([5644, 2258])
+      })
+    })
+
+    describe("when image cropper is disabled", () => {
+      beforeEach(() => {
+        document.body.innerHTML = `
+          <div class="ingredient-editor picture">
+            <div
+              data-target-size="1200x480"
+              data-image-cropper="false"
+              class="picture_thumbnail"
+            >
+              <div class="picture_image">
+                <button class="picture_tool delete"></button>
+                <div class="thumbnail_background">
+                  <img src="/image.jpg" />
+                </div>
+              </div>
+            </div>
+            <input
+              value="1"
+              data-picture-id="true"
+              data-image-file-width="5644"
+              data-image-file-height="3761"
+              type="hidden"
+            />
+            <input
+              data-link-value="true"
+              type="hidden"
+              value=""
+            />
+            <input
+              data-link-title="true"
+              type="hidden"
+              value=""
+            />
+            <input
+              data-link-class="true"
+              type="hidden"
+              value=""
+            />
+            <input
+              data-link-target="true"
+              type="hidden"
+              value=""
+            />
+            <input
+              data-crop-from="true"
+              type="hidden"
+              value="0x423"
+            />
+            <input
+              data-crop-size="true"
+              type="hidden"
+              value="5644x2258"
+            />
+            <input
+              type="hidden"
+              value="3"
+            />
+          </div>
+        `
+      })
+
+      it("is empty", () => {
+        const container = document.querySelector(".ingredient-editor")
+        const editor = new PictureEditor(container)
+        expect(editor.defaultCropSize).toEqual([])
+      })
+    })
+  })
+})