itemengine-cypress-automation 1.0.369-IEI-6055-list-ordering-undefined-option-fix-47a6e20.0 → 1.0.369-IEI-6055-list-ordering-undefined-option-fix-e7de444.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,34 @@ 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.checkShowAvailableOptionsToStudentsCheckbox();
+           imageHighlightPage.steps.verifyEditedBorderOpacityInSpecifyCorrectAnswerSection(2, defaultStateBorderColorWithOpacity);
+           imageHighlightPage.steps.switchToPreviewTab();
+           imageHighlightPage.steps.verifyEditedBorderOpacityInPreviewtabSection(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,21 @@ const steps = {
             });
     },
 
+    /**
+     * @param {number} index index of highlight region
+     * @param {string} colorWithOpacity color to be checked in rgba format
+     * @description this function verifiies the border color of highlight regions in specify correct answer section.
+     */
+    verifyEditedBorderOpacityInSpecifyCorrectAnswerSection: (index, colorWithOpacity) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .within(() => {
+                utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon(), {
+                    'stroke': colorWithOpacity
+                });
+            });
+    },
+
     /**
      * @param {number} index index of highlight region
      * @param {string} color color to be checked in rgb/rgba format
@@ -1366,6 +1381,23 @@ const steps = {
                     });
             });
     },
+    /**
+     * @param {number} index index of highlight region
+     * @param {string} colorWithOpacity color to be checked in rgba format
+     * @description this function verifies the border color of highlight regions in preview tab.
+     */
+    verifyEditedBorderOpacityInPreviewtabSection: (index, colorWithOpacity) => {
+        imageHighlightPage.previewTabQuestionWrapper()
+            .within(() => {
+                imageHighlightPage.previewSectionHighlight()
+                    .eq(index)
+                    .within(() => {
+                        utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon(), {
+                            'stroke': colorWithOpacity
+                        });
+                    });
+            });
+    },
 
     verifyBorderStyleButtonsVisible: () => {
         utilities.verifyElementVisibilityState(imageHighlightPage.popupBorderStyleButtons().eq(0), 'visible');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.369-IEI-6055-list-ordering-undefined-option-fix-47a6e20.0",
+  "version": "1.0.369-IEI-6055-list-ordering-undefined-option-fix-e7de444.0",
   "description": "",
   "main": "index.js",
   "scripts": {