itemengine-cypress-automation 1.0.15 → 1.0.17

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

@@ -0,0 +1,651 @@
+import { uploadResponsePage, dialogBoxBase } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+let fileTypes = ['CSV', 'Excel', 'GIF', 'JPG', 'PDF', 'PNG', 'Powerpoint', 'Publisher', 'RTF', 'TXT', 'Word', 'XPS', 'ZIP'];
+let fileTypesString = fileTypes.toString().replaceAll(',', ', ')
+let infoIconTooltipText = 'Supported file formats:  ' + fileTypesString + '.';
+const css = Cypress.env('css');
+
+describe('Create question page - Upload Response: Preview', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+            uploadResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('In the Preview tab, the upload response area should have a Cloud icon and text \"Drag & Drop files here or browse files on your device, Google Drive or capture an image\" should be displayed', () => {
+            uploadResponsePage.uploadCloudIcon()
+                .should('be.visible');
+            uploadResponsePage.dragAndDropFilesText()
+                .verifyInnerText('Drag & Drop files here');
+            uploadResponsePage.fileUploadOptionsLabel()
+                .should('have.text', 'or browse files on your device, Google Drive or capture an image');
+        });
+
+        it('Computer and Google Drive icons should be displayed before link texts \'device\' and \'Google Drive\' respectively', () => {
+            //TODO: NEED to revisit, need to verify unicode
+            uploadResponsePage.deviceLink()
+                .verifyPseudoClassBeforeProperty('content', '""');
+            uploadResponsePage.googleDriveLink()
+                .find('svg')
+                .should('be.visible');
+        });
+
+        it('\'Supported file formats\' label should be displayed along with an info icon, hovering over the Supported file formats info icon a tooltip should be displayed with list of all the selected supported file types', () => {
+            uploadResponsePage.supportedFileFormatLabel()
+                .verifyInnerText('Supported file formats');
+            uploadResponsePage.supportedFileInfoIcon()
+                .should('be.visible');
+            uploadResponsePage.supportedFileInfoIcon()
+                .trigger('mouseover');
+            uploadResponsePage.supportedFilesTooltip()
+                .should('have.text', infoIconTooltipText);
+        });
+
+        it('Accessibility of \'Supported file formats\' tooltip', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(uploadResponsePage.supportedFilesTooltip());
+            uploadResponsePage.supportedFileInfoIcon()
+                .trigger('mouseout');
+        });
+
+        it('Uploaded file count should be displayed on the bottom right corner of the response section and by default it should be 0', () => {
+            uploadResponsePage.uploadedFileCount()
+                .verifyInnerText('0/15 File Limit')
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/528358
+        it('CSS of Preview tab', { tags: 'css' }, () => {
+            uploadResponsePage.uploadCloudIcon()
+                .find('path')
+                .should('have.css', 'fill', css.color.cloudIconFill);
+            uploadResponsePage.dragAndDropFilesText()
+                .verifyCSS(css.color.text, css.fontSize.huge, css.fontWeight.bold);
+            uploadResponsePage.fileUploadOptionsLabel()
+                .verifyCSS(css.color.text, css.fontSize.heading, css.fontWeight.semibold);
+            uploadResponsePage.supportedFileFormatLabel()
+                .verifyCSS(css.color.text, css.fontSize.normal, css.fontWeight.regular);
+            uploadResponsePage.supportedFileInfoIcon()
+                .find('path')
+                .should('have.css', 'fill', css.color.activeButtons);
+            uploadResponsePage.supportedFileInfoIcon()
+                .trigger('mouseover');
+            uploadResponsePage.supportedFilesTooltip()
+                .verifyCSS(css.color.whiteText, css.fontSize.small, css.fontWeight.light)
+                .should('have.css', 'background-color', css.color.tooltipBg);
+            uploadResponsePage.supportedFileInfoIcon()
+                .trigger('mouseout');
+            uploadResponsePage.uploadedFileCount()
+                .verifyCSS(css.color.labels, css.fontSize.small, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.fileLimitBg);
+            uploadResponsePage.deviceLink()
+                .verifyPseudoClassBeforeProperty('color', css.color.text);
+            uploadResponsePage.googleDriveLink()
+                .verifyPseudoClassBeforeProperty('color', css.color.text);
+        });
+
+        it('Accessibility of Preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
+        });
+    });
+
+    describe('Uploading file', () => {
+        abortEarlySetup();
+        before(() => {
+            uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+            uploadResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('User should be able to upload supported files in the upload section using link text \'device\' or the icon besides it and the file uploaded by the student should be listed below the upload area with the name of the file. Also, the uploaded file count should get updated in the file limit section', () => {
+            uploadResponsePage.steps.fileUploadAndVerify(['image.png']);
+            uploadResponsePage.uploadedFileCount()
+                .verifyInnerText('1/15 File Limit');
+        });
+
+        it('CSS of uploaded file wrapper contents', { tags: 'css' }, () => {
+            uploadResponsePage.uploadedFileLink()
+                .children()
+                .verifyCSS(css.color.linkText, css.fontSize.default, css.fontWeight.regular);
+            uploadResponsePage.editDisplayTextIcon()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+            uploadResponsePage.addFileDescriptionIcon()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+            uploadResponsePage.deleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+        });
+
+        it('Accessibility of uploaded file wrapper contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(uploadResponsePage.uploadedFilesSectionWrapper());
+        });
+
+        it('\'Edit display text\', \'Add file description\', \'Delete\' icon buttons should be displayed next to the file name of the uploaded file', () => {
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(0)
+                .within(() => {
+                    uploadResponsePage.editDisplayTextIcon()
+                        .should('be.visible');
+                    uploadResponsePage.addFileDescriptionIcon()
+                        .should('be.visible');
+                    uploadResponsePage.deleteButton()
+                        .should('be.visible');
+                });
+        });
+
+        it('User should also be able to upload supported files in the upload section using drag and drop feature', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/sample.jpg', { subjectType: 'drag-n-drop' });
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(1)
+                .verifyInnerText('sample.jpg');
+        });
+
+        it('User should be able to upload multiple files at once and the uploaded file count should get updated in the file limit section', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile(['uploads/sample.csv', 'uploads/sample.gif']);
+            uploadResponsePage.uploadedFileCount()
+                .verifyInnerText('4/15 File Limit');
+        });
+
+        it('When the user uploads a file that has already been added, then file upload error message \'Error: *File_name* has already been selected.\' should be displayed above the uploaded files', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/image.png');
+            commonComponents.errorMessage()
+                .verifyInnerText('Error: image.png has already been selected.');
+        });
+
+        it('CSS of file upload error message', { tags: 'css' }, () => {
+            commonComponents.errorMessage()
+                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+        });
+
+        it('Accessibility of file upload error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.errorMessage());
+        });
+
+        uploadResponsePage.tests.verifyErrorMessageDisappear();
+
+        it('During file upload process, a progress bar, file name, file size, a cross icon to stop upload should be present, the file count should not change while the file is being uploaded, on clicking on the \'cross icon to stop upload\' button, the file should not get uploaded', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/sample1.zip');
+            uploadResponsePage.uploadingProgressBar()
+                .should('be.visible');
+            uploadResponsePage.uploadingFileName()
+                .verifyInnerText('sample1.zip')
+                .and('be.visible');
+            uploadResponsePage.stopUploadingButton()
+                .should('be.visible');
+            uploadResponsePage.uploadedFileCount()
+                .verifyInnerText('4/15 File Limit');
+            uploadResponsePage.stopUploadingButton()
+                .click();
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(0)
+                .should('exist')
+                .verifyInnerText('image.png');
+            uploadResponsePage.uploadedFilesSectionWrapper()
+                .should('not.have.text', 'sample1.zip')
+                .children()
+                .should('have.length', 4);
+            uploadResponsePage.uploadedFileCount()
+                .verifyInnerText('4/15 File Limit');
+        });
+
+        it('CSS of File upload - In progress state', { tags: 'css' }, () => {
+            cy.log('switching to edit tab and again to preview tab')
+            uploadResponsePage.steps.switchToEditTab();
+            uploadResponsePage.steps.switchToPreviewTab();
+            cy.log('uploading a file to verify in progress CSS')
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/sample2.jpg')
+            uploadResponsePage.uploadingFileName()
+                .verifyCSS(css.color.text, css.fontSize.normal, css.fontWeight.regular);
+            uploadResponsePage.uploadingFileSize()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+            uploadResponsePage.stopUploadingButton()
+                .find('svg')
+                .should('have.css', 'color', css.color.successBtn);
+            cy.log('Re-switching to edit tab and again to preview tab')
+            uploadResponsePage.steps.switchToEditTab();
+            uploadResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('Accessibility of File upload - In progress state', { tags: 'a11y' }, () => {
+            cy.log('switching to edit tab and again to preview tab')
+            uploadResponsePage.steps.switchToEditTab();
+            uploadResponsePage.steps.switchToPreviewTab();
+            cy.log('uploading a file to verify in progress CSS')
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/sample2.jpg')
+            cy.checkAccessibility(uploadResponsePage.uploadingFileName().parents('.uploading-documents'));
+            cy.log('Re-switching to edit tab and again to preview tab')
+            uploadResponsePage.steps.switchToEditTab();
+            uploadResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('On clicking on the file name, user should be able to download the file', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/image.png');
+            cy.verifyUploadFilePreviewDownload('image.png');
+        });
+    });
+
+    //TODO : testing this manually for now, need to work around this
+    describe.skip('Allow students to capture photos preview', () => {
+        abortEarlySetup();
+        before(() => {
+            uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+            cy.log('Selecting Allow students to capture photos checkbox');
+            multipleSelectionPO.steps.expandAdditonalSettings();
+            uploadResponsePage.steps.checkCapturePhotosCheckbox();
+            uploadResponsePage.steps.switchToPreviewTab();
+        });
+
+
+        it('Camera icon should be displayed before link text \'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', () => {
+
+        });
+
+        it('On \'Capture image\' popup following should be displayed - \'Capture image\' title text, Camera preview, Capture and Cancel buttons', () => {
+
+        });
+
+        it('When the user clicks on \'Cancel\' button the \'Capture image\' popup should close', () => {
+
+        });
+
+        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', () => {
+
+        });
+
+        it('When the user clicks on \'Save\' button, it should upload the captured image in the response', () => {
+
+        });
+
+        it('The captured image should be saved in .jpeg format and the 1st image should be saved with the name \'Photo.jpeg\'', () => {
+
+        });
+
+        it('If the user uploads another image the name should be \'Photo-1.jpeg\' and so on', () => {
+            //check till 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', () => {
+        });
+    });
+
+    describe('File Upload error', () => {
+        abortEarlySetup();
+        before(() => {
+            uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+            uploadResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user uploads file exceeding max file size (more than 75 MB), file upload error message - \'Error: The file could not be uploaded. The file is *File size in MB* exceeding the maximum size of 75 MB.\'. should be displayed', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/80mbFile.pdf')
+            commonComponents.errorMessage()
+                .verifyInnerText('Error: The file could not be uploaded. The file is 80 MB exceeding the maximum size of 75 MB.');
+        });
+
+        it('CSS of File Upload error', { tags: 'css' }, () => {
+            commonComponents.errorMessage()
+                .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+        });
+
+        //Todo: can be added to common for all error messages verifyAccessibilityOfErrorMessage
+        it('Accessibility of File Upload error', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.errorMessage());
+        });
+
+        uploadResponsePage.tests.verifyErrorMessageDisappear();
+
+        it('When user uploads file type which is not selected from the \'Supported file types\' accordion menu, then file upload error message - \'The file type is not supported. Please upload files with the following supported formats: *file format separated by commas*\' should be displayed', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/sample.mp4');
+            commonComponents.errorMessage()
+                .verifyInnerText('Error: The file type is not supported. Please upload files with the following supported formats: CSV, Excel, GIF, JPG, PDF, PNG, Powerpoint, Publisher, RTF, TXT, Word, XPS, ZIP.');
+        });
+
+        uploadResponsePage.tests.verifyErrorMessageDisappear();
+    });
+
+    describe('Virus Scanning', () => {
+        abortEarlySetup();
+        before(() => {
+            uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+            uploadResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When user uploads any file without any virus, the system should scan the file for viruses and \'Scanning for viruses…\' message should be displayed along with a pre-loader', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/sample1.zip');
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(0)
+                .within(() => {
+                    uploadResponsePage.virusErrorMessageWrapper()
+                        .verifyInnerText('Scanning for viruses...')
+                    uploadResponsePage.scanningForVirusPreLoader()
+                        .should('be.visible');
+                });
+        });
+
+        it('As long as the file is scanning for viruses, the users should not be able to download the file', () => {
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(0)
+                .parents('.uploaded-document-wrapper')
+                .should('not.have.attr', 'href');
+        });
+
+        it('As soon as the scanning for viruses is complete, the preloader should disappear', () => {
+            uploadResponsePage.scanningForVirusPreLoader()
+                .should('not.be.visible');
+        });
+
+        it('When the user uploads a file containing virus \'Error: A virus was detected, please upload another file\' error message should be displayed inline with file name, the uploaded file count should increase after a virus file gets uploaded', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/sampleVirus.zip');
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(1)
+                .within(() => {
+                    uploadResponsePage.virusErrorMessageWrapper()
+                        .verifyInnerText('Error: A virus was detected, please upload another file.')
+                        .and('be.visible');
+                });
+            cy.log('checking if uploaded file count increases after a virus file gets uploaded')
+            uploadResponsePage.uploadedFileCount()
+                .verifyInnerText('2/15 File Limit');
+        });
+
+        it('CSS of virus error message', { tags: 'css' }, () => {
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(1)
+                .within(() => {
+                    uploadResponsePage.virusErrorMessageWrapper()
+                        .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+                });
+        });
+
+        it('User should not be able to download the file containing virus and the file name should be in disabled state', () => {
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(1)
+                .parents('.uploaded-document-wrapper')
+                .should('not.have.attr', 'href');
+        });
+    });
+
+    describe('Supported file types- preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+        });
+
+        it('When user modifies supported files types, then in preview tab on hovering over the Supported file formats info icon a tooltip with the modified list of selected supported file types should be displayed', () => {
+            cy.log('Pre-step: checking a new file type and unchecking a default selected file type')
+            uploadResponsePage.supportedFileTypesAccordionWrapper()
+                .click();
+            uploadResponsePage.steps.checkUncheckSupportedFileType(4, 'CSV', 'not.be.checked');
+            uploadResponsePage.steps.checkUncheckSupportedFileType(14, 'MP3', 'be.checked');
+            uploadResponsePage.supportedFileTypesCheckboxWrapper(14)
+            cy.log('Switching to Preview tab')
+            uploadResponsePage.steps.switchToPreviewTab()
+            uploadResponsePage.supportedFileInfoIcon()
+                .trigger('mouseover');
+            //https://redmine.zeuslearning.com/issues/533063
+            uploadResponsePage.supportedFilesTooltip()
+                .verifyInnerText('Supported file formats: Excel, GIF, JPG, MP3, PDF, PNG, Powerpoint, Publisher, RTF, TXT, Word, XPS, ZIP.');
+        });
+
+        it('User should be able to upload file of newly added supported file type', () => {
+            uploadResponsePage.steps.fileUploadAndVerify(['sample.mp3']);
+        });
+
+        it('When the user uploads file type which is now removed from supported file type, then file upload error message - \'Error: The file type is not supported. Please upload files with the following supported formats: *file format separated by commas*\' should be displayed', () => {
+            uploadResponsePage.inputTypeFile()
+                .attachFile('uploads/sample.csv');
+            //https://redmine.zeuslearning.com/issues/534957
+            commonComponents.errorMessage()
+                .verifyInnerText('Error: The file type is not supported. Please upload files with the following supported formats: Excel, GIF, JPG, MP3, PDF, PNG, Powerpoint, Publisher, RTF, TXT, Word, XPS, ZIP.');
+        });
+
+        uploadResponsePage.tests.verifyErrorMessageDisappear();
+    });
+
+    describe('Renaming an uploaded file', () => {
+        abortEarlySetup();
+        before(() => {
+            uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+            cy.log('Uploading a file in preview tab');
+            uploadResponsePage.steps.switchToPreviewTab();
+            uploadResponsePage.steps.fileUploadAndVerify(['image.png']);
+        });
+
+        it('On hovering over the \'Edit display text\' icon button, tooltip \'Edit display text\' should be displayed', () => {
+            uploadResponsePage.editDisplayTextIcon()
+                .realHover();
+            commonComponents.tooltipText()
+                .verifyInnerText('Edit display text');
+        });
+
+        it('Clicking on the \'Edit display text\' icon button should open the \'Display Text\' popup with label \'Display Text\' and the input field in the popup should be prefilled with the name of the file and the name text should be selected by default and \'Save\' and \'Cancel\' buttons should be displayed', () => {
+            uploadResponsePage.editDisplayTextIcon()
+                .click();
+            dialogBoxBase.dialogBox()
+                .should('be.visible');
+            dialogBoxBase.dialogBoxTitle()
+                .verifyInnerText('Display text')
+            uploadResponsePage.editDisplayTextPopupInputField()
+                .should('have.value', 'image.png')
+                .parent()
+                .and('have.class', 'Mui-focused');
+            uploadResponsePage.acceptButton()
+                .verifyInnerText('Save')
+                .and('be.visible');
+            uploadResponsePage.rejectButton()
+                .verifyInnerText('Cancel')
+                .and('be.visible');
+        });
+
+        it('CSS of the \'Display Text\' popup', { tags: 'css' }, () => {
+            dialogBoxBase.dialogBoxTitle()
+                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.semibold);
+            uploadResponsePage.editDisplayTextPopupInputField()
+                .verifyCSS(css.color.text, css.fontSize.heading, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.defaultBackground);
+            uploadResponsePage.acceptButton()
+                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.primaryBtnBg);
+            uploadResponsePage.rejectButton()
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of the \'Display Text\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+
+        it('When the user removes the name of the file from the input field in the \'Display Text\' popup, then placeholder text \'Enter Display Text\' should be displayed', () => {
+            uploadResponsePage.editDisplayTextPopupInputField()
+                .clear()
+                .should('have.attr', 'placeholder', 'Enter display text')
+                .and('be.visible');
+        });
+
+        it('When the user clicks on \'Save\' button, a validation error text \'Display text is required.\' should be displayed below the input field', () => {
+            uploadResponsePage.acceptButton()
+                .click();
+            commonComponents.errorMessage()
+                .verifyInnerText('Error: Display text is required.')
+        });
+
+        it('When the user enters text in Display Text input field i.e. updates the file name, then the validation text should disappear and when user clicks on \'Save\' button, the name of the file should get updated', () => {
+            uploadResponsePage.editDisplayTextPopupInputField()
+                .type('imageEdited.png')
+                .should('have.value', 'imageEdited.png');
+            commonComponents.errorMessage()
+                .should('not.exist');
+            uploadResponsePage.acceptButton()
+                .click();
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(0)
+                .verifyInnerText('imageEdited.png')
+        });
+
+        it('When the user updates the file name and clicks on the \'Cancel\' button, the latest changes should be reverted and the \'Display Text\' popup should close', () => {
+            cy.log('clicking on edit display text button')
+            uploadResponsePage.editDisplayTextIcon()
+                .click();
+            uploadResponsePage.editDisplayTextPopupInputField()
+                .clear()
+                .type('imageEdited2.png')
+                .should('have.value', 'imageEdited2.png');
+            uploadResponsePage.rejectButton()
+                .click();
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(0)
+                .verifyInnerText('imageEdited.png')
+                .and('not.have.text', 'imageEdited2.png');
+        });
+
+        it('If the user tries to download file after renaming, the file should get downloaded with the original name', () => {
+            cy.verifyUploadFilePreviewDownload('image.png');
+        });
+    });
+
+    describe('Add a description for a file', () => {
+        abortEarlySetup();
+        before(() => {
+            uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+            cy.log('Uploading a file in preview tab');
+            uploadResponsePage.steps.switchToPreviewTab();
+            uploadResponsePage.steps.fileUploadAndVerify(['image.png']);
+        });
+
+        it('On hovering over the \'Add file description\' icon button, tooltip \'Add file description\' should be displayed', () => {
+            uploadResponsePage.addFileDescriptionIcon()
+                .realHover();
+            commonComponents.tooltipText()
+                .should('have.text', 'Add file description');
+        });
+
+        it('When the user clicks on the \'Add file description\' icon button, an input area should be displayed along with a placeholder text: \'Add file description\'', () => {
+            uploadResponsePage.addFileDescriptionIcon()
+                .click();
+            uploadResponsePage.addFileDescriptionInput()
+                .should('have.attr', 'placeholder', 'Add file description')
+                .and('be.visible');
+        });
+
+        it('CSS of \'Add file description\' input field', { tags: 'css' }, () => {
+            uploadResponsePage.addFileDescriptionInput()
+                .verifyCSS(css.color.optionsText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of \'Add file description\' input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(uploadResponsePage.addFileDescriptionInput().parents('.placeholder'));
+        });
+
+        it('User should be able to add description text for uploaded file', () => {
+            uploadResponsePage.addFileDescriptionInput()
+                .type('This is an image')
+                .should('have.value', 'This is an image');
+        });
+
+        it('When user again clicks on the \'Add file description\' icon button, the \'Add file description\' input field section should get hidden', () => {
+            uploadResponsePage.addFileDescriptionIcon()
+                .click();
+            uploadResponsePage.addFileDescriptionInput()
+                .should('not.exist');
+        });
+    });
+
+    describe('Delete the uploaded file', () => {
+        abortEarlySetup();
+        before(() => {
+            uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+            cy.log('Uploading a file in preview tab');
+            uploadResponsePage.steps.switchToPreviewTab();
+            uploadResponsePage.steps.fileUploadAndVerify(['image.png']);
+        });
+
+        it('On hovering over the \'Delete\' icon button, tooltip \'Delete\' should be displayed', () => {
+            uploadResponsePage.deleteButton()
+                .realHover();
+            commonComponents.tooltipText()
+                .should('have.text', 'Delete');
+        });
+
+        it('When the user clicks on the \'Delete\' icon button, then \'Delete file\' popup with label \'Delete file\' and message \'Are you sure you want to delete this file?\' should be displayed and \'Delete File\' and \'Cancel\' buttons should be displayed', () => {
+            uploadResponsePage.deleteButton()
+                .click();
+            dialogBoxBase.dialogBox()
+                .should('be.visible');
+            dialogBoxBase.dialogBoxTitle()
+                .verifyInnerText('Delete file')
+            dialogBoxBase.dialogBoxContent()
+                .should('contain', 'Are you sure you want to delete this file?');
+            uploadResponsePage.rejectButton()
+                .should('be.visible')
+                .verifyInnerText('Cancel');
+            uploadResponsePage.acceptButton()
+                .should('be.visible')
+                .verifyInnerText('Delete file');
+        });
+
+        it('CSS of the \'Delete file\' popup', { tags: 'css' }, () => {
+            dialogBoxBase.dialogBoxTitle()
+                .find('span')
+                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.bold);
+            uploadResponsePage.rejectButton()
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.transparent);
+            uploadResponsePage.acceptButton()
+                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.deleteBtn);
+        });
+
+        it('Accessibility of the \'Delete file\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+
+        it('When the user clicks on the \'Cancel\' button, then \'Delete File\' popup should close and file should not get deleted', () => {
+            cy.log('Clicking on Delete icon for popup to appear')
+            uploadResponsePage.deleteButton()
+                .click();
+            cy.log('Clicking on \'Cancel\' button')
+            uploadResponsePage.rejectButton()
+                .click();
+            dialogBoxBase.dialogBox()
+                .should('not.exist');
+            uploadResponsePage.uploadedFileWrapper()
+                .eq(0)
+                .should('exist');
+        });
+
+        it('When the user clicks on the \'Delete File\' button, the delete confirmation dialog box should disappear and the uploaded file should get deleted', () => {
+            uploadResponsePage.deleteButton()
+                .click();
+            uploadResponsePage.acceptButton()
+                .click();
+            dialogBoxBase.dialogBox()
+                .should('not.exist');
+            uploadResponsePage.uploadedFilesSectionWrapper()
+                .should('not.have.text', 'image.png')
+                .children()
+                .should('have.length', 0);
+            uploadResponsePage.uploadedFileCount()
+                .verifyInnerText('0/15 File Limit');
+        });
+    });
+});