def
ghi', - }, - props: { - 'maximum-height': Number.MAX_VALUE, - 'collapsed-height': 0, - 'snippet-style': 'span { display: block; }', - }, - }) - ) - .init(); - SmartSnippetAssertions.assertAnswerTopMargin(remSize, 'first'); - SmartSnippetAssertions.assertAnswerBottomMargin(remSize, 'last'); - }); - - it('it behaves correctly when the snippet contains elements with margins', () => { - new TestFixture() - .with( - addSmartSnippet({ - snippet: { - ...defaultSnippet, - answer: - 'Paragraph A
Paragraph B
Paragraph C
', - }, - props: { - 'maximum-height': Number.MAX_VALUE, - 'collapsed-height': 0, - }, - }) - ) - .init(); - - SmartSnippetAssertions.assertAnswerTopMargin(remSize, 'first'); - SmartSnippetAssertions.assertAnswerBottomMargin(remSize, 'last'); - }); - - it('it behaves correctly when the snippet contains collapsing margins', () => { - new TestFixture() - .with( - addSmartSnippet({ - snippet: { - ...defaultSnippet, - answer: - 'My parent has no margins, but I do!
', - }, - props: { - 'maximum-height': Number.MAX_VALUE, - 'collapsed-height': 0, - }, - }) - ) - .init(); - - SmartSnippetAssertions.assertAnswerTopMargin(remSize, 'first'); - SmartSnippetAssertions.assertAnswerBottomMargin(remSize, 'last'); - }); - - it('it behaves correctly when pressing the like and dislike button', () => { - new TestFixture().with(addSmartSnippet()).init(); - SmartSnippetSelectors.feedbackLikeButton().click(); - - SmartSnippetAssertions.assertLikeButtonChecked(true); - SmartSnippetAssertions.assertDislikeButtonChecked(false); - SmartSnippetAssertions.assertThankYouBanner(true); - - SmartSnippetAssertions.assertLogLikeSmartSnippet(); - - SmartSnippetSelectors.feedbackDislikeButton().click(); - SmartSnippetAssertions.assertLikeButtonChecked(false); - SmartSnippetAssertions.assertDislikeButtonChecked(true); - SmartSnippetAssertions.assertThankYouBanner(true); - - SmartSnippetAssertions.assertLogDislikeSmartSnippet(); - }); - - - - - - - it('with custom styling in a template element', () => { - const styleEl = generateComponentHTML('style'); - styleEl.innerHTML = ` - b { - color: rgb(84, 170, 255); - } - `; - - const templateEl = generateComponentHTML('template') as HTMLTemplateElement; - templateEl.content.appendChild(styleEl); - new TestFixture().with(addSmartSnippet({content: templateEl})).init(); - - SmartSnippetSelectors.answer() - .find('b') - .invoke('css', 'color') - .should('equal', 'rgb(84, 170, 255)'); - }); - - it('with custom styling in an attribute', () => { - const style = ` - b { - color: rgb(84, 170, 255); - } - `; - new TestFixture() - .with( - addSmartSnippet({ - props: {'snippet-style': style}, - }) - ) - .init(); - - SmartSnippetSelectors.answer() - .find('b') - .invoke('css', 'color') - .should('equal', 'rgb(84, 170, 255)'); - }); - - it('when there is a valid slot named "source-anchor-attributes"', () => { - const slot = generateComponentHTML('a', { - target: '_blank', - slot: 'source-anchor-attributes', - }); - new TestFixture().with(addSmartSnippet({}, slot)).init(); - - SmartSnippetSelectors.sourceUrl().should('have.attr', 'target', '_blank'); - }); -}); diff --git a/packages/atomic/cypress/integration-insight-panel/insight-panel.cypress.ts b/packages/atomic/cypress/integration-insight-panel/insight-panel.cypress.ts index fb9d92339a4..1855121bc22 100644 --- a/packages/atomic/cypress/integration-insight-panel/insight-panel.cypress.ts +++ b/packages/atomic/cypress/integration-insight-panel/insight-panel.cypress.ts @@ -177,7 +177,6 @@ describe('Insight Panel test suites', () => { }); }); - describe('Smart Snippet Answer', () => { const visitPage = () => { cy.visit(host); @@ -215,19 +214,6 @@ describe('Insight Panel test suites', () => { it('should show the smart snippet component', () => { InsightPanelsSelectors.smartSnippetExpandableAnswer().should('exist'); }); - - describe('when giving explanatory feedback', () => { - it('should show the feedback modal', () => { - InsightPanelsSelectors.smartSnippetFeedbackModal().should( - 'not.exist' - ); - - InsightPanelsSelectors.smartSnippetFeedbackNoButton().click(); - InsightPanelsSelectors.smartSnippetsExplainWhyButton().click(); - - InsightPanelsSelectors.smartSnippetFeedbackModal().should('exist'); - }); - }); }); }); diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts index c681d92b205..ef1fd2d0d95 100644 --- a/packages/atomic/src/components.d.ts +++ b/packages/atomic/src/components.d.ts @@ -5,7 +5,7 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { DateFilterRange, DateRangeRequest, FacetResultsMustMatch, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, RangeFacetSortCriterion, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless"; +import { DateFilterRange, DateRangeRequest, FacetResultsMustMatch, GeneratedAnswer, GeneratedAnswerCitation, InteractiveCitation, RangeFacetSortCriterion, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless"; import { FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, UserAction as IUserAction } from "@coveo/headless/insight"; import { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options"; import { ItemRenderingFunction } from "./components/common/item-list/stencil-item-list-common"; @@ -18,7 +18,7 @@ import { RecsStore } from "./components/recommendations/atomic-recs-interface/st import { AnyBindings } from "./components/common/interface/bindings"; import { i18n } from "i18next"; import { SearchBoxSuggestionElement } from "./components/common/suggestions/suggestions-types"; -export { DateFilterRange, DateRangeRequest, FacetResultsMustMatch, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, RangeFacetSortCriterion, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless"; +export { DateFilterRange, DateRangeRequest, FacetResultsMustMatch, GeneratedAnswer, GeneratedAnswerCitation, InteractiveCitation, RangeFacetSortCriterion, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless"; export { FacetSortCriterion as InsightFacetSortCriterion, FoldedResult as InsightFoldedResult, InteractiveResult as InsightInteractiveResult, RangeFacetRangeAlgorithm as InsightRangeFacetRangeAlgorithm, RangeFacetSortCriterion as InsightRangeFacetSortCriterion, Result as InsightResult, UserAction as IUserAction } from "@coveo/headless/insight"; export { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options"; export { ItemRenderingFunction } from "./components/common/item-list/stencil-item-list-common"; @@ -846,10 +846,6 @@ export namespace Components { */ "tabsIncluded": string[] | string; } - interface AtomicSmartSnippetAnswer { - "htmlContent": string; - "innerStyle"?: string; - } /** * The `atomic-smart-snippet-feedback-modal` is automatically created as a child of the `atomic-search-interface` when the `atomic-smart-snippet` is initialized. * When the modal is opened, the class `atomic-modal-opened` is added to the body, allowing further customization. @@ -988,10 +984,6 @@ export interface AtomicQuickviewModalCustomEventTest content
', + innerStyle, + }: { + htmlContent?: string; + innerStyle?: string; + } = {}) => { + const element = await renderFunctionFixture( + html`Test content
', + }); + expect(answer).toBeInTheDocument(); + expect(answer?.querySelector('strong')).toHaveTextContent('content'); + }); + + it('should sanitize dangerous HTML content', async () => { + const {answer} = await renderComponent({ + htmlContent: 'Test
', + }); + expect(answer?.querySelector('script')).not.toBeInTheDocument(); + }); + }); + + describe('style sanitization', () => { + it('should render sanitized style when innerStyle is provided', async () => { + const {style} = await renderComponent({ + innerStyle: 'p { color: blue; }', + }); + expect(style).toBeInTheDocument(); + expect(style?.innerHTML).toContain('color: blue'); + }); + }); + + describe('lifecycle', () => { + it('should create ResizeObserver', async () => { + await renderComponent(); + await vi.waitFor(() => { + expect(observeSpy).toHaveBeenCalled(); + }); + }); + }); + + it('should dispatch answerSizeUpdated event with height', async () => { + const {element} = await renderComponent(); + const eventSpy = vi.fn(); + element.addEventListener('answerSizeUpdated', eventSpy); + + await vi.waitFor(() => { + expect(eventSpy).toHaveBeenCalled(); + expect(eventSpy.mock.calls[0][0].detail).toHaveProperty('height'); + expect(eventSpy.mock.calls[0][0].bubbles).toBe(false); + }); + }); + + it('should bind analytics to links and emit selectInlineLink event', async () => { + const {element, links} = await renderComponent({ + htmlContent: 'Test Link', + }); + + const eventSpy = vi.fn(); + element.addEventListener('selectInlineLink', eventSpy); + + await vi.waitFor(() => { + expect(bindAnalyticsToLink).toHaveBeenCalled(); + }); + + const bindCall = vi + .mocked(bindAnalyticsToLink) + .mock.calls.find((call) => call[0] === links[0]); + const {onSelect} = bindCall![1]; + onSelect(); + + expect(eventSpy).toHaveBeenCalled(); + expect(eventSpy.mock.calls[0][0].detail).toMatchObject({ + linkText: 'Test Link', + linkURL: 'https://example.com/', + }); + }); +}); diff --git a/packages/atomic/src/components/common/atomic-smart-snippet-answer/atomic-smart-snippet-answer.ts b/packages/atomic/src/components/common/atomic-smart-snippet-answer/atomic-smart-snippet-answer.ts new file mode 100644 index 00000000000..2de295204d5 --- /dev/null +++ b/packages/atomic/src/components/common/atomic-smart-snippet-answer/atomic-smart-snippet-answer.ts @@ -0,0 +1,182 @@ +import type {InlineLink} from '@coveo/headless'; +import DOMPurify from 'dompurify'; +import {type CSSResultGroup, html, LitElement} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; +import {createRef, type Ref, ref} from 'lit/directives/ref.js'; +import {unsafeHTML} from 'lit/directives/unsafe-html.js'; +import {when} from 'lit/directives/when.js'; +import {bindAnalyticsToLink} from '@/src/components/common/item-link/bind-analytics-to-link'; +import {withTailwindStyles} from '@/src/decorators/with-tailwind-styles'; +import {sanitizeStyle} from '@/src/utils/utils'; +import styles from './atomic-smart-snippet-answer.tw.css'; + +/** + * The `atomic-smart-snippet-answer` component displays a relevant snippet from the document. + * + * @part answer - The container displaying the snippet from the document. + * + * @event answerSizeUpdated - Dispatched when the content of the snippet size changes. + * @event selectInlineLink - Dispatched when an inline link is selected. + * @event beginDelayedSelectInlineLink - Dispatched when a delayed selection begins for an inline link. + * @event cancelPendingSelectInlineLink - Dispatched when a pending selection is canceled for an inline link. + * + * @internal + */ +@customElement('atomic-smart-snippet-answer') +@withTailwindStyles +export class AtomicSmartSnippetAnswer extends LitElement { + static styles: CSSResultGroup = styles; + + /** + * The HTML content to display in the answer. + */ + @property({type: String, attribute: 'html-content'}) htmlContent!: string; + + /** + * The inline style to apply to the content (sanitized before use). + */ + @property({type: String, attribute: 'inner-style'}) innerStyle?: string; + + private wrapperRef: Ref