From d1b9b8beccdbe5ba98cf4e352af103b4913a5fe6 Mon Sep 17 00:00:00 2001
From: keshav234156 <45951376+keshav234156@users.noreply.github.com>
Date: Fri, 17 Jan 2020 03:48:34 +0530
Subject: [PATCH] Fixes disabling of clicking after crop is deleted and added
 test for the cropUI (#1481)

* crop-ui

* crop-ui

* Added test

* Adding test

* improving comments

Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>
---
 examples/lib/defaultHtmlStepUi.js |  4 ++-
 src/modules/Crop/Ui.js            |  7 -----
 test/ui-2/test/cropui.test.js     | 46 +++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 test/ui-2/test/cropui.test.js

diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index ad61cf9a77..3fdcfb36f8 100644
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -418,7 +418,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
     if (_sequencer.steps.length - 1 > 1) $('#load-image .insert-step').prop('disabled', false);
     else $('#load-image .insert-step').prop('disabled', true);
 
-    $('div[class*=imgareaselect-]').remove();
+    $(step.imgElement).imgAreaSelect({
+      remove: true
+    });
   }
 
   function getPreview() {
diff --git a/src/modules/Crop/Ui.js b/src/modules/Crop/Ui.js
index b82bb2e626..e7404f80f5 100644
--- a/src/modules/Crop/Ui.js
+++ b/src/modules/Crop/Ui.js
@@ -59,12 +59,6 @@ module.exports = function CropModuleUi(step, ui) {
     ];
   }
 
-  function remove() {
-    $(imgEl()).imgAreaSelect({
-      remove: true
-    });
-  }
-
   function hide() {
     // then hide the draggable UI
     $(imgEl()).imgAreaSelect({
@@ -92,7 +86,6 @@ module.exports = function CropModuleUi(step, ui) {
 
   return {
     setup: setup,
-    remove: remove,
     hide: hide
   };
 };
diff --git a/test/ui-2/test/cropui.test.js b/test/ui-2/test/cropui.test.js
new file mode 100644
index 0000000000..25528f8e16
--- /dev/null
+++ b/test/ui-2/test/cropui.test.js
@@ -0,0 +1,46 @@
+const timeout = 300000 ;
+const fs = require('fs');
+beforeAll(async () => {
+  path = fs.realpathSync('file://../examples/index.html');
+  await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});
+  await page.setViewport({ width: 1500, height: 700});
+});
+describe('Crop UI', ()=>{
+  test('Crop UI', async()=>{
+    // Wait for the load step to get loaded.
+    await page.waitForSelector('.step');
+    const Length = await page.evaluate(() => document.querySelectorAll('.step').length);
+    // Click on the Crop step from radio-group.
+    await page.click('[data-value=\'crop\']');
+    const LengthChanged = await page.evaluate(() => document.querySelectorAll('.step').length);
+    const src1 = await page.evaluate(() => document.querySelectorAll('.step img')[1].src);
+    const example = await page.$$('img.step-thumbnail');
+    /**
+    * Drawing a bounding box around the image to be cropped.
+    * box.x returns x position of mouse pointer.
+    * box.y returns y position of mouse pointer.
+    **/
+    const box = await example[1].boundingBox();
+    // Moving mouse pointer inside the the image.
+    await page.mouse.move(box.x, box.y);
+    await page.mouse.move(box.x + 50, box.y);
+    await page.mouse.move(box.x + 50, box.y + 50);
+    // Mouse.down() dispatches a mousedown event.
+    await page.mouse.down();
+    // Selecting area to be cropped.
+    await page.mouse.move(box.x + 50, box.y + 200);
+    await page.mouse.move(box.x + 200, box.y + 200);
+    // Mouse.up() dispatches a mouseup event.
+    await page.mouse.up();
+    // Removing the crop step from the sequence.
+    await page.click('.remove.btn-default');
+    const Lengthremoved = await page.evaluate(() => document.querySelectorAll('.step').length);
+    // Checking if we can select the crop step again or not.
+    await page.click('[data-value=\'crop\']');
+    const LengthReadded = await page.evaluate(() => document.querySelectorAll('.step').length);
+    expect(Length).toBe(1);
+    expect(LengthChanged).toBe(2);
+    expect(Lengthremoved).toBe(1);
+    expect(LengthReadded).toBe(2);
+  }, timeout);
+});
\ No newline at end of file