Merge pull request #2991 from AlchemyCMS/backport/7.1-stable/pr-2987

[7.1-stable] fix PictureEditor defaultCropSize
AlchemyCMS · Aug 10, 2024 · b5a14cd · b5a14cd
2 parents 14c0ed0 + c671bd5
commit b5a14cd
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 3 deletions.
diff --git 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
@@ -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([])
+      })
+    })
+  })
+})