diff --git a/packages/atomic/src/components/search/atomic-generated-answer/e2e/atomic-generated-answer.e2e.ts b/packages/atomic/src/components/search/atomic-generated-answer/e2e/atomic-generated-answer.e2e.ts index 7f5c139678d..3ec56cf24d6 100644 --- a/packages/atomic/src/components/search/atomic-generated-answer/e2e/atomic-generated-answer.e2e.ts +++ b/packages/atomic/src/components/search/atomic-generated-answer/e2e/atomic-generated-answer.e2e.ts @@ -2,53 +2,113 @@ import {expect, test} from './fixture'; test.describe('atomic-generated-answer', () => { test.describe('citations', () => { - test.describe('with citation anchoring enabled', () => { - test.beforeEach(async ({generatedAnswer}) => { - await generatedAnswer.load({story: 'default'}); - await generatedAnswer.waitForCitations(); + test.beforeEach(async ({generatedAnswer}) => { + await generatedAnswer.load({story: 'default'}); + await generatedAnswer.waitForCitations(); + }); + + test('should show popover when hovering over citation', async ({ + generatedAnswer, + }) => { + await test.step('Verify first citation popover', async () => { + await generatedAnswer.citation.first().hover(); + + const popover = await generatedAnswer.getCitationPopover(0); + await popover.waitFor({state: 'visible', timeout: 1000}); + + const text = await popover.textContent(); + expect(text).toContain( + 'https://coveodemo.atlassian.net/wiki/TV/How To Resolve Netflix Connection With Tivo on XB Family Smart TVs' + ); + expect(text).toContain( + 'How To Resolve Netflix Connection With Tivo on XB Family Smart TVs' + ); + expect(text).toContain( + 'Tivo can cause some problems with the Netflix App on your XBR6 Smart TV' + ); }); - test('should render citation when available', async ({ - generatedAnswer, - }) => { - const citationCount = await generatedAnswer.getCitationCount(); - expect(citationCount).toBeGreaterThan(0); - await generatedAnswer.citation.first().screenshot(); + await test.step('Verify second citation popover', async () => { + await generatedAnswer.citation.nth(1).hover(); + + const popover = await generatedAnswer.getCitationPopover(1); + await popover.waitFor({state: 'visible', timeout: 1000}); + + const text = await popover.textContent(); + expect(text).toContain( + 'https://coveodemo.atlassian.net/wiki/TV/How To Resolve Netflix Playback Errors on Besttech XB Smart TVs' + ); + expect(text).toContain( + 'How To Resolve Netflix Playback Errors on Besttech XB Smart TVs' + ); + expect(text).toContain( + 'the problem by eliminating the router or wireless connectivity problems as a possible cause' + ); }); + }); + + test.describe('citation anchoring', () => { + test.describe('with citation anchoring enabled', () => { + test('should render citation when available', async ({ + generatedAnswer, + }) => { + const citationCount = await generatedAnswer.getCitationCount(); + expect(citationCount).toBeGreaterThan(0); + await generatedAnswer.citation.first().screenshot(); + }); + + test('should navigate to citation URL with text fragment on click', async ({ + generatedAnswer, + }) => { + const citationCount = await generatedAnswer.getCitationCount(); + + for (let i = 0; i < citationCount; i++) { + const filetype = await generatedAnswer.getCitationFiletype(i); - test('should only append text fragment to HTML citations', async ({ - generatedAnswer, - }) => { - const citationCount = await generatedAnswer.getCitationCount(); + // Listen for popup event (citations open in new tab with target="_blank") + const popupPromise = generatedAnswer.page.waitForEvent('popup'); - for (let i = 0; i < citationCount; i++) { - const filetype = await generatedAnswer.getCitationFiletype(i); - const href = await generatedAnswer.getCitationHref(i); + await generatedAnswer.citation.nth(i).click(); - expect(href).toBeTruthy(); + const popup = await popupPromise; + const popupUrl = popup.url(); - if (filetype === 'html') { - expect(href).toMatch(/#:~:text=/); - } else { - expect(href).not.toMatch(/#:~:text=/); + expect(popupUrl).toBeTruthy(); + + if (filetype === 'html') { + expect(popupUrl).toMatch(/#:~:text=/); + } else { + expect(popupUrl).not.toMatch(/#:~:text=/); + } + + await popup.close(); } - } + }); }); - }); - test.describe('with citation anchoring disabled', () => { - test.beforeEach(async ({generatedAnswer}) => { - await generatedAnswer.load({story: 'disable-citation-anchoring'}); - }); + test.describe('with citation anchoring disabled', () => { + test.beforeEach(async ({generatedAnswer}) => { + await generatedAnswer.load({story: 'disable-citation-anchoring'}); + }); + + test('should not have text fragment when citation anchoring is disabled', async ({ + generatedAnswer, + }) => { + await generatedAnswer.waitForCitations(); + + // Listen for popup event (citations open in new tab with target="_blank") + const popupPromise = generatedAnswer.page.waitForEvent('popup'); + + await generatedAnswer.citation.first().click(); + + const popup = await popupPromise; + const popupUrl = popup.url(); - test('should not have text fragment when citation anchoring is disabled', async ({ - generatedAnswer, - }) => { - await generatedAnswer.waitForCitations(); - const href = await generatedAnswer.getCitationHref(0); + expect(popupUrl).toBeTruthy(); + expect(popupUrl).not.toContain('#:~:text='); - expect(href).toBeTruthy(); - expect(href).not.toContain('#:~:text='); + await popup.close(); + }); }); }); }); diff --git a/packages/atomic/src/components/search/atomic-generated-answer/e2e/page-object.ts b/packages/atomic/src/components/search/atomic-generated-answer/e2e/page-object.ts index 20edaa08d98..ee7d51e12af 100644 --- a/packages/atomic/src/components/search/atomic-generated-answer/e2e/page-object.ts +++ b/packages/atomic/src/components/search/atomic-generated-answer/e2e/page-object.ts @@ -19,6 +19,10 @@ export class GeneratedAnswerPageObject extends BasePageObject<'atomic-generated- return this.page.locator('atomic-citation [part="citation"]'); } + get citationPopovers() { + return this.page.locator('atomic-citation [part="citation-popover"]'); + } + get answerContent() { return this.page.locator('atomic-generated-answer [part="answer-content"]'); } @@ -99,4 +103,18 @@ export class GeneratedAnswerPageObject extends BasePageObject<'atomic-generated- async getTableTexts(): Promise { return await this.tables.allTextContents(); } + + async getCitationPopover(index: number = 0) { + return this.citationPopovers.nth(index); + } + + async isCitationPopoverVisible(index: number = 0): Promise { + const popover = await this.getCitationPopover(index); + return await popover.isVisible(); + } + + async getCitationPopoverText(index: number = 0): Promise { + const popover = await this.getCitationPopover(index); + return (await popover.textContent()) || ''; + } }