itemengine-cypress-automation 1.0.362 → 1.0.363-IEI-5423-cypress-39d2c85.0

package/cypress/e2e/ILC/ImageHighlight/customiseHighlightStyle.js

@@ -12,6 +12,7 @@ const rootsHighlightRegion = [[45, 45], [45, 55], [57, 55], [57, 45]];
 
 const defaultStateColor = 'rgb(120, 60, 60)';
 const activeStateColor = 'rgb(60, 120, 120)';
+const defaultStateBorderColorWithOpacity = 'rgba(120, 61, 61, 0.5)';
 
 describe('Create Item page - Image highlight: Customize image highlight style', () => {
     before(() => {
@@ -156,6 +157,31 @@ describe('Create Item page - Image highlight: Customize image highlight style',
         });
     });
 
+    describe('Border opacity image highlight style : Edit tab content and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When user changes the opacity in color picker the changes should be displayed', () => {
+           imageHighlightPage.steps.clickOnBorderColorIcon();
+           imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+           colorPopupComponent.steps.clickInColorSaturationPalette();
+           imageHighlightPage.steps.clickInAlphaPicker();
+           imageHighlightPage.steps.clickOnOkButton();
+           imageHighlightPage.steps.verifyEditedBorderOpacityInSpecifyCorrectAnswerSection(2, defaultStateBorderColorWithOpacity);
+        });
+
+    });
     // Change 'Stroke color' to 'Border color' in the following tests after https://redmine.zeuslearning.com/issues/580697 has been resolved.
 
     describe('Border color image highlight style : Edit tab content and functionality', () => {

package/cypress/pages/components/colorPopupComponent.js

@@ -6,6 +6,7 @@ const selectors = {
     ...dialogBoxBase,
     colorBlock: () => cy.get('.color-picker-block'),
     colorSaturationPalette: () => cy.get('.react-colorful__saturation'),
+    alphaPicker : () => cy.get('.react-colorful__alpha'),
     colorSaturationPicker: () => cy.get('.react-colorful__saturation-pointer .react-colorful__pointer-fill'),
     colorHuePalette: () => cy.get('.react-colorful__hue'),
     colorHuePicker: () => cy.get('.react-colorful__hue-pointer .react-colorful__pointer-fill'),
@@ -97,6 +98,11 @@ const steps = {
             .click();
     },
 
+    clickInAlphaPicker: () => {
+        colorPopupComponent.alphaPicker()
+            .click();
+    },
+
     clickInColorHuePalette: () => {
         colorPopupComponent.colorHuePalette()
             .click();

package/cypress/pages/imageHighlightPage.js

@@ -1349,6 +1349,16 @@ const steps = {
             });
     },
 
+    verifyEditedBorderOpacityInSpecifyCorrectAnswerSection: (index, opacity) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon(), {
+                    'stroke': opacity
+                });
+            });
+    },
+
     /**
      * @param {number} index index of highlight region
      * @param {string} color color to be checked in rgb/rgba format

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.362",
+  "version": "1.0.363-IEI-5423-cypress-39d2c85.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -52,4 +52,4 @@
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.47.0"
   }
-}
+}