@coveo/quantic 3.12.1 → 3.13.1

package/force-app/main/default/lwc/quanticSmartSnippet/e2e/pageObject.ts

@@ -0,0 +1,188 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {
+  isUaClickEvent,
+  isUaCustomEvent,
+} from '../../../../../../playwright/utils/requests';
+
+export class SmartSnippetObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get smartSnippet(): Locator {
+    return this.page.locator('c-quantic-smart-snippet');
+  }
+
+  get smartSnippetSourceTitle(): Locator {
+    return this.page.getByTestId('smart-snippet__source-title');
+  }
+
+  get smartSnippetSourceUri(): Locator {
+    return this.page.getByTestId('smart-snippet__source-uri');
+  }
+
+  get smartSnippetAnwerInlineLink(): Locator {
+    return this.page.locator('.smart-snippet-answer a');
+  }
+
+  get smartSnippetToggleButton(): Locator {
+    return this.page.getByTestId('smart-snippet__toggle-button');
+  }
+
+  get likeButton(): Locator {
+    return this.page.getByTestId('feedback__like-button');
+  }
+
+  get dislikeButton(): Locator {
+    return this.page.getByTestId('feedback__dislike-button');
+  }
+
+  get explainWhyButton(): Locator {
+    return this.page.getByTestId('feedback__explain-why-button');
+  }
+
+  get feedbackModalCancelButton(): Locator {
+    return this.page.getByTestId('feedback-modal-footer__cancel');
+  }
+
+  get firstFeedbackOptionLabel(): Locator {
+    const labelFirstOption = "Didn't answer my question at all";
+    return this.page.getByText(labelFirstOption);
+  }
+
+  get feedbackSubmitButton(): Locator {
+    return this.page.getByTestId('feedback-modal-footer__submit');
+  }
+
+  async clickToggleButton(): Promise<void> {
+    await this.smartSnippetToggleButton.click();
+  }
+
+  async clickOnSourceTitle(): Promise<void> {
+    await this.smartSnippetSourceTitle.click();
+  }
+
+  async clickOnSourceUri(): Promise<void> {
+    await this.smartSnippetSourceUri.click();
+  }
+
+  async clickOnFirstInlineLink(): Promise<void> {
+    await this.smartSnippetAnwerInlineLink.first().click();
+  }
+
+  async clickLikeButton(): Promise<void> {
+    await this.likeButton.click();
+  }
+
+  async clickDislikeButton(): Promise<void> {
+    await this.dislikeButton.click();
+  }
+
+  async clickExplainWhyButton(): Promise<void> {
+    await this.explainWhyButton.click();
+  }
+
+  async clickFeedbackModalCancelButton(): Promise<void> {
+    await this.feedbackModalCancelButton.click();
+  }
+
+  async selectFirstFeedbackOptionLabel(): Promise<void> {
+    await this.firstFeedbackOptionLabel.click({force: true});
+  }
+
+  async clickFeedbackSubmitButton(): Promise<void> {
+    await this.feedbackSubmitButton.click();
+  }
+
+  async waitForExpandSmartSnippetUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics('expandSmartSnippet');
+  }
+
+  async waitForCollapseSmartSnippetUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics('collapseSmartSnippet');
+  }
+
+  async waitForLikeSmartSnippetUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics('likeSmartSnippet');
+  }
+
+  async waitForDislikeSmartSnippetUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics('dislikeSmartSnippet');
+  }
+
+  async waitForOpenFeedbackModalUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics(
+      'openSmartSnippetFeedbackModal'
+    );
+  }
+
+  async waitForCloseFeedbackModalUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics(
+      'closeSmartSnippetFeedbackModal'
+    );
+  }
+
+  async waitForFeedbackSubmitUaAnalytics(
+    expectedReason: string
+  ): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics(
+      'sendSmartSnippetReason',
+      expectedReason
+    );
+  }
+
+  async waitForSmartSnippetSourceClickUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetClickUaAnalytics('openSmartSnippetSource');
+  }
+
+  async waitForSmartSnippetInlineLinkClickUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetClickUaAnalytics(
+      'openSmartSnippetInlineLink'
+    );
+  }
+
+  async waitForSmartSnippetClickUaAnalytics(
+    actionCause: string
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaClickEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const requestData = JSON.parse(requestBody.clickEvent);
+
+        const expectedFields: Record<string, any> = {
+          actionCause,
+        };
+
+        return requestData?.actionCause === expectedFields.actionCause;
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+
+  async waitForSmartSnippetCustomUaAnalytics(
+    eventValue: any,
+    reason?: string
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaCustomEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const expectedFields: Record<string, any> = {
+          eventType: 'smartSnippet',
+          eventValue: eventValue,
+        };
+
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => requestBody?.[key] === expectedFields[key]
+        );
+
+        const customData = requestBody?.customData;
+        const matchesReason = customData?.reason === reason;
+
+        return matchesExpectedFields && matchesReason;
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+}

package/force-app/main/default/lwc/quanticSmartSnippet/e2e/quanticSmartSnippet.e2e.ts

@@ -0,0 +1,118 @@
+import {testSearch, testInsight} from './fixture';
+import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
+
+const maximumSnippetHeight = 250;
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+
+  test.describe(`quantic smart snippet ${useCase.label}`, () => {
+    test.use({
+      options: {maximumSnippetHeight},
+    });
+
+    test.describe('when the smart snippet is expanded', () => {
+      test('should send the source title analytics event when the title is clicked', async ({
+        smartSnippet,
+      }) => {
+        const smartSnippetTitleClickPromise =
+          smartSnippet.waitForSmartSnippetSourceClickUaAnalytics();
+        await smartSnippet.clickOnSourceTitle();
+        await smartSnippetTitleClickPromise;
+      });
+
+      test('should send the source uri analytics event when the source uri is clicked', async ({
+        smartSnippet,
+      }) => {
+        const smartSnippetUriClickPromise =
+          smartSnippet.waitForSmartSnippetSourceClickUaAnalytics();
+        await smartSnippet.clickOnSourceUri();
+        await smartSnippetUriClickPromise;
+      });
+
+      test('should send the inline link analytics event when the inline link is clicked', async ({
+        smartSnippet,
+      }) => {
+        const smartSnippetUriClickPromise =
+          smartSnippet.waitForSmartSnippetInlineLinkClickUaAnalytics();
+        await smartSnippet.clickOnFirstInlineLink();
+        await smartSnippetUriClickPromise;
+      });
+
+      test('should send the expand and collapse analytics events', async ({
+        smartSnippet,
+      }) => {
+        const expandSmartSnippetAnalyticsPromise =
+          smartSnippet.waitForExpandSmartSnippetUaAnalytics();
+        await smartSnippet.clickToggleButton();
+        await expandSmartSnippetAnalyticsPromise;
+
+        const collapseSmartSnippetAnalyticsPromise =
+          smartSnippet.waitForCollapseSmartSnippetUaAnalytics();
+        await smartSnippet.clickToggleButton();
+        await collapseSmartSnippetAnalyticsPromise;
+      });
+    });
+
+    test.describe('feedback modal interactions', () => {
+      test.describe('when clicking on the feedback like button', () => {
+        test('should send the like analytics event', async ({smartSnippet}) => {
+          const likeAnalyticsPromise =
+            smartSnippet.waitForLikeSmartSnippetUaAnalytics();
+          await smartSnippet.clickLikeButton();
+          await likeAnalyticsPromise;
+        });
+      });
+
+      test.describe('when clicking on the feedback dislike button', () => {
+        test('should send the dislike analytics event', async ({
+          smartSnippet,
+        }) => {
+          const dislikeAnalyticsPromise =
+            smartSnippet.waitForDislikeSmartSnippetUaAnalytics();
+          await smartSnippet.clickDislikeButton();
+          await dislikeAnalyticsPromise;
+        });
+
+        test.describe('when opening the feedback modal and providing feedback', () => {
+          test('should send the smart snippet reason analytics events', async ({
+            smartSnippet,
+          }) => {
+            const expectedReason = 'does_not_answer';
+
+            const openFeedbackModalAnalyticsPromise =
+              smartSnippet.waitForOpenFeedbackModalUaAnalytics();
+            await smartSnippet.clickDislikeButton();
+            await smartSnippet.clickExplainWhyButton();
+            await openFeedbackModalAnalyticsPromise;
+
+            const submitFeedbackAnalyticsPromise =
+              smartSnippet.waitForFeedbackSubmitUaAnalytics(expectedReason);
+
+            await smartSnippet.selectFirstFeedbackOptionLabel();
+            await smartSnippet.clickFeedbackSubmitButton();
+            await submitFeedbackAnalyticsPromise;
+          });
+        });
+
+        test.describe('when closing the feedback modal', () => {
+          test('should send the correct close feedback modal analytics event', async ({
+            smartSnippet,
+          }) => {
+            await smartSnippet.clickDislikeButton();
+            await smartSnippet.clickExplainWhyButton();
+            const closeFeedbackModalAnalyticsPromise =
+              smartSnippet.waitForCloseFeedbackModalUaAnalytics();
+            await smartSnippet.clickFeedbackModalCancelButton();
+            await closeFeedbackModalAnalyticsPromise;
+          });
+        });
+      });
+    });
+  });
+});

package/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.html

@@ -16,7 +16,7 @@
             </div>
             <template if:true={snippetHeightExceedsMaxHeight}>
               <div class="slds-align_absolute-center slds-var-m-bottom_small">
-                <lightning-button data-cy="smart-snippet-answer-toggle" icon-name={toggleSmartSnippetAnswerIcon}
+                <lightning-button data-testid="smart-snippet__toggle-button" icon-name={toggleSmartSnippetAnswerIcon}
                   variant="base" label={toggleSmartSnippetAnswerLabel} title={toggleSmartSnippetAnswerLabel}
                   onclick={handleToggleSmartSnippetAnswer} icon-position="right"></lightning-button>
               </div>

package/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.js

@@ -152,8 +152,8 @@ export default class QuanticSmartSnippet extends LightningElement {
    */
   updateSmartSnippetCSSVariables() {
     const styles = this.smartSnippetAnswerElement?.style;
-    styles.setProperty('--maxHeight', `${this.maximumSnippetHeight}px`);
-    styles.setProperty(
+    styles?.setProperty('--maxHeight', `${this.maximumSnippetHeight}px`);
+    styles?.setProperty(
       '--fullHeight',
       `${this.smartSnippetAnswerElementHeight}px`
     );

package/force-app/main/default/lwc/quanticSmartSnippetSource/quanticSmartSnippetSource.html

@@ -2,13 +2,13 @@
   <div class="smart-snippet__source">
     <template lwc:if={sourceUri}>
       <div class="slds-truncate">
-        <a href={hrefValue} aria-label={ariaLabelValue} onclick={handleClick} data-cy="smart-snippet__source-uri"
+        <a href={hrefValue} aria-label={ariaLabelValue} onclick={handleClick} data-testid="smart-snippet__source-uri"
           class="slds-text-title_bold smart-snippet__source-uri" title={sourceUri} target="_blank">{sourceUri}</a>
       </div>
     </template>
     <template lwc:if={sourceTitle}>
       <div class="slds-var-m-top_xx-small">
-        <a href={hrefValue} aria-label={ariaLabelValue} onclick={handleClick} data-cy="smart-snippet__source-title"
+        <a href={hrefValue} aria-label={ariaLabelValue} onclick={handleClick} data-testid="smart-snippet__source-title"
           class="smart-snippet__source-title slds-text-heading_small" title={sourceTitle}
           target="_blank">{sourceTitle}</a>
       </div>

package/force-app/main/default/lwc/quanticTabBar/e2e/quanticTabBar.e2e.ts

@@ -48,7 +48,7 @@ useCaseTestCases.forEach((useCase) => {
       }) => {
         const tabBarElement = tabBar.tabBar;
         await tabBarElement.scrollIntoViewIfNeeded();
-        const tabs = tabBar.allVisibleTabs;
+        const tabs = tabBar.allTabs;
         expect(tabs).not.toBeNull();
         expect(await tabs.count()).toEqual(expectedNumberOfTabs);