itemengine-cypress-automation 1.0.555-IEI-5835-LIVE-a798850.0 → 1.0.555-IEI-7011-1ad4f1a.0

package/cypress/e2e/ILC/SingleSelection/allOrNothingWithAlternativeAnswer.js

@@ -1,6 +1,7 @@
 import { singleSelectionPage } from "../../../pages/singleSelectionPage";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 const css = Cypress.env('css');
+const alternativeAnswerCheck = Cypress.env('ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT');
 
 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'];
 
@@ -49,6 +50,9 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
             singleSelectionPage.steps.verifyCorrectAnswerSectionNotExist();
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleNotExists();
+            }
             //singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question with responses from the correct accordion and clicks on \'Check answer\' button, then correct icons should be displayed besides correct responses, correct answer border and a label should not be displayed below the question preview')
             singleSelectionPage.steps.checkAnswer();
@@ -96,6 +100,10 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyIncorrectOptionIconStudentView(3);
             singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+            //show alternative answers
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleFunctionality(1, 10);
+            }
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
             //singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
@@ -215,6 +223,10 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(3);
             singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+            //show alternative answers
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleFunctionality(1, 10);
+            }
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(2);
             singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
@@ -314,6 +326,10 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(3);
             singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+            //show alternative answers
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleFunctionality(1, 20);
+            }
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
             singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();

package/cypress/examples/showAlternativeAnswersToggleExample.js

@@ -0,0 +1,78 @@
+import { singleSelectionPage } from "../pages/singleSelectionPage";
+
+/**
+ * Example usage of the "Show alternative answers" toggle methods
+ * This demonstrates how to verify the presence and functionality of the toggle component
+ */
+
+describe('Show Alternative Answers Toggle - Example Usage', () => {
+    before(() => {
+        cy.loginAs('admin');
+        // Navigate to a single selection question with alternative answers
+        singleSelectionPage.steps.navigateToCreateQuestion('single selection');
+        cy.barsPreLoaderWait();
+        
+        // Set up a question with alternative answers
+        singleSelectionPage.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.');
+        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'];
+        singleSelectionPage.steps.addInputToOptionsInputField(options);
+        singleSelectionPage.steps.checkOptionInSpecifyCorrectAnswerSection(1);
+        singleSelectionPage.steps.allotPoints(20);
+        singleSelectionPage.steps.clickOnAddAlternativeAnswerButton();
+        singleSelectionPage.steps.allotPoints(10);
+        singleSelectionPage.steps.checkOptionInSpecifyCorrectAnswerSection(2);
+        singleSelectionPage.steps.switchToPreviewTab();
+    });
+
+    it('Should verify the "Show alternative answers" toggle exists and has correct label', () => {
+        // Verify the toggle component is present with correct label
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleExists();
+    });
+
+    it('Should verify the toggle is initially unchecked', () => {
+        // Verify the toggle starts in unchecked state
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+    });
+
+    it('Should be able to click the toggle to enable it', () => {
+        // Click the toggle to enable it
+        singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+        
+        // Verify it's now checked
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleChecked();
+    });
+
+    it('Should be able to click the toggle to disable it', () => {
+        // Click the toggle again to disable it
+        singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+        
+        // Verify it's now unchecked
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+    });
+
+    it('Should verify complete toggle functionality', () => {
+        // Test the complete functionality in one method
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleFunctionality();
+    });
+
+    it('Should enable toggle if currently disabled', () => {
+        // Ensure toggle is enabled (will click only if currently disabled)
+        singleSelectionPage.steps.enableShowAlternativeAnswersToggle();
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleChecked();
+    });
+
+    it('Should disable toggle if currently enabled', () => {
+        // Ensure toggle is disabled (will click only if currently enabled)
+        singleSelectionPage.steps.disableShowAlternativeAnswersToggle();
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+    });
+
+    it('Should verify alternative answers section when incorrectly answered', () => {
+        // Answer the question incorrectly to trigger alternative answers display
+        singleSelectionPage.steps.checkOptionInPreviewTab(0);
+        singleSelectionPage.steps.switchToGradingView();
+        
+        // Verify the alternative answers section is visible
+        singleSelectionPage.steps.verifyAlternativeAnswersSection();
+    });
+});

package/cypress/pages/singleSelectionPage.js

@@ -42,6 +42,16 @@ const selectors = {
     correctIncorrectAnswerLabel: () => cy.get('[class*="style"][class*="__Status"]'),
     answerStatusBanner: () => cy.get('[class*="StatusContainer"]'),
     optionsInputFieldInQuestionPreviewTab: () => cy.get('.mcq-radio-control [data-testid="question-instruction-element"]'),
+    //Show alternative answers toggle
+    showAlternativeAnswersToggleWrapper: () => cy.get('[class*="ShowAlternativeAnswerSwitch"][class*="SwitchWrapper"]'),
+    showAlternativeAnswersToggleInput: () => cy.get('[class*="ShowAlternativeAnswerSwitch"][class*="SwitchWrapper"] input[type="checkbox"]'),
+    showAlternativeAnswersToggleLabel: () => cy.get('[class*="ShowAlternativeAnswerSwitch"][class*="SwitchWrapper"] [class*="SwitchLabelWrapper"]'),
+    showAlternativeAnswersToggleButton: () => cy.get('[class*="ShowAlternativeAnswerSwitch"][class*="SwitchWrapper"] .MuiButtonBase-root'),
+    //Alternative answers content section
+    alternativeAnswersSection: () => cy.get('[class*="CorrectAnswerLabelWrapper"]').contains('Alternative answer'),
+    alternativeAnswerLabelWrapper: () => cy.get('[class*="CorrectAnswerLabelWrapper"]:contains("Alternative answer")'),
+    alternativeAnswerGridWrapper: () => cy.get('[class*="CorrectAnswerGridWrapper"]'),
+    alternativeAnswerSelectionGrid: () => cy.get('.correct-ans-selection-grid'),
 };
 
 const steps = {
@@ -728,6 +738,152 @@ const steps = {
         singleSelectionPage.steps.setCorrectAnswer(correctAnswer);
         singleSelectionPage.saveQuestionButton().click();
     },
+
+    /**
+     * Verifies that the "Show alternative answers" toggle is present and visible
+     */
+    verifyShowAlternativeAnswersToggleExists: () => {
+        singleSelectionPage.showAlternativeAnswersToggleWrapper()
+            .should('be.visible');
+        singleSelectionPage.showAlternativeAnswersToggleLabel()
+            .should('contain.text', 'Show alternative answers');
+    },
+
+    verifyShowAlternativeAnswersToggleNotExists: () => {
+        singleSelectionPage.showAlternativeAnswersToggleWrapper()
+            .should('not.exist');
+    },
+
+    /**
+     * Verifies that the "Show alternative answers" toggle is in the checked (enabled) state
+     */
+    verifyShowAlternativeAnswersToggleChecked: () => {
+        singleSelectionPage.showAlternativeAnswersToggleInput()
+            .should('be.checked')
+            .and('have.attr', 'aria-pressed', 'true');
+        // Verify the checked state visual indicator (tick icon)
+        singleSelectionPage.showAlternativeAnswersToggleWrapper()
+            .find('.icon-ILC-tick-icon')
+            .should('be.visible');
+    },
+
+    /**
+     * Verifies that the "Show alternative answers" toggle is in the unchecked (disabled) state
+     */
+    verifyShowAlternativeAnswersToggleUnchecked: () => {
+        singleSelectionPage.showAlternativeAnswersToggleInput()
+            .should('not.be.checked')
+            .and('have.attr', 'aria-pressed', 'false');
+        // Verify the unchecked state visual indicator (x-circle icon)
+        singleSelectionPage.showAlternativeAnswersToggleWrapper()
+            .find('.icon-x-circle')
+            .should('be.visible');
+    },
+
+    /**
+     * Clicks the "Show alternative answers" toggle to change its state
+     */
+    clickShowAlternativeAnswersToggle: () => {
+        singleSelectionPage.showAlternativeAnswersToggleButton()
+            .click();
+    },
+
+    /**
+     * Enables the "Show alternative answers" toggle (clicks it if it's currently unchecked)
+     */
+    enableShowAlternativeAnswersToggle: () => {
+        singleSelectionPage.showAlternativeAnswersToggleInput()
+            .then(($input) => {
+                if (!$input.prop('checked')) {
+                    singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                }
+            });
+    },
+
+    /**
+     * Disables the "Show alternative answers" toggle (clicks it if it's currently checked)
+     */
+    disableShowAlternativeAnswersToggle: () => {
+        singleSelectionPage.showAlternativeAnswersToggleInput()
+            .then(($input) => {
+                if ($input.prop('checked')) {
+                    singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                }
+            });
+    },
+
+    
+    /**
+     * Verifies that the alternative answers section is visible
+     */
+
+    verifyAlternativeAnswersSectionVisible: (index, points) => {
+    // Build the expected points text: "(1 point)" or "(20 points)"
+        const pointsText = `(${points} point${points === 1 ? '' : 's'})`;
+
+        cy.get('[class*="CorrectAnswerLabelWrapper"]')
+            .eq(index) // pick the specific "Alternative answer" by index
+            .should('be.visible')
+            .should('contain.text', `Alternative answer ${index}`)
+            .should('contain.text', `(${points} pointsText)`); // check points
+    },
+
+
+    /**
+     * Verifies that the alternative answers section does not exist
+     */
+    verifyAlternativeAnswersSectionNotExist: () => {
+        cy.get('[class*="CorrectAnswerLabelWrapper"]')
+            .contains('Alternative answer')
+            .should('not.exist');
+    },
+
+    /**
+     * Verifies the complete alternative answers section including content and grid
+     */
+    verifyAlternativeAnswersSectionComplete: () => {
+        // Verify the alternative answer label is visible
+        singleSelectionPage.alternativeAnswersSection()
+            .should('be.visible');
+        
+        // Verify the selection grid is visible
+        singleSelectionPage.alternativeAnswerSelectionGrid()
+            .should('be.visible');
+        
+        // Verify points are displayed
+        cy.get('[class*="CorrectAnswerLabelWrapper"]')
+            .contains('Alternative answer')
+            .parent()
+            .find('p')
+            .should('contain.text', 'points');
+    },
+
+
+    /**
+     * Verifies the toggle functionality by checking both states
+     */
+    verifyShowAlternativeAnswersToggleFunctionality: (index, points) => {
+        // Start with ensuring toggle exists
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleExists();
+        
+        // Test unchecked state
+        singleSelectionPage.steps.disableShowAlternativeAnswersToggle();
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+
+        // Verify the alternative answers section do not exist
+        singleSelectionPage.steps.verifyAlternativeAnswersSectionNotExist();
+        
+        // Test checked state
+        singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleChecked();
+
+        // Verify the alternative answers section is visible
+        singleSelectionPage.steps.verifyAlternativeAnswersSectionVisible(index, points);
+        
+        // Test toggle back to unchecked
+        singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+        singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+    },
 };
 
 const tests = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.555-IEI-5835-LIVE-a798850.0",
+  "version": "1.0.555-IEI-7011-1ad4f1a.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/service.yaml

@@ -102,21 +102,29 @@ namespaces:
         value: "dev"
       - name: FILE_CONFIG
         value: "dev"
+      - name: ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT
+        value: "false"
   qa:
     env:
       - name: STAGE
         value: "qa"
       - name: FILE_CONFIG
         value: "qa"
+      - name: ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT
+        value: "true"
   staging:
     env:
       - name: STAGE
         value: "stage"
       - name: FILE_CONFIG
         value: "stage"
+      - name: ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT
+        value: "false"
   prod:
     env:
       - name: STAGE
         value: "prod"
       - name: FILE_CONFIG
-        value: "prod"
+        value: "prod"
+      - name: ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT
+        value: "false"