Skip to content

Commit

Permalink
test(atomic): fix no-results test for folded children results (#4409)
Browse files Browse the repository at this point in the history 
https://coveord.atlassian.net/browse/KIT-3545
  • Loading branch information
@alexprudhomme
alexprudhomme authored Sep 16, 2024
1 parent 7c110bc commit bc04659
Show file tree
Hide file tree
Showing 8 changed files with 200 additions and 139 deletions.
1 change: 1 addition & 0 deletions .cspell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"ARROWUP",
"Artemia",
"Artemiidae",
"atlcontinentantarctica",
"attachtocase",
"azerty",
"bazz",
Expand Down
12 changes: 6 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 0 additions & 13 deletions packages/atomic/cypress/e2e/result-list/folded-result-list-children.cypress.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,19 +81,6 @@ describe('Folded Result List Component - Children results', () => {
.contains(ExpectedHierarchyWith10foldedResultsRequested.children[2].name);
});

it('should show a "no results" label when no child results are found', () => {
new TestFixture()
.with(setSourceAndSortCriteria)
.with(
addFoldedResultList(buildTemplateWithoutSections(buildResultTopChild()))
)
.with(removeResultChildrenFromResponse)
.init();

FoldedResultListSelectors.noResultsLabel().should('be.visible');
FoldedResultListSelectors.childrenRoot().should('not.exist');
});

it('should not show a "no results" label when no child results are found when no-result-text is empty', () => {
new TestFixture()
.with(setSourceAndSortCriteria)
Expand Down
12 changes: 8 additions & 4 deletions ...c/src/components/commerce/facets/atomic-commerce-facets/e2e/atomic-commerce-facets.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,28 @@ test.describe('default', async () => {
await expect(facets.categoryFacets.first()).toBeVisible();
});

test('should collapse facets when set to 1', async ({facets}) => {
test('should collapse facets when collapseFacetsAfter is set to 1', async ({
facets,
}) => {
await facets.load({
args: {
collapseFacetsAfter: 1,
},
});
await expect(facets.expandedFacets).toHaveCount(1);
await expect(facets.collapsedFacets).toHaveCount(7);
await expect(facets.collapsedFacets).toHaveCount(8);
});

test('should disable collapse facets when set to -1', async ({facets}) => {
test('should disable collapse facets when collapseFacetsAfter is set to -1', async ({
facets,
}) => {
await facets.load({
args: {
collapseFacetsAfter: -1,
},
});
await expect(facets.collapsedFacets).toHaveCount(0);
await expect(facets.expandedFacets).toHaveCount(8);
await expect(facets.expandedFacets).toHaveCount(9);
});
});

Expand Down
256 changes: 140 additions & 116 deletions ...s/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.new.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,132 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import {parameters} from '@coveo/atomic/storybookUtils/common/common-meta-parameters';
import {renderComponent} from '@coveo/atomic/storybookUtils/common/render-component';
import {wrapInSearchInterface} from '@coveo/atomic/storybookUtils/search/search-interface-wrapper';
import type {Meta, StoryObj as Story} from '@storybook/web-components';

const SLOTS_DEFAULT = `
<atomic-result-template>
<template>
<atomic-result-section-visual>
<atomic-result-image class="icon" fallback="https://picsum.photos/350"></atomic-result-image>
<img src="https://picsum.photos/350" class="thumbnail" />
</atomic-result-section-visual>
<atomic-result-section-badges>
<atomic-field-condition must-match-sourcetype="Salesforce">
<atomic-result-badge
label="Salesforce"
class="salesforce-badge"
></atomic-result-badge>
</atomic-field-condition>
<atomic-result-badge
icon="https://raw.githubusercontent.com/Rush/Font-Awesome-SVG-PNG/master/black/svg/language.svg"
>
<atomic-result-multi-value-text
field="language"
></atomic-result-multi-value-text>
</atomic-result-badge>
<atomic-field-condition must-match-is-recommendation="true">
<atomic-result-badge label="Recommended"></atomic-result-badge>
</atomic-field-condition>
<atomic-field-condition must-match-is-top-result="true">
<atomic-result-badge label="Top Result"></atomic-result-badge>
</atomic-field-condition>
</atomic-result-section-badges>
<atomic-result-section-title
><atomic-result-link></atomic-result-link
></atomic-result-section-title>
<atomic-result-section-excerpt
><atomic-result-text field="excerpt"></atomic-result-text
></atomic-result-section-excerpt>
<atomic-result-section-bottom-metadata>
<atomic-result-fields-list>
<atomic-field-condition class="field" if-defined="source">
<span class="field-label"
><atomic-text value="source"></atomic-text>:</span
>
<atomic-result-text field="source"></atomic-result-text>
</atomic-field-condition>
</atomic-result-fields-list>
</atomic-result-section-bottom-metadata>
<atomic-result-section-children>
<atomic-result-children image-size="icon">
<!-- CHILD -->
<atomic-result-children-template>
<!-- CHILD TEMPLATE -->
<template>
<atomic-result-section-visual>
<atomic-result-image class="icon" fallback="https://picsum.photos/350"></atomic-result-image>
<img src="https://picsum.photos/350" class="thumbnail" />
</atomic-result-section-visual>
<atomic-result-section-title
><atomic-result-link></atomic-result-link
></atomic-result-section-title>
<atomic-result-section-excerpt
><atomic-result-text field="excerpt"></atomic-result-text
></atomic-result-section-excerpt>
<atomic-result-section-bottom-metadata>
<atomic-result-fields-list>
<atomic-field-condition class="field" if-defined="author">
<span class="field-label"
><atomic-text value="author"></atomic-text>:</span
>
<atomic-result-text field="author"></atomic-result-text>
</atomic-field-condition>
<atomic-field-condition class="field" if-defined="source">
<span class="field-label"
><atomic-text value="source"></atomic-text>:</span
>
<atomic-result-text field="source"></atomic-result-text>
</atomic-field-condition>
<atomic-field-condition
class="field"
if-defined="language"
>
<span class="field-label"
><atomic-text value="language"></atomic-text>:</span
>
<atomic-result-multi-value-text
field="language"
></atomic-result-multi-value-text>
</atomic-field-condition>
<atomic-field-condition
class="field"
if-defined="filetype"
>
<span class="field-label"
><atomic-text value="fileType"></atomic-text>:</span
>
<atomic-result-text
field="filetype"
></atomic-result-text>
</atomic-field-condition>
</atomic-result-fields-list>
</atomic-result-section-bottom-metadata>
<atomic-result-section-children>
<atomic-result-children inherit-templates>
</atomic-result-children>
</atomic-result-section-children>
</template>
</atomic-result-children-template>
</atomic-result-children>
</atomic-result-section-children>
</template>
</atomic-result-template>
`;

const preprocessRequest = (response: any) => {
const parsed = JSON.parse(response.body as string);
parsed.aq = '@source==("iNaturalistTaxons")';
parsed.fieldsToInclude = [...(parsed.fieldsToInclude || []), 'source'];
response.body = JSON.stringify(parsed);
return response;
};

const {decorator, play} = wrapInSearchInterface({
preprocessRequest: (r) => {
const parsed = JSON.parse(r.body as string);
parsed.aq = '@source==("iNaturalistTaxons")';
parsed.fieldsToInclude = [...(parsed.fieldsToInclude || []), 'source'];
r.body = JSON.stringify(parsed);
return r;
},
preprocessRequest,
});

const meta: Meta = {
Expand All @@ -29,117 +145,25 @@ export default meta;
export const Default: Story = {
name: 'atomic-folded-result-list',
args: {
'slots-default': `
<atomic-result-template>
<template>
<atomic-result-section-visual>
<atomic-result-image class="icon"></atomic-result-image>
<img src="https://picsum.photos/350" class="thumbnail" />
</atomic-result-section-visual>
<atomic-result-section-badges>
<atomic-field-condition must-match-sourcetype="Salesforce">
<atomic-result-badge
label="Salesforce"
class="salesforce-badge"
></atomic-result-badge>
</atomic-field-condition>
<atomic-result-badge
icon="https://raw.githubusercontent.com/Rush/Font-Awesome-SVG-PNG/master/black/svg/language.svg"
>
<atomic-result-multi-value-text
field="language"
></atomic-result-multi-value-text>
</atomic-result-badge>
<atomic-field-condition must-match-is-recommendation="true">
<atomic-result-badge label="Recommended"></atomic-result-badge>
</atomic-field-condition>
<atomic-field-condition must-match-is-top-result="true">
<atomic-result-badge label="Top Result"></atomic-result-badge>
</atomic-field-condition>
</atomic-result-section-badges>
<atomic-result-section-title
><atomic-result-link></atomic-result-link
></atomic-result-section-title>
<atomic-result-section-excerpt
><atomic-result-text field="excerpt"></atomic-result-text
></atomic-result-section-excerpt>
<atomic-result-section-bottom-metadata>
<atomic-result-fields-list>
<atomic-field-condition class="field" if-defined="source">
<span class="field-label"
><atomic-text value="source"></atomic-text>:</span
>
<atomic-result-text field="source"></atomic-result-text>
</atomic-field-condition>
</atomic-result-fields-list>
</atomic-result-section-bottom-metadata>
<atomic-result-section-children>
<atomic-result-children image-size="icon">
<!-- CHILD -->
<atomic-result-children-template>
<!-- CHILD TEMPLATE -->
<template>
<atomic-result-section-visual>
<atomic-result-image class="icon"></atomic-result-image>
<img src="https://picsum.photos/350" class="thumbnail" />
</atomic-result-section-visual>
<atomic-result-section-title
><atomic-result-link></atomic-result-link
></atomic-result-section-title>
<atomic-result-section-excerpt
><atomic-result-text field="excerpt"></atomic-result-text
></atomic-result-section-excerpt>
<atomic-result-section-bottom-metadata>
<atomic-result-fields-list>
<atomic-field-condition class="field" if-defined="author">
<span class="field-label"
><atomic-text value="author"></atomic-text>:</span
>
<atomic-result-text field="author"></atomic-result-text>
</atomic-field-condition>
'slots-default': SLOTS_DEFAULT,
},
};

<atomic-field-condition class="field" if-defined="source">
<span class="field-label"
><atomic-text value="source"></atomic-text>:</span
>
<atomic-result-text field="source"></atomic-result-text>
</atomic-field-condition>
const preprocessRequestNoChildrenResult = (response: any) => {
const parsed = JSON.parse(response.body as string);
parsed.aq = '@foldingcollection==("atlcontinentantarctica")';
response.body = JSON.stringify(parsed);
return response;
};

<atomic-field-condition
class="field"
if-defined="language"
>
<span class="field-label"
><atomic-text value="language"></atomic-text>:</span
>
<atomic-result-multi-value-text
field="language"
></atomic-result-multi-value-text>
</atomic-field-condition>
const {play: noResultChildrenPlay} = wrapInSearchInterface({
preprocessRequest: preprocessRequestNoChildrenResult,
});

<atomic-field-condition
class="field"
if-defined="filetype"
>
<span class="field-label"
><atomic-text value="fileType"></atomic-text>:</span
>
<atomic-result-text
field="filetype"
></atomic-result-text>
</atomic-field-condition>
</atomic-result-fields-list>
</atomic-result-section-bottom-metadata>
<atomic-result-section-children>
<atomic-result-children inherit-templates>
</atomic-result-children>
</atomic-result-section-children>
</template>
</atomic-result-children-template>
</atomic-result-children>
</atomic-result-section-children>
</template>
</atomic-result-template>
`,
export const WithNoResultChildren: Story = {
name: 'With no result children',
args: {
'slots-default': SLOTS_DEFAULT,
},
play: noResultChildrenPlay,
};
10 changes: 10 additions & 0 deletions ...onents/search/result-lists/atomic-folded-result-list/e2e/atomic-folded-result-list.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {test, expect} from './fixture';

// TODO: KIT-3546 - Make this test pass
test.describe('When no child results', () => {
test.fixme('should show a "no results" label', async ({foldedResultList}) => {
await foldedResultList.load({story: 'with-no-result-children'});
await foldedResultList.loadAllResultsButton.click();
await expect(foldedResultList.noResultsLabel.first()).toBeVisible();
});
});
19 changes: 19 additions & 0 deletions packages/atomic/src/components/search/result-lists/atomic-folded-result-list/e2e/fixture.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import {test as base} from '@playwright/test';
import {
AxeFixture,
makeAxeBuilder,
} from '../../../../../../playwright-utils/base-fixture';
import {AtomicFoldedResultListPageObject as FoldedResultList} from './page-object';

type Fixture = {
foldedResultList: FoldedResultList;
};

export const test = base.extend<Fixture & AxeFixture>({
makeAxeBuilder,
foldedResultList: async ({page}, use) => {
await use(new FoldedResultList(page));
},
});

export {expect} from '@playwright/test';
Loading

0 comments on commit bc04659

Please sign in to comment.