itemengine-cypress-automation 1.0.193-packageUpdated-7f1e306.0 → 1.0.193-packageUpdated-0af2e49.0

package/cypress/pages/videoResponsePage.js

@@ -1,4 +1,5 @@
 import utilities from "../support/helpers/utilities"
+import { dialogBoxBase } from "./dialogBoxBase";
 import { additionalSettingsPanel, commonComponents, createQuestionBasePage, questionInstructionsComponent, scoringSectionBase, playbackControlsBaseComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, limitNumberOfRetakeComponent, studentViewSettingsLabelComponent, allowTeachersToDownloadStudentResponseComponent, additionalSettingsAccessibilitySectionComponent } from "./components"
 import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 const css = Cypress.env('css');
@@ -60,6 +61,44 @@ const selectors = {
     videoSettingsButtonLabel: () => cy.get('.audio-indicator [class*="CustomizePlaybackControlsstyles__Label"]'),
     timerButtonVideoSettings: () => cy.get('[data-ngie-testid="timer-toggle-button"]'),
     progressIndicatorButtonVideoSettings: () => cy.get('[data-ngie-testid="progress-indicator-toggle-button"]'),
+
+    //video recorder style
+    videoRecorderStyleLabel: () => cy.get('.recorder-style-label'),
+    standardRecorderStyleButton: () => cy.get('[data-ngie-testid="standard-toggle-button"]'),
+    compactRecorderStyleButton: () => cy.get('[data-ngie-testid="compact-toggle-button"]'),
+    videoRecorderDefaultWidthLabel: () => cy.get('[class*="VideoRecorderWidth"] [class*="PropertyLabel"]'),
+    videoRecorderDefaultWidthInputField: () => cy.get('[class*="VideoRecorderWidth"] .video-recorder-width-input-field input'),
+
+    //compact style
+    recordButtonCompactPreview: () => cy.get('.Record-button'),
+    pauseRecordingButtonCompactPreview: () => cy.get('.Pause-button'),
+    stopRecordingButtonCompactPreview: () => cy.get('.Stop-button'),
+    resumeRecordingButtonCompactPreview: () => cy.get('.Resume-button'),
+    retakeButtonCompactPreview: () => cy.get('.Retake-button'),
+    playPlaybackButtonCompactPreview: () => cy.get('.Play-button'),
+    pausePlaybackButtonCompactPreview: () => cy.get('.Pause-button'),
+    recordingHelpTextCompactPreview: () => cy.get('[class*="ClickToStartRecordingWrapper"]'),
+    recordingStatusTextCompactPreview: () => cy.get('.recording-status-text'),
+    recordingTimerCompactPreview: () => cy.get('[class*="VideoRecorderstyle__RecordTimer"]'),
+    playbackTimeCompactPreview: () => cy.get('[class*="VideoRecorderstyle__PlayerTimerWrapper"]'),
+    recorderFlyoutCompactPreview: () => cy.get('[class*="VideoOverlaystyle__LineReaderOverlay"]'),
+    stopRecordingFlyoutButton: () => cy.get('.compact-Stop-button'),
+    pauseRecordingFlyoutButton: () => cy.get('.compact-Pause-button'),
+    resumeRecordingFlyoutButton: () => cy.get('.compact-Record-button'),
+    playPlaybackFlyoutButton: () => cy.get('.compact-Play-button'),
+    pausePlaybackFlyoutButton: () => cy.get('.compact-Pause-button'),
+    retakeFlyoutButton: () => cy.get('.compact-Retake-button'),
+    playbackProgressBar: () => cy.get('.audio-playback-slider-wrapper'),
+    previewPlaybackSlider: () => cy.get('input[aria-label="Slider bar"]'),
+    recordedResponseHelpText: () => cy.get('[class*="CompaactRecorderText"]'),
+    resizeIconCompactRecorderFlyout: () => cy.get('.resizeMaskButton'),
+    dragHandleCompactRecorderFlyout: () => cy.get('.drag-handle-left-right-move-button'),
+
+    //student view settings
+    allowStudentsToResizeVideoRecorderLabel: () => cy.get('[data-ngie-testid="allow-students-to-resize-video-recorder-checkbox"] .MuiFormControlLabel-label'),
+    allowStudentsToResizeVideoRecorderCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-resize-video-recorder-checkbox"] input'),
+    allowStudentsToRepositionVideoRecorderLabel: () => cy.get('[data-ngie-testid="allow-students-to-reposition-video-recorder-checkbox"] .MuiFormControlLabel-label'),
+    allowStudentsToRepositionVideoRecorderCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-reposition-video-recorder-checkbox"] input'),
 }
 
 const steps = {
@@ -271,10 +310,23 @@ const steps = {
      * This function extracts the elapsed time from the video player, calculates the total elapsed time in seconds,
      * and then compares it to the expected time.
      * @param {number} time - The expected playback time in seconds.
+     * @param {("Standard" | "Compact")} recorderStyle - The style of the recorder ('Standard' or 'Compact').
      * @throws {Error} Throws an error if the actual playback time does not match the expected time.
      */
-    verifyPlaybackElapsedTime: (time) => {
-        videoResponsePage.playerTimer()
+    verifyPlaybackElapsedTime: (time, recorderStyle) => {
+        let playbackTimeElement;
+
+        switch (recorderStyle) {
+            case 'Standard':
+                playbackTimeElement = videoResponsePage.playerTimer();
+                break;
+            case 'Compact':
+                playbackTimeElement = videoResponsePage.playbackTimeCompactPreview();
+                break;
+            default:
+                throw new Error('Invalid recorder style');
+        };
+        playbackTimeElement
             .invoke('text')
             .then(text => {
                 let elapsedTime = text.split('/')[0]
@@ -531,7 +583,7 @@ const steps = {
                 videoResponsePage.seekButtonControlsForPlayback()
                     .should('not.have.class', 'ngie-toggle-button-selected');
                 break;
-            case 'Record Again':
+            case 'Record again':
                 videoResponsePage.recordAgainButtonControlsForPlayback()
                     .should('not.have.class', 'ngie-toggle-button-selected');
                 break;
@@ -539,11 +591,11 @@ const steps = {
                 videoResponsePage.volumeButtonControlsForPlayback()
                     .should('not.have.class', 'ngie-toggle-button-selected');
                 break;
-            case 'Playback Speed':
+            case 'Playback speed':
                 videoResponsePage.playbackSpeedButtonControlsForPlayback()
                     .should('not.have.class', 'ngie-toggle-button-selected');
                 break;
-            case 'Full Screen':
+            case 'Full screen':
                 videoResponsePage.fullScreenButtonControlsForPlayback()
                     .should('not.have.class', 'ngie-toggle-button-selected');
                 break;
@@ -655,6 +707,262 @@ const steps = {
             default:
                 throw new Error('Invalid button');
         }
+    },
+
+    //Steps related to compact recorder style
+    /**
+     * Selects the video recorder style based on the provided style.
+     * @param {('Standard' | 'Compact')} recorderStyle - The style of the video recorder to select. 
+     * @throws {Error} Will throw an error if an invalid recorder style is provided.
+     */
+    selectVideoRecorderStyle: (recorderStyle) => {
+        switch (recorderStyle) {
+            case 'Standard':
+                videoResponsePage.standardRecorderStyleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Compact':
+                videoResponsePage.compactRecorderStyleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid recorder style');
+        }
+    },
+
+    startRecordingCompactPreview: () => {
+        videoResponsePage.recordButtonCompactPreview()
+            .click();
+    },
+
+    stopRecordingCompactPreview: () => {
+        videoResponsePage.stopRecordingButtonCompactPreview()
+            .click();
+    },
+
+    waitForRecordingToStartCompactPreview: () => {
+        videoResponsePage.recordingTimerCompactPreview()
+            .should('contain', '0:01 /')
+    },
+
+    /**
+     * @param {string} recordingStatus - The expected recording status, such as 'Allow access to your camera and microphone.',
+     * 'Preparing to record', 'Recording...', 'Recording paused', or 'Saving'.
+     * @throws {Error} Throws an error if an invalid recording status is provided.
+     * @description this function verifies the display of recording status and associated icons in the video response interface.
+     */
+    verifyRecordingStatusCompactPreview: (recordingStatus) => {
+        const statusIcon = videoResponsePage.recordingStatusIcon();
+
+        let expectedIconId = null;
+
+        switch (recordingStatus) {
+            case 'Preparing to record':
+            case 'Recording...':
+                expectedIconId = 'g#Recording\\.\\.\\.';
+                break;
+            case 'Recording paused':
+                expectedIconId = '.rec-pause-btn';
+                break;
+            default:
+                throw new Error('Invalid recording status');
+        }
+
+        statusIcon.find(`${expectedIconId}`).should('be.visible');
+        utilities.verifyInnerText(videoResponsePage.recordingStatusTextCompactPreview(), recordingStatus);
+        utilities.verifyElementVisibilityState(videoResponsePage.recordingStatusTextCompactPreview(), 'visible');
+    },
+
+    /**
+     * Verifies the displayed recording time against the expected elapsed time and total time.
+     * @param {string} elapsedTime The elapsed time of the recording.
+     * @param {string} totalTime The total time of the recording.
+     */
+    verifyRecordingTimeCompactPreview: (elapsedTime, totalTime) => {
+        utilities.verifyInnerText(videoResponsePage.recordingTimerCompactPreview(), `${elapsedTime} / ${totalTime}`);
+    },
+
+    /**
+     * @param {string} elapsedTime playing time of the recorded video
+     * @param {string} totalTime The total time of the recorded video
+     * @description this function is used to verify the playing time of a recorded video
+     */
+    verifyVideoPlaybackTimerCompactPreview: (elapsedTime, totalTime) => {
+        videoResponsePage.playerTimer()
+            .should('have.text', `${elapsedTime}/${totalTime}`);
+    },
+
+    pauseRecordingCompactPreview: () => {
+        videoResponsePage.pauseRecordingButtonCompactPreview()
+            .click();
+    },
+
+    resumeRecordingCompactPreview: () => {
+        videoResponsePage.resumeRecordingButtonCompactPreview()
+            .click();
+    },
+
+    verifyRecordingLengthAfterResumingCompactPreview: () => {
+        videoResponsePage.recordingTimerCompactPreview()
+            .invoke('text')
+            .then(($timer) => {
+                const currentTimer = $timer.split(' / ')[0];
+                const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
+                expect(currentSeconds).to.be.gte(6);
+            });
+    },
+
+    /**
+     * @description Records a video and saves it for a specified duration for the compact recorder style.
+     * @param {number} time - The duration (in milliseconds) for which the video should be recorded.
+     * @throws {Error} Throws an error if any step in the recording process fails.
+     */
+    recordAndSaveVideoCompactPreview: (time) => {
+        videoResponsePage.steps.startRecordingCompactPreview();
+        utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'visible')
+        utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'notExist')
+        videoResponsePage.steps.waitForRecordingToStartCompactPreview()
+        videoResponsePage.steps.addWaitToRecord(time - 1000);
+        videoResponsePage.steps.stopRecordingCompactPreview();
+    },
+
+    startPlaybackCompactPreview: () => {
+        videoResponsePage.playPlaybackButtonCompactPreview()
+            .click();
+    },
+
+    pausePlaybackCompactPreview: () => {
+        videoResponsePage.pausePlaybackButtonCompactPreview()
+            .click();
+    },
+
+    waitForPlaybackToBeginCompactPreview: () => {
+        videoResponsePage.playbackTimeCompactPreview()
+            .should('contain', '0:01/')
+    },
+
+    pauseAndVerifyProgressBarSliderPositionCompactPreview: () => {
+        let initialWidthProgressBar
+        playbackControlsBaseComponent.progressBarSlider()
+            .then(($currWidth) => {
+                initialWidthProgressBar = $currWidth[0].valueAsNumber
+            });
+        videoResponsePage.steps.pausePlaybackCompactPreview();
+        playbackControlsBaseComponent.progressBarSlider()
+            .then(($finalWidth) => {
+                cy.log('The assertion is verifying the value synchronously i.e in real time')
+                const finalWidth = $finalWidth[0].valueAsNumber
+                expect(finalWidth).to.closeTo(initialWidthProgressBar, 5)
+            });
+    },
+
+    retakeRecordingCompactPreview: () => {
+        videoResponsePage.retakeButtonCompactPreview()
+            .click();
+    },
+
+    verifyRetakePopupContents: () => {
+        utilities.verifyInnerText(videoResponsePage.retakePopupContent(), 'Are you sure you want to overwrite the existing video recording?');
+        utilities.verifyInnerText(videoResponsePage.confirmRetakeButton(), 'Confirm');
+        utilities.verifyElementVisibilityState(videoResponsePage.confirmRetakeButton(), 'visible');
+        utilities.verifyInnerText(videoResponsePage.cancelRetakeButton(), 'Cancel');
+        utilities.verifyElementVisibilityState(videoResponsePage.cancelRetakeButton(), 'visible');
+    },
+
+    pauseRecordingFlyoutButtonCompactPreview: () => {
+        videoResponsePage.pauseRecordingFlyoutButton()
+            .click();
+    },
+
+    resumeRecordingFlyoutButtonCompactPreview: () => {
+        videoResponsePage.resumeRecordingFlyoutButton()
+            .click();
+    },
+
+    stopRecordingFlyoutButtonCompactPreview: () => {
+        videoResponsePage.stopRecordingFlyoutButton()
+            .click();
+    },
+
+    startPlaybackFlyoutButtonCompactPreview: () => {
+        videoResponsePage.playPlaybackFlyoutButton()
+            .click();
+    },
+
+    pausePlaybackFlyoutButtonCompactPreview: () => {
+        videoResponsePage.pausePlaybackFlyoutButton()
+            .click();
+    },
+
+    retakeRecordingFlyoutButtonCompactPreview: () => {
+        videoResponsePage.retakeFlyoutButton()
+            .click();
+    },
+
+    verifyAllowStudentsToResizeVideoRecorderCheckboxCheckedState: () => {
+        videoResponsePage.allowStudentsToResizeVideoRecorderCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckAllowStudentsToResizeVideoRecorderCheckbox: () => {
+        videoResponsePage.allowStudentsToResizeVideoRecorderCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyAllowStudentsToRepositionVideoRecorderCheckboxCheckedState: () => {
+        videoResponsePage.allowStudentsToRepositionVideoRecorderCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckAllowStudentsToRepositionVideoRecorderCheckbox: () => {
+        videoResponsePage.allowStudentsToRepositionVideoRecorderCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyStandardRecorderStyleToggleButtonSelectedState: () => {
+        videoResponsePage.standardRecorderStyleButton()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyVideoRecorderDefaultWidthInputFieldValue: (value) => {
+        utilities.verifyInputFieldValue(videoResponsePage.videoRecorderDefaultWidthInputField(), value);
+
+    },
+
+    /**
+     * Set the default width for the video recorder.
+     * @param {number} value - The value to set as the default width.
+     */
+    setVideoRecorderDefaultWidth: (value) => {
+        videoResponsePage.videoRecorderDefaultWidthInputField()
+            .clear()
+            .type(value)
+            .blur();
+    },
+
+    clearVideoRecorderDefaultWidthInputField: () => {
+        videoResponsePage.videoRecorderDefaultWidthInputField()
+            .clear()
+            .blur();
+    },
+
+    /**
+     * Verify the dimensions of the video recorder flyout.
+     * @param {number} width - The expected width of the flyout.
+     * @param {number} height - The expected height of the flyout.
+     */
+    verifyVideoRecorderFlyoutDimensions: (width, height) => {
+        videoResponsePage.recorderFlyoutCompactPreview()
+            .then(($element) => {
+                const flyoutHeight = $element[0].clientHeight;
+                const flyoutWidth = $element[0].clientWidth;
+                expect(flyoutHeight).to.be.closeTo(height, 2)
+                expect(flyoutWidth).to.be.closeTo(width, 2)
+            });
     }
 }
 
@@ -669,7 +977,43 @@ const tests = {
     ...studentViewSettingsLabelComponent.tests,
     ...additionalSettingsPanel.tests,
     ...allowTeachersToDownloadStudentResponseComponent.tests,
-    ...additionalSettingsAccessibilitySectionComponent.tests
+    ...playbackControlsBaseComponent.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
+    verifyRetakePopupCSSAndA11y: () => {
+        it('CSS of \'Retake\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
+                'border': `1px solid ${css.color.defaultDropdownBorder}`,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.questionHeading,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(videoResponsePage.retakePopupContent(), {
+                'border-top': `1px solid ${css.color.secondaryBtnBorder}`,
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(videoResponsePage.confirmRetakeButton(), {
+                'background-color': css.color.deleteBtn,
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(videoResponsePage.cancelRetakeButton(), {
+                'background-color': css.color.secondaryBtnBg,
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Retake\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+    }
 }
 
 export const videoResponsePage = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.193-packageUpdated-7f1e306.0",
+  "version": "1.0.193-packageUpdated-0af2e49.0",
   "description": "",
   "main": "index.js",
   "scripts": {