diff --git a/package-lock.json b/package-lock.json index ace3fcb333b..2450bf91469 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ui-kit", - "version": "3.0.10", + "version": "3.0.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ui-kit", - "version": "3.0.10", + "version": "3.0.11", "hasInstallScript": true, "workspaces": [ "packages/bueno", @@ -58948,7 +58948,7 @@ }, "packages/atomic": { "name": "@coveo/atomic", - "version": "3.15.2", + "version": "3.15.3", "license": "Apache-2.0", "dependencies": { "@coveo/bueno": "1.0.7", @@ -59047,7 +59047,7 @@ "@angular/platform-browser": "18.2.13", "@angular/platform-browser-dynamic": "18.2.13", "@angular/router": "18.2.13", - "@coveo/atomic": "3.15.2", + "@coveo/atomic": "3.15.3", "rxjs": "7.8.1" }, "devDependencies": { @@ -59068,10 +59068,10 @@ }, "packages/atomic-angular/projects/atomic-angular": { "name": "@coveo/atomic-angular", - "version": "3.3.3", + "version": "3.3.4", "license": "Apache-2.0", "dependencies": { - "@coveo/atomic": "3.15.2" + "@coveo/atomic": "3.15.3" }, "engines": { "node": "^20.9.0 || ^22.11.0" @@ -59102,9 +59102,9 @@ }, "packages/atomic-react": { "name": "@coveo/atomic-react", - "version": "3.2.13", + "version": "3.2.14", "dependencies": { - "@coveo/atomic": "3.15.2", + "@coveo/atomic": "3.15.3", "@lit/react": "1.0.6", "lit": "3.2.1" }, @@ -59519,7 +59519,7 @@ "@angular/platform-browser": "18.2.13", "@angular/platform-browser-dynamic": "18.2.13", "@angular/router": "18.2.13", - "@coveo/atomic-angular": "3.3.3", + "@coveo/atomic-angular": "3.3.4", "rxjs": "7.8.1", "zone.js": "0.15.0" }, @@ -59544,8 +59544,8 @@ "name": "@coveo/atomic-next-samples", "version": "0.0.0", "dependencies": { - "@coveo/atomic": "3.15.2", - "@coveo/atomic-react": "3.2.13", + "@coveo/atomic": "3.15.3", + "@coveo/atomic-react": "3.2.14", "@coveo/headless": "3.13.2", "next": "14.2.20", "react": "18.3.1", @@ -59565,7 +59565,7 @@ "name": "@coveo/atomic-react-samples", "version": "0.0.0", "dependencies": { - "@coveo/atomic-react": "3.2.13", + "@coveo/atomic-react": "3.2.14", "@coveo/headless": "3.13.2", "react": "18.3.1", "react-dom": "18.3.1" @@ -60254,9 +60254,9 @@ "version": "0.1.0", "dependencies": { "@babel/standalone": "7.26.4", - "@coveo/atomic": "3.15.2", + "@coveo/atomic": "3.15.3", "@coveo/atomic-hosted-page": "1.0.19", - "@coveo/atomic-react": "3.2.13", + "@coveo/atomic-react": "3.2.14", "@coveo/headless": "3.13.2", "react": "18.3.1", "react-dom": "18.3.1" @@ -60274,7 +60274,7 @@ "name": "@coveo/atomic-stencil-samples", "version": "0.0.0", "dependencies": { - "@coveo/atomic": "3.15.2", + "@coveo/atomic": "3.15.3", "@coveo/bueno": "1.0.7", "@coveo/headless": "3.13.2", "@stencil/core": "4.20.0", @@ -60292,7 +60292,7 @@ "name": "@coveo/atomic-vuejs-samples", "version": "0.0.0", "dependencies": { - "@coveo/atomic": "3.15.2", + "@coveo/atomic": "3.15.3", "vue": "3.5.13" }, "devDependencies": { diff --git a/package.json b/package.json index eef4aa65096..076fe8de748 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ui-kit", "private": true, - "version": "3.0.10", + "version": "3.0.11", "scripts": { "postinstall": "husky install && patch-package && npx playwright install", "reset:install": "git checkout origin/master package-lock.json && npm i", diff --git a/packages/atomic-angular/package.json b/packages/atomic-angular/package.json index adae8b33085..3821e5bb0f0 100644 --- a/packages/atomic-angular/package.json +++ b/packages/atomic-angular/package.json @@ -20,7 +20,7 @@ "@angular/platform-browser": "18.2.13", "@angular/platform-browser-dynamic": "18.2.13", "@angular/router": "18.2.13", - "@coveo/atomic": "3.15.2", + "@coveo/atomic": "3.15.3", "rxjs": "7.8.1" }, "peerDependencies": { diff --git a/packages/atomic-angular/projects/atomic-angular/package.json b/packages/atomic-angular/projects/atomic-angular/package.json index ffd072e9ac9..c66933951fb 100644 --- a/packages/atomic-angular/projects/atomic-angular/package.json +++ b/packages/atomic-angular/projects/atomic-angular/package.json @@ -1,6 +1,6 @@ { "name": "@coveo/atomic-angular", - "version": "3.3.3", + "version": "3.3.4", "license": "Apache-2.0", "repository": { "url": "https://github.com/coveo/ui-kit" @@ -11,7 +11,7 @@ "@coveo/headless": "3.13.2" }, "dependencies": { - "@coveo/atomic": "3.15.2" + "@coveo/atomic": "3.15.3" }, "engines": { "node": "^20.9.0 || ^22.11.0" diff --git a/packages/atomic-react/package.json b/packages/atomic-react/package.json index 9a27ccbed2e..7c7c87f8f37 100644 --- a/packages/atomic-react/package.json +++ b/packages/atomic-react/package.json @@ -2,7 +2,7 @@ "name": "@coveo/atomic-react", "sideEffects": false, "type": "module", - "version": "3.2.13", + "version": "3.2.14", "description": "React specific wrapper for the Atomic component library", "repository": { "type": "git", @@ -30,7 +30,7 @@ "commerce/" ], "dependencies": { - "@coveo/atomic": "3.15.2", + "@coveo/atomic": "3.15.3", "@lit/react": "1.0.6", "lit": "3.2.1" }, diff --git a/packages/atomic/CHANGELOG.md b/packages/atomic/CHANGELOG.md index 2b4bc641724..9c72905848f 100644 --- a/packages/atomic/CHANGELOG.md +++ b/packages/atomic/CHANGELOG.md @@ -1,3 +1,7 @@ +## 3.15.3 (2025-01-17) + +- fix(atomic): revert getAssetPath change (#4870) ([8961432](https://github.com/coveo/ui-kit/commits/8961432)), closes [#4870](https://github.com/coveo/ui-kit/issues/4870) + ## 3.15.2 (2025-01-16) - refactor(atomic): replace @stencil/store with in-house implementation (#4814) ([cc9cd0f](https://github.com/coveo/ui-kit/commits/cc9cd0f)), closes [#4814](https://github.com/coveo/ui-kit/issues/4814) [/github.com/coveo/ui-kit/pull/4814#discussion_r1901058283](https://github.com//github.com/coveo/ui-kit/pull/4814/issues/discussion_r1901058283) diff --git a/packages/atomic/package.json b/packages/atomic/package.json index ab68204c568..e2ba78c56f4 100644 --- a/packages/atomic/package.json +++ b/packages/atomic/package.json @@ -1,7 +1,7 @@ { "name": "@coveo/atomic", "type": "module", - "version": "3.15.2", + "version": "3.15.3", "description": "A web-component library for building modern UIs interfacing with the Coveo platform", "homepage": "https://docs.coveo.com/en/atomic/latest/", "repository": { 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 index 9cfb0448ee3..64ec3e7399f 100644 --- 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/packages/quantic/cypress/e2e/default-2/smart-snippet-suggestions/smart-snippet-suggestions-selectors.ts b/packages/quantic/cypress/e2e/default-2/smart-snippet-suggestions/smart-snippet-suggestions-selectors.ts index 4233153642b..137181b5edd 100644 --- a/packages/quantic/cypress/e2e/default-2/smart-snippet-suggestions/smart-snippet-suggestions-selectors.ts +++ b/packages/quantic/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 index 66fa4f69e14..d1dfc11a482 100644 --- 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/packages/quantic/force-app/main/default/lwc/quanticFeedback/__tests__/quanticFeedback.test.js b/packages/quantic/force-app/main/default/lwc/quanticFeedback/__tests__/quanticFeedback.test.js index 2018093b474..b60150559f9 100644 --- a/packages/quantic/force-app/main/default/lwc/quanticFeedback/__tests__/quanticFeedback.test.js +++ b/packages/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 index 03391ceeb97..94400619c4d 100644 --- a/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.html +++ b/packages/quantic/force-app/main/default/lwc/quanticFeedback/quanticFeedback.html @@ -2,10 +2,10 @@
{question} - -
@@ -13,7 +13,7 @@
{successMessage}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFeedbackModal/error.html b/packages/quantic/force-app/main/default/lwc/quanticFeedbackModal/error.html index 6e0c77629b2..a0773e3f41a 100644 --- 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 @@
{error}
- \ No newline at end of file diff --git a/packages/quantic/force-app/main/default/lwc/quanticFeedbackModal/feedbackForm.html b/packages/quantic/force-app/main/default/lwc/quanticFeedbackModal/feedbackForm.html index ae0daa8f630..8b63da844fb 100644 --- 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 @@ - - diff --git a/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/__tests__/quanticSmartSnippet.test.js b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/__tests__/quanticSmartSnippet.test.js new file mode 100644 index 00000000000..3560037b826 --- /dev/null +++ b/packages/quantic/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 + }); + }); + }); + }); +}); diff --git a/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/e2e/data.ts b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/e2e/data.ts new file mode 100644 index 00000000000..c343c763bf1 --- /dev/null +++ b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/e2e/data.ts @@ -0,0 +1,30 @@ +const exampleQuestion = 'Where was Gondor when the Westfold fell?'; +const exampleAnswerSnippet = `Gondor 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; diff --git a/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/e2e/fixture.ts b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/e2e/fixture.ts new file mode 100644 index 00000000000..740e07cfb18 --- /dev/null +++ b/packages/quantic/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; +}; + +type QuanticSmartSnippetE2EInsightFixtures = + QuanticSmartSnippetE2ESearchFixtures & { + insightSetup: InsightSetupObject; + }; + +export const testSearch = + quanticBase.extend({ + 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({ + 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'; diff --git a/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/e2e/pageObject.ts b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/e2e/pageObject.ts new file mode 100644 index 00000000000..7ae63bd487f --- /dev/null +++ b/packages/quantic/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 { + await this.smartSnippetToggleButton.click(); + } + + async clickOnSourceTitle(): Promise { + await this.smartSnippetSourceTitle.click(); + } + + async clickOnSourceUri(): Promise { + await this.smartSnippetSourceUri.click(); + } + + async clickOnFirstInlineLink(): Promise { + await this.smartSnippetAnwerInlineLink.first().click(); + } + + async clickLikeButton(): Promise { + await this.likeButton.click(); + } + + async clickDislikeButton(): Promise { + await this.dislikeButton.click(); + } + + async clickExplainWhyButton(): Promise { + await this.explainWhyButton.click(); + } + + async clickFeedbackModalCancelButton(): Promise { + await this.feedbackModalCancelButton.click(); + } + + async selectFirstFeedbackOptionLabel(): Promise { + await this.firstFeedbackOptionLabel.click({force: true}); + } + + async clickFeedbackSubmitButton(): Promise { + await this.feedbackSubmitButton.click(); + } + + async waitForExpandSmartSnippetUaAnalytics(): Promise { + return this.waitForSmartSnippetCustomUaAnalytics('expandSmartSnippet'); + } + + async waitForCollapseSmartSnippetUaAnalytics(): Promise { + return this.waitForSmartSnippetCustomUaAnalytics('collapseSmartSnippet'); + } + + async waitForLikeSmartSnippetUaAnalytics(): Promise { + return this.waitForSmartSnippetCustomUaAnalytics('likeSmartSnippet'); + } + + async waitForDislikeSmartSnippetUaAnalytics(): Promise { + return this.waitForSmartSnippetCustomUaAnalytics('dislikeSmartSnippet'); + } + + async waitForOpenFeedbackModalUaAnalytics(): Promise { + return this.waitForSmartSnippetCustomUaAnalytics( + 'openSmartSnippetFeedbackModal' + ); + } + + async waitForCloseFeedbackModalUaAnalytics(): Promise { + return this.waitForSmartSnippetCustomUaAnalytics( + 'closeSmartSnippetFeedbackModal' + ); + } + + async waitForFeedbackSubmitUaAnalytics( + expectedReason: string + ): Promise { + return this.waitForSmartSnippetCustomUaAnalytics( + 'sendSmartSnippetReason', + expectedReason + ); + } + + async waitForSmartSnippetSourceClickUaAnalytics(): Promise { + return this.waitForSmartSnippetClickUaAnalytics('openSmartSnippetSource'); + } + + async waitForSmartSnippetInlineLinkClickUaAnalytics(): Promise { + return this.waitForSmartSnippetClickUaAnalytics( + 'openSmartSnippetInlineLink' + ); + } + + async waitForSmartSnippetClickUaAnalytics( + actionCause: string + ): Promise { + const uaRequest = this.page.waitForRequest((request) => { + if (isUaClickEvent(request)) { + const requestBody = request.postDataJSON?.(); + const requestData = JSON.parse(requestBody.clickEvent); + + const expectedFields: Record = { + actionCause, + }; + + return requestData?.actionCause === expectedFields.actionCause; + } + return false; + }); + return uaRequest; + } + + async waitForSmartSnippetCustomUaAnalytics( + eventValue: any, + reason?: string + ): Promise { + const uaRequest = this.page.waitForRequest((request) => { + if (isUaCustomEvent(request)) { + const requestBody = request.postDataJSON?.(); + const expectedFields: Record = { + 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; + } +} diff --git a/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/e2e/quanticSmartSnippet.e2e.ts b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/e2e/quanticSmartSnippet.e2e.ts new file mode 100644 index 00000000000..de883e283ff --- /dev/null +++ b/packages/quantic/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; + }); + }); + }); + }); + }); +}); diff --git a/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.html b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.html index 0f1e2c582a1..cd3c241cdae 100644 --- a/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.html +++ b/packages/quantic/force-app/main/default/lwc/quanticSmartSnippet/quanticSmartSnippet.html @@ -16,7 +16,7 @@