[QT-254] Fix rating consent fail

plugins/logger/frontend/public/templates/logger.html

@@ -41,10 +41,10 @@
                         <template v-slot="props">
                             <cly-section>
                                 <el-tabs type="card" value="data">
-                                    <el-tab-pane name="data" label="Data">
+                                    <el-tab-pane name="data" label="Data" data-test-id="datatable-logs-expand-data">
                                         <vue-json-pretty :data="jsonParser(props.row.q)"/>
                                     </el-tab-pane>  
-                                    <el-tab-pane name="header" label="Header">
+                                    <el-tab-pane name="header" label="Header" data-test-id="datatable-logs-expand-header">
                                         <vue-json-pretty :data="props.row.h"/>
                                     </el-tab-pane>
                                 </el-tabs>
@@ -54,22 +54,22 @@
                     <el-table-column class="request-date" sortable="custom"
                         :label="i18n('logger.requests')" vertical-align="middle" prop="reqts" min-width="283">
                         <template slot-scope="rowScope">
-                            <logger-readable-date :timestamp="rowScope.row.reqts"></logger-readable-date>
+                            <logger-readable-date :timestamp="rowScope.row.reqts" :data-test-id="'datatable-logs-request-received-' + rowScope.$index"></logger-readable-date>
                         </template>
                     </el-table-column>
                     <el-table-column sortable="custom" prop="details" :label="i18n('logger.details')" min-width="413">
                         <template slot-scope="rowScope">
                             <logger-details :device="rowScope.row.d" :version="rowScope.row.v" :sdk="rowScope.row.s"
-                                :location="rowScope.row.l"></logger-details>
+                                :location="rowScope.row.l" :data-test-id="'datatable-logger-details-' + rowScope.$index"></logger-details>
                         </template>
                     </el-table-column>
                     <el-table-column sortable="custom" prop="info" :label="i18n('logger.info')" min-width="283">
                         <template slot-scope="rowScope">
-							<strong v-if="rowScope.row.c" class='red-text'>{{i18n('logger.request-canceled')}}</strong>
-							<div v-if="rowScope.row.c" class="bu-pt-2" >{{rowScope.row.c}}</div>
-                            <logger-info :info="rowScope.row.t" :filter="loggerFilter"></logger-info>
-                            <strong v-if="rowScope.row.p" class='red-text'>{{i18n('logger.problems')}}</strong>
-							<div v-if="rowScope.row.p" v-for="p in rowScope.row.p" class="bu-pt-2" >{{p}}</div>
+							<strong v-if="rowScope.row.c" class='red-text' :data-test-id="'datatable-logs-information-canceled-' + rowScope.$index">{{i18n('logger.request-canceled')}}</strong>
+							<div v-if="rowScope.row.c" class="bu-pt-2" :data-test-id="'datatable-logs-information-c-' + rowScope.$index">{{rowScope.row.c}}</div>
+                            <logger-info :info="rowScope.row.t" :filter="loggerFilter" :data-test-id="'datatable-logs-information-filter-' + rowScope.$index"></logger-info>
+                            <strong v-if="rowScope.row.p" class='red-text' :data-test-id="'datatable-logs-information-problems-' + rowScope.$index">{{i18n('logger.problems')}}</strong>
+							<div v-if="rowScope.row.p" v-for="p in rowScope.row.p" class="bu-pt-2" :data-test-id="'datatable-logs-information-p-' + rowScope.$index">{{p}}</div>
                         </template>
                     </el-table-column>
                 </template>

plugins/star-rating/frontend/public/templates/drawer.html

@@ -52,10 +52,10 @@
               </div>
               <div v-if="drawerScope.editedObject.consent" class="ratings-drawer__consent">
                 <label>
-                  <input type="checkbox"
+                  <input data-test-id="ratings-drawer-ratingspopup-consent-checkbox" type="checkbox"
                   value="consent" checked
                   >
-                  <span v-html="finalTxt(drawerScope.editedObject.links)"></span>
+                  <span v-html="finalTxt(drawerScope.editedObject.links)" data-test-id="ratings-drawer-ratingspopup-consent-text"></span>
                 </label>
               </div>
               <div class="ratings-drawer__rp-action-area">
@@ -180,6 +180,7 @@
         </div>
          <div class="cly-vue-drawer-step__section bu-py-1 cly-vue-surveys-drawer__consent">
           <el-checkbox
+            test-id="ratings-drawer-settings-add-user-consent"
             class="text-smallish"
             @change="onConsentCheckbox(drawerScope.editedObject)"
             size="small"

plugins/star-rating/frontend/public/templates/star-consent-link.html

@@ -1,8 +1,9 @@
 <div class="bu-py-1 bu-px-4 cly-vue-drawer-step__section-group--filled">
   <div class="cly-vue-drawer-step__section">
-    <div class="text-small text-heading bu-pb-1">{{i18n('rating.drawer.consent.text')}}</div>
+    <div class="text-small text-heading bu-pb-1" data-test-id="ratings-drawer-settings-add-user-consent-text-label">{{i18n('rating.drawer.consent.text')}}</div>
     <validation-provider name="value.consent" rules="required|max:93" v-slot="v">
       <el-input
+        test-id="ratings-drawer-settings-add-user-consent-text-input"
         :class="{'is-error': v.errors.length > 0}"
         :placeholder="i18n('rating.drawer.consent.placeholder')"
         v-model="value.finalText"
@@ -11,14 +12,15 @@
         >
       </el-input>
     </validation-provider>
-    <div class="bu-pt-4 text-small text-heading">
+    <div class="bu-pt-4 text-small text-heading" data-test-id="ratings-drawer-settings-add-user-consent-links-label">
         {{i18n('rating.drawer.consent.links')}}
-        <cly-tooltip-icon :tooltip="i18n('rating.drawer.links.tooltip')" icon="ion-help-circled"></cly-tooltip-icon>
+        <cly-tooltip-icon :tooltip="i18n('rating.drawer.links.tooltip')" icon="ion-help-circled" data-test-id="ratings-drawer-settings-add-user-consent-links-tooltip"></cly-tooltip-icon>
     </div>
     <div style="gap:8px" class="bu-is-flex bu-is-justify-content-space-between	bu-is-align-items-center bu-py-1" :key="idx" v-for="(item, idx) in value.link">
       <div class="cly-vue-surveys-drawer__consent__basis-text">
         <validation-provider :name="item.text" rules="required" v-slot="v">
           <el-input
+            :test-id="'ratings-drawer-settings-add-user-consent-links-text-input-' + idx"
             :class="{'is-error': v.errors.length > 0}"
             :placeholder=item.text
             v-model="item.textValue">
@@ -28,14 +30,15 @@
       <div class="cly-vue-surveys-drawer__consent__basis">
         <validation-provider name="item.link" rules="required" v-slot="v">
           <el-input
+            :test-id="'ratings-drawer-settings-add-user-consent-links-link-input-' + idx"
             :class="{'is-error': v.errors.length > 0}"
             :placeholder=item.link
             v-model="item.linkValue">
           </el-input>
         </validation-provider>
       </div>
-      <div @click="onDelete(idx)" class="cly-icon-button--gray bu-has-text-right"><i class="ion-ios-close-empty bu-is-clickable ratings-drawer__consent__close-icon"></i></div>
+      <div @click="onDelete(idx)" class="cly-icon-button--gray bu-has-text-right" :data-test-id="'ratings-drawer-settings-add-user-consent-delete-link-icon-' + idx"><i class="ion-ios-close-empty bu-is-clickable ratings-drawer__consent__close-icon" :data-test-id="'ratings-drawer-settings-add-user-consent-delete-link-' + idx"></i></div>
     </div>
-    <el-button v-if="newLinkAllowed" @click="add" type="text">{{i18n('rating.drawer.consent.add.link')}}</el-button>
+    <el-button v-if="newLinkAllowed" @click="add" type="text" data-test-id="ratings-drawer-settings-add-user-consent-add-link-button">{{i18n('rating.drawer.consent.add.link')}}</el-button>
   </div>
 </div>

ui-tests/cypress/e2e/dashboard/feedback/ratings/widgets.cy.js

@@ -141,6 +141,7 @@ describe('Create New Widget', () => {
         widgetsHelpers.typeAddCommentCheckboxLabelText(widget.addCommentCheckboxLabelText);
         widgetsHelpers.clickContactViaCheckbox();
         widgetsHelpers.typeContactViaCheckboxLabelText(widget.contactViaCheckboxLabelText);
+        widgetsHelpers.clickAddUserConsentCheckbox();
         widgetsHelpers.typeButtonCallOut(widget.buttonCallOut);
         widgetsHelpers.typeThanksMessage(widget.thanksMessage);
         widgetsHelpers.clickNextStepButton();
@@ -166,6 +167,8 @@ describe('Create New Widget', () => {
             commentCheckboxLabelText: widget.comment,
             isCheckedViaContact: true,
             viaContactCheckboxLabelText: widget.contactVia,
+            isCheckedAddConsent: true,
+            consentText: "I agree to the Terms and Conditions and Privacy Policy.",
             submitButtonText: widget.buttonCallOut,
             submitButtonColor: widget.mainColor,
             submitButtonFontColor: widget.FontColor,
@@ -285,6 +288,12 @@ describe('Create New Widget', () => {
         widgetsHelpers.typeAddCommentCheckboxLabelText(widget.addCommentCheckboxLabelText);
         widgetsHelpers.clickContactViaCheckbox();
         widgetsHelpers.typeContactViaCheckboxLabelText(widget.contactViaCheckboxLabelText);
+        widgetsHelpers.clickAddUserConsentCheckbox();
+        widgetsHelpers.typeAddUserConsentText(widget.consentText);
+        widgetsHelpers.typeAddUserConsentLinkText(0, widget.firstConsentLinkText);
+        widgetsHelpers.typeAddUserConsentLinkUrl(0, widget.firstConsentLinkUrl);
+        widgetsHelpers.typeAddUserConsentLinkText(1, widget.secondConsentLinkText);
+        widgetsHelpers.typeAddUserConsentLinkUrl(1, widget.secondConsentLinkUrl);
         widgetsHelpers.typeButtonCallOut(widget.buttonCallOut);
         widgetsHelpers.typeThanksMessage(widget.thanksMessage);
         widgetsHelpers.clickNextStepButton();
@@ -310,6 +319,8 @@ describe('Create New Widget', () => {
             commentCheckboxLabelText: widget.comment,
             isCheckedViaContact: true,
             viaContactCheckboxLabelText: widget.contactVia,
+            isCheckedAddConsent: true,
+            consentText: widget.consentText,
             submitButtonText: widget.buttonCallOut,
             submitButtonColor: widget.mainColor,
             submitButtonFontColor: widget.FontColor,
@@ -363,6 +374,7 @@ describe('Create New Widget', () => {
             contactViaCheckboxLabelText: widget.contactViaCheckboxLabelText,
             contactEmail: widgetRate.contactEmail,
             submitButtonText: widget.submitButtonText,
+            consentText: widget.consentText,
             selectedMainColor: widget.mainColor,
             selectedFontColor: widget.FontColor,
             hasPoweredByLogo: true,
@@ -400,8 +412,7 @@ describe('Create New Widget', () => {
             index: 0,
             question: widget.question,
             internalName: widget.widgetName,
-            //There is still an issue TODO
-            //pages: "/homepage, /shopping, /checkout",
+            pages: "/homepage, /shopping, /checkout",
             isActive: false
         });
     });
@@ -429,6 +440,12 @@ describe('Create New Widget', () => {
         widgetsHelpers.typeAddCommentCheckboxLabelText(widget.addCommentCheckboxLabelText);
         widgetsHelpers.clickContactViaCheckbox();
         widgetsHelpers.typeContactViaCheckboxLabelText(widget.contactViaCheckboxLabelText);
+        widgetsHelpers.clickAddUserConsentCheckbox();
+        widgetsHelpers.typeAddUserConsentText(widget.consentText);
+        widgetsHelpers.typeAddUserConsentLinkText(0, widget.firstConsentLinkText);
+        widgetsHelpers.typeAddUserConsentLinkUrl(0, widget.firstConsentLinkUrl);
+        widgetsHelpers.typeAddUserConsentLinkText(1, widget.secondConsentLinkText);
+        widgetsHelpers.typeAddUserConsentLinkUrl(1, widget.secondConsentLinkUrl);
         widgetsHelpers.typeButtonCallOut(widget.buttonCallOut);
         widgetsHelpers.clickNextStepButton();
 
@@ -458,6 +475,17 @@ describe('Create New Widget', () => {
             addCommentCheckboxLabelText: widget.addCommentCheckboxLabelText,
             isCheckedViaContact: true,
             contactViaCheckboxLabelText: widget.contactViaCheckboxLabelText,
+            consentText: widget.consentText,
+            consentItems: [
+                {
+                    text: widget.firstConsentLinkText,
+                    link: widget.firstConsentLinkUrl
+                },
+                {
+                    text: widget.secondConsentLinkText,
+                    link: widget.secondConsentLinkUrl
+                }
+            ],
             submitButtonText: widget.buttonCallOut,
             thanksMessageText: widget.thanksMessage,
         });

ui-tests/cypress/fixtures/generators/widgets/index.js

@@ -10,6 +10,11 @@ const generator = () => {
     const emojiFiveText = faker.lorem.words({ min: 1, max: 3 });
     const addCommentCheckboxLabelText = faker.lorem.words({ min: 1, max: 3 });
     const contactViaCheckboxLabelText = faker.lorem.words({ min: 1, max: 3 });
+    const firstConsentLinkText = faker.lorem.words({ min: 1, max: 3 });
+    const firstConsentLinkUrl = faker.internet.url();
+    const secondConsentLinkText = faker.lorem.words({ min: 1, max: 3 });
+    const secondConsentLinkUrl = faker.internet.url();
+    const consentText = faker.lorem.words({ min: 1, max: 3 }) + ' ' + firstConsentLinkText + ' and ' + secondConsentLinkText + ' ' + faker.lorem.words({ min: 1, max: 3 });
     const buttonCallOut = faker.lorem.words({ min: 1, max: 3 });
     const thanksMessage = faker.lorem.words({ min: 1, max: 3 });
     const mainColor = faker.color.rgb({ format: 'hex', casing: 'upper' });
@@ -27,6 +32,11 @@ const generator = () => {
         emojiFiveText,
         addCommentCheckboxLabelText,
         contactViaCheckboxLabelText,
+        consentText,
+        firstConsentLinkText,
+        firstConsentLinkUrl,
+        secondConsentLinkText,
+        secondConsentLinkUrl,
         buttonCallOut,
         thanksMessage,
         mainColor,

ui-tests/cypress/lib/dashboard/feedback/ratings/ratings.js

@@ -267,12 +267,10 @@ const verifyRatingsEChartElements = ({
         element: ratingsEChartElements.RATING_ICON,
     });
 
-    cy.pause();
     cy.verifyElement({
         element: ratingsEChartElements.RATING,
         elementText: "Ratings",
     });
-    cy.pause();
 };
 
 const verifyRatingsDataFromTable = ({

ui-tests/cypress/lib/dashboard/feedback/ratings/widgets.js

@@ -1,5 +1,6 @@
 import {
     feedbackRatingWidgetsPageElements,
+    feedbackRatingWidgetAddUserConsentElements,
     widgetsDataTableElements,
     feedbackRatingWidgetDetailsPageElements,
     feedbackRatingWidgetDetailsCommentsDataTableElements,
@@ -65,6 +66,9 @@ const verifySettingsPageElements = ({
     commentText,
     isCheckedViaContact,
     viaContactText,
+    isCheckedAddConsent,
+    consentText,
+    consentItems = [],
     submitButtonText,
     thanksMessageText
 }) => {
@@ -73,7 +77,7 @@ const verifySettingsPageElements = ({
 
     cy.verifyElement({
         labelElement: feedbackRatingWidgetsPageElements.WIDGET_NAME_LABEL,
-        labelText: "surveys.drawer.internal.name",
+        labelText: "surveys.drawer.internal.name", //TODO: Will be updated after SER-2121 fixed  
         element: feedbackRatingWidgetsPageElements.WIDGET_NAME_INPUT,
         value: widgetName,
         elementPlaceHolder: "Widget Name"
@@ -138,6 +142,53 @@ const verifySettingsPageElements = ({
             value: viaContactText,
         });
     }
+
+    cy.verifyElement({
+        labelElement: feedbackRatingWidgetAddUserConsentElements().ADD_USER_CONSENT_LABEL,
+        labelText: "surveys.drawer.consent", //TODO:Updated after SER-2121 fixed 
+        element: feedbackRatingWidgetAddUserConsentElements().ADD_USER_CONSENT_CHECKBOX,
+        isChecked: isCheckedAddConsent
+    });
+
+    if (isCheckedAddConsent) {
+        cy.verifyElement({
+            labelElement: feedbackRatingWidgetAddUserConsentElements().ADD_USER_CONSENT_TEXT_LABEL,
+            labelText: "Text",
+        });
+
+        cy.verifyElement({
+            element: feedbackRatingWidgetAddUserConsentElements().ADD_USER_CONSENT_TEXT_INPUT,
+            value: consentText,
+        });
+
+        cy.verifyElement({
+            labelElement: feedbackRatingWidgetAddUserConsentElements().ADD_USER_CONSENT_LINK_LABEL,
+            labelText: "Link(s)",
+            tooltipElement: feedbackRatingWidgetAddUserConsentElements().ADD_USER_CONSENT_LINK_TOOLTIP,
+            tooltipText: "Matching link texts inside the consent text are modified to be links",
+        });
+
+        cy.verifyElement({
+            element: feedbackRatingWidgetAddUserConsentElements().ADD_USER_CONSENT_CONSENT_ADD_LINK_BUTTON,
+        });
+
+        consentItems.forEach((consent, index) => {
+            const consentLinkElements = feedbackRatingWidgetAddUserConsentElements(index);
+
+            cy.verifyElement({
+                element: consentLinkElements.ADD_USER_CONSENT_CONSENT_LINKS_TEXT_INPUT,
+                value: consent.text,
+            });
+
+            cy.verifyElement({
+                element: consentLinkElements.ADD_USER_CONSENT_CONSENT_LINKS_URL_INPUT,
+                value: consent.link,
+            });
+        });
+    }
+
+    cy.scrollPageToBottom('.cly-vue-drawer__steps-container.is-multi-step');
+
     cy.verifyElement({
         labelElement: feedbackRatingWidgetsPageElements.BUTTON_CALLOUT_LABEL,
         labelText: "Button Callout",
@@ -449,6 +500,22 @@ const typeContactViaCheckboxLabelText = (email) => {
     cy.typeInput(feedbackRatingWidgetsPageElements.CONTACT_VIA_INPUT, email);
 };
 
+const clickAddUserConsentCheckbox = () => {
+    cy.clickElement(feedbackRatingWidgetAddUserConsentElements().ADD_USER_CONSENT_CHECKBOX);
+};
+
+const typeAddUserConsentText = (text) => {
+    cy.typeInput(feedbackRatingWidgetAddUserConsentElements().ADD_USER_CONSENT_TEXT_INPUT, text);
+};
+
+const typeAddUserConsentLinkText = (index, text) => {
+    cy.typeInput(feedbackRatingWidgetAddUserConsentElements(index).ADD_USER_CONSENT_CONSENT_LINKS_TEXT_INPUT, text);
+};
+
+const typeAddUserConsentLinkUrl = (index, link) => {
+    cy.typeInput(feedbackRatingWidgetAddUserConsentElements(index).ADD_USER_CONSENT_CONSENT_LINKS_URL_INPUT, link);
+};
+
 const typeButtonCallOut = (buttonText) => {
     cy.typeInput(feedbackRatingWidgetsPageElements.BUTTON_CALLOUT_INPUT, buttonText);
 };
@@ -681,6 +748,8 @@ const verifyPreviewRatingsPopUpElements = ({
     commentCheckboxLabelText,
     isCheckedViaContact,
     viaContactCheckboxLabelText,
+    isCheckedAddConsent = false,
+    consentText,
     submitButtonText,
     submitButtonColor,
     submitButtonFontColor,
@@ -733,6 +802,16 @@ const verifyPreviewRatingsPopUpElements = ({
         isChecked: isCheckedViaContact
     });
 
+    if (isCheckedAddConsent) {
+        cy.verifyElement({
+            labelElement: feedbackRatingWidgetsPageElements.RATINGS_POPUP_CONSENT_LABEL,
+            labelText: consentText,
+            element: feedbackRatingWidgetsPageElements.RATINGS_POPUP_CONSENT_CHECKBOX,
+            attr: "checked",
+            attrText: "checked",
+        });
+    }
+
     cy.verifyElement({
         element: feedbackRatingWidgetsPageElements.RATINGS_POPUP_SUBMIT_BUTTON,
         elementText: submitButtonText,
@@ -1125,6 +1204,10 @@ module.exports = {
     typeAddCommentCheckboxLabelText,
     clickContactViaCheckbox,
     typeContactViaCheckboxLabelText,
+    clickAddUserConsentCheckbox,
+    typeAddUserConsentText,
+    typeAddUserConsentLinkText,
+    typeAddUserConsentLinkUrl,
     typeButtonCallOut,
     typeThanksMessage,
     selectRatingSymbol,