feat(quantic): Smart Snippets E2E Cypress to Playwright + unit tests …

…Migration (#4785) [SFINT-5790](https://coveord.atlassian.net/browse/SFINT-5790) ## IN THIS PR: ### Quantic Smart Snippet component: - Added unit tests for the `quanticSmartSnippet` component - Added Playwright E2E tests for the `quanticSmartSnippet` component ### UNIT TESTS: <img width="850" alt="image" src="https://github.com/user-attachments/assets/8379a5c1-9f01-4453-b924-3d44fc2b2537" /> ### E2E PLAYWRIGHT TESTS: <img width="964" alt="Screenshot 2025-01-13 at 4 02 43 PM" src="https://github.com/user-attachments/assets/b385a80e-a66a-4449-bc67-295fa44889f9" /> <img width="964" alt="Screenshot 2025-01-13 at 4 02 10 PM" src="https://github.com/user-attachments/assets/0add7255-c7ee-4f63-b018-3cca2f55332f" /> [SFINT-5790]: https://coveord.atlassian.net/browse/SFINT-5790?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Etienne Rocheleau <[email protected]>
coveo · Jan 17, 2025 · 240f26e · 240f26e
1 parent 5276f60
commit 240f26e
Show file tree

Hide file tree

Showing 17 changed files with 846 additions and 27 deletions.
diff --git a/packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer-selectors.ts b/packages/quantic/cypress/e2e/default-2/generatedAnswer/generated-answer-selectors.ts
@@ -43,11 +43,11 @@ export const GeneratedAnswerSelectors: GeneratedAnswerSelector = {
     GeneratedAnswerSelectors.get().find('[data-cy="generated-answer__answer"]'),
   likeButton: () =>
     GeneratedAnswerSelectors.get().find(
-      '[data-cy="generated-answer__feedback"] c-quantic-stateful-button[data-cy="feedback__like-button"] button'
+      '[data-cy="generated-answer__feedback"] c-quantic-stateful-button[data-testid="feedback__like-button"] button'
     ),
   dislikeButton: () =>
     GeneratedAnswerSelectors.get().find(
-      '[data-cy="generated-answer__feedback"] c-quantic-stateful-button[data-cy="feedback__dislike-button"] button'
+      '[data-cy="generated-answer__feedback"] c-quantic-stateful-button[data-testid="feedback__dislike-button"] button'
     ),
   citations: () =>
     GeneratedAnswerSelectors.get().find(
@@ -84,7 +84,7 @@ export const GeneratedAnswerSelectors: GeneratedAnswerSelector = {
     ),
   feedbackCancelButton: () =>
     GeneratedAnswerSelectors.feedbackModal().find(
-      '[data-cy="feedback-modal-footer__cancel"]'
+      '[data-testid="feedback-modal-footer__cancel"]'
     ),
   feedbackDoneButton: () =>
     GeneratedAnswerSelectors.feedbackModal().find(

diff --git a/...ic/cypress/e2e/default-2/smart-snippet-suggestions/smart-snippet-suggestions-selectors.ts b/...ic/cypress/e2e/default-2/smart-snippet-suggestions/smart-snippet-suggestions-selectors.ts
@@ -30,11 +30,11 @@ export const SmartSnippetSuggestionsSelectors: SmartSnippetSuggestionsSelector =
         .eq(index),
     smartSnippetSuggestionsSourceUri: (index: number) =>
       SmartSnippetSuggestionsSelectors.get()
-        .find('[data-cy="smart-snippet__source-uri"]')
+        .find('[data-testid="smart-snippet__source-uri"]')
         .eq(index),
     smartSnippetSuggestionsSourceTitle: (index: number) =>
       SmartSnippetSuggestionsSelectors.get()
-        .find('[data-cy="smart-snippet__source-title"]')
+        .find('[data-testid="smart-snippet__source-title"]')
         .eq(index),
     smartSnippetSuggestionsInlineLink: (index: number) =>
       SmartSnippetSuggestionsSelectors.get()

diff --git a/packages/quantic/cypress/e2e/default-2/smart-snippet/smart-snippet-selectors.ts b/packages/quantic/cypress/e2e/default-2/smart-snippet/smart-snippet-selectors.ts
@@ -31,11 +31,17 @@ export const SmartSnippetSelectors: SmartSnippetSelector = {
   smartSnippetAnswer: () =>
     SmartSnippetSelectors.get().find('[data-cy="smart-snippet-answer"]'),
   smartSnippetSourceUri: () =>
-    SmartSnippetSelectors.get().find('[data-cy="smart-snippet__source-uri"]'),
+    SmartSnippetSelectors.get().find(
+      '[data-testid="smart-snippet__source-uri"]'
+    ),
   smartSnippetSourceTitle: () =>
-    SmartSnippetSelectors.get().find('[data-cy="smart-snippet__source-title"]'),
+    SmartSnippetSelectors.get().find(
+      '[data-testid="smart-snippet__source-title"]'
+    ),
   smartSnippetAnswerToggle: () =>
-    SmartSnippetSelectors.get().find('[data-cy="smart-snippet-answer-toggle"]'),
+    SmartSnippetSelectors.get().find(
+      '[data-testid="smart-snippet__toggle-button"]'
+    ),
   smartSnippetExpandableAnswer: () =>
     SmartSnippetSelectors.get().find(
       '[data-cy="expandable-smart-snippet-answer"]'
@@ -45,19 +51,25 @@ export const SmartSnippetSelectors: SmartSnippetSelector = {
       '[data-cy="smart-snippet__inline-link"] > a'
     ),
   smartSnippetLikeButton: () =>
-    SmartSnippetSelectors.get().find('[data-cy="feedback__like-button"]'),
+    SmartSnippetSelectors.get().find('[data-testid="feedback__like-button"]'),
   smartSnippetDislikeButton: () =>
-    SmartSnippetSelectors.get().find('[data-cy="feedback__dislike-button"]'),
+    SmartSnippetSelectors.get().find(
+      '[data-testid="feedback__dislike-button"]'
+    ),
   smartSnippetExplainWhyButton: () =>
     SmartSnippetSelectors.get().find(
-      '[data-cy="feedback__explain-why-button"]'
+      '[data-testid="feedback__explain-why-button"]'
     ),
   feedbackOption: (index: number) =>
     cy.get('lightning-modal').find('lightning-radio-group input').eq(index),
   feedbackSubmitButton: () =>
-    cy.get('lightning-modal').find('[data-cy="feedback-modal-footer__submit"]'),
+    cy
+      .get('lightning-modal')
+      .find('[data-testid="feedback-modal-footer__submit"]'),
   feedbackCancelButton: () =>
-    cy.get('lightning-modal').find('[data-cy="feedback-modal-footer__cancel"]'),
+    cy
+      .get('lightning-modal')
+      .find('[data-testid="feedback-modal-footer__cancel"]'),
   feedbackDoneButton: () =>
     cy.get('lightning-modal').find('[data-cy="feedback-modal-footer__done"]'),
   feedbackDetailsInput: () =>

diff --git a/...ages/quantic/force-app/main/default/lwc/quanticFeedback/__tests__/quanticFeedback.test.js b/...ages/quantic/force-app/main/default/lwc/quanticFeedback/__tests__/quanticFeedback.test.js
@@ -34,9 +34,9 @@ jest.mock(
 
 const selectors = {
   feedbackQuestion: '.feedback__question',
-  likeButton: 'c-quantic-stateful-button[data-cy="feedback__like-button"]',
+  likeButton: 'c-quantic-stateful-button[data-testid="feedback__like-button"]',
   dislikeButton:
-    'c-quantic-stateful-button[data-cy="feedback__dislike-button"]',
+    'c-quantic-stateful-button[data-testid="feedback__dislike-button"]',
   successMessage: '.feedback__success-message',
   explainWhyButton: '.feedback__explain-why',
 };

diff --git a/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.html b/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.html
@@ -2,18 +2,18 @@
   <div class="slds-grid feedback__main-section">
     <span class="slds-var-p-right_small slds-text-color_weak feedback__question"
       id="feedback__question">{question}</span>
-    <c-quantic-stateful-button selected={liked} data-cy="feedback__like-button" tooltip={likeLabel}
+    <c-quantic-stateful-button selected={liked} data-testid="feedback__like-button" tooltip={likeLabel}
       icon-name={likeIconName} onquantic__select={handleLike} onquantic__deselect={handleLike} without-borders selected-state-color="#2e844a"
       label={likeButtonLabel} icon-size={size}></c-quantic-stateful-button>
-    <c-quantic-stateful-button selected={disliked} data-cy="feedback__dislike-button" tooltip={dislikeLabel}
+    <c-quantic-stateful-button selected={disliked} data-testid="feedback__dislike-button" tooltip={dislikeLabel}
       icon-name={dislikeIconName} onquantic__select={handleDislike} onquantic__deselect={handleDislike} without-borders selected-state-color="#ea001e"
       label={dislikeButtonLabel} icon-size={size}></c-quantic-stateful-button>
   </div>
   <template if:true={displaySuccessMessage}>
     <div class="slds-grid feedback__success-message">
       <span class="slds-var-p-vertical_x-small">{successMessage}</span>
       <template if:false={hideExplainWhyButton}>
-        <lightning-button data-cy="feedback__explain-why-button" class="slds-var-m-left_x-small feedback__explain-why"
+        <lightning-button data-testid="feedback__explain-why-button" class="slds-var-m-left_x-small feedback__explain-why"
           variant="base" label={labels.explainWhy} onclick={handlePressExplainWhyButton}></lightning-button>
       </template>
     </div>

diff --git a/packages/quantic/force-app/main/default/lwc/quanticFeedbackModal/error.html b/packages/quantic/force-app/main/default/lwc/quanticFeedbackModal/error.html
@@ -3,7 +3,7 @@
     <div data-cy="feedback-modal-body__error" class="error-message slds-text-color_destructive">{error}</div>
   </lightning-modal-body>
   <lightning-modal-footer>
-    <lightning-button data-cy="feedback-modal-footer__cancel" class="slds-button" variant="neutral"
+    <lightning-button data-testid="feedback-modal-footer__cancel" class="slds-button" variant="neutral"
       label={labels.cancel} onclick={closeModal}></lightning-button>
   </lightning-modal-footer>
 </template>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFeedbackModal/feedbackForm.html b/packages/quantic/force-app/main/default/lwc/quanticFeedbackModal/feedbackForm.html
@@ -15,9 +15,9 @@
       </div>
     </lightning-modal-body>
     <lightning-modal-footer>
-      <lightning-button data-cy="feedback-modal-footer__cancel" class="slds-button" variant="neutral" label={labels.cancel}
+      <lightning-button data-testid="feedback-modal-footer__cancel" class="slds-button" variant="neutral" label={labels.cancel}
         onclick={closeModal}></lightning-button>
-      <lightning-button data-cy="feedback-modal-footer__submit" class="slds-button slds-m-left_x-small feedback-modal-footer__submit" variant="brand"
+      <lightning-button data-testid="feedback-modal-footer__submit" class="slds-button slds-m-left_x-small feedback-modal-footer__submit" variant="brand"
         label={labels.sendFeedback} onclick={handleSubmitFeedback}></lightning-button>
     </lightning-modal-footer>
   </template>