Skip to content

test(atomic): migrate functional component tests to use renderFunctionFixture #6656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Dec 1, 2025
Merged

test(atomic): migrate functional component tests to use renderFunctionFixture #6656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
518c296
Initial plan
Copilot Nov 26, 2025
474ab6f
Migrate functional component tests to use renderFunctionFixture
Copilot Nov 26, 2025
753acad
Remove storybook/test imports from functional component tests
Copilot Nov 26, 2025
8fad9a6
Migrate checkbox and heading test files to renderFunctionFixture
Copilot Nov 26, 2025
f4869af
streamline
alexprudhomme Nov 27, 2025
2a7811e
fix: rename duplicate test names in checkbox.spec.ts
Copilot Nov 27, 2025
ebb0cbd
Update pager-buttons.spec.ts
alexprudhomme Dec 1, 2025
85b27aa
address PR review comments
Copilot Dec 1, 2025
d1e87f3
Update color-facet-checkbox.spec.ts
alexprudhomme Dec 1, 2025
9f19ac6
Update button.spec.ts
alexprudhomme Dec 1, 2025
d6b2ff7
Update color-facet-checkbox.spec.ts
alexprudhomme Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/atomic/src/components/commerce/atomic-commerce-interface/store.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {type CommerceEngine, Selectors} from '@coveo/headless/commerce';
import {describe, expect, test, vi} from 'vitest';
import {describe, expect, it, vi} from 'vitest';
import {createCommerceStore} from './store';

vi.mock('@coveo/headless/commerce', {spy: true});

describe('CommerceStore', () => {
test('should set and unset loading flags correctly', () => {
it('should set and unset loading flags correctly', () => {
const store = createCommerceStore('search');
const loadingFlag = 'test-loading-flag';

Expand All @@ -18,7 +18,7 @@ describe('CommerceStore', () => {
expect(store.state.loadingFlags).not.toContain(loadingFlag);
});

test('should correctly identify mobile state', () => {
it('should correctly identify mobile state', () => {
const store = createCommerceStore('search');
const originalMatchMedia = window.matchMedia;

Expand All @@ -45,7 +45,7 @@ describe('CommerceStore', () => {
window.matchMedia = originalMatchMedia;
});

test('should return unique ID from engine based on type', () => {
it('should return unique ID from engine based on type', () => {
const mockEngine = {
state: {},
} as unknown as CommerceEngine;
Expand Down
64 changes: 28 additions & 36 deletions packages/atomic/src/components/commerce/atomic-commerce-pager/atomic-commerce-pager.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,7 @@ import {
} from '@coveo/headless/commerce';
import {html} from 'lit';
import {ifDefined} from 'lit/directives/if-defined.js';
import {
beforeEach,
describe,
expect,
it,
type MockInstance,
test,
vi,
} from 'vitest';
import {beforeEach, describe, expect, it, type MockInstance, vi} from 'vitest';
import {page} from 'vitest/browser';
import {renderInAtomicCommerceInterface} from '@/vitest-utils/testing-helpers/fixtures/atomic/commerce/atomic-commerce-interface-fixture';
import {buildFakePager} from '@/vitest-utils/testing-helpers/fixtures/headless/commerce/pager-subcontroller';
Expand Down Expand Up @@ -104,7 +96,7 @@ describe('atomic-commerce-pager', () => {
return element;
};

test('should call buildProductListing with engine when interfaceElement.type is product-listing', async () => {
it('should call buildProductListing with engine when interfaceElement.type is product-listing', async () => {
const element = await renderPager({
interfaceType: 'product-listing',
});
Expand All @@ -113,7 +105,7 @@ describe('atomic-commerce-pager', () => {
expect(element.pager).toBeDefined();
});

test('should call buildSearch with engine when interfaceElement.type is search', async () => {
it('should call buildSearch with engine when interfaceElement.type is search', async () => {
const element = await renderPager({
interfaceType: 'search',
});
Expand All @@ -122,7 +114,7 @@ describe('atomic-commerce-pager', () => {
expect(element.pager).toBeDefined();
});

test('should show the proper page range by default', async () => {
it('should show the proper page range by default', async () => {
await renderPager();

await expect.element(locators.page1).toBeInTheDocument();
Expand All @@ -133,7 +125,7 @@ describe('atomic-commerce-pager', () => {
await expect.element(locators.page6).not.toBeInTheDocument();
});

test('number-of-pages should affect the range of pages', async () => {
it('number-of-pages should affect the range of pages', async () => {
await renderPager({numberOfPages: 3});

await expect.element(locators.page1).toBeInTheDocument();
Expand All @@ -142,7 +134,7 @@ describe('atomic-commerce-pager', () => {
await expect.element(locators.page4).not.toBeInTheDocument();
});

test('should throw an error when numberOfPages is less than 0', async () => {
it('should throw an error when numberOfPages is less than 0', async () => {
const consoleErrorSpy = vi
.spyOn(console, 'error')
.mockImplementation(() => {});
Expand All @@ -158,25 +150,25 @@ describe('atomic-commerce-pager', () => {
);
});

test('should not render when there are no pages', async () => {
it('should not render when there are no pages', async () => {
await renderPager({state: {totalPages: 0}});

await expect.element(locators.page1).not.toBeInTheDocument();
});

test('should not render when there is only 1 page', async () => {
it('should not render when there is only 1 page', async () => {
await renderPager({state: {totalPages: 1}});

await expect.element(locators.page1).not.toBeInTheDocument();
});

test('should disable the previous button when on the first page', async () => {
it('should disable the previous button when on the first page', async () => {
await renderPager();

await expect.element(locators.previous).toHaveAttribute('disabled');
});

test('should disable the next button when on the last page', async () => {
it('should disable the next button when on the last page', async () => {
await renderPager({state: {page: 9, totalPages: 10}});

await expect.element(locators.next).toHaveAttribute('disabled');
Expand All @@ -201,17 +193,17 @@ describe('atomic-commerce-pager', () => {
await locators.previous.click();
});

test('should call #focusOnFirstResultAfterNextSearch', async () => {
it('should call #focusOnFirstResultAfterNextSearch', async () => {
expect(focusSpy).toHaveBeenCalled();
});

test("should dispatch 'atomic/scrollToTop'", async () => {
it("should dispatch 'atomic/scrollToTop'", async () => {
expect(eventSpy).toHaveBeenCalledWith(
new CustomEvent('atomic/scrollToTop')
);
});

test('should call #pager.previousPage', async () => {
it('should call #pager.previousPage', async () => {
expect(previousSpy).toHaveBeenCalled();
});

Expand Down Expand Up @@ -239,17 +231,17 @@ describe('atomic-commerce-pager', () => {
await locators.next.click();
});

test('should call #focusOnFirstResultAfterNextSearch', async () => {
it('should call #focusOnFirstResultAfterNextSearch', async () => {
expect(focusSpy).toHaveBeenCalled();
});

test("should dispatch 'atomic/scrollToTop'", async () => {
it("should dispatch 'atomic/scrollToTop'", async () => {
expect(eventSpy).toHaveBeenCalledWith(
new CustomEvent('atomic/scrollToTop')
);
});

test('should call #pager.nextPage', async () => {
it('should call #pager.nextPage', async () => {
expect(nextSpy).toHaveBeenCalled();
});

Expand All @@ -274,30 +266,30 @@ describe('atomic-commerce-pager', () => {
await locators.page3.click();
});

test('should call #focusOnFirstResultAfterNextSearch', async () => {
it('should call #focusOnFirstResultAfterNextSearch', async () => {
expect(focusSpy).toHaveBeenCalled();
});

test("should dispatch 'atomic/scrollToTop'", async () => {
it("should dispatch 'atomic/scrollToTop'", async () => {
expect(eventSpy).toHaveBeenCalledWith(
new CustomEvent('atomic/scrollToTop')
);
});

test('should call #pager.selectPage', async () => {
it('should call #pager.selectPage', async () => {
expect(selectPageSpy).toHaveBeenCalled();
});
});

test('should render the proper value on the page buttons', async () => {
it('should render the proper value on the page buttons', async () => {
await renderPager();

await expect.element(locators.page1).toHaveAttribute('value', '1');
await expect.element(locators.page2).toHaveAttribute('value', '2');
await expect.element(locators.page3).toHaveAttribute('value', '3');
});

test('should have the selected button as active', async () => {
it('should have the selected button as active', async () => {
await renderPager();

await expect
Expand All @@ -306,7 +298,7 @@ describe('atomic-commerce-pager', () => {
await expect.element(locators.page2).toHaveAttribute('part', 'page-button');
});

test('should be able to render a custom icon for the previous button', async () => {
it('should be able to render a custom icon for the previous button', async () => {
const icon = '<svg>random-previous-icon</svg>';
const element = await renderPager({
previousButtonIcon: icon,
Expand All @@ -318,7 +310,7 @@ describe('atomic-commerce-pager', () => {
expect(atomicIcon).toHaveAttribute('icon', icon);
});

test('should be able to render a custom icon for the next button', async () => {
it('should be able to render a custom icon for the next button', async () => {
const icon = '<svg>random-next-icon</svg>';
const element = await renderPager({
nextButtonIcon: icon,
Expand All @@ -330,7 +322,7 @@ describe('atomic-commerce-pager', () => {
expect(atomicIcon).toHaveAttribute('icon', icon);
});

test('should render every part', async () => {
it('should render every part', async () => {
const element = await renderPager();

const parts = locators.parts(element);
Expand All @@ -345,7 +337,7 @@ describe('atomic-commerce-pager', () => {
await expect.element(parts.nextButtonIcon!).toBeInTheDocument();
}, 1e60);

test('should use keyed directive for page buttons', async () => {
it('should use keyed directive for page buttons', async () => {
await renderPager();

await expect.element(locators.page1).toHaveAttribute('value', '1');
Expand Down Expand Up @@ -375,7 +367,7 @@ describe('atomic-commerce-pager', () => {
await expect.element(button).toBe(expectedFocusButton);
};

test('should focus on previous button when navigating backward from first page button', async () => {
it('should focus on previous button when navigating backward from first page button', async () => {
const buttons = retrieveButtons();

const [firstPageButton, lastPageButton] = [
Expand All @@ -391,7 +383,7 @@ describe('atomic-commerce-pager', () => {
);
});

test('should focus on next button when navigating forward from last page button', async () => {
it('should focus on next button when navigating forward from last page button', async () => {
const buttons = retrieveButtons();

const [firstPageButton, lastPageButton] = [
Expand All @@ -407,7 +399,7 @@ describe('atomic-commerce-pager', () => {
);
});

test('should focus on next page button when navigating between page buttons', async () => {
it('should focus on next page button when navigating between page buttons', async () => {
const buttons = retrieveButtons();

const [currentButton, nextButton] = buttons;
Expand Down
Loading
Loading