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

package/cypress/e2e/ILC/AudioPlayerNew/allSupportedFileTypes.js

@@ -51,7 +51,7 @@ describe('Audio player: Preview tab', () => {
         });
 
         it('When user uploads MP3 audio file, audio player should be displayed in preview tab and user should be able to play MP3 audio file.', () => {
-            audioPlayerPage.steps.uploadFile(MP3File);
+            audioPlayerPage.steps.uploadAudioFile(MP3File);
             audioPlayerPage.steps.switchToPreviewTab();
             utilities.verifyElementVisibilityState(audioPlayerPage.playbackPlayButton(), 'visible');
             audioPlayerPage.steps.startPlayback();
@@ -61,7 +61,7 @@ describe('Audio player: Preview tab', () => {
         it('When user uploads WAV audio file, audio player should be displayed in preview tab and user should be able to play WAV audio file.', () => {
             audioPlayerPage.steps.switchToEditTab();
             audioPlayerPage.steps.deleteAudioFile();
-            audioPlayerPage.steps.uploadFile(WAVFile);
+            audioPlayerPage.steps.uploadAudioFile(WAVFile);
             audioPlayerPage.steps.switchToPreviewTab();
             utilities.verifyElementVisibilityState(audioPlayerPage.playbackPlayButton(), 'visible');
             audioPlayerPage.steps.startPlayback();
@@ -71,7 +71,7 @@ describe('Audio player: Preview tab', () => {
         it('When user uploads AAC audio file, audio player should be displayed in preview tab and user should be able to play AAC audio file.', () => {
             audioPlayerPage.steps.switchToEditTab();
             audioPlayerPage.steps.deleteAudioFile();
-            audioPlayerPage.steps.uploadFile(AACFile);
+            audioPlayerPage.steps.uploadAudioFile(AACFile);
             audioPlayerPage.steps.switchToPreviewTab();
             utilities.verifyElementVisibilityState(audioPlayerPage.playbackPlayButton(), 'visible');
             audioPlayerPage.steps.startPlayback();

package/cypress/e2e/ILC/AudioPlayerNew/audioOverviewAndTranscript.js

@@ -0,0 +1,568 @@
+import { audioPlayerPage, dialogBoxBase } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Audio player: Audio overview and Transcript section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Audio overview: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Audio overview (displayed to students)\' label and empty input field should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.audioOverviewLabel(), 'Audio overview (displayed to students)');
+            utilities.verifyElementVisibilityState(audioPlayerPage.audioOverviewLabel(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.audioOverviewInputField(), 'visible');
+            utilities.verifyTextContent(audioPlayerPage.audioOverviewInputField(), '');
+        });
+
+        it('When user focuses in and out of the audio overview input field, then error message should not be displayed', () => {
+            audioPlayerPage.steps.focusInAudioOverviewInputField();
+            audioPlayerPage.steps.focusOutOfAudioOverviewInputField();
+            audioPlayerPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('User should be able to give an input in audio overview input field', () => {
+            audioPlayerPage.steps.addInputToAudioOverviewInputField('Sample audio overview');
+        });
+
+        it('CSS of \'audio overview\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.audioOverviewLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.audioOverviewInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('When the user adds an image in the audio overview input field using the image option from ckEditor toolbar, the image should be displayed in the audio overview input field', () => {
+            audioPlayerPage.steps.focusInAudioOverviewInputField();
+            audioPlayerPage.steps.selectImageOptionFromCKEditorToolbar()
+            audioPlayerPage.steps.addImageToInputField();
+            audioPlayerPage.steps.verifyImageAndAltTextInAudioOverviewInputField();
+        });
+
+        it('When the user adds an equation in the audio overview input field using the image option from ckEditor toolbar, the image should be displayed in the audio overview input field', () => {
+            audioPlayerPage.steps.clearAudioOverviewInputField();
+            audioPlayerPage.steps.focusInAudioOverviewInputField();
+            audioPlayerPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            audioPlayerPage.steps.verifyEquationInAudioOverviewInputField();
+        });
+
+        it('When the user adds a link in the audio overview input field using the image option from ckEditor toolbar, the image should be displayed in the audio overview input field', () => {
+            audioPlayerPage.steps.clearAudioOverviewInputField();
+            audioPlayerPage.steps.focusInAudioOverviewInputField();
+            audioPlayerPage.steps.selectLinkOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addLinkToInputField();
+            audioPlayerPage.steps.verifyLinkInAudioOverviewInputField();
+        });
+
+        it('When the user adds a bold text in the audio overview input field using the image option from ckEditor toolbar, the image should be displayed in the audio overview input field', () => {
+            audioPlayerPage.steps.clearAudioOverviewInputField();
+            audioPlayerPage.steps.focusInAudioOverviewInputField();
+            audioPlayerPage.steps.selectBoldOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addInputToAudioOverviewInputField('This is a bold text in audio overview input field');
+            audioPlayerPage.steps.verifyBoldTextInAudioOverviewInputField();
+        });
+    });
+
+    describe('Audio overview: Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('When the user has not any input to audio overview input field in the edit tab, then no audio overview should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.audioOverviewPreviewTab(), 'notExist');
+        });
+
+        it('When the user enters text in the audio overview input field, then audio overview should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.addInputToAudioOverviewInputField('This is audio overview text');
+            utilities.triggerMouseout(audioPlayerPage.audioOverviewInputField());
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.audioOverviewPreviewTab(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.audioOverviewPreviewTab(), 'This is audio overview text');
+        });
+
+        it('CSS of audio overview text in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.audioOverviewPreviewTab(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of audio overview text in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.audioOverviewPreviewTab().parents('.audio-resource-preview-wrapper'));
+        });
+
+        it('When the user adds an image in the audio overview input field using the image option from ckEditor toolbar, the image should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.clearAudioOverviewInputField();
+            audioPlayerPage.steps.focusInAudioOverviewInputField();
+            audioPlayerPage.steps.selectImageOptionFromCKEditorToolbar()
+            audioPlayerPage.steps.addImageToInputField();
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.verifyImageAndAltTextInAudioOverviewPreviewTab();
+        });
+
+        it('When the user adds an equation in the audio overview input field using the image option from ckEditor toolbar, the image should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.clearAudioOverviewInputField();
+            audioPlayerPage.steps.focusInAudioOverviewInputField();
+            audioPlayerPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            audioPlayerPage.steps.focusAwayFromElement();
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.verifyEquationInAudioOverviewPreviewTab();
+        });
+
+        it('When the user adds a link in the audio overview input field using the image option from ckEditor toolbar, the image should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.clearAudioOverviewInputField();
+            audioPlayerPage.steps.focusInAudioOverviewInputField();
+            audioPlayerPage.steps.selectLinkOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addLinkToInputField();
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.verifyLinkInAudioOverviewPreviewTab();
+        });
+
+        it('When the user adds a bold text in the audio overview input field using the image option from ckEditor toolbar, the image should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.clearAudioOverviewInputField();
+            audioPlayerPage.steps.focusInAudioOverviewInputField();
+            audioPlayerPage.steps.selectBoldOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addInputToAudioOverviewInputField('This is a bold text in audio overview input field');
+            utilities.triggerMouseout(audioPlayerPage.audioOverviewInputField());
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.verifyBoldTextInAudioOverviewPreviewTab();
+        });
+    });
+
+    describe('\'Upload transcript file\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Transcript\' label should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.transcriptLabel(), 'Transcript');
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptLabel(), 'visible');
+        });
+
+        it('\'Upload transcript file\' and \'Type in transcript\' radio buttons should be displayed. By default \'Upload transcript file\' button should be selected', () => {
+            utilities.verifyInnerText(audioPlayerPage.uploadTranscriptFileLabel(), 'Upload transcript file');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadTranscriptFileLabel(), 'visible');
+            audioPlayerPage.steps.verifyUploadTranscriptFileRadioButtonIsSelected();
+            utilities.verifyInnerText(audioPlayerPage.typeInTranscriptLabel(), 'Type in transcript');
+            utilities.verifyElementVisibilityState(audioPlayerPage.typeInTranscriptLabel(), 'visible');
+            audioPlayerPage.steps.verifyTypeInTranscriptRadioButtonIsNotSelected();
+        });
+
+        it('\'Upload\' label should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.uploadTranscriptUploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadTranscriptUploadLabel(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.uploadTranscriptFileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadTranscriptFileNameLabel(), 'visible');
+        });
+
+        it('\'Choose file\' button should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.uploadTranscriptChooseFileButton(), 'Choose file');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadTranscriptChooseFileButton(), 'visible');
+        });
+
+        it('By default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(audioPlayerPage.uploadTranscriptNoFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadTranscriptNoFileChosenLabel(), 'visible');
+        });
+
+        it('CSS of \'Upload transcript file\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.uploadTranscriptFileRadioButton().parent().find('svg'), {
+                'fill': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(audioPlayerPage.typeInTranscriptRadioButton().parent().find('svg path'), {
+                'color': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(audioPlayerPage.uploadTranscriptFileLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.typeInTranscriptLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.uploadTranscriptNoFileChosenLabel(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.uploadTranscriptChooseFileButton(), {
+                'background-color': css.color.transparent,
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Upload transcript file\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.uploadTranscriptFileLabel().parents('.audio-player-resource'));
+        });
+
+        it('When the user adds the transcript file and file upload is inprogress, file name and progress bar should be displayed below \'File name\' label. Progress bar should disappear once file is uploaded', () => {
+            audioPlayerPage.steps.attachTranscriptFile('uploads/sample300kb.txt');
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptFileUploadProgressBar(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.uploadedTranscriptFileNameLabel(), 'sample300kb.txt');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadedTranscriptFileNameLabel(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptFileUploadProgressBar(), 'hidden');
+        });
+
+        it('CSS of progress bar and file name when file upload is in progress', { tags: 'css' }, () => {
+            audioPlayerPage.steps.attachTranscriptFile('uploads/sample300kb.txt');
+            audioPlayerPage.transcriptFileUploadProgressBar()
+                .verifyPseudoClassBeforeProperty('background-color', css.color.fileUploadProgressBarFill);
+        });
+
+        it('Accessibility of progress bar and file name when file upload is in progress', { tags: 'a11y' }, () => {
+            audioPlayerPage.steps.attachTranscriptFile('uploads/sample300kb.txt');
+            cy.checkAccessibility(audioPlayerPage.uploadTranscriptFileLabel().parents('.audio-player-resource'));
+        });
+
+        it('When user clicks on \'Choose file\' button again and upload another transcript file, previously uploaded transcript file should get replaced with new transcript file', () => {
+            audioPlayerPage.steps.uploadTranscriptFile('uploads/sample2.txt');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadedTranscriptFileNameLabel(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.uploadedTranscriptFileNameLabel(), 'sample2.txt');
+            utilities.verifyElementCount(audioPlayerPage.uploadedTranscriptFileNameLabel(), 1);
+        });
+
+        it('When the user uploads a file that is not supported, following error message should be displayed: \'Error: The file type is not supported. Please upload a file with the following supported formats: TXT.\'', () => {
+            audioPlayerPage.steps.attachTranscriptFile('uploads/sample.mp4')
+            utilities.verifyInnerText(audioPlayerPage.errorMessage(), 'Error: The file type is not supported. Please upload a file with the following supported formats: TXT.');
+            utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'visible');
+        });
+
+        audioPlayerPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user upload supported format of transcript file, error message should disappear', () => {
+            audioPlayerPage.steps.uploadTranscriptFile('uploads/sample.txt');
+            audioPlayerPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When user has uploaded an transcript file, then delete button should appear beside uploaded file\'s name', () => {
+            utilities.verifyElementVisibilityState(audioPlayerPage.deleteTranscriptButton(), 'visible');
+        });
+
+        it('When the user hovers on \'Delete\' button, \'Delete transcript\' text should be displayed in tooltip', () => {
+            audioPlayerPage.deleteTranscriptButton()
+                .verifyTooltip('Delete transcript');
+        });
+
+        it('CSS of tooltip', { tags: 'css' }, () => {
+            audioPlayerPage.deleteTranscriptButton()
+                .trigger('mouseover');
+            utilities.verifyCSS(audioPlayerPage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+        });
+
+        it('When user clicks on the \'Delete\' button, then \'Delete\' popup should be displayed', () => {
+            audioPlayerPage.steps.deleteTranscriptFile();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.dialogBoxTitle(), 'Delete');
+        });
+
+        it('The pop up should be displayed with the message \'Are you sure you want to delete the transcript?\'', () => {
+            utilities.verifyInnerText(audioPlayerPage.dialogBoxContent(), 'Are you sure you want to delete the transcript?');
+            utilities.verifyInnerText(audioPlayerPage.buttonAccept(), 'Delete transcript');
+            utilities.verifyInnerText(audioPlayerPage.buttonReject(), 'Cancel');
+        });
+
+        it('CSS of popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(audioPlayerPage.dialogBoxContent().find('[class*="DeletePopupWrapper"]'), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of the popup', () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+
+        it('When user clicks on \'Cancel\' button, then popup should close and user should remain on the edit interface of the question', () => {
+            dialogBoxBase.steps.clickOnRejectButtonInDialogBox()();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            utilities.verifyInnerText(audioPlayerPage.uploadedTranscriptFileNameLabel(), 'sample.txt');
+        });
+
+        it('When user clicks on \'Delete\' button, then popup should close and transcript file should be deleted', () => {
+            audioPlayerPage.steps.deleteTranscriptFile();
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            utilities.verifyInnerText(audioPlayerPage.uploadTranscriptNoFileChosenLabel(), 'No file chosen');
+        });
+    });
+
+    describe('\'Type in transcript\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('User should be able to select \'Type in transcript\' radio button', () => {
+            audioPlayerPage.steps.selectTypeInTranscriptRadioButton();
+            audioPlayerPage.steps.verifyUploadTranscriptFileRadioButtonIsNotSelected();
+        })
+
+        it('\'Transcript\' label and input field should be displayed. By default, the source url input field should be empty', () => {
+            utilities.verifyInnerText(audioPlayerPage.transcriptInputFieldLabel(), 'Transcript');
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptInputFieldLabel(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptInputField(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.transcriptInputField(), '\n');
+        });
+
+        it('CSS of \'Type in transcript\' Section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.transcriptInputFieldLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.transcriptInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Type in transcript\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.transcriptInputFieldLabel().parents('.audio-player-resource'));
+        });
+
+        it('When user focuses in and out of the \'Transcript\' input field, then error message should not be displayed', () => {
+            audioPlayerPage.steps.focusInAndFocusOutOfTranscriptInputField();
+            audioPlayerPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When user should be able to add input in transcript input field', () => {
+            audioPlayerPage.steps.enterTextInTranscriptInputField('Sample transcript');
+            audioPlayerPage.steps.verifyTextInTranscriptInputField('Sample transcript');
+        });
+
+        it('When the user adds an image in the transcript input field using the image option from ckEditor toolbar, the image should be displayed in the transcript input field', () => {
+            audioPlayerPage.steps.clearTranscriptInputField();
+            audioPlayerPage.steps.focusInTranscriptInputField();
+            audioPlayerPage.steps.selectImageOptionFromCKEditorToolbar()
+            audioPlayerPage.steps.addImageToInputField();
+            audioPlayerPage.steps.verifyImageAndAltTextInTranscriptInputField();
+        });
+
+        it('When the user adds an equation in the transcript input field using the image option from ckEditor toolbar, the image should be displayed in the transcript input field', () => {
+            audioPlayerPage.steps.clearTranscriptInputField();
+            audioPlayerPage.steps.focusInTranscriptInputField();
+            audioPlayerPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            audioPlayerPage.steps.verifyEquationInTranscriptInputField();
+        });
+
+        it('When the user adds a link in the transcript input field using the image option from ckEditor toolbar, the image should be displayed in the transcript input field', () => {
+            audioPlayerPage.steps.clearTranscriptInputField();
+            audioPlayerPage.steps.focusInTranscriptInputField();
+            audioPlayerPage.steps.selectLinkOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addLinkToInputField();
+            audioPlayerPage.steps.verifyLinkInTranscriptInputField();
+        });
+
+        it('When the user adds a bold text in the transcript input field using the image option from ckEditor toolbar, the image should be displayed in the transcript input field', () => {
+            audioPlayerPage.steps.clearTranscriptInputField();
+            audioPlayerPage.steps.focusInTranscriptInputField();
+            audioPlayerPage.steps.selectBoldOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.enterTextInTranscriptInputField('This is a bold text in transcript input field');
+            audioPlayerPage.steps.verifyBoldTextInTranscriptInputField();
+        });
+    });
+
+    describe('Upload transcript file - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set any transcript in the edit tab, then transcript button should not be displayed in playback player in the preview tab', () => {
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptButton(), 'notExist');
+        });
+
+        it('When the user uploads a transcript file, then transcript button should be displayed in playback player in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.uploadTranscriptFile('uploads/sample.txt');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptButton(), 'visible');
+        });
+
+        it('When user hovers on the transcript button, then the tooltip \'Show transcript\' should be displayed', () => {
+            audioPlayerPage.transcriptButton()
+                .verifyTooltip('Show transcript');
+        });
+
+        it('When the user clicks on the transcript button, a transcript modal should appear', () => {
+            audioPlayerPage.steps.clickOnTranscriptButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptModal(), 'visible');
+        });
+
+        it('\'Transcript\' title should be displayed in the transcript modal', () => {
+            utilities.verifyInnerText(audioPlayerPage.transcriptTitlePreviewTab(), 'Transcript');
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptTitlePreviewTab(), 'visible');
+        });
+
+        it('A \'X\' close button should be displayed in the transcript modal', () => {
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptModalCloseButton(), 'visible');
+        });
+
+        it('The text of the transcript file should be displayed in the transcript modal', () => {
+            utilities.verifyInnerText(audioPlayerPage.transcriptContentPreviewTab(), 'sample txt file');
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptContentPreviewTab(), 'visible');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/549855
+        it('CSS of transcript modal', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.transcriptModal(), {
+                'background-color': css.color.titleContainerBg
+            });
+            utilities.verifyCSS(audioPlayerPage.transcriptTitlePreviewTab(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.transcriptModalCloseButton().find('svg path'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of transcript modal', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.transcriptModal());
+        });
+
+        it('The user should be able to close the transcript modal', () => {
+            audioPlayerPage.steps.closeTranscriptModal();
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptModal(), 'notExist');
+        });
+
+        it('When user uploads another transcript file, then updated transcript text should be displayed in the transcript modal', () => {
+            audioPlayerPage.steps.switchToEditTab()
+            audioPlayerPage.steps.uploadTranscriptFile('uploads/sample1.txt');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnTranscriptButton();
+            utilities.verifyInnerText(audioPlayerPage.transcriptContentPreviewTab(), 'Utilitatis causa amicitia est quaesita. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Collatio igitur ista te nihil iuvat. Honesta oratio, Socratica, Platonis etiam. Primum in nostrane potestate est, quid meminerimus? Duo Reges: constructio interrete. Quid, si etiam iucunda memoria est praeteritorum malorum? Si quidem, inquit, tollerem, sed relinquo. An nisi populari fama? Quamquam id quidem licebit iis existimare, qui legerint. Summum a vobis bonum voluptas dicitur. At hoc in eo M. Refert tamen, quo modo. Quid sequatur, quid repugnet, vident. Iam id ipsum absurdum, maximum malum neglegi.');
+        });
+    });
+
+    describe('Type in transcript - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set any transcript in the edit tab, then transcript button should not be displayed in playback player in the preview tab', () => {
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptButton(), 'notExist');
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptModal(), 'notExist');
+        });
+
+        it('When the user enters text in the transcript input field, then transcript button should be displayed in playback player in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectTypeInTranscriptRadioButton();
+            audioPlayerPage.steps.enterTextInTranscriptInputField('So let\'s examine the relationship between time and distance, using this turtle interactive. You\'re going to get a chance to do it as well. So here\'s my little turtle. And I\'m going to be watching him move along this ruler that\'s measuring the distance that he\'s traveling. And then that information is going to be graphed. The time here is on the horizontal axis, measured in seconds. And the distance is measured here along the vertical axis, in centimeters. Now this is the distance from a starting point. So I\'m going to click just time. And we\'ll get to distance here in just a minute. I click Walk, and my turtle starts walking. He\'s moving along my ruler. And as he\'s doing so, you\'ll notice that this ruler doesn\'t match up with my time. And that\'s because this is just measuring the time that he\'s spending traveling. So now right as he stops, you\'ll see that that time on the horizontal axis keeps going on.');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptButton(), 'visible');
+        });
+
+        it('The text entered in the transcript input field should be displayed in the transcript modal', () => {
+            audioPlayerPage.steps.clickOnTranscriptButton();
+            utilities.verifyInnerText(audioPlayerPage.transcriptContentPreviewTab(), 'So let\'s examine the relationship between time and distance, using this turtle interactive. You\'re going to get a chance to do it as well. So here\'s my little turtle. And I\'m going to be watching him move along this ruler that\'s measuring the distance that he\'s traveling. And then that information is going to be graphed. The time here is on the horizontal axis, measured in seconds. And the distance is measured here along the vertical axis, in centimeters. Now this is the distance from a starting point. So I\'m going to click just time. And we\'ll get to distance here in just a minute. I click Walk, and my turtle starts walking. He\'s moving along my ruler. And as he\'s doing so, you\'ll notice that this ruler doesn\'t match up with my time. And that\'s because this is just measuring the time that he\'s spending traveling. So now right as he stops, you\'ll see that that time on the horizontal axis keeps going on.');
+            utilities.verifyElementVisibilityState(audioPlayerPage.transcriptContentPreviewTab(), 'visible');
+        });
+
+        it('When the user adds an image in the transcript input field using the image option from ckEditor toolbar, the image should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.clearTranscriptInputField();
+            audioPlayerPage.steps.focusInTranscriptInputField();
+            audioPlayerPage.steps.selectImageOptionFromCKEditorToolbar()
+            audioPlayerPage.steps.addImageToInputField();
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnTranscriptButton();
+            audioPlayerPage.steps.verifyImageAndAltTextInTranscriptPreviewTab();
+            audioPlayerPage.steps.closeTranscriptModal();
+        });
+
+        it('When the user adds an equation in the transcript input field using the image option from ckEditor toolbar, the image should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.clearTranscriptInputField();
+            audioPlayerPage.steps.focusInTranscriptInputField();
+            audioPlayerPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            audioPlayerPage.steps.focusAwayFromElement();
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnTranscriptButton();
+            audioPlayerPage.steps.verifyEquationInTranscriptPreviewTab();
+            audioPlayerPage.steps.closeTranscriptModal();
+        });
+
+        it('When the user adds a link in the transcript input field using the image option from ckEditor toolbar, the image should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.clearTranscriptInputField();
+            audioPlayerPage.steps.focusInTranscriptInputField();
+            audioPlayerPage.steps.selectLinkOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.addLinkToInputField();
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnTranscriptButton();
+            audioPlayerPage.steps.verifyLinkInTranscriptPreviewTab();
+            audioPlayerPage.steps.closeTranscriptModal();
+        });
+
+        it('When the user adds a bold text in the transcript input field using the image option from ckEditor toolbar, the image should be displayed in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.clearTranscriptInputField();
+            audioPlayerPage.steps.focusInTranscriptInputField();
+            audioPlayerPage.steps.selectBoldOptionFromCKEditorToolbar();
+            audioPlayerPage.steps.enterTextInTranscriptInputField('This is a bold text in transcript');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnTranscriptButton();
+            audioPlayerPage.steps.verifyBoldTextInTranscriptPreviewTab();
+            audioPlayerPage.steps.closeTranscriptModal();
+        });
+    });
+});

package/cypress/e2e/ILC/AudioPlayerNew/barAudioPlayerStyle.js

@@ -13,7 +13,7 @@ describe('Bar audio player style: Preview tab functionality', () => {
         abortEarlySetup();
         before(() => {
             audioPlayerPage.steps.navigateToCreateResource('audio player');
-            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            audioPlayerPage.steps.uploadAudioFile('uploads/sample.mp3');
             audioPlayerPage.steps.switchToPreviewTab();
         });
 
@@ -133,7 +133,7 @@ describe('Bar audio player style: Preview tab functionality', () => {
         abortEarlySetup();
         before(() => {
             audioPlayerPage.steps.navigateToCreateResource('audio player');
-            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            audioPlayerPage.steps.uploadAudioFile('uploads/sample.mp3');
             audioPlayerPage.steps.switchToPreviewTab();
             audioPlayerPage.steps.startPlayback();
             audioPlayerPage.steps.waitForPlaybackToBegin();
@@ -208,7 +208,7 @@ describe('Bar audio player style: Preview tab functionality', () => {
         abortEarlySetup();
         before(() => {
             audioPlayerPage.steps.navigateToCreateResource('audio player');
-            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            audioPlayerPage.steps.uploadAudioFile('uploads/sample.mp3');
             audioPlayerPage.steps.switchToPreviewTab();
         });
 
@@ -233,7 +233,7 @@ describe('Bar audio player style: Preview tab functionality', () => {
         abortEarlySetup();
         before(() => {
             audioPlayerPage.steps.navigateToCreateResource('audio player');
-            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            audioPlayerPage.steps.uploadAudioFile('uploads/sample.mp3');
             audioPlayerPage.steps.switchToPreviewTab();
         });