itemengine-cypress-automation 1.0.209-graphqlStagingUpdate-7ab593a.0 → 1.0.209

package/cypress/e2e/ILC/Graphing/toolsControlsAndBackgroundSection.js

@@ -1,388 +1,824 @@
-import { dialogBoxBase, graphingPage } from "../../../pages";
-import abortEarlySetup from "../../../support/helpers/abortEarly";
-import utilities from "../../../support/helpers/utilities";
-const unselectedToolOption = ['Circle', 'Parabola', 'Sine', 'Polygon'];
-const selectedToolOption = ['Point', 'Line', 'Label', 'Ray', 'Segment', 'Vector'];
-const controlOptions = ['Move', 'Undo', 'Redo', 'Reset'];
-const patternOptions = ['Grid', 'Lines', 'Dots', 'Circular', 'Quadrant'];
-const patternOptionsAltText = ['Grid pattern of evenly spaced horizontal and vertical lines', 'Line pattern of evenly spaced horizontal lines', 'Dot pattern of evenly spaced horizontal and vertical dots', 'Circular pattern of evenly spaced concentric circles', 'Quadrant pattern of evenly spaced horizontal and vertical lines'];
-const alignmentOptions = ['Top left', 'Center', 'Top right'];
-const toolOptions = [...selectedToolOption, ...unselectedToolOption];
-const css = Cypress.env('css');
-
-describe('Graphing: Tools and controls - Edit tab and preview tab tool options', () => {
-    before(() => {
-        cy.loginAs('admin');
-    });
-
-    //TODO: Need to update once https://redmine.zeuslearning.com/issues/564073 is resolved
-    describe('Tools and controls - Edit tab content and functionality', () => {
-        abortEarlySetup();
-        before(() => {
-            graphingPage.steps.navigateToCreateQuestion('Graphing');
-            cy.barsPreLoaderWait();
-        });
-
-        it('\'Tools\' label should be displayed with all the tools', () => {
-            utilities.verifyInnerText(graphingPage.toolsLabel(), 'Tools');
-            utilities.verifyElementVisibilityState(graphingPage.toolsLabel(), 'visible');
-        });
-
-        it(`The ${selectedToolOption} should be in selected state with tick icons and all the options should be in unselected state`, () => {
-            selectedToolOption.forEach((toolOption, index) => {
-                utilities.verifyElementVisibilityState(graphingPage.toolOptions(`${toolOption} selected`), 'visible');
-                utilities.verifyInnerText(utilities.getNthElement(graphingPage.toolOptionsLabel(), index), toolOption);
-                utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.toolOptionsTickIcon(), index), 'visible');
-            });
-            unselectedToolOption.forEach((toolOption, index) => {
-                utilities.verifyElementVisibilityState(graphingPage.toolOptions(`${toolOption} not-selected`), 'visible');
-                utilities.verifyInnerText(utilities.getNthElement(graphingPage.toolOptionsLabel(), index + 6), toolOption);
-                utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.toolOptionsTickIcon(), index + 6), 'hidden');
-            });
-        });
-
-        it('\'Controls\' label should be displayed with all the control options', () => {
-            utilities.verifyInnerText(graphingPage.controlsLabel(), 'Controls');
-            utilities.verifyElementVisibilityState(graphingPage.controlsLabel(), 'visible');
-        });
-
-        it('All the control options should be displayed in selected state', () => {
-            let controlOptions = ['Move', 'Undo/Redo', 'Reset'];
-            controlOptions.forEach((controlOption, index) => {
-                utilities.verifyElementVisibilityState(graphingPage.controlOptions(`${controlOption} selected`), 'visible');
-                utilities.verifyInnerText(utilities.getNthElement(graphingPage.controlsOptionsLabel(), index), controlOption);
-                utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.controlsTickIcon(), index), 'visible');
-            });
-        });
-
-        graphingPage.tests.verifyDefaultToolDropdown(toolOptions);
-
-        it(`The ${selectedToolOption} options should be displayed in the \'Specify correct answer\' section and ${toolOptions} should be displayed in the background graph section`, () => {
-            selectedToolOption.forEach((toolOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionSpecifyCorrectAnswer(`${toolOption}`), 'visible');
-            });
-            utilities.verifyElementCount(graphingPage.graphToolOptionSpecifyCorrectAnswer(), 6);
-            toolOptions.forEach((toolOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionEditTab(`${toolOption}`), 'visible');
-            });
-            utilities.verifyElementCount(graphingPage.graphToolOptionEditTab(), 10);
-        });
-
-        it('By default, the \'Point\' option should be in selected state in the  \'Specify correct answer\' section and background graph section', () => {
-            graphingPage.steps.verifyToolOptionSelectedEditTab(toolOptions[0]);
-            graphingPage.steps.verifyToolOptionNotSelectedEditTab(toolOptions.slice(1, toolOptions.length));
-            graphingPage.steps.verifyToolOptionSelectedSpecifyCorrectAnswerSection(toolOptions[0]);
-            graphingPage.steps.verifyToolOptionNotSelectedSpecifyCorrectAnswerSection(toolOptions.slice(1, 6));
-        });
-
-        it('When the user de-selects an selected option it should be removed from the \'Specify correct answer\' section, \'Default tool\' but all the options should be displayed in the background graph section', () => {
-            graphingPage.steps.deselectToolOptions(['Point']);
-            selectedToolOption.slice(1, selectedToolOption.length).forEach((toolOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionSpecifyCorrectAnswer(`${toolOption}`), 'visible');
-            });
-            graphingPage.steps.verifyToolOptionSelectedSpecifyCorrectAnswerSection(toolOptions[1]);
-            toolOptions.forEach((toolOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionEditTab(`${toolOption}`), 'visible');
-            });
-            graphingPage.steps.verifyToolOptionSelectedEditTab(toolOptions[0]);
-            graphingPage.steps.expandDefaultToolDropdown();
-            selectedToolOption.slice(1, selectedToolOption.length).forEach((dropdownOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.defaultToolDropdownOptions(dropdownOption), 'exist');
-            });
-            graphingPage.steps.selectOptionFromDefaultToolDropdown('Line');
-        });
-
-        it('When user selects any of the default unselected options it should be added to the \'Specify correct answer\' section, \'Default tool\' and all the options should be displayed in the background graph section', () => {
-            graphingPage.steps.selectToolOptions(['Circle']);
-            toolOptions.slice(1, 6).forEach((toolOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionSpecifyCorrectAnswer(`${toolOption}`), 'visible');
-            });
-            toolOptions.forEach((toolOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionEditTab(`${toolOption}`), 'visible');
-            });
-            graphingPage.steps.expandDefaultToolDropdown();
-            toolOptions.slice(1, 6).forEach((dropdownOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.defaultToolDropdownOptions(dropdownOption), 'exist');
-            });
-            graphingPage.steps.selectOptionFromDefaultToolDropdown('Line');
-        });
-
-        //Controls
-        it('All the controls should be displayed in the \'Specify correct answer\' section and background graph section', () => {
-            controlOptions.forEach((controlOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionSpecifyCorrectAnswer(controlOption), 'visible');
-                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionEditTab(controlOption), 'visible');
-            });
-        });
-
-        it('When the user de-selects any control it should be removed from the \'Specify correct answer\' section and all controls should be displayed in the background graph section', () => {
-            graphingPage.steps.deselectControl('Move');
-            controlOptions.slice(1, controlOptions.length).forEach((controlOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionSpecifyCorrectAnswer(controlOption), 'visible');
-            });
-            controlOptions.forEach((controlOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionEditTab(controlOption), 'visible');
-            });
-        });
-
-        it('When the user selects a un-selected option it should be displayed again in the \'Specify correct answer\' section and all controls should be displayed in the background graph section', () => {
-            graphingPage.steps.selectControl('Move');
-            controlOptions.forEach((controlOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionSpecifyCorrectAnswer(controlOption), 'visible');
-                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionEditTab(controlOption), 'visible');
-            });
-        });
-
-        //Default tool
-        it('When the user selects another tool as the default tool it should be displayed as selected and the \'Point\' tool should be displayed unselected in the \'Specify correct answer\' section and background graph section', () => {
-            graphingPage.steps.expandDefaultToolDropdown();
-            graphingPage.steps.selectOptionFromDefaultToolDropdown('Circle');
-            graphingPage.steps.verifyToolOptionSelectedSpecifyCorrectAnswerSection('Circle');
-            graphingPage.steps.verifyToolOptionNotSelectedSpecifyCorrectAnswerSection(['Line']);
-            graphingPage.steps.verifyToolOptionSelectedEditTab('Circle');
-            graphingPage.steps.verifyToolOptionNotSelectedEditTab(['Point']);
-        });
-
-        it('CSS of tools and controls', { tags: 'css' }, () => {
-            utilities.verifyCSS(graphingPage.toolOptions('Point').find('svg circle'), {
-                'fill': css.color.secondaryBtn
-            });
-            utilities.verifyCSS(graphingPage.toolOptions('Point'), {
-                'background-color': css.color.secondaryBtnBg
-            });
-            utilities.verifyCSS(graphingPage.toolOptions('Line').find('[data-name*="Path"]').eq(1), {
-                'fill': css.color.primaryBtn
-            });
-            utilities.verifyCSS(graphingPage.toolOptions('Line'), {
-                'background-color': css.color.activeButtons
-            });
-            utilities.verifyCSS(graphingPage.toolOptionsTickIcon().eq(1).find('[data-name="Icon feather-check"]'), {
-                'color': css.color.activeButtons,
-                'fill': css.color.activeButtons
-            });
-        });
-
-        it('Accessibility of tools and controls', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(graphingPage.toolOptions().parents('[class*="CustomizedOptionWrapper"]'))
-        });
-    });
-
-    describe('Tools and controls - Preview tab functionality', () => {
-        abortEarlySetup();
-        before(() => {
-            graphingPage.steps.navigateToCreateQuestion('Graphing');
-            cy.barsPreLoaderWait();
-        });
-
-        it(`The ${selectedToolOption} options should be displayed in the preview tab`, () => {
-            graphingPage.steps.switchToPreviewTab();
-            selectedToolOption.forEach((toolOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionPreviewTab(`${toolOption}`), 'visible');
-            });
-            utilities.verifyElementCount(graphingPage.graphToolOptionPreviewTab(), 6);
-        });
-
-        it('By default, the \'Point\' option should be in selected state in the preview tab tool options', () => {
-            graphingPage.steps.verifyToolOptionSelectedPreviewTab(selectedToolOption[0]);
-            graphingPage.steps.verifyToolOptionNotSelectedPreviewTab(selectedToolOption.slice(1, selectedToolOption.length));
-            utilities.verifyElementCount(graphingPage.graphToolOptionPreviewTab(), 6)
-        });
-
-        it('When the user de-selects an selected option it should be removed from the preview tab tool options', () => {
-            graphingPage.steps.switchToEditTab();
-            graphingPage.steps.deselectToolOptions(['Point']);
-            graphingPage.steps.switchToPreviewTab();
-            selectedToolOption.slice(1, selectedToolOption.length).forEach((toolOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionPreviewTab(`${toolOption}`), 'visible');
-            });
-            graphingPage.steps.verifyToolOptionSelectedPreviewTab(toolOptions[1]);
-        });
-
-        it('When user selects any of the default unselected options it should be added to the preview tab tool options', () => {
-            graphingPage.steps.switchToEditTab();
-            graphingPage.steps.selectToolOptions(['Circle']);
-            graphingPage.steps.switchToPreviewTab();
-            toolOptions.slice(1, 6).forEach((toolOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionPreviewTab(`${toolOption}`), 'visible');
-            });
-        });
-
-        //Controls
-        it('All the controls should be displayed in the preview tab tool options', () => {
-            controlOptions.forEach((controlOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionPreviewTab(controlOption), 'visible');
-            });
-        });
-
-        it('When the user de-selects any control it should be removed from the preview tab tool options', () => {
-            graphingPage.steps.switchToEditTab();
-            graphingPage.steps.deselectControl('Move');
-            graphingPage.steps.switchToPreviewTab();
-            controlOptions.slice(1, controlOptions.length).forEach((controlOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionPreviewTab(controlOption), 'visible');
-            });
-        });
-
-        it('When the user selects a un-selected option it should be displayed again in the preview tab tool options', () => {
-            graphingPage.steps.switchToEditTab();
-            graphingPage.steps.selectControl('Move');
-            graphingPage.steps.switchToPreviewTab();
-            controlOptions.forEach((controlOption) => {
-                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionPreviewTab(controlOption), 'visible');
-            });
-        });
-
-        //Default tool
-        it('When the user selects another tool as the default tool it should be displayed as selected and the \'Point\' tool should be displayed unselected in the preview tab tool options', () => {
-            g�gd�lv�����f����q����	/��zMp��fP����:#�HǸ���� �"�=��`�a�p(	~� <bW.v�8Ah��"���!�_ɼ5@Me�j�WT�;�y-n�N����V�R��
-Go��ml��$�j��5#
j2�^5�O*�G�ft,vSM��(U|�ɈV��*j�c���J:P����$���6��3�uau�?��lod��Ŀ������c�RE"�f�}��Ά
��+t{�Vhx��^�p
���`�|׃Q��R=�0�0���td�M�>�b1�����ރ��t���q�wufW�z$��[�V����-�X3��a��,��×����#j��Y�Ɯ3���!~�ڛ��\�~A�M8��\�C��}=��"��xF����u��O�-��d�⛗X��A\FZ�D�e9y��V��������O����H��"?�3�r���z�Ψ
^�b�������n��F�ף7R��u������q�	k3n�#�N��6��8MKSُta�[�Qٟ�0���\�3�<��(����K=���X�";][
O� ���p:z(��2��5����#*~�n���`R
-Kap�N�
-�����%���̈�e�7�[MH�rL]�N��D���z��ˋ�1Mt�p�
-
-�M�����	es}kԮH^p��$��,-��&�CtoT,�Ya�i9D��"��t3$�f�Bvaf���ʣ���\�NG���-Ѡ�*�F����C�����^a2�&����b&n���:�!Ɲ�<Ev���Z�Z"T 8�C؍θ���zػ]z3:���֞�է��o~�`VW�'�<d@��r�]�X�{V���6�W���6��e�����o&�-D��U=��ʾ�&φs�D;>J��y��`VF:Ҽ��B�t�o�4Mu�_8.�;���}7a#����uf����݋W^9�*��[j�u��8��u��g�2x�>p���#�Ȟ�9�X�@�?�'KT��l۪�^v����w�3NI��N���r�����j#�9Fgx��M$ګ�/�=4Ky#0��/�6y|�-�s���ǃr��O{�!��5<w�=W5�`�E�f�H)ༀݟ���T�eB�V>	�{���}��p��]1��f߲�>"d-j4c�dr�l�Y;��u�&^������L�/���sG2h��
-0m���wYe��pB��kν6w�vܿt5I׉y��
-�ɍ��y�2����J~9���6����m�5��K�
	,�N�g���#ݤ������*�&'��$PPE����/5:03vv5\���d/�&G"���bmv���᪛;$gl�"�>�zx���q�
-���c�Zнl?>�m�8�R��wV$(�|Y���h�bW&�x��
�%�å嵸U
��ɦ
-O��}
�����{����Pˊ�:$���tp�ټ�r<;��� +������q�b*��u�
-��1~�����&$��̑��?.�;�͚��jYy]����U
-�{6OS�AOhv��цCh��j!;`��/��u���౜U`�;��k��E��=IX��
-�����!��ik�5������ww�N��F
N5]���Яr���Qn��
��٣Er� Q�\ry*��<)kmb
-�
ZY���ʋa��ɑ��0̩܂L�H-Y��;�C��=.���b1���QѩF�g��C	/�6��8��V�rK��b;.
똘ܢ��Ԩ�M}��_1n.��Č�-��Ҍct�!�0��Ȑ�+
-ؙ�����A^v*f�?�k�ӽ�4�����$/#S��9E��v�IA��sF��X�P3��_�Q3G���
-u�
-�c�Fvx��_P@���Y�i��%����[�'V@
��S���Eo������U�@�k��|s?l)�ÛX���bkN����J�7(�BeAz
T�È��l�nוrk�t�	���`�3�-�H�z��;<�q���@M������{V�v��E"�{Dl�2�_�0�xׯ!�
��I�Ml|���4����=��Q+J�d��
-n�0���
Q�q/!��'r��Ax�Nd&���'�4����&��%���7���/�=	���u�
-�}z�V>�_��hqm�H����F���S�ٓ�}
-a:i=��U��f5t�ݵ�.p������%JSd��7Y"�G��HTO$�m��9/�.��e�9~{jF���r��F{�����E��&0
-��4��#�'/s��L
-`t�J	k�{�#ۇn���_�y�q8|�H��ZaϤ�p��;�,Ǣ���Ocb��Yw�x^�<����Yu�������E�B��lë�� $��~	
-�\�F\7p��~�lϗ�y�`̍(�3����Χe[�avK~Ku�O������Ș�J�+�ϳ�w��
-YS�U���0��iW�|(j�W���ž5S2�Tol���7'�:��!��q
�
-���~e7÷�/D��Ŋ�����ba0R]�M�j����IF�"%���ګ���L��/��aX�704k��Ս���k��3ҙ���ڄ�,���
$��v�d�>��u�<bd�^�|x�XvP8�:��:P`�O�4�ǮWiV�T@�(���x�!�Trk��:丣��V�AA�dN�@LZ��,�|F�`�Q���D�����j#�jbƲh����P�hb���ۼ6��.��{%�VO����g��X�-{_�1��*G�
-��!sE �A����C(G�_��>^��f#У��!Εk�Lk_�k]�Fp�^�+��}�{��D�43��xg"�Y~}[���k;"#�\�j^����~��1	�����o����Y��ϼ����?Gѡ�6�d���}%�;3m�y�$�
���c��ޒLm2ʂ�	g��7�^쀧�_z�R.>bm*���Ɓ���B���D
-���k;�
-bʕB��.,[n�GQ)^lp��!^_*CX���	Ը+��76;��Sx8�Ú�`�
-�+�f�ʫ/
-��j�˽�������01����B����� �����C��LG�n���$	<��	�Z��S�b���&fjM�G��$��d��O�}���`�$O���슠�P"e����1���M�@���,-�p\cd�̠l��D�}b�Np�nQEǬ%[����Q�J�n�ڊ�ICs�11������L1_8�{8*�7��c�
-"�w9@M	a�[dO�����7���ִ�|�����6��UDSS>V[��� Y]p�pS�͍��n�ީ�0��EH}�u`��t������1�d1�Pٺ���,]��H��T�s^W���F��XT�S3t�!-��?,;�n�uҷ�	Áx�"��h�,Z�QY
Pm#I���q��
-�I�+�RAv��SrA�!�m�5>���*�ZR;o�F�H�Ǔm�,j�536�O���{k��
-�	&|�U��)��wQ��
-1�;
��C艪
Yx�'���4��Z�O��W��|�d0�ϑV0�g�T�[X-��rv6E��"I?}�T�Y�a� ��z�O$֋u)�r����X��V�_��T�Oxk�
-�6MC„�s�8�"�ﰛ˜�55�-�%�7C�
-JyGxΈ��uʄ2���"�V4��
�4�߂�Q�aoEQ�{	w!�A�N_,z�7y=�z	��2k�jLt�;��Κ������ں�$c㡧�$j6�s/T���te�/�-Ė�~��u�3�2�'‘�䥏@�Z���y�?9��r�@��x�'@@��q.�^�kt���Ψh;�p_� ?~���������n}��R��oQ�/��M�Sm�8��rd����N�RF�@�{�+O6���P5$J��3U�rE�F�:�U7��U�v�K��Ӛ��0SB�ЂIۢ߹�k�C
ȓ5�-�mKedR������]���[BT,�dIA	�ڤ��>��4�Ԅ`\&���A-�ܟu��o�ۑ!��I}�u�
-���V]w�[/��������6C�E?3L�x*ߴ��u-�L�����Hמrܝ�@�
-��ef��JNsc��Q���a�Xt�T�;��-r��hɍ��j	����50ʪ5-3H�?�x(�X��3ߝ�Žz��*h��hc�^<�]ΖN*]ң�AQO�W5x˖��{�*���(z�_�1���g]�/hQ�=n��3	�x%��56%���jzs�D��d=&]\�=N�x�Y."cf�<���U�!�x
-��#��k�H��nU��blMdD'4h�w����~�9d��N����g�Q��2[�;��]f�M;��	g:V������(��l�-�����K�������z�͓���!诮�r8�F���?����ь�� P���|dv�u*�bl���hq�����Y&r���?�H��k�՝ia;A��U�"x�x�4�().�OG�5��#
-��!ha��}Vi�7Oj�O��v�l��Z��+Hwo�/і�.���;��KjG�zQp����3�)�X=���8NDz�"ǡ�Ţ�V�[K�[|"8Mȋww����Ȁ�U��'�@��P£B1�Ԡ�ݏ?���������}?a��I&�1X��gO��a�jRCD�3�l���<m+jr�F�Z�F����f|gmXK�$����l��/$H'�7�[�c|7���0"�
-��qw�k� ����8����Z%�j,����AH4'-wVX�C]!e0�#���x,��p�
���!�:g��I�ٕ������T�/��@�۟+�(�UJ�yd��j2������%u�Ѝ�4j�����_w�&[���o����p�D�UG/8x�Z̐z�Lķܐ��}���(�Y�0��A��
D��m�a��TYN%;�����q|�Ԗ��������c5W���
-���s 7]DN kg�����ʤ�|�G%�3��å��
o�����]h�aCЕi��I����˶"�^�}�:���{�T���	Z.�%o�E4���֠
-w�I)��Q�~If(n�B��"&}��J1�rΎk e�R	7C���jw��$ȭ�
�p�մ��.)r��"�e��V̥����$%�{:�ű:�k��{��
-��{�u�/HgrB��(u?î�Oū��d��-�6� �1JlQ>9�\1Ǣ�Ƣ���`�C�zG�$�HR�>��6�d��
-9\��R>���כ��ݓij��RD5v�n�ܮ\���կ��s�i�;EE%�\!l�0���܊��;�)�q��S�?�Z+��
�A�}&��AC5�oF
|���"5���ׅ�${f��t��^������FP����8�\* 	���@�j(���;v^��h�$��}��װ���ů_\⣄s��,6ov7�JY�Z�
��ڇd�ܷ4Fuq�Tl�oE�l&w�W�h���%�ڣ�I�}
-H�͓^D'�
-Vx�3�3~�\X��{aK����Mʐ��&K����J"����R|�P��%��זЎt�Bq�1r�J����a���Q��
�1�r�|Xq��{�'K�
-#��_e�K���=��E�������W�l�e����&�Ⰶ�c��n%"sn�1���F���:���C��jx�ɑ>�w�l�'�k~[��v�6���u�~�b�a��K�N�t��\�vGb�Qo��ջ#XB�SB�/5�^7��5~��}����LÖZJ�H.�.ʥ&	t�=%xR�+�!�ɳ΅�#����LL%H����H.XVV��ػ�r�������E���C�/,���XQ�l���ז��	A�as�P�bX�XC���A�7�.L湝�D�(tW�"�j���Kcԃ�wPLP.���5EU#��S$-֧oa�kI
-�Íz�8��eo�T�s��=�x�w�g�Y\�ƞ�F�1.8���&D�~�m�]����Zr�ӣ��޼�ɋc!��]f&�<;=u���)�gh�M���|�0Ir�JF��3sYѮ|�6�E�EL%�,x;���������]
-?��g�2�� �+m\T�Vr71gGR���?��k��U?w��0-�(����>>R�W��[�wV�7.,�a��4�44��MeY���5��r���g�7�c�Z�����l��3v1ϭk�/U�Jǒ<L��7��Ww;��GZ챐��N�`��2{W5ʼH
-[`�J,ٹԴNZ��n#}8��J���ZXy��y���B1R�J���	���E[Q~�Ԋ�':Fdܮ����?���_R��'[:^��='Um)“��<����
'��mq���h��}��y$*|�Nheab��0��,}��a��:����<J$���Uk���]�n�H+�LBOb���$rmRt���(�d���m\��f$K����R�/�Q�S��{O�u��Ԛ?�U��RC'S�y�~ޓ.!��g���S%��'C�?��|��kdS�Oqy��5o5�e�{���`����g������ĸ�����WĿ������E��޻�]'��m&��=��0�HA=0�B���l��4��
�m�;l5
-�t�Ν�4���;m�g�:ns~T�Yh��#O�U��̅W; �%{���ng��8#�a�32�Y���b�Ū��zt�gY�Ŏ w�4�^���տɸl�,v���
�d�
^�Z�p�Xd��?�r�-���O_�(��۫��F��.��
�`�:!��y}d���oL8�Ռ����n��r��
-�)H�=d����+��ܰU�5+I��c��I�`�N�-��U��K�t���mnf|F��~o���~˷��Σ�
�M!���������%�a��k�Ii�2XMijb��x��Oi��,�H��i�a��>���r�,�Dî&N��j#���Q{61^��Wq�3��=����/a�]<W����0�� mn|%�������{�E&�V�N��D�%G�;�O��{3l��.�x�JH �'m^4d���­"����hY�������v���w'"Ç���t���I#1�k;ϪV�
-���H�3a���z��W��j�i�nK�a���^<�A~��<gr9�i��Iy�U�����	�/M_�q1�
-?����ͻ���9���]#� ���^iX~�2vՙNk3$ߛ5��ׁ�0�J)\�����Gd|�� jxC~k5bƧ�l
-�"�9
t��@�]��wX�{�w�S�ϱ�?�TIVJ�쓊w���T�ah
-�z}�LDU�^�n�Zd'!�7���F�~���3�5g��h����@���6��r>s����;'������H�����6�PW�;FvEWKecA�S��J?�f�6�ֶ`�j��tr��y�%�zX
-�,y���P�Vɗ4$�J0� P|}G�6gr�f�r\#~=6��(�^1�AnoW�D���{����ց�d���Ga�'l5�Ƿ�]��hΣ�A5[Ӈ�&]�h��B�4�ux�>����3Hyi�g�ܭ1�p�a�"+A�Pv�{%�U��(��ej�4؆�m-qH�0lC?w�?B1��EI��l,�h5��y��9��83ťm�I�d�6��\���b+�,��O߮�0A|7���ӊ眛�T�(�
-���������r�^�f�J������tK<�^����+�Z3��z��m�)�r��iJ~����ɻ�
-C-�%Ɔ��V+�Hߝ	�a�p��A*�.⍯/����>���8�Vr�"U���$�`&�����|���	Rt��Q��N����Ɩ����h���L�s�&-�WV�R���]�x)�rSA��oX$� Y�x��
�rj�O�޴�u�<u��+�
-*��yC��Ħd4!Tt�].�������Vl�R*˳�&�oY(�ߏ�o��X0��3b`��$UC���.@���~bY%B����H������{dǑh�`q#��m�;۫��7�c֐{-y���!�_���e6D��.��˭��*���}N�-����Å�f�K�^D��]濞��?<��J:�(���d�/��ߓ�����lOS��	�<O����i��ѳ,\������$�5��2�����7�
-��;�ގ���-"���WN?Ң(X�
�=C+j���h~Ts���u`N���v�\i���ۺoiH���	�g�	�;yp�y��,ݯ0�P��ӣtW�=+����ht�A�M��xW�B�ʥ>h��ݽ����(
-��ִ	|��kb�3�g@Q��wT��������r,UO8�x�����c#8djv���ˡ�%�Y"���K�2E0�E%�O�ABb����M%/| ��}��x��V�)^i�ч.�؄B��/z? ��l&��Uiݷ�\��sQT��<�@��9 
-	{��;��ƀS��Α[#QBƳ�1q>�^���62h
-C)�)�m��GZcX��$��%u_�PՏ_����9[������1w�N��J�B�[�C�7%����t��X�	�)k�^S�V�T+D�ֹɔ��c"�*K=�v���sGm�w�L�jE����9�:�
00
�_��i��e�A����sw��a~�r��\F��V�<�K?�z_.-M��_�%�ˉ��+�b����p����7T�lU�j�ӑ�n�X
(��ʤ^����U���-�}x���?:�Ñ�$������}u8�'�7r�j��۽���h��4?f�LTB�� ��I*\7��.���"�p�b�{s$�ţN�^3��LJ �_:6v�����&ӳ��9�J�A0�*�?�:�������<���Ձ��M)�)�o� 'M70�gq�,�����xB1�Qp��[�Ŗ€�Z������E,̵]��h{I�|���&��y�e����
�q/Z;��]4��ӟ2������v����e6
-JN�・t�gL��N���ĉ�����p���{6�f��Q��FYv-^�"�u[?w(���n��QD.�<�|ա��k�
-��	7K��s�M�p���o�7��l+Zб�i���6'0�x��f��CǾ�WZߖx�NpUA� ԙ�7"�}���lqg�t9K�tg $�t���;���,Gx��ɞ,]��%UU4Ct�w�'V+���9�Hy��1P
--��2�gc���u~t�2Ł&?k8wo!��]��o!a�y���Hx��[����K[�����:2}���~��@°\����>�N�A䈃mZ�W�
�1�����H�t��e����C�]9��Pk|HG�2�)��c�#��0c��[]�6�I�a'e]�%��I}��r�6�A��(}���[t�'
-�H�Ȝ�����s'
��l��q�[w�?�������4�T�:w4�h5���;(�8�c��o��Fkc_��(�n�D��ʦ���^�d����|�i���1p�-��[�U\Ę�Nvۭ�duT]i��Q�K�$�E���^�^ځ�i���w���0�&,�Ԏ<�R+/���	2ˆ���Y%q:]L�9�tS�z�i�Ϙ�k)p��ޱ�L/�u\\E|�
,��L$pI��ɈN�~�?�%bԜ�i�[_O$12k�k@O��y/)ep����C.��x����Cܯ߁`Y��:����J
-�Ia$C�pN2�{�
����CQ��>�x��u��tn�UGqz3������?�yD���-�~�+�������-�ٖ*zƏ#���9%�K�O��������Ab�5����v��+ؗb��ߣ��9z3���
-��w���K�zaH<�I�.2`
-#����:�RH��2,�96�#-�Q����y��ﹿ.��� U4�U�k�H&��pg�nO��Ԝ�;hs����[�T�W��Т��+�XJ �U˗W��6�IW�ln;�l\�R�A���D�t��H�>Ӱ̪��Wk�%����p�qwƩ�	�:��/n�Dz	O#t���%�2��~��[rOo��[ʅz^�><��T{u|Z27R�_����d���msC���u.m�uL�,�>�YDedb"�A�D
D�����YFة���*8e���2�C����j��M�N��<u�l�~�[����'��Fw�=�cg]�F${Y��8��7�@�3�n��7��s?�`�h~z�soT�+x��qH읥KO�#;�)�Ȗ`Q- ��O�2�^9��'�)��p�
-A�ܰ(�ō_��_�؊����9g����	��&=EG���,)��<�/��%m^�9;c[��ŵ΅���$Ӷ�����n�
-$'��<�e�M�&����R%Pe}9�D+]<]�\j:�1m��5��Z;�˲�������P<5}w��[�Gde�`�(�#���<�R|唗S��'�1*%%��B�ڋ�{�\���uv�:�T�>}z6]4�m	�IqT��<��TYlu�&�/d[���~��٣n�qJ2G=����֠e,T[\��7s��9�2���t�:��K���Kڀ��եG�#̏��
-H��G>���g��X�s��76	�2��G�J�qM�V�
dS+��%�2nj�(�ӕz���k�������Tsp�Q	��*��-��B��澉L���p W$ֱ�)�'&�Rmʊ5�����M��+���P�z�?�ʊr�[�e�+oܦn4�N�"_nz}	u��3C��0Ь�wD���=M�8��&Uڐ��<���E��#��c���l�I�ם�T��&߶+)E�њ��x�,̙��$�D�}*��`Z$��18��Q���4���D�x��9"ƒ��6���_!{�
r.�hJ�NSF?��>�
<�I.���GQ��Tq(,�bh�$׆��V����YF��x�G%O��sk #�����p��v��-dʮ6t�K��z��Î[�x��ޯ��Yj(i�~Nw���~ �Ѻ�8���$�#+~��_GO���*�\�Kj��Y`ԠFs���;����Ik0���Sϊ��ԯ�E�iWV 9[�~�'��Y��w�ˀzs��{�y*��|��لX�m�S$�`�q���Ի�,սa�U���F+�q���r�8~n��2��f&�&_X��ڶ���7!�i����X`�1s:�y��UZ"
-��SahS����b�|b.�_�e���}��ƦL���<�A@�_I'���F�.�V�tV����c.pY���w�#V8�W8�#�n��
XI�-(�(ns�-��6�I�!�[(K��ͪ~�xS�D5#>��x�^[X�`~�h�ʒ�jB�A�#��Q�Ð��}3�Rr\�vYa]���Nİ�)�>���U�uYfh��t�8^uh���������2#���u@?v���28�>	/V%כ&d�c�w����Ռ:���kd�{��a�Y��35���N��4`RGZ�?�[7��Q5��="{��ߺC$����`�ň�t�c'�?<��^��+sm'I�
-�L
-��+G�u��D��ٛ|���ߛ�ή���Y�5		�
-%x�d\�]"�rJ���OPvC'Ʉ#�3ޱ�����t��`u���	'�''4�>�4���[�/6D�lwO��`�.���]�^��t�'����8���h�ڛ�ObL�N�J������		1SH_+�J���?�1��	��}
-�Fvd�'��$ʂ	
-�`(�l����C�v�N��ʡ�z�j��
-O���$�Y5WO���f�a���<�0�ė_bMV5�zX�8�mt��`�΅�؅���޺>Nu������7���F�8�E�L�=�K�g6�dv��cIQ+;�&�3 �-�qc�@MŮ�
-Pm�~��+�L�zh>~r#�u���Hzrai��[�һ����tD���$��	X�&V���,FAD�
��ѡ�4ݳJ��E2�<�J!�K��2<(T-�L��[���VMzzj��]|q��y1�k� �D���dZ/��5���d��/t�w����O9UԷ#;�h��^�@�0�y��H�y2=��lat���.?�4q~_��hV`���_���Bi��
���
-�i�=w���P��&�&C&�)|�?:"���&m9��uY�&���η#x��Z������~"���h��U'�����%v��g͟�E�H<V�&�-�p���Eޚ��!Ջ��ͳ�$0
�$}�c��-�So[0�^�E.��ܞ1r�s#���,\�Um�\ �I�ڣ/6�����r�H����pg���9}:���!s-TN~{��3x�D��ho��?�j�T��{o���~4�SQgJ�:�,��6�1a>�>j2
-:��p���a��Ϸ(a@J��'��r+�j2B���)�fJ�|�L�@9�/H¿j��4���X�}*�?*�f��܃M�x;�::
-,��L5	
�y#�S���'F�B�%>�#V�׽&`~@�}��׌]�8�qY��Kxb=��S�.FTܔ����q�"x����PΎF~�6­r�^�Hэ�jj|������W�J�7R�P]:���V�n��۟�����Q��DF��X��5�H�L���~��JF
-��g��`���vu-��g }���r.�uZ��ӧ��v)H�o�EG�Sh�_w��v�:�v
-7���5@���+VbV&�	� �W�H����#=F!�7��$���G�Rbvw�s��ۏ\?���,���,�2�+00�0�HQ`d��� L����sjv��s�}��O��`�h�ˠ=o
@,*
�x=�.,��}*EJ��8������_�'��͔�<9s��!���}�i�]���˭Z��g���R�Z<�$�V�m����-ª#����4�COw�]1m����V�2���za�[②\B�	�
�$Y݌�'�)�|s��@\W�HT,��Є�hm�Ҏ^����juc�|<=��F&���'t�b���;��T@c�=�,��IY���̖s
-�0�yI��+����AEHe#?/�kv��9	��o�h�����#$��W�ÌL�ȵ����U!.�[ͶX��µ᧧���t��K�
-�����AZ��@pw�M���苂�۹�ٳ��v�\��nŐ2�f��ݪ�j<� �ip�iLI6,C,å��R��hu��-��u
-
r�ZشX�~�t�����o ��
-��̒ػ���'���
-x��t�ܺ��n���T��]vvU��O�'��c,�r
-�
-VFK�*���|=h&ư%�nI�ZY���?���j�0�s�m����� �Q3���Q�B��+u�M�Mz�yJ�dʊ��f�J�u���~\��D����U0����X�����S8A\�(�.�x�7�ֆ,��\kkm]Ш�gƑC s��t3�!+m��5�c;����ZU���x�6��>O������'��
-�]�Խ(�V�a
��8Ǽ������l뻎d���PZU>ɋ�-W蕘*"�*�wC�H�}-��u�/���q��K��Ϧ�,�䶟�{�TD���2^�,e�Kߡ~�Ӓкj����3N����l-������˧���5�ieË�i!Rb��6����;��| �bi
-!�.��6��F�#�
-2,?T��W
-�9e\���q��+H���"�7u�w|����ɖ<A(z�;�d�s�6$~_u��3*ތ�"�����_ΜW_dž�j��:��wн�Q�{�C]Z���+��X�=�$��p�³����8�w��i]��[I��qN��s@'�x��A
-5|c�8�R�-rz0a{�4�aY���n����O�	%f�nj f�u�����5
-�}oے>�6H�̉&F��x������SD��R�6`X�ٹ�
-�&
ݿ��+�]_B	�`��������N�N3���cRװf��{^-�x��aF�k
-��T�J��b�e4[���P�Ș9�WH��Z��+�
-Ҩ�-F���S2�ȭ��p
"{i����T�+&—�j��>۲hz�m�\Ę��_�J�N��1:[�,m
-�=�U���q�Y���[����@���g!	��S��kxg?�%(���JA	ϓ��9|+s);�V��\�������m��OA8�ZӁH^�b���{+��`����\�.%б~����ʰ��:�<��a�}�Sq2��b�b�d�Wz����EO�2,�_�N�5�}��d�KE?���l���۹3�_v�k���5`�e�� �J���yΝ���A�-��T��i�?h�{�껢�O�J��
-�r:Ϡ��i���-h=��P0EoA�b��L�w
���C`�F��"��,�%4�8d�,��{齿��$��[f�g6𛨨����{ڿ����c��j�9�I,��Jv�V�t����ȷI��3B�/�n9��%0���5,B�$d�gnzPo�v����oz�}U����^��z.i��ԛ<Wݻ�|N����G&\�����q��2�s�C���©^���+���a�eކ�x�ĺ
-�-��5��{��6�5�X��Fg�
-ՙ=nZ� �+��+B��C��J�;����›|�0�4Җ�B!#O�5*&k|4��P]<{
-���_,��ޣzX�$���ե�L"��1�/M(�Lir����ЬP��9FO������𶀬}��(�p��mJ-lC
-�W��1?��2w�c܆�_i1*C�F�-��=�[�9�C��W^~�Kdk-.�.���[诳x���Ɣ�d��;6K!ke�	:M�p�?�"����`�ּ6_A0!�?X?�K����*����y����t��q�F�7Bv�$[���Yij�X���dr͒?�6(��w#Z��p�΍te=lV�֭��
�3�Q��S�^���#dK�%�c��*�D���w�lh[�b���@���V
:*&�ys3*��[O��1���n�멶�l��w��4�or������]Y,?�׉s}fC�ژ�Ah�)�����e`s�NǶ�x	��Z���k�ŭE(���3�cK{���~�[t�oҖz���]v��ش�j^�*�.��$�� .A�<��jl�r��&�I�����1e����G����Jãq�v�j�1��ɮ�@q���cD���Q���$��jA��y
��`w,����S{�_]��Ξ95#�$-`�G�v��N
-�jٗ�(a���U�
�!�f�=�,���ut������P�c�7�0ݧ�ě'w
-�_s�~[�	3��V�I:|UNf����>f'��ny�{+)`ј�f�\��c=Q��xt�*���;��.��4i_��c=�(��"=�Èk25E�땙 ���^��,1/
-p���5�O<�@v"�y�EZn��Կ�����/T�&���!T7���1�a򳕪�0���0�w��_\ZM3�~��'�z@U��x���y�HH��
-�Uv�����u�aajɶJ�!�W}��*�n�\��ofIo���3�?���l>
-AP�=�ץ��ˏ"�����Em
-,
-�{N7�
-�������E0�D_���-� ��MIwVp��������R�#�^���^&ed�p¹�����n�3}�tj&�\��X c@"�İ8��
-��3���ɓ!�H/dμp��:��j}�*J!!N�Φ�?��T9���6=xt���\���[�ɬ�:
��!�����S�	\>k��}��R�B��aB;^�"V;X!�zhc����g�d{s��?�u؅��� �����IHɍ�4c;����?�K�ǎ�Ѱ�,�8x|�L�=��^���
-%e�2�>Z�Lq�d�]^1}������M�r����Ri��eQFnW���
-��r;�w>U˴�p��+vXn�
-�6L���
o�6�4RU�� G"���Di�v���da�tK������٦�p/�����j��w��7.�i�[i������
-�"/7	-,�Mx�o�x�s��*rLą-���N3���3;�o�M�Mbs$|T�r��%�E�$�p���V�|]
-C���&F�#�g�[��r����\|�9�B�]���9��5jA��	Р}6u�׈+��͇�	Sd�"K����y����y���c��Pp �h
-�
,
����j�6,�9�mI"��U�
{<٨�8��b�v�7O��>
-�1pt2o[��(�4�&��ut夑�	�ϨH�<+o>jH��)0�d��>��a�3p�/Q����v�����˭
-R�@�D����N��>HJ։$��ԥp�U�i{��$�h�i��{)���
-��j�,<�"�V��9�`!ֳ�De�
-�a%�3̏��;��k�xII
-���H��J���`Z{�m��FԶ�!��@�O�a�R�����d��@�[�h=�T}b�����s�
-���HbZ��<�:�G�}��^���J�>:�[�3|Hze�����6}\����b%�3�pݏ F�g0���-���t�P]j��pq�нɤN��,���]�Z)C��(m'"��J
vNeϤ>��%��9n�o*0�	�(A�au�
-8N/�VA�[�؋;]˪+o�#�/�!ƣ�m�':�9�\�d�
�k�h8'6�!�B݁<��a�0�_El��X�/������V9�9�Fm�C�g�Wn�bT���¼>��x�@����
-�c��8@S6�>}�/�����p�C��=*}E�w�#���h ܩ����k��S���m3�N�LJ�ږ���5�ňS���eu_\�V�����&�^H/�.@>ô��yNn0�K5�Q`2�)��-�����!:�^��>5u������	����ȶ$-�ʺ�MW����PCQ L��X��m��5l/:R��(��O��U�K��宴|A78mB�eUg>�s7wlk��M��A}d�մ�������尀��S��!��J�ѫ�
O�]r5-q!��Y���-�`��'�/8:�q�Q)
-�v�J�z
-�-� �����ӟ��	SN"�\m���J�u��� �����Z�XLJe��3I6ل"��?)xlϺ��n�	}���԰� o�����|�t���
-��7�c�19�߿(�
-f��K}7��a`E�H�~����<�x���5�v�0D7���/xә�c�`�^�Pd����sc�|;�R&;놉f
��S�����vW']���1 ��L7�i�t�����˪�!��˄��5m3h.H�ϕz2
-�ʭ�<	�֓�4e<-t���+�v��-e$�4Z(�����uU��>Γ�%�G�M\pV�M�3a1:W%�+�+f�)�F
-���zvīV��dlk��k�#8���+4�#�V,���J�\��.�a����
-ԋ�I0-�<Q=�'D�=���!@�1�+m^�;��Y9H� ����(��F��5���+Q�S����׈q�=�r�o{2�!ʡ�O�"x=�Vw�5���}oB��a�B�Э�n����m�� ����<�)�:V���{��ctp�j��]Y���"�Ln��,+IvLg5�&L�!F�m�=��buQ'��{G/#���|�S�:c�B:�E*Se�8�W^��/�}-�v
-�:K5}��]F
-�UKgR#ʠ1�Ju]�ˁ
m��d�47&���y�iCw�2C[Ǫ۝���R���^4t�60�S-���y�3��c�Z�^w�r�BTI��t���d�+;pt��s�$b=�sS�'�k��6��Vة���cw�/#S�Ϥ�2���a�s��1�{���'�\�F�t�$�/W�]��T��uG�y�N�
-�޻;AV�8�-��m���*ȏoρ�UA:�v�)uǛ�'�\�ax)����u��|���M���M=�~�o�dҼ�h�w?��!�Z��_��-�_��ͪ�}�h��z�i������������h��=��ޑr9�k� }��f$+� !t��ʸ�����.Q���^�@�9?����3b7E |p���bd�	[�H�	��=O$�*���(6��:l��δB��!�?�;kғ�<�:�8F�O��J�]!��C�j���t���Y8��ҽ�a�x��&��v(o&z{����TEk��^�
*⽯c)a��@�ȑ���1>5oH�]u\/�i,&YRXu~t(n`(��u��T�����;@���4�R�=:e�FaVL{�?Ԥ��c����@u	�q#�����،�&]u>ZW�IT��A��z!7Ll(����G+otg��*�K�����O�qR���-!��x�?�(����x�uk|dо����t���@����bW��֓�D0/{�8�?�<�����,��-��"�~KM�-Q���R<�`,�� �PID��\*��74)���t��K�k�;J-O�8kj��-���O�v�D9F��ۃ��/Z��W�J\��8��woqr�$2����!���i��z0��v
-H~�×��7t ҄�b�Ng�!H��Ղ4il�&|��c8!��e+�#Hv{n����i��X�=
-Ij�s[��9ט��,���4�z���IP9?�W5�ʆS���W�s��vԴĖql����;c���l�JΝh;�O��F�[���b����|a���~ث�m���*}]mj~.�/�����`y� �n���' ���fCZ��ꞖJ{A�E�	x��K���6|v�5[Lv�A[GvD1nyv�6�����v2����Eͷ7G��W��XB4TlUz��?��AԀ/�O��N&���:Tß i���gw�(��n�����E���R�u =!
-��^�����H�:�'
-��S¨��
-��u9!��a�����47��|O*�6i�!��U��,��q&����!���a'JN}�t����	�ٮ*b���Y�'jy<1m$�h%�ΐ��oXS&�^�&WN��4\a���{G8e6��`QL)z����,�Y?]�	svʤ:�6����ぃ�53@;��/c!J�b�<Z�<��n)+���0���0�-��o��������\��sL�t�6zq�����;��˴�,7u6I�����L�����T��(a��/��!��7���Ў�����
�N�H�����&zVț�6�(�w�����O֛>��4��5�ڍAgo��O�Z�o�ӽ`�
-�$
-Xܳ�;=�;!�k#��N�M�7����S�C�+�n����D
�;Km��0��R9�>�����
-�}PD����1�&��D:_#�)�ST�3�Bo(�r�O*���m�<�־��8(�W7h�SD���r���-��v-������s�XQ_�R	-�4�6��|�=s�GП+�B�m�մ��(i�7�φ��J���Ÿ}P��P�W�Q�5d�u��(hS�z�{
-��lb*�BB����J^+�QA#G�tZ�xJazMh�l�*t�/���W��T�5��ɺM��TV@�6��VFͣ����ѵ��!!��Ӛ�T�㊶B�j�jO���dQQlL*���������tg�b�I�I��,|��s樂Ǯ�QN���L�{��VR�Wl�^����~Q�w��B��U�f�%�w����=��q�h
x�7��Z�e,�n�
���M��хbͭ7b����@�I;l�-�_��l�Y��(S�Sqsɂ<�"���OWo��״�V�NO��#�a�.����������^ ��t���?��3,�!�V���yT����ߘJ������Įsq��wFϘ������t	�m&���{�8��qI������c�X=��Rտ���u���|[�^�p���2i�Oƻ���p6��";du�X�2���{�ҢL��]T�r�{����zƛ��ᆷ��cvWv�W~�m���Y��j{=ʹ6�����`���XYk��$E��=����-�h����x֝ ��� [�G1���*d_���@��Ν����pA��
+import { dialogBoxBase, graphingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const unselectedToolOption = ['Circle', 'Parabola', 'Sine', 'Polygon'];
+const selectedToolOption = ['Point', 'Line', 'Label', 'Ray', 'Segment', 'Vector'];
+const controlOptions = ['Move', 'Undo', 'Redo', 'Reset'];
+const patternOptions = ['Grid', 'Lines', 'Dots', 'Circular', 'Quadrant'];
+const patternOptionsAltText = ['Grid pattern of evenly spaced horizontal and vertical lines', 'Line pattern of evenly spaced horizontal lines', 'Dot pattern of evenly spaced horizontal and vertical dots', 'Circular pattern of evenly spaced concentric circles', 'Quadrant pattern of evenly spaced horizontal and vertical lines'];
+const alignmentOptions = ['Top left', 'Center', 'Top right'];
+const toolOptions = [...selectedToolOption, ...unselectedToolOption];
+const css = Cypress.env('css');
+
+describe('Graphing: Tools and controls - Edit tab and preview tab tool options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    //TODO: Need to update once https://redmine.zeuslearning.com/issues/564073 is resolved
+    describe('Tools and controls - Edit tab content and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Tools\' label should be displayed with all the tools', () => {
+            utilities.verifyInnerText(graphingPage.toolsLabel(), 'Tools');
+            utilities.verifyElementVisibilityState(graphingPage.toolsLabel(), 'visible');
+        });
+
+        it(`The ${selectedToolOption} should be in selected state with tick icons and all the options should be in unselected state`, () => {
+            selectedToolOption.forEach((toolOption, index) => {
+                utilities.verifyElementVisibilityState(graphingPage.toolOptions(`${toolOption} selected`), 'visible');
+                utilities.verifyInnerText(utilities.getNthElement(graphingPage.toolOptionsLabel(), index), toolOption);
+                utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.toolOptionsTickIcon(), index), 'visible');
+            });
+            unselectedToolOption.forEach((toolOption, index) => {
+                utilities.verifyElementVisibilityState(graphingPage.toolOptions(`${toolOption} not-selected`), 'visible');
+                utilities.verifyInnerText(utilities.getNthElement(graphingPage.toolOptionsLabel(), index + 6), toolOption);
+                utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.toolOptionsTickIcon(), index + 6), 'hidden');
+            });
+        });
+
+        it('\'Controls\' label should be displayed with all the control options', () => {
+            utilities.verifyInnerText(graphingPage.controlsLabel(), 'Controls');
+            utilities.verifyElementVisibilityState(graphingPage.controlsLabel(), 'visible');
+        });
+
+        it('All the control options should be displayed in selected state', () => {
+            let controlOptions = ['Move', 'Undo/Redo', 'Reset'];
+            controlOptions.forEach((controlOption, index) => {
+                utilities.verifyElementVisibilityState(graphingPage.controlOptions(`${controlOption} selected`), 'visible');
+                utilities.verifyInnerText(utilities.getNthElement(graphingPage.controlsOptionsLabel(), index), controlOption);
+                utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.controlsTickIcon(), index), 'visible');
+            });
+        });
+
+        graphingPage.tests.verifyDefaultToolDropdown(toolOptions);
+
+        it(`The ${selectedToolOption} options should be displayed in the \'Specify correct answer\' section and ${toolOptions} should be displayed in the background graph section`, () => {
+            selectedToolOption.forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionSpecifyCorrectAnswer(`${toolOption}`), 'visible');
+            });
+            utilities.verifyElementCount(graphingPage.graphToolOptionSpecifyCorrectAnswer(), 6);
+            toolOptions.forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionEditTab(`${toolOption}`), 'visible');
+            });
+            utilities.verifyElementCount(graphingPage.graphToolOptionEditTab(), 10);
+        });
+
+        it('By default, the \'Point\' option should be in selected state in the  \'Specify correct answer\' section and background graph section', () => {
+            graphingPage.steps.verifyToolOptionSelectedEditTab(toolOptions[0]);
+            graphingPage.steps.verifyToolOptionNotSelectedEditTab(toolOptions.slice(1, toolOptions.length));
+            graphingPage.steps.verifyToolOptionSelectedSpecifyCorrectAnswerSection(toolOptions[0]);
+            graphingPage.steps.verifyToolOptionNotSelectedSpecifyCorrectAnswerSection(toolOptions.slice(1, 6));
+        });
+
+        it('When the user de-selects an selected option it should be removed from the \'Specify correct answer\' section, \'Default tool\' but all the options should be displayed in the background graph section', () => {
+            graphingPage.steps.deselectToolOptions(['Point']);
+            selectedToolOption.slice(1, selectedToolOption.length).forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionSpecifyCorrectAnswer(`${toolOption}`), 'visible');
+            });
+            graphingPage.steps.verifyToolOptionSelectedSpecifyCorrectAnswerSection(toolOptions[1]);
+            toolOptions.forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionEditTab(`${toolOption}`), 'visible');
+            });
+            graphingPage.steps.verifyToolOptionSelectedEditTab(toolOptions[0]);
+            graphingPage.steps.expandDefaultToolDropdown();
+            selectedToolOption.slice(1, selectedToolOption.length).forEach((dropdownOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.defaultToolDropdownOptions(dropdownOption), 'exist');
+            });
+            graphingPage.steps.selectOptionFromDefaultToolDropdown('Line');
+        });
+
+        it('When user selects any of the default unselected options it should be added to the \'Specify correct answer\' section, \'Default tool\' and all the options should be displayed in the background graph section', () => {
+            graphingPage.steps.selectToolOptions(['Circle']);
+            toolOptions.slice(1, 6).forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionSpecifyCorrectAnswer(`${toolOption}`), 'visible');
+            });
+            toolOptions.forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionEditTab(`${toolOption}`), 'visible');
+            });
+            graphingPage.steps.expandDefaultToolDropdown();
+            toolOptions.slice(1, 6).forEach((dropdownOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.defaultToolDropdownOptions(dropdownOption), 'exist');
+            });
+            graphingPage.steps.selectOptionFromDefaultToolDropdown('Line');
+        });
+
+        //Controls
+        it('All the controls should be displayed in the \'Specify correct answer\' section and background graph section', () => {
+            controlOptions.forEach((controlOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionSpecifyCorrectAnswer(controlOption), 'visible');
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionEditTab(controlOption), 'visible');
+            });
+        });
+
+        it('When the user de-selects any control it should be removed from the \'Specify correct answer\' section and all controls should be displayed in the background graph section', () => {
+            graphingPage.steps.deselectControl('Move');
+            controlOptions.slice(1, controlOptions.length).forEach((controlOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionSpecifyCorrectAnswer(controlOption), 'visible');
+            });
+            controlOptions.forEach((controlOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionEditTab(controlOption), 'visible');
+            });
+        });
+
+        it('When the user selects a un-selected option it should be displayed again in the \'Specify correct answer\' section and all controls should be displayed in the background graph section', () => {
+            graphingPage.steps.selectControl('Move');
+            controlOptions.forEach((controlOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionSpecifyCorrectAnswer(controlOption), 'visible');
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionEditTab(controlOption), 'visible');
+            });
+        });
+
+        //Default tool
+        it('When the user selects another tool as the default tool it should be displayed as selected and the \'Point\' tool should be displayed unselected in the \'Specify correct answer\' section and background graph section', () => {
+            graphingPage.steps.expandDefaultToolDropdown();
+            graphingPage.steps.selectOptionFromDefaultToolDropdown('Circle');
+            graphingPage.steps.verifyToolOptionSelectedSpecifyCorrectAnswerSection('Circle');
+            graphingPage.steps.verifyToolOptionNotSelectedSpecifyCorrectAnswerSection(['Line']);
+            graphingPage.steps.verifyToolOptionSelectedEditTab('Circle');
+            graphingPage.steps.verifyToolOptionNotSelectedEditTab(['Point']);
+        });
+
+        it('CSS of tools and controls', { tags: 'css' }, () => {
+            utilities.verifyCSS(graphingPage.toolOptions('Point').find('svg circle'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(graphingPage.toolOptions('Point'), {
+                'background-color': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(graphingPage.toolOptions('Line').find('[data-name*="Path"]').eq(1), {
+                'fill': css.color.primaryBtn
+            });
+            utilities.verifyCSS(graphingPage.toolOptions('Line'), {
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(graphingPage.toolOptionsTickIcon().eq(1).find('[data-name="Icon feather-check"]'), {
+                'color': css.color.activeButtons,
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of tools and controls', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(graphingPage.toolOptions().parents('[class*="CustomizedOptionWrapper"]'))
+        });
+    });
+
+    describe('Tools and controls - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        it(`The ${selectedToolOption} options should be displayed in the preview tab`, () => {
+            graphingPage.steps.switchToPreviewTab();
+            selectedToolOption.forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionPreviewTab(`${toolOption}`), 'visible');
+            });
+            utilities.verifyElementCount(graphingPage.graphToolOptionPreviewTab(), 6);
+        });
+
+        it('By default, the \'Point\' option should be in selected state in the preview tab tool options', () => {
+            graphingPage.steps.verifyToolOptionSelectedPreviewTab(selectedToolOption[0]);
+            graphingPage.steps.verifyToolOptionNotSelectedPreviewTab(selectedToolOption.slice(1, selectedToolOption.length));
+            utilities.verifyElementCount(graphingPage.graphToolOptionPreviewTab(), 6)
+        });
+
+        it('When the user de-selects an selected option it should be removed from the preview tab tool options', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.deselectToolOptions(['Point']);
+            graphingPage.steps.switchToPreviewTab();
+            selectedToolOption.slice(1, selectedToolOption.length).forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionPreviewTab(`${toolOption}`), 'visible');
+            });
+            graphingPage.steps.verifyToolOptionSelectedPreviewTab(toolOptions[1]);
+        });
+
+        it('When user selects any of the default unselected options it should be added to the preview tab tool options', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.selectToolOptions(['Circle']);
+            graphingPage.steps.switchToPreviewTab();
+            toolOptions.slice(1, 6).forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionPreviewTab(`${toolOption}`), 'visible');
+            });
+        });
+
+        //Controls
+        it('All the controls should be displayed in the preview tab tool options', () => {
+            controlOptions.forEach((controlOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionPreviewTab(controlOption), 'visible');
+            });
+        });
+
+        it('When the user de-selects any control it should be removed from the preview tab tool options', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.deselectControl('Move');
+            graphingPage.steps.switchToPreviewTab();
+            controlOptions.slice(1, controlOptions.length).forEach((controlOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionPreviewTab(controlOption), 'visible');
+            });
+        });
+
+        it('When the user selects a un-selected option it should be displayed again in the preview tab tool options', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.selectControl('Move');
+            graphingPage.steps.switchToPreviewTab();
+            controlOptions.forEach((controlOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionPreviewTab(controlOption), 'visible');
+            });
+        });
+
+        //Default tool
+        it('When the user selects another tool as the default tool it should be displayed as selected and the \'Point\' tool should be displayed unselected in the preview tab tool options', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.expandDefaultToolDropdown();
+            graphingPage.steps.selectOptionFromDefaultToolDropdown('Circle');
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyToolOptionSelectedPreviewTab('Circle');
+            graphingPage.steps.verifyToolOptionNotSelectedPreviewTab(['Line']);
+        });
+    });
+
+    describe('Undo, Redo and Reset functionality background section', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default, the \'Move\' button should be in enabled state and the \'Undo\', \'Redo\' and \'Reset\' buttons should be displayed in disabled state', () => {
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionEditTab('Move'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionEditTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionEditTab('Redo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionEditTab('Reset'));
+        });
+
+        it('When the user plots points on the graph then the \'Undo\' button should be displayed in enabled state whereas, \'Redo\' and \'Reset\' buttons should be displayed in disabled state', () => {
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionEditTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionEditTab('Redo'));
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionEditTab('Reset'));
+        });
+
+        it('When the user selects \'Undo\' button then the latest action should be reversed and the \'Redo\' button should become enabled', () => {
+            graphingPage.steps.selectGraphControlOptionEditTab('Undo');
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedNotExistOnEditTabGraph([{ x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionEditTab('Undo'));
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionEditTab('Redo'));
+        });
+
+        it('When the user clicks on the \'Redo\' button the latest action should be reinstated and the the \'Redo\' button should be disabled again', () => {
+            graphingPage.steps.selectGraphControlOptionEditTab('Redo');
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionEditTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionEditTab('Redo'));
+        });
+
+        it('When the user reaches the initial state by performing \'Undo\' actions then the \'Redo\' button should be in enabled state and \'Undo\' button should be in disabled state', () => {
+            graphingPage.steps.selectGraphControlOptionEditTab('Undo');
+            graphingPage.steps.selectGraphControlOptionEditTab('Undo');
+            graphingPage.steps.selectGraphControlOptionEditTab('Undo');
+            graphingPage.steps.verifyPointsPlottedNotExistOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionEditTab('Undo'));
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionEditTab('Redo'));
+        });
+
+        it('When the user reaches the latest state by performing \'Redo\' actions then the \'Undo\' button should be in enabled state and \'Redo\' button should be in disabled state', () => {
+            graphingPage.steps.selectGraphControlOptionEditTab('Redo');
+            graphingPage.steps.selectGraphControlOptionEditTab('Redo');
+            graphingPage.steps.selectGraphControlOptionEditTab('Redo');
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionEditTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionEditTab('Redo'));
+        });
+
+        it('User should be able to select \'Reset\' control', () => {
+            graphingPage.steps.selectGraphControlOptionEditTab('Reset');
+        });
+
+        graphingPage.tests.verifyResetPopupContentWithCSSAndA11y("graph");
+
+        it('When the user clicks on the \'Cancel\' button then the plotted graph should not be \'Reset\'', () => {
+            graphingPage.steps.cancelReset();
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+        });
+
+        it('When the user clicks on \'Confirm \'Reset\'\' then the plotted graph should be \'Reset\'', () => {
+            graphingPage.steps.selectGraphControlOptionEditTab('Reset');
+            graphingPage.steps.confirmReset();
+            graphingPage.steps.verifyPointsPlottedNotExistOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+        });
+
+        it('When the user \'Reset\'s the graph then the \'Undo\' and \'Redo\' buttons should be in disabled state', () => {
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionEditTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionEditTab('Redo'));
+        });
+    });
+
+    describe('Undo/Redo and Reset functionality specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default, the \'Move\' button should be in enabled state and the \'Undo\', \'Redo\' and \'Reset\' buttons should be displayed in disabled state', () => {
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Move'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Redo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Reset'));
+        });
+
+        it('When the user plots points on the graph then the \'Undo\' button should be displayed in enabled state whereas, \'Redo\' and \'Reset\' buttons should be displayed in disabled state', () => {
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Redo'));
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Reset'));
+        });
+
+        it('When the user selects \'Undo\' button then the latest action should be reversed and the \'Redo\' button should become enabled', () => {
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Undo');
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedNotExistOnSpecifyCorrectAnswerSection([{ x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Undo'));
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Redo'));
+        });
+
+        it('When the user clicks on the \'Redo\' button the latest action should be reinstated and the the \'Redo\' button should be disabled again', () => {
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Redo');
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Redo'));
+        });
+
+        it('When the user reaches the initial state by performing \'Undo\' actions then the \'Redo\' button should be in enabled state and \'Undo\' button should be in disabled state', () => {
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Undo');
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Undo');
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Undo');
+            graphingPage.steps.verifyPointsPlottedNotExistOnSpecifyCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Undo'));
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Redo'));
+        });
+
+        it('When the user reaches the latest state by performing \'Redo\' actions then the \'Undo\' button should be in enabled state and \'Redo\' button should be in disabled state', () => {
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Redo');
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Redo');
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Redo');
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Redo'));
+        });
+
+        it('User should be able to select \'Reset\' control', () => {
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Reset');
+        });
+
+        graphingPage.tests.verifyResetPopupContentWithCSSAndA11y("graph");
+
+        it('When the user clicks on the \'Cancel\' button then the plotted graph should not be \'Reset\'', () => {
+            graphingPage.steps.cancelReset();
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+        });
+
+        it('When the user clicks on \'Confirm \'Reset\'\' then the plotted graph should be \'Reset\'', () => {
+            graphingPage.steps.selectGraphControlOptionSpecifyCorrectAnswerSection('Reset');
+            graphingPage.steps.confirmReset();
+            graphingPage.steps.verifyPointsPlottedNotExistOnSpecifyCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+        });
+
+        it('When the user \'Reset\'s the graph then the \'Undo\' and \'Redo\' buttons should be in disabled state', () => {
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionSpecifyCorrectAnswer('Redo'));
+        });
+    });
+
+    describe('Undo/Redo and Reset functionality preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+            graphingPage.steps.switchToPreviewTab();
+        });
+
+        it('By default, the \'Move\' button should be in enabled state and the \'Undo\', \'Redo\' and \'Reset\' buttons should be displayed in disabled state', () => {
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionPreviewTab('Move'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Redo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Reset'));
+        });
+
+        it('When the user plots points on the graph then the \'Undo\' button should be displayed in enabled state whereas, \'Redo\' and \'Reset\' buttons should be displayed in disabled state', () => {
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionPreviewTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Redo'));
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionPreviewTab('Reset'));
+        });
+
+        it('When the user selects \'Undo\' button then the latest action should be reversed and the \'Redo\' button should become enabled', () => {
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Undo');
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedNotExistOnPreviewTab([{ x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionPreviewTab('Undo'));
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionPreviewTab('Redo'));
+        });
+
+        it('When the user clicks on the \'Redo\' button the latest action should be reinstated and the the \'Redo\' button should be disabled again', () => {
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Redo');
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionPreviewTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Redo'));
+        });
+
+        it('When the user reaches the initial state by performing \'Undo\' actions then the \'Redo\' button should be in enabled state and \'Undo\' button should be in disabled state', () => {
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Undo');
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Undo');
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Undo');
+            graphingPage.steps.verifyPointsPlottedNotExistOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Undo'));
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionPreviewTab('Redo'));
+        });
+
+        it('When the user reaches the latest state by performing \'Redo\' actions then the \'Undo\' button should be in enabled state and \'Redo\' button should be in disabled state', () => {
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Redo');
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Redo');
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Redo');
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementNotDisabled(graphingPage.graphControlOptionPreviewTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Redo'));
+        });
+
+        it('User should be able to select \'Reset\' control', () => {
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Reset');
+        });
+
+        graphingPage.tests.verifyResetPopupContentWithCSSAndA11y("graph");
+
+        it('When the user clicks on the \'Cancel\' button then the plotted graph should not be \'Reset\' and the dialog box should not be displayed', () => {
+            graphingPage.steps.cancelReset();
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+        });
+
+        it('When the user clicks on \'Confirm \'Reset\'\' then the plotted graph should be \'Reset\'', () => {
+            graphingPage.steps.selectGraphControlOptionPreviewTab('Reset');
+            graphingPage.steps.confirmReset();
+            graphingPage.steps.verifyPointsPlottedNotExistOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: 2, yRange: 20 }, { x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+        });
+
+        it('When the user \'Reset\'s the graph then the \'Undo\' and \'Redo\' buttons should be in disabled state', () => {
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Undo'));
+            utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Redo'));
+        });
+    });
+
+    describe('Background section content', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Background\' label along with radio buttons \'Blank canvas\', \'Image\' and \'Pattern\' should be displayed', () => {
+            utilities.verifyInnerText(graphingPage.backgroundImageLabel(), 'Background');
+            utilities.verifyInnerText(graphingPage.blankCanvasLabel(), 'Blank canvas');
+            utilities.verifyElementVisibilityState(graphingPage.blankCanvasRadioButton(), 'exist');
+            utilities.verifyInnerText(graphingPage.imageLabel(), 'Image');
+            utilities.verifyElementVisibilityState(graphingPage.imageRadioButton(), 'exist');
+            utilities.verifyInnerText(graphingPage.patternLabel(), 'Pattern');
+            utilities.verifyElementVisibilityState(graphingPage.patternRadioButton(), 'exist');
+        });
+
+        it('By default, blank canvas should be selected', () => {
+            graphingPage.steps.verifyBackgroundRadioButtonChecked('Blank canvas');
+        });
+
+        it('User should be able to select \'Image\' radio button', () => {
+            graphingPage.steps.checkBackgroundRadioButton('Image');
+        });
+
+        graphingPage.tests.verifyBackgroundImageSectionContentWithCSSAndA11y('graphing');
+
+        it('\'Image properties\' label should be displayed.', () => {
+            graphingPage.steps.verifyImagePropertiesLabel();
+            utilities.verifyElementVisibilityState(graphingPage.imagePropertiesLabel(), 'visible');
+        });
+
+        it('\'Fill image to canvas\' label and checkbox should be displayed and checkbox should be unchecked by default', () => {
+            utilities.verifyElementVisibilityState(graphingPage.fillImageToCanvasLabel(), 'visible');
+            utilities.verifyInnerText(graphingPage.fillImageToCanvasLabel(), 'Fill image to canvas');
+            utilities.verifyElementVisibilityState(graphingPage.fillImageToCanvasCheckbox(), 'exist');
+            graphingPage.steps.verifyFillImageToCanvasCheckboxUnchecked();
+        });
+
+        it('User should be able to check \'Fill image to canvas\' checkbox', () => {
+            graphingPage.steps.checkFillImageToCanvasCheckbox();
+        });
+
+        it('\'Image alignment\' label should be displayed. ', () => {
+            utilities.verifyInnerText(graphingPage.imageAlignmentLabel(), 'Image alignment');
+            utilities.verifyElementVisibilityState(graphingPage.imageAlignmentLabel(), 'visible');
+        });
+
+        it(`\'Image alignment\' section should have three options ${alignmentOptions} and ${alignmentOptions[0]} should be active selection by default`, () => {
+            utilities.verifyInnerText(graphingPage.topLeftAlignmentButton(), 'Top left');
+            utilities.verifyElementVisibilityState(graphingPage.topLeftAlignmentButton(), 'visible');
+            utilities.verifyInnerText(graphingPage.centerAlignmentButton(), 'Center');
+            utilities.verifyElementVisibilityState(graphingPage.centerAlignmentButton(), 'visible');
+            utilities.verifyInnerText(graphingPage.topRightAlignmentButton(), 'Top right');
+            utilities.verifyElementVisibilityState(graphingPage.topRightAlignmentButton(), 'visible');
+        });
+
+        it('\'Opacity\' label, input field and slider should be displayed and by default the slider and input field of \'Opacity\' should be set to 100 percent', () => {
+            graphingPage.steps.verifyDefaultOpacityLabelSliderAndInputField();
+            graphingPage.steps.verifyOpacityInputFieldValue(100);
+            graphingPage.steps.verifyValueOfOpacitySlider(100);
+        });
+
+        it('The maximum value of \'Opacity\' slider should be 100', () => {
+            graphingPage.steps.verifyMaxOpacitySliderValue();
+        });
+
+        it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
+            graphingPage.steps.enterInputToOpacityInputField(85);
+            graphingPage.steps.verifyOpacityInputFieldValue(85);
+            graphingPage.steps.verifyValueOfOpacitySlider(85);
+        });
+
+        graphingPage.tests.verifyOpacityCSSAndA11y();
+
+        it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
+            graphingPage.steps.clickActionOnOpacitySlider();
+            graphingPage.steps.verifyValueOfOpacitySlider(50);
+            graphingPage.steps.verifyOpacityInputFieldValue(50);
+        });
+
+        graphingPage.tests.verifyDeleteImagePopupContentAndFunctionality();
+
+        it(`When the user selects \'Pattern\' radio button \'Select pattern\' label should be displayed with ${patternOptions} and by default ${patternOptions[0]} should be selected`, () => {
+            graphingPage.steps.checkBackgroundRadioButton('Pattern');
+            utilities.verifyInnerText(graphingPage.selectPatternLabel(), 'Select pattern');
+            patternOptions.forEach((patternOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.selectPatternOptions(patternOption), 'visible');
+                utilities.verifyElementVisibilityState(graphingPage.selectPatternOptionsLabel(patternOption), 'visible');
+            });
+        });
+
+        it('\'Image alternative text\' label should be displayed with input field should be displayed', () => {
+            utilities.verifyInnerText(graphingPage.selectPatternImageAltTextLabel(), 'Image alternative text');
+            utilities.verifyElementVisibilityState(graphingPage.selectPatternImageAltTextInputField(), 'visible');
+        });
+
+        it(`When the user selects ${patternOptions} then \'Image alternative text\' input field should be accordingly for all them`, () => {
+            patternOptions.forEach((patternOption, index) => {
+                graphingPage.steps.selectSelectPatternOption(patternOption);
+                graphingPage.steps.verifySelectPatternImageAltTextInputField(patternOptionsAltText[index]);
+            });
+        });
+    });
+
+    describe('Background section edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When the user has selected \'Blank canvas\' radio button then no grid lines or image should be displayed for the \'Specify correct answer\' and background section graph', () => {
+
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When the user selects \'Image\' radio button then and no image is uploaded then grid lines should be displayed for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.checkBackgroundRadioButton('Image');
+        });
+
+        it('When the user uploads a image then the uploaded image should be displayed for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.uploadFile('image.png');
+            graphingPage.steps.verifyFileNameLabel('image.png');
+            utilities.verifyElementVisibilityState(graphingPage.uploadImageProgressBar(), 'notExist');
+            utilities.scrollIntoView(graphingPage.graphEditTab())
+            cy.wait(5000);
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: -8, xRange: 20, y: 8, yRange: 20 }]);
+            graphingPage.steps.verifyUploadedImageInGraphEditTab('png');
+            graphingPage.steps.verifyUploadedImageInGraphSpecifyCorrectAnswerSection('png');
+        });
+
+        it('When the user uploads another image then the current image should be replaced by the new image for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.uploadFile('highlightImage.jpg');
+            graphingPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            utilities.verifyElementVisibilityState(graphingPage.uploadImageProgressBar(), 'notExist');
+            utilities.scrollIntoView(graphingPage.graphEditTab())
+            cy.wait(2000);
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: -9, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyUploadedImageInGraphEditTab('jpg');
+            graphingPage.steps.verifyUploadedImageInGraphSpecifyCorrectAnswerSection('jpg');
+        });
+
+        it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.verifyFillImageToCanvasCheckboxUnchecked();
+            utilities.scrollIntoView(graphingPage.graphEditTab());
+            cy.wait(2000);
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: -7, xRange: 20, y: 7, yRange: 20 }]);
+            graphingPage.steps.verifyImageDoesNotFitToGraphEditTab();
+            graphingPage.steps.verifyImageDoesNotFitToGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When user checks \'Fill image to canvas\' checkbox, then image should be adjusted to fit the \'Specify correct answer\' and background section graph ', () => {
+            graphingPage.steps.checkFillImageToCanvasCheckbox();
+            utilities.scrollIntoView(graphingPage.graphEditTab());
+            cy.wait(2000);
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: -2, xRange: 20, y: 2, yRange: 20 }]);
+            graphingPage.steps.verifyImageFitsToGraphEditTab();
+            graphingPage.steps.verifyImageFitsToGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When \'Top left\' image alignment is selected by default, then image should be aligned to top left for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.uncheckFillImageToCanvasCheckbox();
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: -6, xRange: 20, y: 6, yRange: 20 }]);
+            graphingPage.steps.verifyImageTopLeftAlignedGraphEditTab();
+            graphingPage.steps.verifyImageTopLeftAlignedGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When user selects \'Center\' image alignment in edit tab, then image should be aligned to center for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.selectCenterImageAlignment();
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 1, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyImageCenterAlignedGraphEditTab();
+            graphingPage.steps.verifyImageCenterAlignedGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When user selects \'Top right\' image alignment, then image should be aligned to top right for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.selectTopRightImageAlignment();
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 4, xRange: 20, y: 4, yRange: 20 }]);
+            graphingPage.steps.verifyImageTopRightAlignedGraphEditTab();
+            graphingPage.steps.verifyImageTopRightAlignedGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When user selects \'Top left\' image alignment again, then image should be aligned to top left for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.selectTopLeftImageAlignment();
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: -5, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyImageTopLeftAlignedGraphEditTab();
+            graphingPage.steps.verifyImageTopLeftAlignedGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When the opacity value is set to 100 percent by default, then the opacity of the image should be set to 100 percent', () => {
+            graphingPage.steps.verifyOpacityInputFieldValue('100');
+            utilities.scrollIntoView(graphingPage.graphEditTab())
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: -6, xRange: 20, y: 6, yRange: 20 }]);
+            graphingPage.steps.verifyImageOpacityGraphEditTab('100');
+            graphingPage.steps.verifyImageOpacityGraphSpecifyCorrectAnswerSection('100');
+        });
+
+        it('When the user changes the opacity value from the opacity slider in the edit tab, then the opacity of image should also change accordingly', () => {
+            graphingPage.steps.clickActionOnOpacitySlider();
+            utilities.scrollIntoView(graphingPage.graphEditTab())
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: -7, xRange: 20, y: 7, yRange: 20 }]);
+            graphingPage.steps.verifyImageOpacityGraphEditTab('50');
+            graphingPage.steps.verifyImageOpacityGraphSpecifyCorrectAnswerSection('50');
+        });
+
+        it('When the user changes the opacity value from the opacity input field in the edit tab, then the opacity of image should also change accordingly', () => {
+            graphingPage.steps.enterInputToOpacityInputField(70);
+            utilities.scrollIntoView(graphingPage.graphEditTab());
+            cy.wait(2000);
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: -5, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyImageOpacityGraphEditTab('70');
+            graphingPage.steps.verifyImageOpacityGraphSpecifyCorrectAnswerSection('70');
+        });
+
+        it('When the user deletes the image then grid lines should be displayed for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.deleteImage();
+            graphingPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+        });
+
+        it('When the user selects \'Pattern\' radio button and \'Grid\' option is selected then grid lines should be displayed for the \'Specify correct answer\' and background section graph', () => {
+            graphingPage.steps.checkBackgroundRadioButton('Pattern');
+            graphingPage.steps.verifySelectPatternOptionSelected('Grid');
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it(`When the user selects ${patternOptions} then the patterns should change and should be displayed for the \'Specify correct answer\' and background section graph`, () => {
+
+        });
+    });
+
+    describe('Background section preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When the user has selected \'Blank canvas\' radio button then no grid lines or image should be displayed for the preview tab graph', () => {
+
+        });
+
+        it('When the user selects \'Image\' radio button then and no image is uploaded then grid lines should be displayed for the preview tab graph', () => {
+            graphingPage.steps.checkBackgroundRadioButton('Image');
+
+        });
+
+        it('When the user uploads a image then the uploaded image should be displayed for the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uploadFile('image.png');
+            utilities.verifyElementVisibilityState(graphingPage.uploadImageProgressBar(), 'notExist');
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyUploadedImageInGraphPreviewTab('png');
+        });
+
+        it('When the user uploads another image then the current image should be replaced by the new image for the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uploadFile('highlightImage.jpg');
+            utilities.verifyElementVisibilityState(graphingPage.uploadImageProgressBar(), 'notExist');
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyUploadedImageInGraphPreviewTab('jpg');
+        });
+
+        it('When user checks \'Fill image to canvas\' checkbox, then image should be adjusted to fit the preview tab graph ', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.checkFillImageToCanvasCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyImageFitsToGraphPreviewTab();
+        });
+
+        it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state for the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckFillImageToCanvasCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyImageDoesNotFitToGraphPreviewTab();
+        });
+
+        it('When \'Top left\' image alignment is selected by default, then image should be aligned to top left for the preview tab graph', () => {
+            graphingPage.steps.verifyImageTopLeftAlignedGraphPreviewTab();
+        });
+
+        it('When user selects \'Center\' image alignment in edit tab, then image should be aligned to center for the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.selectCenterImageAlignment();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyImageCenterAlignedGraphPreviewTab();
+        });
+
+        it('When user selects \'Top right\' image alignment, then image should be aligned to top right for the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.selectTopRightImageAlignment();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyImageTopRightAlignedGraphPreviewTab();
+        });
+
+        it('When user selects \'Top left\' image alignment again, then image should be aligned to top left for the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.selectTopLeftImageAlignment();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyImageTopLeftAlignedGraphPreviewTab();
+        });
+
+        it('When the opacity value is set to 100 percent by default, then the opacity of the image should be set to 100 percent', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyOpacityInputFieldValue('100');
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyImageOpacityGraphPreviewTab('100');
+        });
+
+        it('When the user changes the opacity value from the opacity slider in the edit tab, then the opacity of image should also change accordingly', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.clickActionOnOpacitySlider();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyImageOpacityGraphPreviewTab('50');
+        });
+
+        it('When the user changes the opacity value from the opacity input field in the edit tab, then the opacity of image should also change accordingly', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.enterInputToOpacityInputField(70);
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyImageOpacityGraphPreviewTab('70');
+        });
+
+        it('When the user deletes the image then grid lines should be displayed for the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.deleteImage();
+            graphingPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            graphingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user selects \'Pattern\' radio button then grid lines should be displayed for the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.checkBackgroundRadioButton('Pattern');
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it(`When the user selects ${patternOptions} then the patterns should change and should be displayed for the preview tab graph`, () => {
+
+        });
+    });
+});