itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/e2e/ILC/ToolSettings/toolSettingsContent.js

@@ -0,0 +1,283 @@
+import { toolSettingsComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { dialogBoxBase, multipleSelectionPage, rulerPage } from "../../../pages";
+
+const css = Cypress.env('css');
+
+const tools = ['Ruler', 'Protractor', 'Line Reader'];
+const lengthOfRuler = ['15 cm', '30 cm', '40 cm'];
+const rotationOptions = ['None', 'Allow rotation', 'Allow rotation and display angle'];
+const unitOfMeasurementOptions = ['Centimeter', 'Inch', 'Pixel', 'Both centimeter and inch', 'Custom image'];
+
+describe('Create Item page: Tool settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Tool settings: Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('short text response');
+        });
+
+        it('By default \'Tool settings\' accordion should be collapsed and by clicking on the \'Tool settings\' accordion, user should be able to expand the accordion', () => {
+            toolSettingsComponent.steps.verifyToolSettingsAccordionIsCollapsed();
+            toolSettingsComponent.steps.expandToolSettingsAccordion();
+        });
+
+        it('CSS of \'Tool settings\' accordion', { tags: 'css' }, () => {
+            utilities.verifyCSS(toolSettingsComponent.toolSettingsPanel().find('.accordion_label'), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(toolSettingsComponent.toolSettingsPanel().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(toolSettingsComponent.addToolsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(toolSettingsComponent.toolSettingsHelpText(), {
+                'color': css.color.helperText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(utilities.getNthElement(toolSettingsComponent.toolButton(), 0), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(utilities.getNthElement(toolSettingsComponent.toolLabel(), 0), {
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Failed due to https://redmine.zeuslearning.com/issues/556914
+        it('Accessibility of \'Additional Settings\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(toolSettingsComponent.toolSettingsPanel().parents('.tool-settings-customization-wrapper'));
+        });
+
+        it(`When \'Tool settings\' accordion is expanded, then \'Add tools\' and \'Select the tools that will be displayed to the students.\' labels should be displayed. Three tools ${tools} should be displayed with their labels, icons, drag handle button and edit icon. By default tools should not be selected`, () => {
+            utilities.verifyInnerText(toolSettingsComponent.addToolsLabel(), 'Add tools');
+            utilities.verifyInnerText(toolSettingsComponent.toolSettingsHelpText(), 'Select the tools that will be displayed to the students.');
+            utilities.verifyElementCount(toolSettingsComponent.toolButton(), 3);
+            tools.forEach((toolName, toolIndex) => {
+                toolSettingsComponent.steps.verifyToolButton(toolIndex, toolName);
+            });
+        });
+
+        it('When user clicks on tool button, then that tool button should be selected and tick icon should be displayed on the button', () => {
+            toolSettingsComponent.steps.selectTool(0);
+        });
+
+        it('CSS of tool in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(toolSettingsComponent.toolButton(), 0), {
+                'background-color': css.color.activeButtons,
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+        });
+
+        it('Accessibility of tool in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(toolSettingsComponent.toolLabel().parents('.icon-button-custom-format'));
+        });
+    });
+
+    describe('Tool settings: Ruler tool popup content', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('short text response');
+            toolSettingsComponent.steps.expandToolSettingsAccordion();
+        });
+
+        it('When clicks on edit icon button for Ruler tool, then tool settings popup should be displayed', () => {
+            toolSettingsComponent.steps.clickOnToolEditIcon(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        });
+
+        it('The popup should have title \'Ruler\'', () => {
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Ruler');
+        });
+
+        it('\'Ok\' and \'Cancel\' buttons should be displayed at the bottom of the popup', () => {
+            utilities.verifyInnerText(dialogBoxBase.buttonAccept(), 'Ok');
+            utilities.verifyElementVisibilityState(dialogBoxBase.buttonAccept(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.buttonReject(), 'Cancel');
+            utilities.verifyElementVisibilityState(dialogBoxBase.buttonReject(), 'visible');
+        });
+
+        it(`'Unit of measurement' label and dropdown should be displayed and by default ${unitOfMeasurementOptions[0]} should be selected for the dropdown`, () => {
+            utilities.verifyInnerText(rulerPage.unitOfMeasurementLabel(), 'Unit of measurement');
+            utilities.verifyElementVisibilityState(rulerPage.unitOfMeasurementLabel(), 'visible');
+            rulerPage.steps.verifyInnerTextOfUnitOfMeasurementDropdown(unitOfMeasurementOptions[0]);
+            utilities.verifyElementVisibilityState(rulerPage.unitOfMeasurementDropdown(), 'exist');
+        });
+
+        it(`'Length of ruler' label and dropdown should be displayed and by default ${lengthOfRuler[0]} should be selected`, () => {
+            utilities.verifyInnerText(rulerPage.lengthOfRulerLabel(), 'Length of ruler');
+            utilities.verifyElementVisibilityState(rulerPage.lengthOfRulerLabel(), 'visible');
+            rulerPage.steps.verifyInnerTextOfLengthOfRulerDropdown(lengthOfRuler[0]);
+            utilities.verifyElementVisibilityState(rulerPage.lengthOfRulerDropdown(), 'exist');
+        });
+
+        it(`When user expands the \'Unit of measurement\' dropdown then list with five option ${unitOfMeasurementOptions} should be displayed`, () => {
+            rulerPage.steps.expandUnitOfMeasurementDropdown();
+            rulerPage.steps.verifyUnitOfMeasurementDropdownOptions(unitOfMeasurementOptions);
+        });
+
+        it('When the user selects any option from the expanded \'Unit of measurement\' dropdown, then the dropdown should close', () => {
+            rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown(unitOfMeasurementOptions[0]);
+            rulerPage.steps.verifyDropdownIsCollapsed();
+            rulerPage.steps.verifyInnerTextOfUnitOfMeasurementDropdown(unitOfMeasurementOptions[0]);
+        });
+
+        it(`When user expands the \'Length of ruler\' dropdown then list with three options ${lengthOfRuler} should be displayed`, () => {
+            rulerPage.steps.expandLengthOfRulerDropdown();
+            rulerPage.steps.verifyLengthOfRulerDropdownListOptions(lengthOfRuler);
+        });
+
+        it('When user selects an option from \'Length of ruler\' dropdown list, then dropdown list should disappear and selected option should be the active selection for the dropdown', () => {
+            rulerPage.steps.selectOptionFromLengthOfRulerDropdown(lengthOfRuler[1]);
+            rulerPage.steps.verifyDropdownIsCollapsed();
+            rulerPage.steps.verifyInnerTextOfLengthOfRulerDropdown(lengthOfRuler[1]);
+        });
+
+        it('\'Allow student to flip ruler\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            utilities.verifyTextContent(rulerPage.allowUserToFlipRulerLabel(), 'Allow student to flip ruler');
+            utilities.verifyElementVisibilityState(rulerPage.allowUserToFlipRulerLabel(), 'visible');
+            utilities.verifyElementVisibilityState(rulerPage.allowUserToFlipRulerCheckbox(), 'exist');
+            rulerPage.steps.verifyAllowUserToFlipRulerCheckboxIsUnchecked();
+        });
+
+        it('User should be able to check \'Allow student to flip ruler\' checkbox', () => {
+            rulerPage.steps.checkAllowUserToFlipRulerCheckbox();
+        });
+
+        it('\'Alternative text\' label and input field should be displayed and  by default \'Alternative text\' input field should be empty', () => {
+            utilities.verifyInnerText(rulerPage.alternativeTextLabel(), 'Alternative text');
+            utilities.verifyElementVisibilityState(rulerPage.alternativeTextLabel(), 'visible');
+            rulerPage.steps.verifyEmptyAndVisibleAlternativeTextInput();
+        });
+
+        it('User should be able to add text in \'Alternative text\' input field', () => {
+            rulerPage.steps.enterAndVerifyTextInAlternativeTextInputFieldInPopup('Measuring tool');
+        });
+
+        it('\'Rotation\' label and dropdown should be displayed and by default \'Allow rotation\' should be selected', () => {
+            rulerPage.steps.verifyDefaultRotationLabelAndDropdown();
+        });
+
+        it('When user expands \'Rotation\' dropdown then list with three options \'None\', \'Allow rotation\' and \'Allow rotation and display angle\' should be displayed', () => {
+            rulerPage.steps.expandRotationDropdown();
+            rulerPage.steps.verifyRotationDropdownOptions(rotationOptions);
+        });
+
+        it('When user selects an option from the dropdown list, then dropdown list should disappear and selected option should be the active selection for the dropdown', () => {
+            rulerPage.steps.selectOptionFromRotationDropdown('None');
+            rulerPage.steps.verifyDropdownIsCollapsed();
+            utilities.verifyInnerText(rulerPage.rotationDropdown(), 'None');
+        });
+
+        it('\'Opacity\' label, input field and slider should be displayed and by default the slider of \'Opacity\' should be set to 40 percent', () => {
+            rulerPage.steps.verifyDefaultOpacityLabelSliderAndInputField();
+        });
+
+        //Failed due to https://redmine.zeuslearning.com/issues/556472
+        it('\'Ruler Color\' label and 6 solid color should be displayed and by default \'White\' color radio button should be selected', () => {
+            utilities.verifyInnerText(rulerPage.rulerColorLabel(), 'Ruler Color');
+            utilities.verifyElementVisibilityState(rulerPage.rulerColorLabel(), 'visible');
+            rulerPage.steps.verifyToolColorBlocksVisibility();
+            rulerPage.steps.verifyToolColorSelectedState(0);
+        });
+
+        it('\'Ruler visibility\' label should be displayed', () => {
+            utilities.verifyInnerText(rulerPage.rulerVisibilityLabel(), 'Ruler visibility');
+            utilities.verifyElementVisibilityState(rulerPage.rulerVisibilityLabel(), 'visible');
+        });
+
+        it('\'Add show/hide button\' label and checkbox should be displayed and by default the checkbox should be checked', () => {
+            utilities.verifyElementVisibilityState(rulerPage.addShowHideButtonCheckbox(), 'exist');
+            rulerPage.steps.verifyAddShowHideButtonCheckboxChecked()
+            rulerPage.steps.verifyAddShowHideButtonLabel();
+
+        });
+
+        it('\'Launch the ruler by default\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            rulerPage.steps.verifyLaunchToolByDefaultCheckboxUnchecked();
+            utilities.verifyElementVisibilityState(rulerPage.launchToolByDefaultCheckbox(), 'exist');
+            rulerPage.steps.verifyLaunchToolByDefaultLabel('ruler');
+        });
+
+        it('User should be able to check \'Launch the ruler by default\' checkbox', () => {
+            rulerPage.steps.checkLaunchToolByDefaultCheckbox();
+        });
+
+        it('When user clicks on Cancel button, then ruler tool should not enter selected state and popup should disappear', () => {
+            dialogBoxBase.steps.clickOnRejectButtonInDialogBox();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            toolSettingsComponent.steps.verifyToolUnselectedState(0);
+        });
+
+        //TODO: need to update according to https://redmine.zeuslearning.com/issues/557448
+        it('When user clicks on Edit icon button for ruler tool and clicks on \'Ok\' button, then tool should enter selected state and popup should disappear', () => {
+            toolSettingsComponent.steps.clickOnToolEditIcon(0);
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            toolSettingsComponent.steps.verifyToolSelectedState(0);
+        });
+    });
+
+    describe('Tool settings: Edit tool settings', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('short text response');
+            toolSettingsComponent.steps.expandToolSettingsAccordion();
+        });
+
+        it('When user clicks on edit icon for ruler tool, then popup for ruler tool settings should be displayed', () => {
+            toolSettingsComponent.steps.clickOnToolEditIcon(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        });
+
+        //TODO: need to update according to https://redmine.zeuslearning.com/issues/557448
+        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.expandLengthOfRulerDropdown();
+            rulerPage.steps.selectOptionFromLengthOfRulerDropdown('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');
+            toolSettingsComponent.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"]'));
+        });
+    });
+});

package/cypress/e2e/ILC/ToolSettings/toolSettingsPreviewContents.smoke.js

@@ -0,0 +1,206 @@
+import { itemPreviewPage, studentViewPage, multipleSelectionPage, protractorPage } from "../../../pages";
+import { rulerPage } from "../../../pages";
+import { createQuestionBasePage, toolSettingsComponent, commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+let previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view', 'Grading view', 'Correct answer view'];
+const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
+const css = Cypress.env('css');
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+
+views.forEach((view) => {
+    describe(`Preview tab contents : Single tool selected - ${view}`, { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            switch (view) {
+                case 'Question preview':
+                    cy.log('Navigating to short text response question type');
+                    multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+                    cy.barsPreLoaderWait();
+                    multipleSelectionPage.steps.addTextInQuestionInstructionsInputField('Text');
+                    multipleSelectionPage.steps.addInputToOptionsInputField(options);
+                    multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(0);
+                    multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(1);
+                    multipleSelectionPage.steps.allotPoints(20);
+                    toolSettingsComponent.steps.expandToolSettingsAccordion();
+                    toolSettingsComponent.steps.selectTool(0);
+                    createQuestionBasePage.steps.switchToPreviewTab();
+                    utilities.verifyElementVisibilityState(commonComponents.previewTabQuestionWrapper(), 'visible');
+                    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)}`);
+                    createQuestionBasePage.steps.switchToPreviewTab();
+                    break;
+                case 'Student view':
+                    cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    break;
+                case 'Grading view':
+                    cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    break;
+                case 'Correct answer view':
+                    cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    break;
+                default:
+                    throw new Error('Invalid view');
+            }
+        });
+
+        after(() => {
+            if (view === 'Question preview') {
+                createQuestionBasePage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+            }
+            if (view === 'Student view') {
+                studentViewPage.steps.submitResponse();
+                utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
+            }
+        });
+
+        it('\'Show ruler\' button should be displayed and ruler tool should not be displayed by default', () => {
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+            rulerPage.steps.verifyRulerNotVisible();
+        });
+
+        it('When user clicks on \'Show ruler\' button, then ruler should be displayed and its button should change to \'Hide ruler\'', () => {
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            rulerPage.steps.verifyRulerVisible();
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Hide');
+            rulerPage.steps.verifyLengthOfRulerInPreview('15cm');
+        });
+
+        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"]'));
+        });
+
+        it('When user clicks on \'Hide ruler\', then tool should be disappear and its button should change to \'Show ruler\'', () => {
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+            rulerPage.steps.verifyRulerNotVisible();
+        });
+    });
+
+    describe(`Preview tab contents : Multiple tools selected - ${view}`, { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            switch (view) {
+                case 'Question preview':
+                    cy.log('Navigating to short text response question type');
+                    multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+                    cy.barsPreLoaderWait();
+                    multipleSelectionPage.steps.addTextInQuestionInstructionsInputField('Text');
+                    multipleSelectionPage.steps.addInputToOptionsInputField(options);
+                    multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(0);
+                    multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(1);
+                    multipleSelectionPage.steps.allotPoints(20);
+                    toolSettingsComponent.steps.expandToolSettingsAccordion();
+                    toolSettingsComponent.steps.selectTool(0);
+                    toolSettingsComponent.steps.selectTool(1);
+                    createQuestionBasePage.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)}`);
+                    createQuestionBasePage.steps.switchToPreviewTab();
+                    break;
+                case 'Student view':
+                    cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    break;
+                case 'Grading view':
+                    cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    break;
+                case 'Correct answer view':
+                    cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    break;
+                default:
+                    throw new Error('Invalid view');
+            }
+        });
+
+        after(() => {
+            if (view === 'Question preview') {
+                createQuestionBasePage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+            }
+            if (view === 'Student view') {
+                studentViewPage.steps.submitResponse();
+                utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
+            }
+        });
+
+        it('When the user selects ruler and protractor tool in edit tab, then \'Show Ruler\' and \'Show protractor\' buttons should be displayed in preview tab and tools should not be visible by default', () => {
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+            rulerPage.steps.verifyRulerNotVisible();
+            protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Show');
+            protractorPage.steps.verifyProtractorNotExistInPreviewTab();
+        });
+
+        it('When the user clicks on \'Show ruler\', then ruler tool should be displayed and its button should change to \'Hide ruler\'', () => {
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            rulerPage.steps.verifyRulerVisible();
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Hide');
+            rulerPage.steps.verifyLengthOfRulerInPreview('15cm');
+        });
+
+        it('When user clicks on \'Show protractor\', then protractor tool should be displayed and its button should change to \'Hide protractor\'', () => {
+            protractorPage.steps.clickOnProtractorVisibilityButton();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+            protractorPage.steps.verifyAngleTypeIsBothAcuteAndObtuseInPreviewTab();
+            protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Hide');
+        });
+
+        it('When user has clicked visibility buttons for both the ruler and protractor tools, both tools should be displayed simultaneously in the preview tab', () => {
+            rulerPage.steps.verifyRulerVisible();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('CSS of the \'Hide ruler\' and \'Hide protractor\' 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
+            });
+            utilities.verifyCSS(protractorPage.protractorVisibilityButtonPreviewTab(), {
+                'border': `1px solid ${css.color.activeButtons}`,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.medium
+            });
+        });
+
+        //Failed due to https://redmine.zeuslearning.com/issues/557552
+        
+        it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
+        });
+
+
+        it('When user clicks on \'Hide ruler\', then ruler tool should be disappear and button should change to \'Show ruler\'. Protractor tool should be visible in preview tab', () => {
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            rulerPage.steps.verifyRulerNotVisible();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('When user clicks on \'Hide protractor\', then protractor tool should be disappear and button should change to \'Show protractor\'', () => {
+            protractorPage.steps.clickOnProtractorVisibilityButton();
+            protractorPage.steps.verifyProtractorNotExistInPreviewTab();
+        });
+    });
+});

package/cypress/fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters.js

@@ -0,0 +1,172 @@
+export const drawingToolbarOptionsAndAdditionalOptions = {
+    drawingToolbarOptions: [
+        {
+            displayName: 'Select',
+            tooltipText: 'SelectSelect, move, rotate and re-size',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Scribble',
+            additionalOptions: [' strokefontcolor', ' strokefontcolorpicker'],
+            secondaryToolbarOptions: ['Stroke color', 'Stroke thickness', 'Opacity'],
+            tooltipText: 'PencilDraw freehand lines',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Line',
+            additionalOptions: [' strokefontcolor', ' strokefontcolorpicker'],
+            secondaryToolbarOptions: ['Stroke color', 'Stroke thickness', 'Line type', 'Opacity'],
+            tooltipText: 'LineDraw a straight line',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Curved line',
+            additionalOptions: [' strokefontcolor', ' strokefontcolorpicker'],
+            secondaryToolbarOptions: ['Stroke color', 'Stroke thickness', 'Line type', 'Opacity'],
+            tooltipText: 'Curved LineDraw a curved line',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Capture image',
+            tooltipText: "Take a photoUse your device's camera to take a photo and add it to the canvas",
+            toolType: 'dialog'
+        },
+        {
+            displayName: 'Insert image',
+            tooltipText: 'Upload an imageUpload an image from your device',
+            toolType: 'dialog'
+        },
+        {
+            displayName: 'Text',
+            additionalOptions: [' specialchar', ' mathchar', ' fontsize', ' strokefontcolor', ' strokefontcolorpicker'],
+            secondaryToolbarOptions: ['Special characters', 'Math characters', 'Font Size', 'Text color', 'Opacity'],
+            tooltipText: 'TextAdd text',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Point eraser',
+            secondaryToolbarOptions: ['Eraser thickness'],
+            tooltipText: 'Point EraserErase the element by pixel',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Item eraser',
+            tooltipText: 'Item EraserErase the entire element',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Rectangle',
+            additionalOptions: [' strokefontcolor', ' strokefontcolorpicker', ' fillcolor', ' fillcolorpicker'],
+            secondaryToolbarOptions: ['Fill color', 'Stroke color', 'Stroke thickness', 'Opacity'],
+            tooltipText: 'RectangleDraw a rectangle',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Ellipse',
+            additionalOptions: [' strokefontcolor', ' strokefontcolorpicker', ' fillcolor', ' fillcolorpicker'],
+            secondaryToolbarOptions: ['Fill color', 'Stroke color', 'Stroke thickness', 'Opacity'],
+            tooltipText: 'EllipseDraw an ellipse',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Polygon',
+            additionalOptions: [' strokefontcolor', ' strokefontcolorpicker', ' fillcolor', ' fillcolorpicker'],
+            secondaryToolbarOptions: ['Fill color', 'Stroke color', 'Stroke thickness', 'Opacity'],
+            tooltipText: 'PolygonDraw polygon',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Compass',
+            additionalOptions: [' strokefontcolor', ' strokefontcolorpicker', ' fillcolor', ' fillcolorpicker'],
+            secondaryToolbarOptions: ['Stroke color', 'Stroke thickness', 'Opacity'],
+            tooltipText: 'CompassDraw compass',
+            toolType: 'tool'
+        },
+        {
+            displayName: 'Bring forward',
+            tooltipText: 'Bring forwardBring selected item forward a layer',
+            toolType: 'action'
+        },
+        {
+            displayName: 'Bring backward',
+            tooltipText: 'Bring backwardSend selected item back a layer',
+            toolType: 'action'
+        },
+        {
+            displayName: 'Duplicate',
+            tooltipText: 'DuplicateMake a copy of the selection',
+            toolType: 'action'
+        },
+        {
+            displayName: 'Undo',
+            tooltipText: 'UndoUndo last action',
+            toolType: 'action'
+        },
+        {
+            displayName: 'Redo',
+            tooltipText: 'RedoRedo last action',
+            toolType: 'action'
+        },
+        {
+            displayName: 'Full Screen',
+            tooltipText: 'Full ScreenView the canvas using your whole screen',
+            toolType: 'dialog'
+        },
+        {
+            displayName: 'Clear All',
+            tooltipText: 'Clear AllClear entire canvas',
+            toolType: 'dialog'
+        }
+    ],
+
+    additionalOptions: [' specialchar', ' mathchar', ' fontsize', ' strokefontcolor', ' strokefontcolorpicker', ' fillcolor', ' fillcolorpicker'],
+
+    additionalOptionsTooltip: ['Special characters', 'Math characters', 'Font size', 'Stroke font color', 'Stroke font color picker', 'Fill color', 'Fill color picker']
+}
+
+export const specialCharacters = [
+    {
+        categoryName: 'Spanish'
+    },
+    {
+        categoryName: 'French'
+    },
+    {
+        categoryName: 'German'
+    },
+    {
+        categoryName: 'Portuguese'
+    },
+    {
+        categoryName: 'Scandinavian'
+    },
+    {
+        categoryName: 'Italian'
+    },
+    {
+        categoryName: 'Icelandic'
+    }
+]
+
+export const mathCharacters = [
+    {
+        categoryName: 'Mathematical symbols',
+        symbols: ['SquareRoot', 'CubeRoot', 'Infinity', 'PlusMinus', 'Integral', 'Triangle', 'GreaterThan', 'LessThan', 'NotEqual', 'Approximate']
+    },
+    {
+        categoryName: 'Notation and set theory',
+        symbols: ['StandardDeviation', 'Eta', 'Summation', 'Pi', 'Union', 'Intersection', 'ProperSet', 'SubSet']
+    },
+    {
+        categoryName: 'Comparison and units',
+        symbols: ['Equivalence', 'Estimates', 'Approximation', 'Mu', 'MicroMeter', 'Degree', 'DegreeCelsius']
+    },
+    {
+        categoryName: 'Fraction values',
+        symbols: ['OneNine', 'OneTen', 'OneSix', 'OneFive', 'OneFour', 'OneThree', 'TwoFive', 'TwoThree', 'FiveEight', 'OneTwo', 'ThreeFive', 'ThreeFour', 'FourFive', 'FiveSix']
+    },
+    {
+        categoryName: 'Superscript and subscript',
+        symbols: ['Plus', 'Minus', 'Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Plus', 'Minus', 'Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine']
+    }
+]