itemengine-cypress-automation 1.0.21 → 1.0.23

package/cypress/e2e/ILC/AudioResponse/audioResponseEditTabBasicSections.js

@@ -0,0 +1,349 @@
+import { audioResponsePage } from '../../../pages/audioResponsePage';
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create Item page - Audio response: Question Instructions, Audio Recorder Style dropdown, Maximum recorder length, Stop recording if silence is detected after', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+        });
+
+        audioResponsePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+
+    });
+
+    describe('Question Instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+        });
+
+        audioResponsePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('\'Audio Recorder Style\' dropdown', () => {
+        const recordingResponseButtons = [audioResponsePage.startRecordingOptionButton, audioResponsePage.pauseRecordingOptionButton, audioResponsePage.stopRecordingOptionButton, audioResponsePage.recordingCueOptionButton, audioResponsePage.recordingOverlayOptionButton];
+        const responsePlaybackButtons = [audioResponsePage.playOptionButton, audioResponsePage.pauseOptionButton, audioResponsePage.seekOptionButton, audioResponsePage.volumeControlOptionButton, audioResponsePage.playbackOverlayOptionButton];
+        const dropdownOptions = ['Standard', 'Minimal'];
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio Response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+        });
+
+        it('CSS of Audio Recorder Style section', { tags: 'css' }, () => {
+            audioResponsePage.audioRecorderStyleLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            audioResponsePage.audioRecorderStyleDropdown()
+                .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
+                .find('.dropdown-label-text')
+                .eq(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
+        });
+
+        //Note: a11y is covered for Audio Recorder Style section in HeaderSection file using verifya11yOfCreateItemWrapperContents
+
+        it('\'Audio Recorder Style\' label and dropdown should be displayed and in \'Audio Recorder Style\' dropdown \'Standard\' option should be selected by default', () => {
+            audioResponsePage.audioRecorderStyleLabel()
+                .verifyInnerText('Audio recorder style')
+                .should('be.visible');
+            audioResponsePage.audioRecorderStyleDropdown()
+                .verifyInnerText('Standard')
+                .should('be.visible');
+        });
+
+        it('Clicking on \'Audio Recorder Style\' dropdown should open a list of 2 options - Standard, Minimal', () => {
+            cy.log('Expanding the Audio recorder style dropdown list');
+            audioResponsePage.audioRecorderStyleDropdown()
+                .click();
+            dropdownOptions.forEach((option, count) => {
+                audioResponsePage.audioRecorderStyleListOptions(count)
+                    .verifyInnerText(option);
+            });
+        });
+
+        it('CSS of Audio Recorder Style dropdown in active state', { tags: 'css' }, () => {
+            audioResponsePage.audioRecorderStyleListOptions(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            audioResponsePage.audioRecorderStyleListOptions(1)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of Audio Recorder Style section in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.audioRecorderStyleList());
+        });
+
+        it('When the user clicks on the Audio Recorder Style dropdown menu then the dropdown menu should close', () => {
+            audioResponsePage.audioRecorderStyleListOptions(0)
+                .click();
+            audioResponsePage.audioRecorderStyleList()
+                .should('not.exist');
+        });
+
+        it('When the user selects \'Standard\' option from Audio Recorder Style dropdown then \'Start recording\', \'Pause recording\', \'Stop recording\', \'Recording cue\' options should be displayed and be selected by default in \'Controls for recording response\' section and \'Play\', \'Pause\', \'Seek\', \'Volume control\' options should be displayed and be selected by default in \'Controls for response playback\' section and \'Recording overlay\' in \'Controls for recording response\' and \'Playback overlay\' options should not be displayed in \'Controls for response playback\' section', () => {
+            audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
+            audioResponsePage.recordingOverlayOptionButton()
+                .should('not.exist');
+            audioResponsePage.playbackOverlayOptionButton()
+                .should('not.exist');
+            recordingResponseButtons.slice(0, 4).forEach((button) => {
+                button()
+                    .should('have.class', 'ngie-toggle-button-selected')
+                    .and('be.visible')
+                    .within(() => {
+                        audioResponsePage.tickIconForOptionButtons()
+                            .should('be.visible');
+                    })
+            });
+            responsePlaybackButtons.slice(0, 4).forEach((button) => {
+                button()
+                    .should('have.class', 'ngie-toggle-button-selected')
+                    .and('be.visible')
+                    .within(() => {
+                        audioResponsePage.tickIconForOptionButtons()
+                            .should('be.visible');
+                    })
+            });
+        });
+
+        it('CSS of options in \'Customize recorder and playback controls (for student player)\' section', { tags: 'css' }, () => {
+            cy.log('CSS of button background and button label')
+            audioResponsePage.startRecordingOptionButton()
+                .should('have.css', 'background-color', css.color.activeButtons)
+                .within(() => {
+                    audioResponsePage.recorderAndPlaybackControlsOptionButtonLabel()
+                        .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular);
+                });
+            cy.log('CSS of tick icon of selected option button');
+            audioResponsePage.startRecordingOptionButton()
+                .find('[data-name="Icon feather-check"]')
+                .should('have.css', 'fill', css.color.activeButtons);
+            cy.log('CSS of background of tick icon of selected option button');
+            audioResponsePage.startRecordingOptionButton()
+                .find('.ngie-toggle-button-tick-icon')
+                .should('have.css', 'background-color', css.color.defaultBackground);
+            cy.log('CSS of selected option button icon');
+            audioResponsePage.startRecordingOptionButton()
+                .find('.ngie-toggle-button-icon svg')
+                .should('have.css', 'fill', css.color.primaryBtn);
+        });
+
+        it('Accessibility of options in \'Customize recorder and playback controls (for student player)\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.customizeRecorderAndPlaybackControlsSection());
+        });
+
+        it('When the user selects \'Minimal\' option from Audio Recorder Style dropdown then \'Recording overlay\' should be displayed in selected state in \'Controls for recording response\' section and \'Playback overlay\' should be displayed in selected state in \'Controls for response playback\' section', () => {
+            cy.log('Pre-step : Switching to Minimal recorder style');
+            audioResponsePage.steps.switchToMinimalRecorderStyle();
+            audioResponsePage.recordingOverlayOptionButton()
+                .should('have.class', 'ngie-toggle-button-selected')
+                .and('be.visible')
+                .within(() => {
+                    audioResponsePage.tickIconForOptionButtons()
+                        .should('be.visible');
+                })
+            audioResponsePage.playbackOverlayOptionButton()
+                .should('have.class', 'ngie-toggle-button-selected')
+                .and('be.visible')
+                .within(() => {
+                    audioResponsePage.tickIconForOptionButtons()
+                        .should('be.visible');
+                })
+        });
+
+        it('User should be able to deselect all options from \'Controls for recordings response\' and \'Controls for response playback\' section', () => {
+            recordingResponseButtons.forEach((button) => {
+                button().click()
+                    .should('have.class', 'ngie-toggle-button-not-selected')
+                    .within(() => {
+                        audioResponsePage.tickIconForOptionButtons()
+                            .should('not.be.visible');
+                    });
+            });
+            responsePlaybackButtons.forEach((button) => {
+                button().click()
+                    .should('have.class', 'ngie-toggle-button-not-selected')
+                    .within(() => {
+                        audioResponsePage.tickIconForOptionButtons()
+                            .should('not.be.visible');
+                    });
+            });
+        });
+
+        it('CSS of deselected options in \'Customize recorder and playback controls (for student player)\' section', { tags: 'css' }, () => {
+            cy.log('CSS of deselected option button label and background')
+            audioResponsePage.startRecordingOptionButton()
+                .should('have.css', 'background-color', css.color.defaultBackground)
+                .and('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
+                .within(() => {
+                    audioResponsePage.recorderAndPlaybackControlsOptionButtonLabel()
+                        .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.regular);
+                });
+
+            cy.log('CSS of deselected option button icon')
+            audioResponsePage.startRecordingOptionButton()
+                .find('.ngie-toggle-button-icon svg')
+                .should('have.css', 'fill', css.color.secondaryBtn);
+        });
+
+        it('Accessibility of deselected options in \'Customize recorder and playback controls (for student player)\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.customizeRecorderAndPlaybackControlsSection());
+        });
+    });
+
+    describe('\'Maximum recorder length\': Edit tab ', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio Response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+        });
+
+        audioResponsePage.tests.verifyMaximumRecorderLengthLabelAndInputField();
+
+        audioResponsePage.tests.verifyMaximumRecorderLengthSectionCSS();
+
+        //Note: a11y is covered for Maximum recorder length section in HeaderSection file using verifyA11yOfCreateItemWrapperContents
+
+        audioResponsePage.tests.verifyMaximumRecorderLengthInputFieldErrorMessages();
+
+        audioResponsePage.tests.verifyMaximumRecorderLengthCharacterAcceptanceCriteria();
+
+        it('When user tries to add a value greater than 3600 it should be automatically set back to 3600 and should not allow to add greater than set value', () => {
+            audioResponsePage.steps.setMaximumRecorderLength('9999');
+            audioResponsePage.steps.verifyMaximumRecorderLength('3600');
+        });
+
+        it('When the maximum recorder length value is updated in edit tab, it should be reflected in the preview tab', () => {
+            audioResponsePage.steps.setMaximumRecorderLength('3600');
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.previewMaxRecordTime()
+                .verifyInnerText('1:00:00')
+        });
+    });
+
+    describe('\'Maximum recorder length\': Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to audio response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            audioResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('By default, maximum recorder length (15 minutes) should be displayed in minutes(mm:ss) format', () => {
+            audioResponsePage.previewMaxRecordTime()
+                .verifyInnerText('15:00')
+        });
+
+        it('When the maximum recorder length value is updated in edit tab, it should be reflected in the preview tab', () => {
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.steps.setMaximumRecorderLength('3600');
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.previewMaxRecordTime()
+                .verifyInnerText('1:00:00')
+        });
+    });
+
+    describe('\'Stop recording if silence is detected after\' Section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio Response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+        });
+
+        it('\'Stop recording if silence is detected after\' label, input field and \'Secs\' text should be displayed. By default \'Stop recording if silence is detected after\' input field should be empty', () => {
+            audioResponsePage.stopRecordingIfSilenceIsDetectedLabel()
+                .verifyInnerText('Stop recording if silence is detected after')
+                .should('be.visible');
+            audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
+                .should('be.visible')
+                .and('have.attr', 'value', '');
+            audioResponsePage.stopRecordingIfSilenceIsDetectedInputFieldSecsSuffix()
+                .verifyInnerText('Secs')
+                .should('be.visible');
+        });
+
+        it('CSS of \'Stop recording if silence is detected after\' section', { tags: 'css' }, () => {
+            audioResponsePage.stopRecordingIfSilenceIsDetectedLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            audioResponsePage.stopRecordingIfSilenceIsDetectedInputFieldSecsSuffix()
+                .parents('.stop-recording-on-silence-time-input-field')
+                .find('.css-igs3ac')
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y is covered for Stop recording if silence is detected after section in HeaderSection file using verifya11yOfCreateItemWrapperContents
+
+        it('When the user has set \'Stop recording if silence is detected after\' value to \'0\' (zero) then a validation text \'Error: Value must be greater than 0 secs.\' should be displayed and once the user updates the \'Stop recording if silence is detected after\' value the validation text should disappear. User should be able to add only numeric values and should not able to add decimal points', () => {
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('0');
+            audioResponsePage.errorMessage()
+                .verifyInnerText('Error: Value must be greater than 0 secs.');
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('150');
+            audioResponsePage.errorMessage()
+                .should('not.exist');
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('.10.0');
+            audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
+                .should('have.attr', 'value', '100');
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('!@#abcde236');
+            audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
+                .should('have.attr', 'value', '236');
+        });
+
+        it('CSS of \'Stop recording if silence is detected after\' with error message \'Error: Value must be greater than 0 secs.\'', () => {
+            cy.log('Pre-step: Setting Stop recording if silence is detected after to 0');
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('0');
+            audioResponsePage.errorMessage()
+                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+            cy.log('Post-step: Setting Stop recording if silence is detected after to 100');
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('100');
+        });
+
+        it('Accessibility of \'Stop recording if silence is detected after\' when \'Error: Value must be greater than 0 secs.\' is displayed', () => {
+            cy.log('Pre-step: Setting Stop recording if silence is detected after to 0');
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('0');
+            cy.checkAccessibility(audioResponsePage.errorMessage());
+            cy.log('Post-step: Setting Stop recording if silence is detected after to 100');
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('100');
+        });
+
+        it('When user focuses in \'Stop recording if silence is detected after\' and focuses out without entering any value, or entering a value greater than \'Maximum recorder length\' input field, no error should be displayed', () => {
+            audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
+                .clear()
+                .blur();
+            audioResponsePage.errorMessage()
+                .should('not.exist');
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('4000');
+            audioResponsePage.errorMessage()
+                .should('not.exist');
+        });
+
+        it('When silence is detected for more than value set in \'Stop recording if silence is detected after\' input field during recording, the recorder should stop automatically by the system and the recording should get saved', () => {
+            audioResponsePage.steps.setStopRecordingIfSilenceIsDetectedAfter('5');
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .should('be.visible')
+                .verifyInnerText('Your response has been recorded');
+            audioResponsePage.previewPlayPlaybackButton()
+                .should('not.have.attr', 'disabled');
+            audioResponsePage.standardPreviewRecordTime()
+                .verifyInnerText('00:05');
+        });
+    });
+});

package/cypress/e2e/ILC/AudioResponse/audioResponseHeaderSection.js

@@ -0,0 +1,80 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { audioResponsePage, dialogBoxBase } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+
+describe('Create question page - Audio Response: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+        });
+
+        audioResponsePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Audio response');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+        });
+
+        audioResponsePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+        });
+
+        audioResponsePage.tests.verifyCancelButton('audio response');
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                audioResponsePage.questionInstructionsLabelEditTab()
+                    .parents('.edit-question-instruction-wrapper')
+                    .within(() => {
+                        commonComponents.errorMessage()
+                            .verifyInnerText('Error: Question instructions are required.')
+                            .and('be.visible');
+                    });
+                audioResponsePage.pleaseEnterPointsErrorMessage()
+                    .verifyInnerText('Error: Please enter points.');
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                audioResponsePage.steps.addQuestionInstructions();
+                audioResponsePage.questionInstructionsLabelEditTab()
+                    .parents('.edit-question-instruction-wrapper')
+                    .within(() => {
+                        commonComponents.errorMessage()
+                            .should('not.exist');
+                    });
+                audioResponsePage.steps.allotPoints(20);
+                audioResponsePage.pleaseEnterPointsErrorMessage()
+                    .should('not.exist');
+            });
+        });
+
+        describe('Saving a question', () => {
+            it('When user has filled all the mandatory fields then on clicking on Save Question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                audioResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            });
+            audioResponsePage.tests.verifySavedSuccessfullySnackbarCSSanda11y();
+        });
+    });
+});