From 7ab3daee2eb8ee121cc75bb3c1d209f986c582e9 Mon Sep 17 00:00:00 2001 From: Felix Perron-Brault Date: Tue, 1 Oct 2024 15:27:16 -0400 Subject: [PATCH] test(atomic): add tests for generated answer tab support (#4447) This PR adds tests for disabling/enabled atomic-generated-answer depending on the active tab https://coveord.atlassian.net/browse/CDX-1557 --- .../atomic-tab-manager.new.stories.tsx | 232 +++++++++++++----- .../e2e/atomic-tab-manager.e2e.ts | 67 ++++- .../tabs/atomic-tab-manager/e2e/fixture.ts | 5 + .../atomic-tab-manager/e2e/page-object.ts | 14 ++ 4 files changed, 255 insertions(+), 63 deletions(-) diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx index 6480f787d76..a3ce25a12b1 100644 --- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx +++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.new.stories.tsx @@ -6,6 +6,8 @@ import {html} from 'lit/static-html.js'; const {decorator, play} = wrapInSearchInterface({ search: { + // eslint-disable-next-line @cspell/spellchecker + pipeline: 'genqatest', preprocessSearchResponseMiddleware: (r) => { const [result] = r.body.results; result.title = 'Manage the Coveo In-Product Experiences (IPX)'; @@ -68,57 +70,133 @@ export const Default: Story = { - - - - - - - - - - - + + + + + + + + + + + - - + + - + ${story()} - + - + @@ -126,60 +204,92 @@ export const Default: Story = { - - - - - + + + + + - - + + + - - - + - + - + `, ], diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts index 76257b3f907..6d1b8b54b31 100644 --- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts +++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts @@ -44,7 +44,7 @@ test.describe('AtomicTabManager', () => { test.beforeEach(async ({facets}) => { await facets.facetValue.first().waitFor({state: 'visible'}); }); - test.fixme('facets', async ({tabManager}) => { + test('facets', async ({tabManager}) => { const includedFacets = await tabManager.includedFacet.all(); for (let i = 0; i < includedFacets.length; i++) { await expect(includedFacets[i]).toBeHidden(); @@ -74,6 +74,16 @@ test.describe('AtomicTabManager', () => { await expect(tabManager.excludedResultList).toBeVisible(); await expect(tabManager.includedResultList).toBeHidden(); }); + + test('generated answer', async ({tabManager, searchBox}) => { + await tabManager.sortDropdown.selectOption('Relevance'); + await searchBox.searchInput.fill( + // eslint-disable-next-line @cspell/spellchecker + 'how to resolve netflix connection with tivo' + ); + await searchBox.searchInput.press('Enter'); + await expect(tabManager.generatedAnswer).toBeHidden(); + }); }); test('should display tab buttons for each atomic-tab elements', async ({ @@ -129,6 +139,18 @@ test.describe('AtomicTabManager', () => { await expect(tabManager.includedResultList).toBeVisible(); await expect(tabManager.excludedResultList).toBeHidden(); }); + + test('generated answer', async ({tabManager, searchBox}) => { + await tabManager.sortDropdown.selectOption('Relevance'); + await searchBox.searchInput.fill( + // eslint-disable-next-line @cspell/spellchecker + 'how to resolve netflix connection with tivo' + ); + await searchBox.searchInput.press('Enter'); + + await tabManager.generatedAnswer.waitFor({state: 'visible'}); + await expect(tabManager.generatedAnswer).toBeVisible(); + }); }); test.describe('when selecting previous tab', () => { @@ -138,7 +160,7 @@ test.describe('AtomicTabManager', () => { }); test.describe('should change other component visibility', async () => { - test.fixme('facets', async ({tabManager}) => { + test('facets', async ({tabManager}) => { const excludedFacets = await tabManager.excludedFacet.all(); for (let i = 0; i < excludedFacets.length; i++) { await expect(excludedFacets[i]).toBeVisible(); @@ -168,6 +190,16 @@ test.describe('AtomicTabManager', () => { await expect(tabManager.excludedResultList).toBeVisible(); await expect(tabManager.includedResultList).toBeHidden(); }); + + test('generated answer', async ({tabManager, searchBox}) => { + await tabManager.sortDropdown.selectOption('Relevance'); + await searchBox.searchInput.fill( + // eslint-disable-next-line @cspell/spellchecker + 'how to resolve netflix connection with tivo' + ); + await searchBox.searchInput.press('Enter'); + await expect(tabManager.generatedAnswer).toBeHidden(); + }); }); }); @@ -265,6 +297,23 @@ test.describe('AtomicTabManager', () => { await expect(tabManager.includedResultList).toBeVisible(); await expect(tabManager.excludedResultList).toBeHidden(); }); + + test('generated answer', async ({tabManager, searchBox}) => { + await tabManager.refineModalButton.click(); + await tabManager.refineModalHeader.waitFor({state: 'visible'}); + await tabManager.refineModalSortDropdown.selectOption('Relevance'); + + await tabManager.refineModalCloseButton.click(); + + await tabManager.refineModalHeader.waitFor({state: 'hidden'}); + await searchBox.searchInput.fill( + // eslint-disable-next-line @cspell/spellchecker + 'how to resolve netflix connection with tivo' + ); + + await searchBox.searchInput.press('Enter'); + await expect(tabManager.generatedAnswer).toBeVisible(); + }); }); test.describe('when selecting previous dropdown option', () => { @@ -307,6 +356,20 @@ test.describe('AtomicTabManager', () => { await expect(tabManager.excludedResultList).toBeVisible(); await expect(tabManager.includedResultList).toBeHidden(); }); + + test('generated answer', async ({tabManager, searchBox}) => { + await tabManager.refineModalButton.click(); + await tabManager.refineModalHeader.waitFor({state: 'visible'}); + await tabManager.refineModalSortDropdown.selectOption('Relevance'); + + await tabManager.refineModalCloseButton.click(); + await searchBox.searchInput.fill( + // eslint-disable-next-line @cspell/spellchecker + 'how to resolve netflix connection with tivo' + ); + await searchBox.searchInput.press('Enter'); + await expect(tabManager.generatedAnswer).toBeHidden(); + }); }); }); diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts index 07b569da140..991a5fb21b2 100644 --- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts +++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/fixture.ts @@ -3,12 +3,14 @@ import { AxeFixture, makeAxeBuilder, } from '../../../../../../playwright-utils/base-fixture'; +import {SearchBoxPageObject} from '../../../atomic-search-box/e2e/page-object'; import {AtomicFacetPageObject as FacetPageObject} from '../../../facets/atomic-facet/e2e/page-object'; import {TabManagerPageObject} from './page-object'; interface TestFixture { facets: FacetPageObject; tabManager: TabManagerPageObject; + searchBox: SearchBoxPageObject; } export const test = base.extend({ @@ -19,5 +21,8 @@ export const test = base.extend({ facets: async ({page}, use) => { await use(new FacetPageObject(page)); }, + searchBox: async ({page}, use) => { + await use(new SearchBoxPageObject(page)); + }, }); export {expect} from '@playwright/test'; diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts index 46a2d12e1be..48d25fb8733 100644 --- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts +++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts @@ -41,6 +41,10 @@ export class TabManagerPageObject extends BasePageObject<'atomic-tab-manager'> { return this.page.getByText('Creating an In-Product Experience (IPX)'); } + get generatedAnswer() { + return this.page.getByText('Generated answer', {exact: true}); + } + get sortDropdown() { return this.page.getByRole('combobox', {name: 'Sort by'}); } @@ -49,6 +53,16 @@ export class TabManagerPageObject extends BasePageObject<'atomic-tab-manager'> { return this.page.getByLabel('Sort by').getByRole('option'); } + get refineModalSortDropdown() { + return this.page + .locator('atomic-modal [part="select-wrapper"]') + .getByRole('combobox'); + } + + get refineModalCloseButton() { + return this.page.getByRole('button', {name: 'Close'}); + } + get refineModalSortDropdownOptions() { return this.page .locator('atomic-modal [part="select-wrapper"]')