itemengine-cypress-automation 1.0.169-uploadResponseMigration-83ab996.0 → 1.0.169

package/cypress/e2e/ILC/BrainingCampManipulative/additionalSettings.js

@@ -0,0 +1,83 @@
+import { brainingCampManipulativePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const fontSizeDropdownOptions = ['Tiny', 'Small', 'Default', 'Normal', 'Big', 'Huge'];
+const fontSizes = ['12px', '14px', '16px', '18px', '22px', '26px'];
+
+describe('Desmos graphing: Additional Settings accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        brainingCampManipulativePage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/554758
+    describe('Additional settings: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+            brainingCampManipulativePage.steps.expandAdditionalSettings();
+        });
+
+        brainingCampManipulativePage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size functionality preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+            brainingCampManipulativePage.steps.addQuestionInstructions();
+            brainingCampManipulativePage.steps.expandAdditionalSettings();
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.fontSizeDropdown(), 'visible');
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${option} accordingly`, () => {
+                brainingCampManipulativePage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(brainingCampManipulativePage.fontSizeDropdown(), `${option}`);
+                brainingCampManipulativePage.steps.switchToPreviewTab();
+                utilities.verifyCSS(brainingCampManipulativePage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(brainingCampManipulativePage.previewTabCanvas(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                brainingCampManipulativePage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+            brainingCampManipulativePage.steps.expandAdditionalSettings();
+        });
+
+        brainingCampManipulativePage.tests.verifyAdditionalSettingsAccessibilitySection();
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+            brainingCampManipulativePage.steps.expandAdditionalSettings();
+        });
+
+        brainingCampManipulativePage.tests.verifyDetailsSection();
+    });
+});

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

@@ -0,0 +1,200 @@
+import { brainingCampManipulativePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const manipulativeToggleButton = ['Algebra tiles', 'Base ten blocks', 'Clock', 'Color tiles', 'Cuisenaire® rods', 'Fraction circles', 'Fraction tiles', 'Geoboard', 'Hundred boards', 'Linking cubes', 'Money', 'Number lines', 'Pattern blocks', 'Place value disks', 'Rekenreks', 'Two - color counters', 'XY coordinate board'];
+
+describe('Create item : Brainingcamp manipulative - Edit tab basics', () => {
+
+    describe('Question Instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        brainingCampManipulativePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question Instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        brainingCampManipulativePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Add manipulative and Select a manipulative section - Contents and edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        it('Add manipulative label and two toggle buttons \'Select a manipulative\' and \'Enter share code\' should be displayed', () => {
+            utilities.verifyInnerText(brainingCampManipulativePage.addManipulativeLabel(), 'Add manipulative');
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.addManipulativeLabel(), 'visible');
+            utilities.verifyInnerText(brainingCampManipulativePage.selectAManipulativeToggleButtonLabel(), 'Select a manipulative');
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.selectAManipulativeToggleButton(), 'visible');
+            utilities.verifyInnerText(brainingCampManipulativePage.enterShareCodeToggleButtonLabel(), 'Enter share code');
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.enterShareCodeToggleButton(), 'visible');
+        });
+
+        it('By default, \'Select a manipulative\' should be selected', () => {
+            brainingCampManipulativePage.steps.verifySelectAManipulativeToggleButtonIsSelected();
+        });
+
+        it(`When \'Select a manipulative\' is selected, then \'Select a manipulative\' label and 17 options ${manipulativeToggleButton} should be displayed`, () => {
+            manipulativeToggleButton.forEach((manipulativeOption) => {
+                utilities.verifyInnerText(brainingCampManipulativePage.manipulativeOptionToggleButton(manipulativeOption), `${manipulativeOption}`);
+                utilities.verifyElementVisibilityState(brainingCampManipulativePage.manipulativeOptionToggleButton(manipulativeOption), 'visible');
+            });
+        });
+
+        it(`By default, ${manipulativeToggleButton[3]} should be in selected state and rest all should be in deselected state`, () => {
+            brainingCampManipulativePage.steps.verifyAManipulativeOptionIsSelected(manipulativeToggleButton[3]);
+            manipulativeToggleButton.forEach((manipulativeOption) => {
+                if (manipulativeOption !== manipulativeToggleButton[3]) {
+                    brainingCampManipulativePage.steps.verifyAManipulativeOptionIsNotSelected(manipulativeOption);
+                };
+            });
+        });
+
+        it('User should be able to select all the toggle buttons but only one at a time', () => {
+            manipulativeToggleButton.forEach((manipulativeOption, index) => {
+                if (index === 0) {
+                    brainingCampManipulativePage.steps.selectAManipulative(manipulativeOption);
+                    brainingCampManipulativePage.steps.verifyAManipulativeOptionIsNotSelected(manipulativeToggleButton[index + 1]);
+                } else if (index === manipulativeToggleButton.lastIndexOf('XY coordinate board')) {
+                    brainingCampManipulativePage.steps.selectAManipulative(manipulativeOption);
+                    brainingCampManipulativePage.steps.verifyAManipulativeOptionIsNotSelected(manipulativeToggleButton[index - 1]);
+                } else {
+                    brainingCampManipulativePage.steps.selectAManipulative(manipulativeOption);
+                    brainingCampManipulativePage.steps.verifyAManipulativeOptionIsNotSelected(manipulativeToggleButton[index - 1]);
+                    brainingCampManipulativePage.steps.verifyAManipulativeOptionIsNotSelected(manipulativeToggleButton[index + 1]);
+                }
+            });
+        });
+
+        it('When user selects \'Enter share code\' toggle button, then \'Enter a share code\' label and input field should be displayed', () => {
+            brainingCampManipulativePage.steps.selectEnterShareCodeToggleButton();
+            utilities.verifyInnerText(brainingCampManipulativePage.enterAShareCodeLabel(), 'Enter a share code');
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.enterAShareCodeLabel(), 'visible');
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.enterAShareCodeInputField(), 'visible');
+            utilities.verifyInputFieldValue(brainingCampManipulativePage.enterAShareCodeInputField(), '');
+        });
+
+        it('When user focuses in and out of \'Enter a share code\' input field, then error message \'Error: Please enter share code.\' should be displayed', () => {
+            brainingCampManipulativePage.steps.focusInAndFocusOutOfEnterAShareCodeInputField();
+            utilities.verifyInnerText(brainingCampManipulativePage.errorMessage(), 'Error: Please enter share code.');
+        });
+
+        brainingCampManipulativePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('User should be able to enter alphanumeric code in \'Enter a share code\' input field', () => {
+            brainingCampManipulativePage.steps.addShareCodeInEnterAShareCodeInputField('E98SY56N');
+        });
+
+        it('When user has added sharecode in sharecode input field, then its error message should not be displayed', () => {
+            brainingCampManipulativePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When user switched back to \'Select a manipulative\', then previously selected manipulative option should be selected', () => {
+            brainingCampManipulativePage.steps.selectSelectAManipulativeToggleButton();
+            brainingCampManipulativePage.steps.verifyAManipulativeOptionIsSelected(manipulativeToggleButton[16]);
+        });
+
+        it('CSS of \'Add a manipulative\', \'Enter a share code\' and \'Select a manipulative\' sections', { tags: 'css' }, () => {
+            utilities.verifyCSS(brainingCampManipulativePage.addManipulativeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(brainingCampManipulativePage.selectAManipulativeToggleButtonLabel(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(brainingCampManipulativePage.selectAManipulativeToggleButton(), {
+                'background-color': css.color.toggleButtonSelectedBg
+            });
+            utilities.verifyCSS(brainingCampManipulativePage.enterAShareCodeLabel(), {
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(brainingCampManipulativePage.enterShareCodeToggleButton(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(brainingCampManipulativePage.selectAManipulativeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(brainingCampManipulativePage.manipulativeOptionToggleButton(manipulativeToggleButton[0]), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.defaultBackground,
+                'border': `1px solid ${css.color.manipulativeOptionContainerBorder}`
+            });
+            utilities.verifyCSS(brainingCampManipulativePage.manipulativeOptionToggleButton(manipulativeToggleButton[16]), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.activeButtons,
+                'border': `1px solid ${css.color.manipulativeOptionContainerBorder}`
+            });
+            brainingCampManipulativePage.steps.selectEnterShareCodeToggleButton();
+            utilities.verifyCSS(brainingCampManipulativePage.enterAShareCodeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(brainingCampManipulativePage.enterAShareCodeInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.normal
+            });
+        });
+
+        it('Accessibility of \'Add a manipulative\', \'Enter a share code\' and \'Select a manipulative\' sections', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(brainingCampManipulativePage.selectAManipulativeLabel().parents('[class*="BrainingcampManipulativestyle__Wrapper"]'));
+            brainingCampManipulativePage.steps.selectSelectAManipulativeToggleButton();
+            cy.checkAccessibility(brainingCampManipulativePage.selectAManipulativeLabel().parents('[class*="BrainingcampManipulativestyle__Wrapper"]'));
+        });
+    });
+
+    describe('Add manipulative and Select a manipulative section - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+            brainingCampManipulativePage.steps.switchToPreviewTab();
+        });
+
+        it('By default canvas with \'Color tiles\' resource should be displayed in preview tab', () => {
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.previewTabCanvas(), 'visible');
+            cy.log('Post-step: Switching to edit tab');
+            brainingCampManipulativePage.steps.switchToEditTab();
+        });
+
+        manipulativeToggleButton.forEach((manipulativeOption) => {
+            it(`When the user selects \'${manipulativeOption}\' manipulative from \'Select a manipulative\' section, then in preview tab the \'${manipulativeOption}\' manipulative should be displayed in the canvas`, () => {
+                brainingCampManipulativePage.steps.selectAManipulative(manipulativeOption);
+                brainingCampManipulativePage.steps.switchToPreviewTab();
+                utilities.verifyElementVisibilityState(brainingCampManipulativePage.previewTabCanvas(), 'visible');
+                brainingCampManipulativePage.steps.switchToEditTab();
+            });
+        });
+
+        it('User gives input in \'Enter a share code\' input field, then the corresponding manipulative resource should be displayed in preview tab canvas', () => {
+            brainingCampManipulativePage.steps.selectEnterShareCodeToggleButton();
+            brainingCampManipulativePage.steps.addShareCodeInEnterAShareCodeInputField('G5DWYWQY');
+            brainingCampManipulativePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.previewTabCanvas(), 'visible');
+        });
+    });
+});

package/cypress/e2e/ILC/BrainingCampManipulative/editTabScoringSection.js

@@ -0,0 +1,56 @@
+import { brainingCampManipulativePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Braining camp manipulative: Scoring section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        brainingCampManipulativePage.tests.verifyScoringTypeLabelAndDropdown('manuallyScored');
+    });
+
+    describe('Manually scored scoring type - Scoring section', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+        });
+
+        it('When the user selects \'Manually scored\' option from the Scoring Type dropdown, then the \'Points\' label and input field should be displayed and and \'Minimum score awarded (if attempted)\' should not be displayed', () => {
+            brainingCampManipulativePage.steps.expandScoringTypeDropdown();
+            brainingCampManipulativePage.steps.selectOptionFromScoringTypeDropdown('Manually scored');
+            brainingCampManipulativePage.steps.verifyDefaultPointsLabelAndInputField();
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.minimumPointsLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(brainingCampManipulativePage.minimumPointsInputField(), 'notExist');
+        });
+
+        brainingCampManipulativePage.tests.verifyPointsFieldErrorState();
+    });
+
+    describe('Non scored scoring - Scoring section', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        it('User should be able to select \'Non scored\' scoring type from scoring type dropdown', () => {
+            brainingCampManipulativePage.steps.expandScoringTypeDropdown();
+            brainingCampManipulativePage.steps.selectOptionFromScoringTypeDropdown('Non scored');
+        });
+
+        brainingCampManipulativePage.tests.verifyPointsLabelAndInputFieldForNonScoredScoringType();
+
+        brainingCampManipulativePage.tests.verifyScoringSectionContentsForNonScoredScoringType();
+
+        brainingCampManipulativePage.tests.verifyCSSAndA11yOfDisabledPointsInputField();
+    });
+});

package/cypress/e2e/ILC/BrainingCampManipulative/gradingViewAndCorrectAnswerViewContents.smoke.js

@@ -0,0 +1,95 @@
+import constants from "../../../fixtures/constants";
+import { correctAnswerViewPage, brainingCampManipulativePage, itemPreviewPage, studentViewPage, gradingViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+let gradingAndCorrectAnsView = ['Grading view', 'Correct answer view']
+const views = utilities.getViews(gradingAndCorrectAnsView);
+var itemReferenceID = "";
+
+describe('Create item page - Brainingcamp manipulative: Grading view, Correct answer view contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (views.includes('Grading view')) {
+        describe('Grading view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+                cy.barsPreLoaderWait();
+                brainingCampManipulativePage.steps.addQuestionInstructions();
+                brainingCampManipulativePage.steps.selectAManipulative('Fraction circles');
+                brainingCampManipulativePage.steps.allotPoints(10);
+                brainingCampManipulativePage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID;
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        utilities.verifyElementVisibilityState(brainingCampManipulativePage.previewTabCanvas(), 'visible');
+                        studentViewPage.steps.submitResponse();
+                        studentViewPage.steps.clickOnGoToGradingViewButton();
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(brainingCampManipulativePage.questionInstructionsText(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                utilities.verifyElementVisibilityState(brainingCampManipulativePage.questionInstructionsText(), 'visible');
+            });
+
+            it('The brainingcamp manipulative resource should be displayed', () => {
+                utilities.verifyElementVisibilityState(brainingCampManipulativePage.previewTabCanvas(), 'visible');
+            });
+
+            it('Empty score input field and total score should be displayed', () => {
+                gradingViewPage.steps.verifyGradingViewScore('', 10);
+            });
+
+            it('Accessibility of contents in preview tab', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(brainingCampManipulativePage.previewTabCanvas().parents('[class*="ContentWrapper"]'));
+            });
+        });
+    }
+
+    //Need to re-visit once https://redmine.zeuslearning.com/issues/555456 is resolved
+    if (views.includes('Correct answer view')) {
+        describe('Correct answer view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+                cy.barsPreLoaderWait();
+                brainingCampManipulativePage.steps.addQuestionInstructions();
+                brainingCampManipulativePage.steps.selectAManipulative('Number lines');
+                brainingCampManipulativePage.steps.allotPoints(10);
+                brainingCampManipulativePage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyTextContent(correctAnswerViewPage.correctAnswerViewQuestionInstructions(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                utilities.verifyElementVisibilityState(correctAnswerViewPage.correctAnswerViewQuestionInstructions(), 'visible');
+            });
+
+            it('\'This is a manual scored question\' help text should be displayed in the correct answer view', () => {
+                utilities.verifyTextContent(correctAnswerViewPage.manualScoredQuestionHelpText(), 'This is a manual scored question.');
+                utilities.verifyElementVisibilityState(correctAnswerViewPage.manualScoredQuestionHelpText(), 'visible');
+            });
+
+            it('The points alloted to the question should be displayed', () => {
+                correctAnswerViewPage.steps.verifyAvailablePoints(10);
+            });
+
+            //Need to add CSS and A11y here once updated designs are available for correct answer
+        });
+    }
+});

package/cypress/e2e/ILC/BrainingCampManipulative/headerSection.js

@@ -0,0 +1,71 @@
+import constants from "../../../fixtures/constants";
+import { dialogBoxBase, brainingCampManipulativePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Create item page - Brainingcamp manipulative: Question instructions', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        brainingCampManipulativePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Brainingcamp manipulative');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        brainingCampManipulativePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        brainingCampManipulativePage.tests.verifyCancelButton('brainingcamp manipulative')
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            cy.barsPreLoaderWait();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                brainingCampManipulativePage.steps.verifyQuestionInstructionsErrorMessage();
+                brainingCampManipulativePage.steps.verifyPointsFieldErrorMessage();
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                brainingCampManipulativePage.steps.addTextInQuestionInstructionsInputField('Select correct option from dropdown');
+                brainingCampManipulativePage.steps.allotPoints(10);
+                brainingCampManipulativePage.steps.verifyErrorMessageIsNotDisplayed();
+            });
+
+            brainingCampManipulativePage.tests.verifyCreateItemWrapperContentsA11y();
+        });
+
+        describe('Saving a question', () => {
+            it('Clicking on Save Question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                brainingCampManipulativePage.steps.saveAQuestionAndVerifySnackbar();
+            });
+            brainingCampManipulativePage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+        });
+    });
+});

package/cypress/e2e/ILC/BrainingCampManipulative/previewTabContent.smoke.js

@@ -0,0 +1,72 @@
+import { brainingCampManipulativePage, itemPreviewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+let previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+
+describe('Create item page - Brainingcamp manipulative: Preview contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+                        cy.barsPreLoaderWait();
+                        brainingCampManipulativePage.steps.addQuestionInstructions();
+                        brainingCampManipulativePage.steps.selectAManipulative('Hundred boards');
+                        brainingCampManipulativePage.steps.allotPoints(10);
+                        brainingCampManipulativePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        brainingCampManipulativePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    brainingCampManipulativePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(brainingCampManipulativePage.questionInstructionsText(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                utilities.verifyElementVisibilityState(brainingCampManipulativePage.questionInstructionsText(), 'visible');
+            });
+
+            it('The brainingcamp manipulative resource should be displayed', () => {
+                utilities.verifyElementVisibilityState(brainingCampManipulativePage.previewTabCanvas(), 'visible');
+            });
+
+            it('CSS of preview tab contents', { tags: 'css' }, () => {
+                utilities.verifyCSS(brainingCampManipulativePage.questionInstructionsText(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+
+            it('Accessibility of preview tab contents', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(brainingCampManipulativePage.previewTabCanvas().parents('[class*="ContentWrapper"]'));
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/BrainingCampManipulative/toolSettings.js

@@ -0,0 +1,71 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { dialogBoxBase, brainingCampManipulativePage, rulerPage } from "../../../pages";
+
+const css = Cypress.env('css');
+
+describe('Create Item page: Tool settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Tool settings: Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+        });
+
+        brainingCampManipulativePage.tests.verifyToolSettingsContent();
+    });
+
+    describe('Tool settings: Edit tool settings', () => {
+        abortEarlySetup();
+        before(() => {
+            brainingCampManipulativePage.steps.navigateToCreateQuestion('brainingcamp manipulative');
+            brainingCampManipulativePage.steps.expandToolSettingsAccordion();
+        });
+
+        it('When user clicks on edit icon for ruler tool, then popup for ruler tool settings should be displayed', () => {
+            brainingCampManipulativePage.steps.clickOnToolEditIcon(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        });
+
+        it('When user modifies the settings for the ruler tool and clicks the \'Ok\' button, then ruler tool should enter selected state.', () => {
+            rulerPage.steps.expandUnitOfMeasurementDropdown();
+            rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown('Inch');
+            rulerPage.steps.selectOptionFromLengthOfRulerOptions('12 in');
+            rulerPage.steps.selectColorBlock(1);
+            rulerPage.steps.expandRotationDropdown();
+            rulerPage.steps.selectOptionFromRotationDropdown('Allow rotation and display angle');
+            rulerPage.steps.enterInputToOpacityInputField(60);
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            brainingCampManipulativePage.steps.verifyToolSelectedState(0);
+        });
+
+        it('When user has made changes for ruler tool in edit tab then changes should be reflected in the ruler tool in the preview tab', () => {
+            cy.log('Switching to Preview Tab');
+            rulerPage.steps.switchToPreviewTab();
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            utilities.verifyElementVisibilityState(rulerPage.rulerPreviewTab(), 'visible');
+            rulerPage.steps.verifyLengthOfRulerInPreview('12in');
+            rulerPage.steps.verifyColorOfRulerInPreview(1);
+            rulerPage.steps.verifyRulerOpacityInPreview('0.6');
+            rulerPage.steps.verifyRotationButtonWithDegreeVisible();
+        });
+
+        it('CSS of the \'Hide ruler\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.rulerVisibilityButtonPreviewTab(), {
+                'border': `1px solid ${css.color.activeButtons}`,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
+        });
+    });
+});