From c671bd5a343c14a039935a09187855dd0401f4d9 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Sun, 4 Aug 2024 18:48:52 +0200
Subject: [PATCH] fix PictureEditor defaultCropSize

Since ae15cdc512afcceaf12ace19ea69b4d00d304c36 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 9a181a1ee1204ef8d6249032f746a9cef76f57e7)
---
 .../alchemy_admin/picture_editors.js          |   6 +-
 .../alchemy_admin/picture_editors.spec.js     | 148 ++++++++++++++++++
 2 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 spec/javascript/alchemy_admin/picture_editors.spec.js

diff --git a/app/javascript/alchemy_admin/picture_editors.js b/app/javascript/alchemy_admin/picture_editors.js
index ae2a3679ca..c395054ece 100644
--- a/app/javascript/alchemy_admin/picture_editors.js
+++ b/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)]
   }
diff --git a/spec/javascript/alchemy_admin/picture_editors.spec.js b/spec/javascript/alchemy_admin/picture_editors.spec.js
new file mode 100644
index 0000000000..5731b24325
--- /dev/null
+++ b/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([])
+      })
+    })
+  })
+})