itemengine-cypress-automation 1.0.342-regressionFixes18thMarch-b97f3ea.0 → 1.0.342

package/cypress/e2e/ILC/ThinkSphere/editTabBasicSection.js

@@ -0,0 +1,561 @@
+import { thinkSpherePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const fileTypes = ['GIF', 'JPG', 'SVG', 'PNG'];
+const fileTypesString = fileTypes.toString().replaceAll(',', ', ')
+const infoIconTooltipText = 'Supported file formats:  ' + fileTypesString + '.';
+
+describe('Create item : ThinkSphere - Edit tab basics', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Create thinkSphere item - create item page', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.visit('/item-engine/thinksphere/create-item');
+        });
+
+        thinkSpherePage.tests.verifyCreateItemHeaderSection();
+
+        thinkSpherePage.tests.verifyDefaultTab();
+
+        it('When user clicks on Add ThinkSphere question button, it should navigate to think sphere create question page', () => {
+            thinkSpherePage.steps.addThinkSphereQuestion();
+            utilities.verifyInnerText(thinkSpherePage.thinkSphereQuestionHeader(), 'ThinkSphere question');
+        });
+
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            cy.barsPreLoaderWait();
+        });
+
+        thinkSpherePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+
+        it('When user add long text along with table in question instruction then height of question instruction should increase and horizontal scroll bar should appear', () => {
+            thinkSpherePage.steps.addQuestionInstructionInnerHTML('<table class="custom_author_table ie-table ie-table-bordered" border="1" style="width: 100%;"><tbody><tr><td>test</td><td>test</td><td>test</td><td>test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test&nbsp;test</td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table><p><br><br>test<br></p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>');
+            thinkSpherePage.steps.verifyQuestionInstructionIncreasedHeightAndScrollBar();
+            thinkSpherePage.steps.addQuestionInstructionInnerHTML('');
+        });
+    });
+
+    describe('Question instructions input field - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            cy.barsPreLoaderWait();
+        });
+
+        thinkSpherePage.tests.verifyQuestionInstructionsInputFieldThinkSpherePreviewTab();
+    });
+
+    describe('Question image section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Question Image\' Section should be present', () => {
+            utilities.verifyInnerText(thinkSpherePage.imageUploadSectionImageLabel(), 'Question image');
+        });
+
+        it('Verify CSS of \'Question Image\' Section Before Upload', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.imageUploadSectionImageLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+                'margin-top': '16px',
+                'margin-bottom': '8px'
+            });
+
+            utilities.verifyCSS(thinkSpherePage.imageUploadSectionUploadFileContent(), {
+                'border-width': '1px',
+                'border-style': 'solid',
+                'border-color': 'rgb(107, 139, 255)',
+                'border-radius': '8px',
+                'padding': '30px 9px 12px'
+            });
+        });
+
+        it('Question Image area should have a Cloud icon and text \'Drag & Drop an image \'or browse image on your device\' should be displayed', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.imageUploadSectionUploadCloudIconWrapper(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.imageUploadSectionDragDropFileText(), 'Drag & Drop an image');
+            utilities.verifyContainText(thinkSpherePage.imageUploadSectionFileInputLabel(), 'or browse image on your device');
+        });
+
+        it('Computer icon should be displayed before link texts \'device\'', () => {
+            thinkSpherePage.imageUploadSectionDeviceIcon().verifyPseudoClassBeforeProperty('content', '""');
+        });
+
+        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', () => {
+            utilities.verifyInnerText(thinkSpherePage.imageUploadSectionSupportedFileText(), 'Supported file formats');
+            utilities.verifyElementVisibilityState(thinkSpherePage.imageUploadSectionSupportedFileText(), 'visible');
+            thinkSpherePage.imageUploadSectionSupportedFileIconWrapper()
+                .verifyTooltip(infoIconTooltipText);
+        });
+
+        it('\'Maximum file size\' label should be displayed along with the file size limit', () => {
+            utilities.verifyInnerText(thinkSpherePage.imageUploadSectionMaximumFileSize(), 'Maximum file size: 5MB');
+        });
+
+        it('Accessibility of Image Upload Section Before Upload', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.imageUploadSection());
+        });
+
+        it('When the user uploads an image, then uploaded image should be visible', () => {
+            thinkSpherePage.steps.uploadFile('uploads/highlightImage.jpg');
+            utilities.verifyElementVisibilityStateWithOption(thinkSpherePage.imageUploadSectionFileUploaderWrapper(), 'notExist', { timeout: 15000 });
+            utilities.verifyElementVisibilityStateWithOption(thinkSpherePage.imageUploadSectionQuestionImage(), 'exist', { timeout: 15000 });
+            utilities.verifyElementVisibilityStateWithOption(thinkSpherePage.iconPencil(), 'exist', { timeout: 15000 });
+            utilities.verifyElementVisibilityStateWithOption(thinkSpherePage.iconXCircle(), 'exist', { timeout: 15000 });
+            thinkSpherePage.iconPencil().verifyTooltip('Change image', { timeout: 15000 });
+            thinkSpherePage.iconXCircle().verifyTooltip('Delete image', { timeout: 15000 });
+        });
+
+        it('User is able to upload supported image types other than jpg', () => {
+            thinkSpherePage.steps.uploadFile('uploads/image.png');
+            thinkSpherePage.steps.uploadFile('uploads/sample.svg', { timeout: 1500 });
+            thinkSpherePage.steps.uploadFile('uploads/sample.gif', { timeout: 1500 });
+        });
+
+        it('Verify CSS of \'Question Image\' Section After Upload', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.imageUploadSectionQuestionImageContainer(), {
+                'border-width': '1px',
+                'border-style': 'solid',
+                'border-color': 'rgb(107, 139, 255)',
+                'border-radius': '8px',
+                'padding': '4px'
+            });
+            utilities.verifyCSS(thinkSpherePage.imageUploadSectionQuestionImageEditIcon(), {
+                'border-width': '1px',
+                'border-style': 'solid',
+                'border-color': 'rgb(107, 139, 255)',
+                'border-radius': '4px',
+                'width': '24px',
+                'height': '24px',
+            });
+            utilities.verifyCSS(thinkSpherePage.imageUploadSectionQuestionImageCrossIcon(), {
+                'border-width': '1px',
+                'border-style': 'solid',
+                'border-color': 'rgb(107, 139, 255)',
+                'border-radius': '4px',
+                'width': '24px',
+                'height': '24px',
+            });
+        });
+
+        it.skip('Accessibility of Image Upload Section After upload', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.imageUploadSection(), { timeout: 15000 });
+        });
+    });
+
+    describe('Phases Section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            cy.barsPreLoaderWait();
+        });
+        
+        it('\'Phases\' Section should be present', () => {
+            utilities.verifyInnerText(thinkSpherePage.phasesSectionTitle(), 'Phases');
+        });
+
+        it('Verify CSS of \'Phases\' Section', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.phasesSectionTitle(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.extraLarge,
+                'font-weight': css.fontWeight.bold,
+                'padding-bottom': '16px'
+            });
+        });
+    });
+
+    describe('WhiteBoardImageProperties - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            cy.barsPreLoaderWait();
+        });
+
+        it('Verify whiteboard management panel labels and buttons', () => {
+            utilities.verifyInnerText(thinkSpherePage.manageWhiteBoardTitle(), 'Manage whiteboard pages');
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardPreviousButton(), 'Prev');
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardPageLabel(), 'Page');
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardPageCounter(), '1 / 1');
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardNextButton(), 'Next');
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardDeleteButton(), 'Delete page');
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardAddNewPageButton(), 'New page');
+            utilities.verifyElementVisibilityState(thinkSpherePage.manageWhiteBoardTitle(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.whiteBoardPreviousButton(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.whiteBoardNextButton(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.whiteBoardDeleteButton(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.whiteBoardAddNewPageButton(), 'visible');
+        });
+
+        it('Before image upload by default the Page 1 image label and radio button component should be rendered', () => {
+            utilities.verifyInnerText(thinkSpherePage.pageImageTitle(), 'Page 1 image');
+            utilities.verifyElementVisibilityState(thinkSpherePage.radioGroupWrapper(), 'exist');
+        });
+        
+        it('By default Blank whiteboard radio button should be checked and Image radio button should not be checked', () => {
+            utilities.verifyElementCheckedNotCheckedState(thinkSpherePage.blankCanvasRadioInput(), 'checked');
+            utilities.verifyElementCheckedNotCheckedState(thinkSpherePage.imageRadioInput(), 'notChecked');
+        });
+        
+        it('Before image upload by default Image upload and Image properties sections should not be visible', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.imageUploadSectionWrapper(), 'notExist');
+            utilities.verifyElementVisibilityState(thinkSpherePage.pageImagePropertiesTitle(), 'notExist');
+        });
+        
+        it('Before image upload clicking on image radio button should make Image upload and Image properties sections visible', () => {
+            thinkSpherePage.steps.clickOnImageRadioButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.imageUploadSectionWrapper(), 'exist');
+            utilities.verifyElementVisibilityState(thinkSpherePage.pageImagePropertiesTitle(), 'exist');
+        });
+
+        it('When new page button is clicked, it should create new white board page', () => {
+            thinkSpherePage.whiteBoardAddNewPageButton().click();
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardPageCounter(), '2 / 2');
+        });
+
+        it('When previous page button is clicked, the previous page should be rendered', () => {
+            thinkSpherePage.whiteBoardPreviousButton().click();
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardPageCounter(), '1 / 2');
+        });
+
+        it('When next page button is clicked, the next page should be rendered', () => {
+            thinkSpherePage.whiteBoardNextButton().click();
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardPageCounter(), '2 / 2');
+        });
+
+        it('When there is only 1 page, clicking delete page button should delete current page', () => {
+            thinkSpherePage.whiteBoardDeleteButton().click();
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardPageCounter(), '1 / 1');
+        });
+
+        it('When there is only 1 page, previous page button, next page button, and delete page button should be disabled', () => {
+            thinkSpherePage.whiteBoardPreviousButton().should('be.disabled');
+            thinkSpherePage.whiteBoardNextButton().should('be.disabled');
+            thinkSpherePage.whiteBoardDeleteButton().should('be.disabled');
+        });
+
+        it('When delete page button is clicked, current page should be deleted, and the previous page should be rendered', () => {
+            thinkSpherePage.whiteBoardAddNewPageButton().click();
+            thinkSpherePage.whiteBoardAddNewPageButton().click();
+            thinkSpherePage.whiteBoardPreviousButton().click();
+            thinkSpherePage.whiteBoardDeleteButton().click();
+            utilities.verifyInnerText(thinkSpherePage.whiteBoardPageCounter(), '1 / 2');
+            thinkSpherePage.whiteBoardDeleteButton().click();
+        });
+
+        it('CSS of whiteBoard and its buttons', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.whiteBoardPreviousButton(), {
+                'background-color': css.color.boxShadow,
+                'border-color': css.color.transparent,
+                'box-shadow': `${css.color.transparent} 0px 0px 0px 0px`,
+                'color': css.color.primaryBtnDisabled,
+                'opacity': '1',
+            });
+            utilities.verifyCSS(thinkSpherePage.whiteBoardNextButton(), {
+                'background-color': css.color.boxShadow,
+                'border-color': css.color.transparent,
+                'box-shadow': `${css.color.transparent} 0px 0px 0px 0px`,
+                'color': css.color.primaryBtnDisabled,
+                'opacity': '1',
+            });
+            thinkSpherePage.whiteBoardAddNewPageButton().click();
+            utilities.verifyCSS(thinkSpherePage.whiteBoardPreviousButton(), {
+                'padding': '12px 16px',
+                'font-weight': '600',
+                'font-size': '16px',
+                'line-height': '22px',
+                'letter-spacing': '0',
+                'border-radius': '8px',
+                'text-transform': 'none',
+                'border': `1px solid ${css.color.primaryBtnBorder}`,
+                'background-color': css.color.primaryBtnBg,
+                'border-color': css.color.primaryBtnBorder,
+                'box-shadow': `${css.color.primaryBtnBorder} 0px 5px 0px 0px`,
+                'color': css.color.whiteText,
+            });
+            thinkSpherePage.whiteBoardPreviousButton().click();
+            utilities.verifyCSS(thinkSpherePage.whiteBoardNextButton(), {
+                'padding': '12px 16px',
+                'font-weight': '600',
+                'font-size': '16px',
+                'line-height': '22px',
+                'letter-spacing': '0',
+                'border-radius': '8px',
+                'text-transform': 'none',
+                'border': `1px solid ${css.color.primaryBtnBorder}`,
+                'background-color': css.color.primaryBtnBg,
+                'border-color': css.color.primaryBtnBorder,
+                'box-shadow': `${css.color.primaryBtnBorder} 0px 5px 0px 0px`,
+                'color': css.color.whiteText,
+            });
+            utilities.verifyCSS(thinkSpherePage.whiteBoardAddNewPageButton(), {
+                'padding': '12px 16px',
+                'font-weight': '600',
+                'font-size': '16px',
+                'line-height': '22px',
+                'letter-spacing': '0',
+                'border-radius': '8px',
+                'text-transform': 'none',
+                'border': `1px solid ${css.color.primaryBtnBorder}`,
+                'background-color': css.color.primaryBtnBg,
+                'border-color': css.color.primaryBtnBorder,
+                'box-shadow': `${css.color.primaryBtnBorder} 0px 5px 0px 0px`,
+                'color': css.color.whiteText,
+            });
+            utilities.verifyCSS(thinkSpherePage.whiteBoardDeleteButton(), {
+                'border-radius': '8px',
+                'font-size': '16px',
+                'line-height': '22px',
+                'font-weight': '400',
+                'color': css.color.deletePageColor
+            });
+            thinkSpherePage.whiteBoardDeleteButton().click();
+            utilities.verifyCSS(thinkSpherePage.whiteBoardDeleteButton(), {
+                'border-radius': '8px',
+                'font-size': '16px',
+                'line-height': '22px',
+                'font-weight': '400',
+                'color': css.color.secondaryBtnDisabled,
+                'opacity': '1',
+            });
+
+        });
+
+        it('Accessibility of white board canvas contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.whiteBoardCanvasAndControls());
+        });
+        
+        it('Verify image upload section', () => {
+            thinkSpherePage.tests.verifyUploadImageSectionContentWithCSSAndA11y();
+            thinkSpherePage.tests.verifyDeleteImagePopupContentAndFunctionality();
+        });
+
+        it('Verify that the uploaded image is visible', () => {
+            thinkSpherePage.steps.clickOnImageRadioButton();
+            thinkSpherePage.steps.uploadWhiteBoardImage('uploads/highlightImage.jpg');
+            cy.get('[class*="WhiteboardPagesstyles__BackgroundImage"]')
+                .should('exist')
+                .and('have.attr', 'src')
+                .and('not.be.empty');
+        });
+
+        it('\'Image alignment\' label and 3 alignment options: Top left, Center and Top right should be displayed. By default, \'Center\' should be selected', () => {
+            utilities.verifyInnerText(thinkSpherePage.layoutLabel(), 'Image alignment');
+            utilities.verifyElementVisibilityState(thinkSpherePage.alignmentOptions(), 'exist');
+            utilities.verifyInnerText(thinkSpherePage.topLeftButton(), 'Top left');
+            utilities.verifyElementVisibilityState(thinkSpherePage.topLeftButton(), 'exist');
+            utilities.verifyInnerText(thinkSpherePage.centerButton(), 'Center');
+            utilities.verifyElementVisibilityState(thinkSpherePage.centerButton(), 'exist');
+            utilities.verifyInnerText(thinkSpherePage.topRightButton(), 'Top right');
+            utilities.verifyElementVisibilityState(thinkSpherePage.topRightButton(), 'exist');
+            thinkSpherePage.steps.verifyCenterOptionAlignmentIsSelected();
+        });
+
+        it('\'Opacity\' label, a slider and opacity input field should be displayed. By default, the slider and the input field value should be 100%', () => {
+            utilities.verifyInnerText(thinkSpherePage.opacityLabel(), 'Opacity');
+            utilities.verifyElementVisibilityState(thinkSpherePage.opacityLabel(), 'exist');
+            thinkSpherePage.steps.verifyOpacitySliderValue('100');
+            thinkSpherePage.steps.verifyOpacityInputFieldValue('100');
+            utilities.verifyElementVisibilityState(thinkSpherePage.opacitySlider(), 'exist');
+            utilities.verifyElementVisibilityState(thinkSpherePage.opacityInputField(), 'exist');
+        });
+
+        it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
+            thinkSpherePage.steps.clickOnOpacitySlider();
+            thinkSpherePage.steps.verifyOpacitySliderValue(50);
+            thinkSpherePage.steps.verifyOpacityInputFieldValue(50);
+        });
+
+        it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
+            thinkSpherePage.steps.addInputToOpacityInputField(30);
+            thinkSpherePage.steps.verifyOpacityInputFieldValue(30);
+            thinkSpherePage.steps.verifyOpacitySliderValue(30);
+        });
+
+        it('When the user changes value in the opacity input field, the image opacity should change', () => {
+           thinkSpherePage.steps.addInputToOpacityInputField(60);
+           thinkSpherePage.whiteBoardImage()
+                .should('have.css', 'opacity', '0.6');
+        });
+
+        it('\'Image alternative text\' label and input field should be displayed. By default, the input field should be blank', () => {
+            utilities.verifyInnerText(thinkSpherePage.imageAlternativeTextLabel(), 'Image alternative text');
+            utilities.verifyElementVisibilityState(thinkSpherePage.imageAlternativeTextLabel(), 'exist');
+            thinkSpherePage.steps.verifyImageAlternativeTextInputField('');
+            utilities.verifyElementVisibilityState(thinkSpherePage.imageAlternativeTextInputField(), 'exist');
+        });
+
+        it('When the user adds the alt value, it should be available in the image attribute', () => {
+            thinkSpherePage.imageAlternativeTextInputField().type('Alternative text for image');
+            utilities.verifyElementAttribute(thinkSpherePage.whiteBoardImage(), 'alt', 'Alternative text for image');
+        });
+
+        it('CSS of whiteBoard Image and Image Properties Section', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.pageImageTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(thinkSpherePage.imageRadioButtonParentSvg(), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(thinkSpherePage.pageImagePropertiesTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(thinkSpherePage.layoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            cy.log('Css of selected option button')
+            utilities.verifyCSS(thinkSpherePage.centerButton(), {
+                'color': css.color.activeButtons,
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+            cy.log('Css of Unselected option button')
+            utilities.verifyCSS(thinkSpherePage.topLeftButton(), {
+                'color': css.color.liText,
+                'border': `2px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(thinkSpherePage.opacityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('When a new alignment option is selected, the image alignment should change', () => {
+            thinkSpherePage.topLeftButton().click();
+            thinkSpherePage.steps.verifyOptionAlignmentIsSelected('topLeft');
+            thinkSpherePage.centerButton().click();
+            thinkSpherePage.steps.verifyOptionAlignmentIsSelected('center');
+            thinkSpherePage.topRightButton().click();
+            thinkSpherePage.steps.verifyOptionAlignmentIsSelected('flex-end');
+        });
+
+        it('Accessibility of whiteboard image upload and properties', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.whiteBoardImageProperties());
+        });
+        
+    });
+
+    describe('Verify css, accessibility and functionality of edit question action buttons', () => {
+        before(() => {
+            cy.loginAs('admin');
+            cy.visit('/item-engine/thinksphere/browse-items');
+            cy.interceptGraphql('getItems');
+        });
+
+        it('The pencil icon should be visible, and the drag icon and more icon should not be visible in the thinkSphere Question header', () => {
+            thinkSpherePage.steps.clickOnEditThinkSphereItem();
+            thinkSpherePage.steps.clearQuestionInstructionsInputField();
+            thinkSpherePage.steps.clickOnSaveQuestionButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.dragIcon(), 'notExist');
+            utilities.verifyElementVisibilityState(thinkSpherePage.moreOptionsIcon(), 'notExist');
+            utilities.verifyElementVisibilityState(thinkSpherePage.ThinkSphereQuestionHeaderPencilIcon(), 'exist');
+        });
+
+        it('When the user has saved think sphere question, \'Add \'Check your math\' question\' button should be visible',() => {
+            utilities.verifyInnerText(thinkSpherePage.addCheckMathQuestionButton(), 'Add \'Check your math\' question');
+        });
+
+        it('Verify  \'Add \'Check your math\' question\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.addCheckMathQuestionButton().parent(), {
+                'color': css.color.primaryBtn,
+                'background-color': css.color.lightThemeBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'padding': '12px 16px',
+                'min-width': '264px',
+            });
+        });
+
+        it('When the user clicks on \'Add \'Check your math\' question button\' and click on cancel button, the user should be redirected back to the item preview page where the \'Add \'Check your math\' question\' button is available',() => {
+            thinkSpherePage.steps.clickOnAddCheckMathQuestionButton();
+            thinkSpherePage.steps.clickOnCancelButton();
+            utilities.verifyInnerText(thinkSpherePage.addCheckMathQuestionButton(), 'Add \'Check your math\' question');
+        });
+
+        it('When the user selects an item from the review item bank and saves it, the item should be displayed in the thinkSphere item page',() => {
+            thinkSpherePage.steps.clickOnAddCheckMathQuestionButton();
+            thinkSpherePage.steps.clickOnFirstAvailableItemLink();
+            thinkSpherePage.steps.clickOnSaveButton();
+            utilities.verifyElementCount(thinkSpherePage.widgetHeaderQuestionTitle(), 2);
+        });
+
+        it('The swap icon, pencil icon and delete should be visible in the thinkSphere math question header', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.ThinkSphereMathQuestionHeaderSwapIcon(), 'exist');
+            thinkSpherePage.ThinkSphereMathQuestionHeaderSwapIcon().verifyTooltip('Swap');
+            utilities.verifyElementVisibilityState(thinkSpherePage.ThinkSphereMathQuestionHeaderPencilIcon(), 'exist');
+            thinkSpherePage.ThinkSphereMathQuestionHeaderPencilIcon().verifyTooltip('Edit');
+            utilities.verifyElementVisibilityState(thinkSpherePage.thinkSphereMathQuestionHeaderDeleteIcon(), 'exist');
+            thinkSpherePage.thinkSphereMathQuestionHeaderDeleteIcon().verifyTooltip('Delete');
+        });
+
+        it('Verify CSS of swap, pencil and delete icons', () => {
+            utilities.verifyCSS(thinkSpherePage.ThinkSphereQuestionHeaderPencilIcon(), {
+                'padding': '5px',
+            });
+            utilities.verifyCSS(thinkSpherePage.ThinkSphereQuestionHeaderPencilIcon().parent(), {
+                'margin-right': '11px',
+            });
+            utilities.verifyCSS(thinkSpherePage.ThinkSphereMathQuestionHeaderSwapIcon(), {
+                'padding': '5px',
+            });
+            utilities.verifyCSS(thinkSpherePage.ThinkSphereMathQuestionHeaderSwapIcon().parent(), {
+                'margin-right': '6px',
+            });
+            utilities.verifyCSS(thinkSpherePage.ThinkSphereMathQuestionHeaderPencilIcon(), {
+                'padding': '5px',
+            });
+            utilities.verifyCSS(thinkSpherePage.ThinkSphereMathQuestionHeaderPencilIcon().parent(), {
+                'margin-right': '6px',
+            });
+            utilities.verifyCSS(thinkSpherePage.thinkSphereMathQuestionHeaderDeleteIcon(), {
+                'padding': '5px',
+            });
+            utilities.verifyCSS(thinkSpherePage.thinkSphereMathQuestionHeaderDeleteIcon().parent(), {
+                'margin-right': '11px',
+            });
+        });
+
+        it('Accessibility of icons', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.ThinkSphereMathQuestionHeaderSwapIcon());
+            cy.checkAccessibility(thinkSpherePage.thinkSphereMathQuestionHeaderDeleteIcon());
+        });
+
+        it(`Clicking on swap icon should take us to Add 'Check your math' question`, () => {
+            thinkSpherePage.steps.clickOnSwapButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.AddCheckMathQuestionHeader(), 'exist');
+            thinkSpherePage.steps.clickOnFirstAvailableItemLink();
+            thinkSpherePage.steps.clickOnSaveButton();
+        });
+
+
+        it(`Clicking on edit button icon should take us to edit question page`, () => {
+            thinkSpherePage.steps.clickOnEditButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionsWrapper(), 'exist');
+            thinkSpherePage.steps.clickOnSaveButton();
+        });
+
+        it('Clicking on delete icon should remove the math question', () => {
+            thinkSpherePage.steps.clickOnDeleteButton();
+            utilities.verifyElementVisibilityState(thinkSpherePage.thinkSphereMathQuestionHeaderDeleteIcon(), 'notExist');
+        });
+    });
+});
+