itemengine-cypress-automation 1.0.552 → 1.0.554-IEI-5835-LIVE-9ad00b0.0

package/cypress/e2e/LiveStudentView/MultipleSelection/liveStudentView.js

@@ -0,0 +1,123 @@
+import { multipleSelectionPage } from "../../../pages/multipleSelectionPage";
+import { itemPreviewPage } from "../../../pages/itemPreviewPage";
+import { liveStudentViewPage } from "../../../pages/liveStudentViewPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+var itemReferenceID = "";
+const options = ['Pollution caused by treating chemical waste', 'Pollution caused by cement production', 'Pollution caused by methane production', 'Pollution caused by cement and methane production'];
+
+describe('Live Student View - Multiple Selection', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    beforeEach(() => {
+        cy.startApplitools();
+    });
+
+    afterEach(() => {
+        cy.eyesClose();
+    });
+
+    describe('Multiple Selection Question in Live Student View', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        
+        before(() => {
+            // Create the multiple selection question first
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.addTextInQuestionInstructionsInputField('Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+            
+            multipleSelectionPage.steps.focusInOptionsInputField(0);
+            multipleSelectionPage.steps.selectImageOptionFromCKEditorToolbar()
+            multipleSelectionPage.steps.addImageToInputField();
+            
+            multipleSelectionPage.steps.focusInOptionsInputField(1);
+            multipleSelectionPage.steps.selectBoldOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.enterTextInOptionInputField(1, 'This is a bold option');
+            
+            multipleSelectionPage.steps.focusInOptionsInputField(2);
+            multipleSelectionPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            multipleSelectionPage.steps.enterTextInOptionInputField(3, 'option 4');
+            
+            multipleSelectionPage.steps.allotPoints(10);
+            multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(0);
+            multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(1);
+            
+            // Save the question to get itemReferenceID
+            multipleSelectionPage.steps.clickOnSaveQuestionButton();
+            utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+            itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+            
+            // Navigate to live student view using page object
+            cy.then(() => {
+                liveStudentViewPage.steps.navigateToLiveStudentView(itemReferenceID);
+            });
+        });
+
+        // Multiple Selection Question functionality tests - use multipleSelectionPage.tests
+        it('Question instructions should be visible in Live Student View', () => {
+            // Use multipleSelectionPage method directly since it's already in Live Student View
+            utilities.verifyInnerText(multipleSelectionPage.questionInstructionsText(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.questionInstructionsText(), 'visible');
+        });
+
+        it('Multiple selection - When the user has added image, bold text and equation to the options input they should be displayed', () => {
+            // Use multipleSelectionPage methods directly - they work in Live Student View
+            multipleSelectionPage.steps.verifyImageInPreviewTab(0);
+            multipleSelectionPage.steps.verifyBoldTextInPreviewTab(1);
+            multipleSelectionPage.steps.verifyEquationTextInPreviewTab(2);
+            cy.eyesCheckWindow('Multiple selection - Live Student View - Image, Bold Text, and Equation Display');
+        });
+
+        it('All the options should be in unchecked state initially', () => {
+            // Use multipleSelectionPage method directly
+            for (let index = 0; index < 4; index++) {
+                multipleSelectionPage.steps.verifyOptionsCheckboxInPreviewTabUncheckedState(index);
+            }
+        });
+
+        it('CSS of Multiple Selection options', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(multipleSelectionPage.optionsText(), 2), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(multipleSelectionPage.optionsCheckbox().parent().find('svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            
+            // Check a box to verify selected CSS
+            multipleSelectionPage.steps.checkOptionsCheckboxInPreviewTab(1);
+            utilities.verifyCSS(utilities.getNthElement(multipleSelectionPage.optionsCheckboxWrapperPreviewTab(), 1), {
+                'background-color': css.color.defaultBackground,
+                'color': css.color.activeButtons,
+                'border': `2px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(multipleSelectionPage.optionsText(), 1).find('.question-text-wrapper'), {
+                'color': css.color.optionsSelectedText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            multipleSelectionPage.optionsCheckbox()
+                .eq(1)
+                .parent()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('Accessibility of Multiple Selection question', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.questionInstructionsText().parents('[class*="ContentWrapper"]'));
+        });
+
+        // Live Student View specific functionality tests - use common base tests
+        liveStudentViewPage.tests.verifyLiveStudentViewInterface();
+        
+        // Multiple Selection specific Live Student View interactions - test on current page first
+        liveStudentViewPage.tests.verifyMultipleSelectionLiveStudentViewInteractions();
+        
+        // Then navigate to multiple session page and test those controls
+        liveStudentViewPage.tests.verifyMultipleSessionLiveStudentView();
+    });
+});

package/cypress/pages/liveStudentViewBase.js

@@ -0,0 +1,183 @@
+import utilities from "../support/helpers/utilities";
+
+/**
+ * Live Student View Base - Common functionality for all question types
+ * This module provides reusable Live Student View functionality that works with any question type
+ */
+
+const css = Cypress.env('css');
+
+const selectors = {
+    // Main Live Student View containers - common to all question types
+    student1Container: () => cy.get('#nextgen-live-student1'),
+    student2Container: () => cy.get('#nextgen-live-student2'),
+    studentsWrapper: () => cy.get('.LiveStudentViewstyles__StudentsWrapper-hx9itz-3'),
+    
+    // Student headers - common to all question types
+    student1Header: () => cy.get('#nextgen-live-student1').parent().find('.LiveStudentViewstyles__LiveStudentHeader-hx9itz-2').contains('Student-1'),
+    student2Header: () => cy.get('#nextgen-live-student2').parent().find('.LiveStudentViewstyles__LiveStudentHeader-hx9itz-2').contains('Student-2'),
+
+    // Multiple Session Live Student View selectors - common to all question types
+    pageTitle: () => cy.get('[id="header-title"]'),
+    enableLiveClassCheckbox: () => cy.get('[data-ngie-testid="enable-live-class-checkbox"]'),
+    enableLiveClassCheckboxInput: () => cy.get('[data-ngie-testid="enable-live-class-checkbox"] input[type="checkbox"]'),
+    getStudentViewSessionDataButton: () => cy.contains('button', 'Get student view session data'),
+    refreshUserResponsesButton: () => cy.contains('button', 'Refresh User Responses'),
+    launchGradingButton: () => cy.get('[data-testid="launchGrading"]'),
+    resetFieldsButton: () => cy.contains('button', 'Reset Fields')
+}
+
+const steps = {
+    /**
+     * Common navigation methods - works for all question types
+     */
+    navigateToLiveStudentView: (itemReferenceID) => {
+        const encodedId = utilities.base64Encoding(itemReferenceID);
+        cy.visit(`/item-engine/demo/live-student-view/${encodedId}`);
+        cy.wait(2000); // Wait for page to load
+    },
+
+    navigateToMultipleSessionLiveStudentView: () => {
+        cy.visit('/item-engine/multiple-session/live-student-view');
+        cy.wait(2000); // Wait for page to load
+    },
+
+    navigateToMultipleSessionWithItem: (itemReferenceID = null) => {
+        if (itemReferenceID) {
+            const encodedId = utilities.base64Encoding(itemReferenceID);
+            cy.visit(`/item-engine/multiple-session/live-student-view/${encodedId}`);
+        } else {
+            liveStudentViewBase.steps.navigateToMultipleSessionLiveStudentView();
+        }
+        cy.wait(2000); // Wait for page to load
+    },
+
+    /**
+     * Common verification methods - works for all question types
+     */
+    verifyBothStudentContainersExist: () => {
+        liveStudentViewBase.student1Container().should('exist').should('be.visible');
+        liveStudentViewBase.student2Container().should('exist').should('be.visible');
+    },
+    
+    verifyStudentHeaders: () => {
+        liveStudentViewBase.student1Header().should('be.visible');
+        liveStudentViewBase.student2Header().should('be.visible');
+    },
+
+    /**
+     * Multiple Session Live Student View methods - common to all question types
+     */
+    verifyMultipleSessionPageTitle: () => {
+        liveStudentViewBase.pageTitle().should('contain.text', 'Multiple Session Grading View');
+    },
+
+    checkEnableLiveClassCheckbox: () => {
+        liveStudentViewBase.enableLiveClassCheckboxInput().then(($checkbox) => {
+            if (!$checkbox.is(':checked')) {
+                liveStudentViewBase.enableLiveClassCheckbox().click();
+            }
+        });
+    },
+
+    verifyEnableLiveClassCheckboxIsChecked: () => {
+        liveStudentViewBase.enableLiveClassCheckboxInput().should('be.checked');
+    },
+
+    verifyEnableLiveClassCheckboxIsUnchecked: () => {
+        liveStudentViewBase.enableLiveClassCheckboxInput().should('not.be.checked');
+    },
+
+    clickGetStudentViewSessionDataButton: () => {
+        liveStudentViewBase.getStudentViewSessionDataButton().should('be.visible').click();
+    },
+
+    clickRefreshUserResponsesButton: () => {
+        liveStudentViewBase.refreshUserResponsesButton().should('be.visible').click();
+    },
+
+    clickLaunchGradingButton: () => {
+        liveStudentViewBase.launchGradingButton().should('be.visible').click();
+    },
+
+    clickResetFieldsButton: () => {
+        liveStudentViewBase.resetFieldsButton().should('be.visible').click();
+    },
+}
+
+/**
+ * Common tests that work for all question types
+ */
+const tests = {
+    /**
+     * Verifies Live Student View interface - common to all question types
+     */
+    verifyLiveStudentViewInterface: () => {
+        it('Both student containers should exist and be visible', () => {
+            liveStudentViewBase.steps.verifyBothStudentContainersExist();
+            liveStudentViewBase.steps.verifyStudentHeaders();
+        });
+    },
+
+    /**
+     * Verifies Multiple Session Live Student View functionality - common to all question types
+     */
+    verifyMultipleSessionLiveStudentView: () => {
+        it('Navigate to Multiple Session Live Student View and interact with Live Class controls', () => {
+            liveStudentViewBase.steps.navigateToMultipleSessionLiveStudentView();
+            liveStudentViewBase.steps.verifyMultipleSessionPageTitle();
+            liveStudentViewBase.steps.checkEnableLiveClassCheckbox();
+            liveStudentViewBase.steps.verifyEnableLiveClassCheckboxIsChecked();
+            liveStudentViewBase.steps.clickGetStudentViewSessionDataButton();
+            liveStudentViewBase.steps.clickLaunchGradingButton();
+        });
+    },
+
+    /**
+     * Common accessibility test for Live Student View - works with any question type
+     */
+    verifyLiveStudentViewAccessibility: () => {
+        it('Accessibility of Live Student View containers', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(liveStudentViewBase.studentsWrapper());
+        });
+    },
+
+    /**
+     * Common navigation test - works with any question type
+     */
+    verifyLiveStudentViewNavigation: (itemReferenceID) => {
+        it('Should successfully navigate to Live Student View', () => {
+            liveStudentViewBase.steps.navigateToLiveStudentView(itemReferenceID);
+            liveStudentViewBase.steps.verifyBothStudentContainersExist();
+        });
+    }
+}
+
+/**
+ * Helper function to get student-specific selectors for any question type
+ * @param {number} studentNum - Student number (1 or 2)
+ * @param {string} selector - The selector string to find within student container
+ * @returns {Cypress.Chainable} - Cypress element within specific student container
+ */
+const getStudentSpecificElement = (studentNum, selector) => {
+    const container = studentNum === 1 ? liveStudentViewBase.student1Container() : liveStudentViewBase.student2Container();
+    return container.find(selector);
+}
+
+/**
+ * Helper function to perform actions within a specific student container
+ * @param {number} studentNum - Student number (1 or 2)
+ * @param {function} callback - Callback function to execute within student container
+ */
+const withinStudentContainer = (studentNum, callback) => {
+    const container = studentNum === 1 ? liveStudentViewBase.student1Container() : liveStudentViewBase.student2Container();
+    container.within(callback);
+}
+
+export const liveStudentViewBase = {
+    ...selectors,
+    steps,
+    tests,
+    getStudentSpecificElement,
+    withinStudentContainer
+}

package/cypress/pages/liveStudentViewPage.js

@@ -0,0 +1,227 @@
+import constants from "../fixtures/constants";
+import utilities from "../support/helpers/utilities";
+import { multipleSelectionPage } from "./multipleSelectionPage";
+import { liveStudentViewBase } from "./liveStudentViewBase";
+
+const css = Cypress.env('css');
+
+const selectors = {
+    // Import common Live Student View selectors from base
+    ...liveStudentViewBase,
+    
+    // Question elements - reusing multipleSelectionPage selectors
+    questionInstructions: (studentNum = null) => {
+        if (studentNum === 1) {
+            return liveStudentViewBase.student1Container().find('[data-testid="question-instruction-element"]');
+        } else if (studentNum === 2) {
+            return liveStudentViewBase.student2Container().find('[data-testid="question-instruction-element"]');
+        }
+        return multipleSelectionPage.questionInstructionsText();
+    },
+    
+    // Option elements - reusing multipleSelectionPage selectors
+    optionCheckboxes: (studentNum = null) => {
+        if (studentNum === 1) {
+            return liveStudentViewBase.student1Container().find('[data-ngie-testid="response-option-checkbox"]');
+        } else if (studentNum === 2) {
+            return liveStudentViewBase.student2Container().find('[data-ngie-testid="response-option-checkbox"]');
+        }
+        return multipleSelectionPage.optionsCheckboxWrapperPreviewTab();
+    },
+    
+    optionInputs: (studentNum = null) => {
+        if (studentNum === 1) {
+            return liveStudentViewBase.student1Container().find('[data-ngie-testid="response-option-checkbox"] [type="checkbox"]');
+        } else if (studentNum === 2) {
+            return liveStudentViewBase.student2Container().find('[data-ngie-testid="response-option-checkbox"] [type="checkbox"]');
+        }
+        return multipleSelectionPage.optionsCheckboxPreviewTab();
+    },
+    
+    // Multiple Selection specific option types - using base helper functions
+    imageOption: (studentNum, optionIndex = 0) => {
+        return liveStudentViewBase.getStudentSpecificElement(studentNum, '[data-ngie-testid="response-option-checkbox"]').eq(optionIndex).find('img');
+    },
+    
+    boldTextOption: (studentNum, optionIndex = 1) => {
+        return liveStudentViewBase.getStudentSpecificElement(studentNum, '[data-ngie-testid="response-option-checkbox"]').eq(optionIndex).find('strong');
+    },
+    
+    equationOption: (studentNum, optionIndex = 2) => {
+        return liveStudentViewBase.getStudentSpecificElement(studentNum, '[data-ngie-testid="response-option-checkbox"]').eq(optionIndex).find('.mathjx-rendered');
+    }
+}
+
+const steps = {
+    // Import common Live Student View steps from base
+    ...liveStudentViewBase.steps,
+    
+    // Multiple Selection specific student interactions
+    selectOptionForStudent: (studentNum, optionIndex) => {
+        liveStudentViewBase.withinStudentContainer(studentNum, () => {
+            // Use multipleSelectionPage method for consistent checkbox clicking
+            multipleSelectionPage.optionsCheckboxWrapperPreviewTab().eq(optionIndex).click();
+        });
+        cy.wait(2000); // Wait for API response
+    },
+    
+    selectMultipleOptionsForStudent: function(studentNum, optionIndexes) {
+        optionIndexes.forEach(optionIndex => {
+            this.selectOptionForStudent(studentNum, optionIndex);
+        });
+    },
+    
+    // Multiple Selection specific verification methods
+    verifyOptionCheckedForStudent: (studentNum, optionIndex) => {
+        liveStudentViewBase.withinStudentContainer(studentNum, () => {
+            // Use multipleSelectionPage method for consistent checkbox verification
+            multipleSelectionPage.optionsCheckboxPreviewTab().eq(optionIndex).should('be.checked');
+        });
+    },
+    
+    verifyOptionUncheckedForStudent: (studentNum, optionIndex) => {
+        liveStudentViewBase.withinStudentContainer(studentNum, () => {
+            // Use multipleSelectionPage method for consistent checkbox verification
+            multipleSelectionPage.optionsCheckboxPreviewTab().eq(optionIndex).should('not.be.checked');
+        });
+    },
+    
+    verifyStudentSelections: function(studentNum, checkedOptions = [], uncheckedOptions = []) {
+        // Verify checked options
+        checkedOptions.forEach(optionIndex => {
+            this.verifyOptionCheckedForStudent(studentNum, optionIndex);
+        });
+        
+        // Verify unchecked options
+        uncheckedOptions.forEach(optionIndex => {
+            this.verifyOptionUncheckedForStudent(studentNum, optionIndex);
+        });
+    },
+
+    // Method to use multipleSelectionPage's existing unchecked state verification
+    verifyAllOptionsUncheckedInitially: () => {
+        // Use multipleSelectionPage method for initial unchecked state verification
+        for (let index = 0; index < 4; index++) {
+            multipleSelectionPage.steps.verifyOptionsCheckboxInPreviewTabUncheckedState(index);
+        }
+    },
+
+    // Method to use multipleSelectionPage's checkbox clicking
+    clickOptionUsingMultipleSelectionMethod: (optionIndex) => {
+        multipleSelectionPage.steps.checkOptionsCheckboxInPreviewTab(optionIndex);
+    },
+    
+    // Content verification methods - reusing multipleSelectionPage methods
+    verifyQuestionInstructionsVisible: (expectedText, studentNum = null) => {
+        if (studentNum) {
+            const questionElement = selectors.questionInstructions(studentNum);
+            questionElement.should('be.visible');
+            if (expectedText) {
+                questionElement.should('contain.text', expectedText);
+            }
+        } else {
+            // Use multipleSelectionPage method for question instructions verification
+            utilities.verifyInnerText(multipleSelectionPage.questionInstructionsText(), expectedText);
+            utilities.verifyElementVisibilityState(multipleSelectionPage.questionInstructionsText(), 'visible');
+        }
+    },
+    
+    // Content verification methods - using multipleSelectionPage methods
+    verifyImageOptionVisible: (studentNum, optionIndex = 0) => {
+        if (studentNum) {
+            selectors.imageOption(studentNum, optionIndex).should('exist').should('be.visible');
+        } else {
+            // Use multipleSelectionPage method
+            multipleSelectionPage.steps.verifyImageInPreviewTab(optionIndex);
+        }
+    },
+    
+    verifyBoldTextOptionVisible: (studentNum, optionIndex = 1, expectedText = null) => {
+        if (studentNum) {
+            const boldElement = selectors.boldTextOption(studentNum, optionIndex);
+            boldElement.should('exist').should('be.visible');
+            if (expectedText) {
+                boldElement.should('contain.text', expectedText);
+            }
+        } else {
+            // Use multipleSelectionPage method
+            multipleSelectionPage.steps.verifyBoldTextInPreviewTab(optionIndex);
+        }
+    },
+    
+    verifyEquationOptionVisible: (studentNum, optionIndex = 2) => {
+        if (studentNum) {
+            selectors.equationOption(studentNum, optionIndex).should('exist').should('be.visible');
+        } else {
+            // Use multipleSelectionPage method
+            multipleSelectionPage.steps.verifyEquationTextInPreviewTab(optionIndex);
+        }
+    },
+    
+    // Combined test scenarios
+    testIndependentStudentInteractions: function() {        
+        // Student-1 selects options 0 and 1
+        this.selectMultipleOptionsForStudent(1, [0, 1]);
+        
+        // Student-2 selects options 2 and 3
+        this.selectMultipleOptionsForStudent(2, [2, 3]);
+        
+        // Verify Student-1's selections
+        this.verifyStudentSelections(1, [0, 1], [2, 3]);
+        
+        // Verify Student-2's selections
+        this.verifyStudentSelections(2, [2, 3], [0, 1]);
+    },
+    
+
+
+    /**
+     * Verifies that the image in both student containers has the correct source and alt text.
+     * @param {number} index - The index of the option in both student containers.
+     */
+    verifyImageInBothStudentContainers: function(index) {
+        this.verifyImageOptionVisible(1, index);
+        this.verifyImageOptionVisible(2, index);
+    },
+
+    /**
+     * Verifies that the bold text in both student containers is correct.
+     * @param {number} index - The index of the option in both student containers.
+     */
+    verifyBoldTextInBothStudentContainers: function(index) {
+        this.verifyBoldTextOptionVisible(1, index);
+        this.verifyBoldTextOptionVisible(2, index);
+    },
+
+    /**
+     * Verifies that the equation text in both student containers is correct.
+     * @param {number} index - The index of the option in both student containers.
+     */
+    verifyEquationInBothStudentContainers: function(index) {
+        this.verifyEquationOptionVisible(1, index);
+        this.verifyEquationOptionVisible(2, index);
+    },
+
+}
+
+const tests = {
+    // Import common Live Student View tests from base
+    ...liveStudentViewBase.tests,
+    
+    /**
+     * Multiple Selection specific Live Student View tests
+     */
+    verifyMultipleSelectionLiveStudentViewInteractions: () => {
+        it('Live Student View should allow real-time interaction with both students for Multiple Selection', () => {
+            liveStudentViewBase.steps.verifyBothStudentContainersExist();
+            liveStudentViewBase.steps.verifyStudentHeaders();
+            steps.testIndependentStudentInteractions();
+        });
+    }
+}
+
+export const liveStudentViewPage = {
+    ...selectors,
+    steps,
+    tests
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.552",
+  "version": "1.0.554-IEI-5835-LIVE-9ad00b0.0",
   "description": "",
   "main": "index.js",
   "scripts": {