itemengine-cypress-automation 1.0.352-IEI-6059-a5d8e8c.0 → 1.0.353-capture-image-c0b337c.0

package/cypress/e2e/ILC/UploadResponse/uploadResponsePreview.js

@@ -111,51 +111,88 @@ describe('Create question page - Upload Response: Preview', () => {
         });
     });
 
-    //Added to manual testing list
-    describe.skip('Allow students to capture photos preview', () => {
+    describe('Allow students to capture photos preview', () => {
         abortEarlySetup();
         before(() => {
+            cy.mockCamera();
             uploadResponsePage.steps.navigateToCreateQuestion('upload response');
             uploadResponsePage.steps.switchToPreviewTab();
         });
 
         it('Camera icon should be displayed before link text \'capture an image\'', () => {
+            utilities.verifyElementVisibilityState(uploadResponsePage.cameraIcon(), 'visible');
+            utilities.verifyElementVisibilityState(uploadResponsePage.captureAnImageLabel(), 'visible');
+            utilities.verifyInnerText(uploadResponsePage.captureAnImageLabel(), 'capture an image');
         });
 
         it('When the user clicks on the link text \'capture an image\' a \'Capture image\' popup should open', () => {
-
-        });
-
-        it('CSS of \'Capture image\' popup', () => {
-
+            uploadResponsePage.steps.captureImage();
+            utilities.verifyElementVisibilityState(uploadResponsePage.dialogBox(), 'visible');
         });
 
         it('On \'Capture image\' popup following should be displayed - \'Capture image\' title text, Camera preview, Capture and Cancel buttons', () => {
+            uploadResponsePage.steps.verifyCaptureImagePopup();
+        });
 
+        it('CSS of \'Capture image\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(uploadResponsePage.dialogBoxTitle(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(uploadResponsePage.cancelButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.transparent,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(uploadResponsePage.acceptButton(), {
+                'color': css.color.primaryBtn,
+                'background-color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
         });
 
         it('When the user clicks on \'Cancel\' button the \'Capture image\' popup should close', () => {
-
+            uploadResponsePage.steps.clickCancelButtonInPopup();
+            utilities.verifyElementVisibilityState(uploadResponsePage.dialogBox(), 'notExist');
         });
 
         it('When the user clicks on \'Capture\' button, then an image should get captured and a preview of the captured image should be displayed in place of the camera preview and also two buttons \'Retake\' and \'Save\' should be displayed in the popup and \'Cancel\' and \'Capture\' buttons should not be displayed in the popup', () => {
-
+            uploadResponsePage.steps.captureImage();
+            uploadResponsePage.steps.clickAcceptButtonInPopup();
+            utilities.verifyInnerText(uploadResponsePage.cancelButton(), 'Retake');
+            utilities.verifyInnerText(uploadResponsePage.acceptButton(), 'Save');
         });
 
         it('When the user clicks on \'Save\' button, it should upload the captured image in the response', () => {
-
+            uploadResponsePage.steps.clickAcceptButtonInPopup();
+            utilities.verifyElementVisibilityState(uploadResponsePage.uploadingProgressBar(), 'notExist');
         });
 
         it('The captured image should be saved in .jpeg format and the 1st image should be saved with the name \'Photo.jpeg\'', () => {
-
+            uploadResponsePage.steps.uploadedFileContentsPreviewTab(0, 'Photo.jpeg');
         });
 
         it('If the user uploads another image the name should be \'Photo-1.jpeg\' and so on', () => {
-            //check till Photo-2.jpeg
-
+            uploadResponsePage.steps.captureImage();
+            uploadResponsePage.steps.clickAcceptButtonInPopup();
+            uploadResponsePage.steps.clickAcceptButtonInPopup();
+            uploadResponsePage.steps.uploadedFileContentsPreviewTab(1, 'Photo-1.jpeg');
+            uploadResponsePage.steps.captureImage();
+            uploadResponsePage.steps.clickAcceptButtonInPopup();
+            uploadResponsePage.steps.clickAcceptButtonInPopup();
+            uploadResponsePage.steps.uploadedFileContentsPreviewTab(2, 'Photo-2.jpeg');
         });
 
         it('When the user clicks on \'Retake\' button, it should take the user back to the capture an image flow where the user should be able to capture another image', () => {
+            uploadResponsePage.steps.captureImage();
+            uploadResponsePage.steps.clickAcceptButtonInPopup();
+            uploadResponsePage.steps.clickCancelButtonInPopup();
+            uploadResponsePage.steps.verifyCaptureImagePopup();
+            uploadResponsePage.steps.clickAcceptButtonInPopup();
+            uploadResponsePage.steps.clickAcceptButtonInPopup();
         });
     });
 });

package/cypress/pages/uploadResponsePage.js

@@ -61,6 +61,7 @@ const selectors = {
     deviceLink: () => cy.get('.icon-Device'),
     googleDriveLink: () => cy.get('.icon-Google-Drive'),
     cameraIcon: () => cy.get('.icon-Capture-an-image'),
+    captureAnImageLabel: () => cy.get('.upload-text.icon-Capture-an-image'),
     supportedFileFormatLabel: () => cy.get('.supported-file-text'),
     supportedFileInfoIcon: () => cy.get('.supported-file-icon-wrapper'),
     uploadingProgressBar: () => cy.get('.uploading-document-progress-bar'),
@@ -86,6 +87,7 @@ const selectors = {
     warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
     acceptButton: () => cy.get('.popup-button-wrapper button').eq(1),
     cancelButton: () => cy.get('.popup-button-wrapper button').eq(0),
+    cameraCanvas: () => cy.get('.camera-capturing-canvas'),
     questionWrapperPreviewTab: () => cy.get('[class*="UploadQuestionPreviewstyle__UploadQuestionPreviewWrapper"]'),
     maximumFileSize: () => cy.get('[class*="UploadQuestionPreviewstyle__MaxFileLimitDesc"]'),
     unSupportedFileInfoIcon: () => cy.get('[class*="UploadedDocumentsstyle__UnSupportedFileIcon"]'),
@@ -640,6 +642,19 @@ const steps = {
     verifyAllowStudentToAddFileDescriptionCheckboxUnchecked: () => {
         uploadResponsePage.allowStudentToAddFileDescriptionCheckbox()
             .should('not.be.checked');
+    },
+
+    captureImage: () => {
+        uploadResponsePage.cameraIcon()
+            .click();
+    },
+
+    verifyCaptureImagePopup: () => {
+        utilities.verifyInnerText(uploadResponsePage.dialogBoxTitle(), 'Capture image');
+        utilities.verifyInnerText(uploadResponsePage.cancelButton(), 'Cancel');
+        utilities.verifyElementVisibilityState(uploadResponsePage.cancelButton(), 'visible');
+        utilities.verifyInnerText(uploadResponsePage.acceptButton(), 'Capture');
+        utilities.verifyElementVisibilityState(uploadResponsePage.acceptButton(), 'visible');
     }
 }
 

package/cypress/support/commands.js

@@ -1,7 +1,7 @@
 import crypto from 'crypto';
 import { v4 as uuidv4 } from 'uuid';
 import "cypress-real-events/support";
-import 'cypress-file-upload';
+// import 'cypress-file-upload';
 import { iePage } from './migrationHelpers/verifyIeQuestionData';
 import { lrnPage } from './migrationHelpers/extractLrnQuestionData';
 require('cy-verify-downloads').addCustomCommand();
@@ -203,6 +203,15 @@ Cypress.Commands.add('startApplitools', () => {
     });
 });
 
+Cypress.Commands.add('mockCamera', () => {
+    cy.visit(Cypress.config().baseUrl, {
+        onBeforeLoad(win) {
+            win.navigator.mediaDevices.getUserMedia = () =>
+                Promise.resolve(new MediaStream());
+        }
+    });
+});
+
 export function getShortDate(previous, dayFormat = 'oneDigitFormat') {
 
     var date = new Date();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.352-IEI-6059-a5d8e8c.0",
+  "version": "1.0.353-capture-image-c0b337c.0",
   "description": "",
   "main": "index.js",
   "scripts": {