@coveo/quantic 3.12.1 → 3.13.0

package/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',
 };

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

@@ -2,10 +2,10 @@
   <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>
@@ -13,7 +13,7 @@
     <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>

package/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>

package/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>

package/force-app/main/default/lwc/quanticGeneratedAnswer/e2e/data.ts

@@ -3,7 +3,7 @@ const genQaMarkdownTextPayload = {
   payloadType: 'genqa.messageType',
   payload: JSON.stringify({
     textDelta:
-      'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+      'THIS IS SOME LOREM IPSUM: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan felis vel nulla venenatis, vel volutpat mauris suscipit. Praesent aliquam, ex et dapibus fermentum, ligula metus condimentum nunc, non vehicula magna magna a nulla. Integer efficitur nunc eget semper facilisis. Quisque nec tortor at nunc blandit dictum sit amet vel mauris. Duis at tellus sit amet mi pharetra tincidunt. Nullam id risus eget risus accumsan molestie ac quis velit. Vivamus consectetur nisi vel enim finibus, nec laoreet risus facilisis. Integer a lacinia ligula. Etiam cursus urna nisi, ut tincidunt elit consectetur quis. Pellentesque nec sem vel neque malesuada euismod vitae nec augue. Suspendisse non ligula eu purus posuere dictum quis et magna. Curabitur dignissim, magna non feugiat consectetur, lorem orci fringilla sapien, sit amet vehicula eros nulla eget enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan felis vel nulla venenatis, vel volutpat mauris suscipit. Praesent aliquam, ex et dapibus fermentum, ligula metus condimentum nunc, non vehicula magna magna a nulla. Integer efficitur nunc eget semper facilisis. Quisque nec tortor at nunc blandit dictum sit amet vel mauris. Duis at tellus sit amet mi pharetra tincidunt. Nullam id risus eget risus accumsan molestie ac quis velit. Vivamus consectetur nisi vel enim finibus, nec laoreet risus facilisis. Integer a lacinia ligula. Etiam cursus urna nisi, ut tincidunt elit consectetur quis. Pellentesque nec sem vel neque malesuada euismod vitae nec augue. Suspendisse non ligula eu purus posuere dictum quis et magna. Curabitur dignissim, magna non feugiat consectetur, lorem orci fringilla sapien, sit amet vehicula eros nulla eget enim.',
   }),
   finishReason: 'COMPLETED',
 };

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

@@ -63,6 +63,10 @@ export class GeneratedAnswerObject {
       .locator('.citation__link');
   }
 
+  get showMoreButton(): Locator {
+    return this.page.getByTestId('generated-answer__answer-toggle');
+  }
+
   async hoverOverCitation(index: number): Promise<void> {
     // waiting 500ms to allow the component to render completely, cause any re-rendering abort the hover action.
     await this.page.waitForTimeout(500);

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

@@ -1,4 +1,4 @@
-import {testSearch, testInsight} from './fixture';
+import {testSearch, testInsight, expect} from './fixture';
 import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
 import genQaData from './data';
 
@@ -174,5 +174,26 @@ useCaseTestCases.forEach((useCase) => {
         });
       });
     });
+
+    test.describe('when the answer is generated in a single shot and the answer exceeds the maximum height', () => {
+      test.use({
+        options: {
+          collapsible: true,
+        },
+      });
+      test('should display the answer as collapsed', async ({
+        generatedAnswer,
+      }) => {
+        const expectedShowMoreLabel = 'Show more';
+        await generatedAnswer.waitForStreamEndUaAnalytics();
+
+        const showMoreButton = generatedAnswer.showMoreButton;
+        expect(showMoreButton).not.toBeNull();
+
+        const showMoreButtonLabel = await showMoreButton.textContent();
+        expect(showMoreButtonLabel).not.toBeNull();
+        expect(showMoreButtonLabel).toEqual(expectedShowMoreLabel);
+      });
+    });
   });
 });

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

@@ -151,13 +151,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
   renderedCallback() {
     initializeWithHeadless(this, this.engineId, this.initialize);
     if (this.collapsible) {
-      // If we are still streaming add a little extra height to the answer element to account for the next answer chunk.
-      // This helps a lot with the jankyness of the answer fading out when the chunk is close but not yet over the max height.
-      const answerElementHeight = this.isStreaming
-        ? this.generatedAnswerElementHeight + 50
-        : this.generatedAnswerElementHeight;
-      this._exceedsMaximumHeight =
-        answerElementHeight > this._maximumAnswerHeight;
+      this._exceedsMaximumHeight = this.isMaximumHeightExceeded();
     }
   }
 
@@ -224,6 +218,16 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     }
   }
 
+  isMaximumHeightExceeded() {
+    // If we are still streaming add a little extra height to the answer element to account for the next answer chunk.
+    // This helps a lot with the jankyness of the answer fading out when the chunk is close but not yet over the max height.
+    const answerElementHeight = this.isStreaming
+      ? this.generatedAnswerElementHeight + 50
+      : this.generatedAnswerElementHeight;
+
+    return answerElementHeight > this._maximumAnswerHeight;
+  }
+
   getGeneratedAnswerStatus() {
     if (!this.state.isVisible) {
       return this.labels.generatedAnswerIsHidden;
@@ -348,6 +352,14 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     }
   };
 
+  handleAnswerContentUpdated = (event) => {
+    event.stopPropagation();
+    if (this.collapsible) {
+      this._exceedsMaximumHeight = this.isMaximumHeightExceeded();
+    }
+    this.updateGeneratedAnswerCSSVariables();
+  };
+
   handleToggleCollapseAnswer() {
     this.state?.expanded
       ? this.generatedAnswer.collapse()

package/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html

@@ -53,6 +53,7 @@
               answer-content-format={answerContentFormat}
               answer={answer}
               is-streaming={isStreaming}
+              onquantic__answercontentupdated={handleAnswerContentUpdated}
               data-cy="generated-answer__content"
             >
             </c-quantic-generated-answer-content>

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

@@ -11,6 +11,7 @@ import generatedTextContentTemplate from './templates/generatedTextContent.html'
 /**
  * The `QuanticGeneratedAnswerContent` component displays the generated answer content.
  * @category Internal
+ * @fires CustomEvent#quantic__answercontentupdated
  * @example
  * <c-quantic-generated-answer-content answer-content-format={answerContentFormat} answer={answer} is-streaming={isStreaming}></c-quantic-generated-answer-content>
  */
@@ -110,6 +111,7 @@ export default class QuanticGeneratedAnswerContent extends LightningElement {
     else {
       answerContainer.textContent = this.answer;
     }
+    this.dispatchEvent(new CustomEvent('quantic__answercontentupdated'));
   }
 
   get generatedAnswerContentClass() {

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

@@ -0,0 +1,357 @@
+/* eslint-disable jest/no-conditional-expect */
+/* eslint-disable no-import-assign */
+import QuanticSmartSnippet from '../quanticSmartSnippet';
+// @ts-ignore
+import {createElement} from 'lwc';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+
+let mockAnswerHeight = 300;
+
+jest.mock('c/quanticHeadlessLoader');
+jest.mock('c/quanticUtils', () => ({
+  getAbsoluteHeight: jest.fn(() => {
+    return mockAnswerHeight;
+  }),
+  I18nUtils: {
+    format: jest.fn(),
+  },
+  LinkUtils: {
+    bindAnalyticsToLink: jest.fn(),
+  },
+}));
+
+jest.mock(
+  '@salesforce/label/c.quantic_SmartSnippetShowMore',
+  () => ({default: 'Show more'}),
+  {
+    virtual: true,
+  }
+);
+
+jest.mock(
+  '@salesforce/label/c.quantic_SmartSnippetShowLess',
+  () => ({default: 'Show less'}),
+  {
+    virtual: true,
+  }
+);
+
+let isInitialized = false;
+
+const exampleEngine = {
+  id: 'exampleEngineId',
+};
+
+const defaultOptions = {
+  engineId: exampleEngine.id,
+};
+
+const selectors = {
+  initializationError: 'c-quantic-component-error',
+  smartSnippet: 'c-quantic-smart-snippet',
+  smartSnippetAnswer: 'c-quantic-smart-snippet-answer',
+  smartSnippetToggleButton: '[data-testid="smart-snippet__toggle-button"]',
+  smartSnippetSource: 'c-quantic-smart-snippet-source',
+  smartSnippetFeedback: 'c-quantic-feedback',
+};
+
+const defaultSearchStatusState = {
+  hasResults: true,
+  firstSearchExecuted: true,
+};
+
+let searchStatusState = defaultSearchStatusState;
+
+const mockSmartSnippetSource = {
+  title: 'The Lord of the Rings',
+  uri: 'https://en.wikipedia.org/wiki/The_Lord_of_the_Rings',
+};
+
+const defaultSmartSnippetState = {
+  question: 'Where was Gondor when Westfold fell?',
+  answer: 'Gondor was obviously busy with other things.',
+  documentId: '1',
+  expanded: false,
+  answerFound: true,
+  liked: false,
+  disliked: false,
+  feedbackModalOpen: false,
+  source: mockSmartSnippetSource,
+};
+
+let smartSnippetState = defaultSmartSnippetState;
+
+const functionsMocks = {
+  buildSmartSnippet: jest.fn(() => ({
+    state: smartSnippetState,
+    subscribe: functionsMocks.smartSnippetStateSubscriber,
+    expand: functionsMocks.expand,
+    collapse: functionsMocks.collapse,
+  })),
+  buildSearchStatus: jest.fn(() => ({
+    state: searchStatusState,
+    subscribe: functionsMocks.searchStatusStateSubscriber,
+  })),
+  smartSnippetStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.smartSnippetStateUnsubscriber;
+  }),
+  searchStatusStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.searchStatusStateUnsubscriber;
+  }),
+  smartSnippetStateUnsubscriber: jest.fn(),
+  searchStatusStateUnsubscriber: jest.fn(),
+  expand: jest.fn(),
+  collapse: jest.fn(),
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-smart-snippet', {
+    is: QuanticSmartSnippet,
+  });
+  for (const [key, value] of Object.entries(options)) {
+    element[key] = value;
+  }
+  document.body.appendChild(element);
+  return element;
+}
+
+// Helper function to wait until the microtask queue is empty.
+function flushPromises() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildSmartSnippet: functionsMocks.buildSmartSnippet,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
+    };
+  };
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticSmartSnippet && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticSmartSnippet) {
+      element.setInitializationError();
+    }
+  };
+}
+
+function cleanup() {
+  // The jsdom instance is shared across test cases in a single file so reset the DOM
+  while (document.body.firstChild) {
+    document.body.removeChild(document.body.firstChild);
+  }
+  jest.clearAllMocks();
+  isInitialized = false;
+}
+
+describe('c-quantic-smart-snippet', () => {
+  afterEach(() => {
+    smartSnippetState = defaultSmartSnippetState;
+    searchStatusState = defaultSearchStatusState;
+    cleanup();
+  });
+
+  describe('controller initialization', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should build the smart snippet controller with the proper parameters and subscribe to its state change', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildSmartSnippet).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSmartSnippet).toHaveBeenCalledWith(
+        exampleEngine
+      );
+      expect(functionsMocks.smartSnippetStateSubscriber).toHaveBeenCalledTimes(
+        1
+      );
+    });
+
+    it('should build the search status controller with the proper parameters and subscribe to its state change', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledWith(
+        exampleEngine
+      );
+      expect(functionsMocks.searchStatusStateSubscriber).toHaveBeenCalledTimes(
+        1
+      );
+    });
+  });
+
+  describe('when an initialization error occurs', () => {
+    beforeEach(() => {
+      mockErroneousHeadlessInitialization();
+    });
+
+    it('should display the initialization error component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const initializationError = element.shadowRoot.querySelector(
+        selectors.initializationError
+      );
+
+      expect(initializationError).not.toBeNull();
+    });
+  });
+
+  describe('when the query does not return a smart snippet', () => {
+    beforeAll(() => {
+      smartSnippetState = {...defaultSmartSnippetState, answerFound: false};
+    });
+    it('should not display the smart snippet component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const smartSnippet = element.shadowRoot.querySelector(
+        selectors.smartSnippet
+      );
+      expect(smartSnippet).toBeNull();
+    });
+  });
+
+  describe('when the query returns a smart snippet', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+      smartSnippetState = defaultSmartSnippetState;
+    });
+
+    afterEach(() => {
+      smartSnippetState = defaultSmartSnippetState;
+    });
+
+    it('should properly display the smart snippet', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const smartSnippetAnswer = element.shadowRoot.querySelector(
+        selectors.smartSnippetAnswer
+      );
+
+      expect(smartSnippetAnswer).not.toBeNull();
+      expect(smartSnippetAnswer.answer).toEqual(smartSnippetState.answer);
+
+      const smartSnippetSource = element.shadowRoot.querySelector(
+        selectors.smartSnippetSource
+      );
+      expect(smartSnippetSource).not.toBeNull();
+      expect(smartSnippetSource.source).toEqual(smartSnippetState.source);
+
+      const smartSnippetFeedback = element.shadowRoot.querySelector(
+        selectors.smartSnippetFeedback
+      );
+      expect(smartSnippetFeedback).not.toBeNull();
+    });
+
+    describe('when the smart snippet exceeds the maximum height', () => {
+      describe('when the smart snippet is collapsed', () => {
+        it('should properly display the toggle button of the smart snippet component', async () => {
+          const expectedShowMoreLabel = 'Show more';
+          const expectedShowMoreIcon = 'utility:chevrondown';
+          const element = createTestComponent();
+          await flushPromises();
+
+          const smartSnippetToggleButton = element.shadowRoot.querySelector(
+            selectors.smartSnippetToggleButton
+          );
+
+          expect(smartSnippetToggleButton).not.toBeNull();
+          expect(smartSnippetToggleButton.label).toBe(expectedShowMoreLabel);
+          expect(smartSnippetToggleButton.iconName).toBe(expectedShowMoreIcon);
+        });
+
+        describe('when clicking on the smart snippet toggle button', () => {
+          it('should call the expand method from the smartSnippet controller', async () => {
+            const element = createTestComponent();
+            await flushPromises();
+
+            const smartSnippetToggleButton = element.shadowRoot.querySelector(
+              selectors.smartSnippetToggleButton
+            );
+            expect(smartSnippetToggleButton).not.toBeNull();
+
+            await smartSnippetToggleButton.click();
+            await flushPromises();
+
+            expect(functionsMocks.expand).toHaveBeenCalledTimes(1);
+          });
+        });
+      });
+
+      describe('when the smart snippet is expanded', () => {
+        beforeEach(() => {
+          smartSnippetState = {...defaultSmartSnippetState, expanded: true};
+        });
+
+        it('should properly display the smart snippet component', async () => {
+          const expectedShowLessLabel = 'Show less';
+          const expectedShowLessIcon = 'utility:chevronup';
+          const element = createTestComponent();
+          await flushPromises();
+
+          const smartSnippetToggleButton = element.shadowRoot.querySelector(
+            selectors.smartSnippetToggleButton
+          );
+          expect(smartSnippetToggleButton).not.toBeNull();
+          expect(smartSnippetToggleButton.label).toBe(expectedShowLessLabel);
+          expect(smartSnippetToggleButton.iconName).toBe(expectedShowLessIcon);
+        });
+
+        describe('when clicking on the smart snippet toggle button', () => {
+          it('should call the collapse method from the smartSnippet controller', async () => {
+            const element = createTestComponent();
+            await flushPromises();
+
+            const smartSnippetToggleButton = element.shadowRoot.querySelector(
+              selectors.smartSnippetToggleButton
+            );
+
+            await smartSnippetToggleButton.click();
+            await flushPromises();
+
+            expect(functionsMocks.collapse).toHaveBeenCalledTimes(1);
+          });
+        });
+      });
+    });
+
+    describe('when interacting with the feedback modal', () => {
+      describe('when trying to open the feedback modal after executing the same query', () => {
+        // eslint-disable-next-line jest/no-disabled-tests, jest/expect-expect
+        it.skip('should not open the feedback modal', async () => {
+          // TODO: Implement this test - SFINT-5933
+        });
+      });
+
+      describe('when trying to open the feedback modal after executing a query that gave a new answer', () => {
+        // eslint-disable-next-line jest/no-disabled-tests, jest/expect-expect
+        it.skip('should open the feedback modal', async () => {
+          // TODO: Implement this test - SFINT-5933
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,30 @@
+const exampleQuestion = 'Where was Gondor when the Westfold fell?';
+const exampleAnswerSnippet = `<a href="#">Gondor</a> was on the brink of destruction when the Westfold fell. Gondor did not come to Rohan's aid when the Westfold fell because it was overwhelmed by its own dire circumstances and unable to spare resources or manpower. The alliance between the two kingdoms, forged by the Oath of Eorl, was based on a promise of mutual defense in times of extreme need. However, by the time of the War of the Ring, Gondor was facing unprecedented threats from Sauron, whose forces in Mordor were massing for a full-scale assault on Minas Tirith. The Steward of Gondor, Denethor II, was deeply concerned about the security of his own kingdom and could not afford to weaken its defenses to send aid across the vast distances that separated Gondor from the Westfold. Even if assistance had been feasible, the logistical challenge of moving troops through potentially hostile territory would have delayed their arrival, rendering their efforts ineffective. Moreover, the threat to Rohan came not only from Sauron's influence but also from the unexpected betrayal of Saruman, who, until then, had been perceived as an ally. His treachery, combined with the swiftness and brutality of his attacks, left Rohan vulnerable and isolated, as neither Rohan nor Gondor had anticipated such aggression from Isengard. While the alliance between the two realms remained strong in spirit, Gondor's immediate need to safeguard its own survival against the growing shadow of Mordor took precedence, leaving Rohan to fend for itself during the fall of the Westfold.`;
+const exampleScore = 0.42;
+const exampleContentIdKey = 'permanentid';
+const mockPermanentId = '1234';
+const exampleContentIdValue = mockPermanentId;
+
+export type QuestionAnswerData = {
+  answerFound: boolean;
+  question: string;
+  answerSnippet: string;
+  documentId: {
+    contentIdKey: string;
+    contentIdValue: string;
+  };
+  score: number;
+};
+
+const smartSnippetData: QuestionAnswerData = {
+  answerFound: true,
+  question: exampleQuestion,
+  answerSnippet: exampleAnswerSnippet,
+  documentId: {
+    contentIdKey: exampleContentIdKey,
+    contentIdValue: exampleContentIdValue,
+  },
+  score: exampleScore,
+};
+
+export default smartSnippetData;

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

@@ -0,0 +1,87 @@
+import {SmartSnippetObject} from './pageObject';
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import type {QuestionAnswerData} from './data';
+import smartSnippetData from './data';
+
+const pageUrl = 's/quantic-smart-snippet';
+
+interface SmartSnippetOptions {
+  maximumSnippetHeight: number;
+}
+
+type QuanticSmartSnippetE2ESearchFixtures = {
+  smartSnippetData: QuestionAnswerData;
+  smartSnippet: SmartSnippetObject;
+  search: SearchObject;
+  options: Partial<SmartSnippetOptions>;
+};
+
+type QuanticSmartSnippetE2EInsightFixtures =
+  QuanticSmartSnippetE2ESearchFixtures & {
+    insightSetup: InsightSetupObject;
+  };
+
+export const testSearch =
+  quanticBase.extend<QuanticSmartSnippetE2ESearchFixtures>({
+    smartSnippetData,
+    options: {},
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, searchRequestRegex));
+    },
+    smartSnippet: async (
+      {page, options, configuration, search, smartSnippetData: data},
+      use
+    ) => {
+      const smartSnippetObject = new SmartSnippetObject(page);
+
+      await page.goto(pageUrl);
+      await search.mockSearchWithSmartSnippetResponse(data);
+
+      configuration.configure(options);
+      await search.waitForSearchResponse();
+      await use(smartSnippetObject);
+    },
+  });
+
+export const testInsight =
+  quanticBase.extend<QuanticSmartSnippetE2EInsightFixtures>({
+    smartSnippetData,
+    options: {},
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, insightSearchRequestRegex));
+    },
+    insightSetup: async ({page}, use) => {
+      await use(new InsightSetupObject(page));
+    },
+    smartSnippet: async (
+      {
+        page,
+        options,
+        search,
+        configuration,
+        insightSetup,
+        smartSnippetData: data,
+      },
+      use
+    ) => {
+      const smartSnippetObject = new SmartSnippetObject(page);
+
+      await page.goto(pageUrl);
+      await search.mockSearchWithSmartSnippetResponse(data);
+
+      configuration.configure({...options, useCase: useCaseEnum.insight});
+      await insightSetup.waitForInsightInterfaceInitialization();
+      await search.performSearch();
+      await search.waitForSearchResponse();
+      await use(smartSnippetObject);
+    },
+  });
+
+export {expect} from '@playwright/test';