itemengine-cypress-automation 1.0.2

package/cypress/pages/components/dragAndDropSetCorrectAnswerCheckboxComponents.js

@@ -0,0 +1,124 @@
+const css = Cypress.env('css');
+
+const selectors = {
+    randomizeOptionsLabel: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] .MuiFormControlLabel-label'),
+    reuseOptionsLabel: () => cy.get('[data-ngie-testid="reuse-options-checkbox"] .MuiFormControlLabel-label'),
+    hideDragHandleLabel: () => cy.get('[data-ngie-testid="hide-drag-handle-checkbox"] .MuiFormControlLabel-label'),
+    randomizeOptionsCheckbox: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] input'),
+    reuseOptionsCheckbox: () => cy.get('[data-ngie-testid="reuse-options-checkbox"] input'),
+    hideDragHandleCheckbox: () => cy.get('[data-ngie-testid="hide-drag-handle-checkbox"] input'),
+}
+
+const steps = {
+    //V3 - This function should be updated in all files
+    checkRandomizeOptionsCheckbox: () => {
+        dragAndDropSetCorrectAnswerCheckboxComponents.randomizeOptionsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    checkReuseOptionsCheckbox: () => {
+        dragAndDropSetCorrectAnswerCheckboxComponents.reuseOptionsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    checkHideDragHandleCheckbox: () => {
+        dragAndDropSetCorrectAnswerCheckboxComponents.hideDragHandleCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    uncheckRandomizeOptionsCheckbox: () => {
+        dragAndDropSetCorrectAnswerCheckboxComponents.randomizeOptionsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    uncheckReuseOptionsCheckbox: () => {
+        dragAndDropSetCorrectAnswerCheckboxComponents.reuseOptionsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+}
+
+const tests = {
+    verifyDefaultStateOfRandomizeOptionsCheckboxAndLabel: () => {
+        it('\'Randomize options\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            dragAndDropSetCorrectAnswerCheckboxComponents.randomizeOptionsLabel()
+                .verifyInnerText('Randomize options')
+                .and('be.visible');
+            dragAndDropSetCorrectAnswerCheckboxComponents.randomizeOptionsCheckbox()
+                .should('not.be.checked');
+        });
+    },
+
+    verifyDefaultStateOfReuseOptionsCheckboxAndLabel: () => {
+        it('\'Reuse options\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            dragAndDropSetCorrectAnswerCheckboxComponents.reuseOptionsLabel()
+                .verifyInnerText('Reuse options')
+                .and('be.visible');
+            dragAndDropSetCorrectAnswerCheckboxComponents.reuseOptionsCheckbox()
+                .should('not.be.checked');
+        });
+    },
+
+    verifyDefaultStateOfHideDragHandleCheckboxAndLabel: () => {
+        it('\'Hide drag handle\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            dragAndDropSetCorrectAnswerCheckboxComponents.hideDragHandleLabel()
+                .verifyInnerText('Hide drag handle')
+                .and('be.visible');
+            dragAndDropSetCorrectAnswerCheckboxComponents.hideDragHandleCheckbox()
+                .should('not.be.checked');
+        });
+    },
+
+    verifyCSSAndA11yOfCheckedStateOfRandomizeOptionsCheckbox: () => {
+        it('CSS of \'Randomize options\' functionality - checked state', { tags: 'css' }, () => {
+            dragAndDropSetCorrectAnswerCheckboxComponents.randomizeOptionsCheckbox()
+                .parent()
+                .find('g[data-name*="Rectangle"]')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Randomize options\' functionality - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropSetCorrectAnswerCheckboxComponents.randomizeOptionsCheckbox().parents('.ngie-checkbox-form-group'));
+        });
+    },
+
+    verifyCSSAndA11yOfCheckedStateOfReuseOptionsCheckbox: () => {
+        it('CSS of \'Reuse options\' functionality - checked state', { tags: 'css' }, () => {
+            dragAndDropSetCorrectAnswerCheckboxComponents.reuseOptionsCheckbox()
+                .parent()
+                .find('g[data-name*="Rectangle"]')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Reuse options\' functionality - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropSetCorrectAnswerCheckboxComponents.reuseOptionsCheckbox().parents('.ngie-checkbox-form-group'));
+        });
+    },
+
+    verifyCSSAndA11yOfCheckedStateOfHideDragHandleCheckbox: () => {
+        it('CSS of \'Hide drag handle\' functionality - checked state', { tags: 'css' }, () => {
+            dragAndDropSetCorrectAnswerCheckboxComponents.hideDragHandleCheckbox()
+                .parent()
+                .find('g[data-name*="Rectangle"]')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Hide drag handle\' functionality - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropSetCorrectAnswerCheckboxComponents.hideDragHandleCheckbox().parents('.ngie-checkbox-form-group'));
+        });
+    },
+}
+
+export const dragAndDropSetCorrectAnswerCheckboxComponents = {
+    ...selectors,
+    steps,
+    tests
+}