@wise/dynamic-flow-client 5.30.0-experimental-7a76ef5 → 5.30.0

package/build/domain/components/collectionComponent/CollectionComponent.test.js

@@ -0,0 +1,447 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createCollectionStack } from './CollectionStack';
+import { createCollectionController } from './CollectionController';
+import { vi } from 'vitest';
+import { wait } from '../../../test-utils';
+import { createMarkdownComponent } from '../MarkdownComponent';
+import { createCollectionComponent } from './CollectionComponent';
+const DEBOUNCE_TIME = 800;
+const createMarkdown = (uid, content) => createMarkdownComponent({
+    uid,
+    margin: 'md',
+    align: 'start',
+    content,
+    size: 'md',
+});
+const getLoadMore = (component) => {
+    const state = component.getActiveState();
+    return state.status.type === 'idle' && state.nextCursor
+        ? () => component.loadMore(state)
+        : undefined;
+};
+const defaultState = {
+    sections: [
+        {
+            id: 'section-1',
+            type: 'items',
+            title: 'Results',
+            items: [
+                { id: 'item-one', title: 'Item 1', description: 'Description 1' },
+                { id: 'item-two', title: 'Item 2', description: 'Description 2' },
+            ],
+        },
+    ],
+    filters: [
+        {
+            type: 'select',
+            param: 'category',
+            options: [
+                { value: 'opt-1', title: 'Option 1', selected: false },
+                { value: 'opt-2', title: 'Option 2', selected: false },
+            ],
+        },
+    ],
+    search: {
+        param: 'q',
+        hint: 'Search...',
+    },
+    analytics: {},
+};
+const createDefaultComponent = (overrides = {}, searchFunction = vi.fn()) => {
+    var _a;
+    const onComponentUpdate = vi.fn();
+    const { state = defaultState } = overrides, props = __rest(overrides, ["state"]);
+    const stack = createCollectionStack((_a = overrides.uid) !== null && _a !== void 0 ? _a : 'collection-1', state, onComponentUpdate);
+    const controller = createCollectionController({
+        stack,
+        collectionClient: searchFunction,
+        trackEvent: vi.fn(),
+    });
+    const component = createCollectionComponent(Object.assign({ uid: 'collection-1', analyticsId: 'collection-aid', control: undefined, margin: 'md', tags: [] }, props), stack, controller);
+    return { component, onComponentUpdate, searchFunction };
+};
+describe('CollectionComponent', () => {
+    describe('initial state', () => {
+        it('creates a component with idle status and sections', () => {
+            const { component } = createDefaultComponent();
+            expect(component.type).toBe('collection');
+            expect(component.kind).toBe('layout');
+            expect(component.getActiveState().status.type).toBe('idle');
+            expect(component.getActiveState().sections).toHaveLength(1);
+            expect(component.getActiveState().sections[0].type).toBe('items');
+            expect(component.getActiveState().sections[0].items).toHaveLength(2);
+        });
+        it('provides a loadMore function when nextCursor is present', () => {
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'cursor-1' }),
+            });
+            expect(component.getActiveState().status.type).toBe('idle');
+            expect(getLoadMore(component)).toBeDefined();
+        });
+        it('does not provide loadMore when there is no nextCursor', () => {
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { nextCursor: undefined }),
+            });
+            expect(component.getActiveState().status.type).toBe('idle');
+            expect(getLoadMore(component)).toBeUndefined();
+        });
+        it('includes components from layout sections in its children', () => {
+            const layoutComponent = createMarkdown('layout-markdown', 'Layout section content');
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { sections: [
+                        ...defaultState.sections,
+                        {
+                            type: 'layout',
+                            id: 'layout',
+                            components: [layoutComponent],
+                        },
+                    ] }),
+            });
+            expect(component.getChildren()).toContain(layoutComponent);
+        });
+        it('includes components from initial search sections in its children', () => {
+            const searchLayout = createMarkdown('search-markdown', 'Search layout');
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { search: {
+                        param: 'q',
+                        initialSections: [{ type: 'layout', id: 'layout', components: [searchLayout] }],
+                    } }),
+            });
+            expect(component.getChildren()).toContain(searchLayout);
+        });
+    });
+    describe('search', () => {
+        it('updates the query state immediately on onChange', () => {
+            var _a;
+            const { component } = createDefaultComponent();
+            component.search(component.getActiveState(), 'hello');
+            expect((_a = component.getActiveState().search) === null || _a === void 0 ? void 0 : _a.query).toBe('hello');
+        });
+        it('sets status to loading when search begins', () => {
+            const { component } = createDefaultComponent();
+            component.search(component.getActiveState(), 'hello');
+            expect(component.getActiveState().status).toEqual({ type: 'loading', reason: 'search' });
+        });
+        it('debounces the search query call', () => {
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.search(component.getActiveState(), 'hello');
+            expect(searchFunction).not.toHaveBeenCalled();
+            vi.advanceTimersByTime(DEBOUNCE_TIME);
+            expect(searchFunction).toHaveBeenCalledTimes(1);
+        });
+        it('passes the search query to the search function', () => {
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.search(component.getActiveState(), 'test query');
+            vi.advanceTimersByTime(DEBOUNCE_TIME);
+            expect(searchFunction).toHaveBeenCalledWith(expect.objectContaining({
+                searchParam: 'q',
+                query: 'test query',
+            }));
+        });
+        it('applies search configuration from a response, keeping the query', async () => {
+            var _a, _b;
+            const response = {
+                sections: [],
+                search: { param: 'q', hints: ['Search again...'] },
+                analytics: {},
+            };
+            const searchFunction = vi.fn().mockResolvedValue(response);
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.search(component.getActiveState(), 'query');
+            await vi.advanceTimersByTimeAsync(DEBOUNCE_TIME);
+            expect((_a = component.getActiveState().search) === null || _a === void 0 ? void 0 : _a.hints).toEqual(['Search again...']);
+            expect((_b = component.getActiveState().search) === null || _b === void 0 ? void 0 : _b.query).toBe('query');
+        });
+        it('keeps before and after sections when a response does not include them', async () => {
+            const before = createMarkdown('before', 'Before');
+            const after = createMarkdown('after', 'After');
+            const searchFunction = vi.fn().mockResolvedValue({ sections: [], analytics: {} });
+            const { component } = createDefaultComponent({ state: Object.assign(Object.assign({}, defaultState), { beforeSections: [before], afterSections: [after] }) }, searchFunction);
+            component.search(component.getActiveState(), 'query');
+            await vi.advanceTimersByTimeAsync(DEBOUNCE_TIME);
+            expect(component.getActiveState().beforeSections).toEqual([before]);
+            expect(component.getActiveState().afterSections).toEqual([after]);
+        });
+        it('updates state with search results on success', async () => {
+            const response = {
+                sections: [
+                    {
+                        type: 'items',
+                        id: 'section-1',
+                        title: 'Search Results',
+                        items: [{ id: 'found', title: 'Found Item' }],
+                    },
+                ],
+                analytics: {},
+            };
+            const searchFunction = vi.fn().mockResolvedValue(response);
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.search(component.getActiveState(), 'query');
+            await vi.advanceTimersByTimeAsync(DEBOUNCE_TIME);
+            expect(component.getActiveState().status.type).toBe('idle');
+            expect(component.getActiveState().sections[0].items[0].title).toBe('Found Item');
+        });
+        it('sets error status with reason "search" on failure', async () => {
+            const searchFunction = vi.fn().mockRejectedValue(new Error('network error'));
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.search(component.getActiveState(), 'query');
+            await vi.advanceTimersByTimeAsync(DEBOUNCE_TIME);
+            expect(component.getActiveState().status.type).toBe('error');
+            expect(component.getActiveState().status.reason).toBe('search');
+        });
+        it('repeats the failed request on retry', async () => {
+            const searchFunction = vi
+                .fn()
+                .mockRejectedValueOnce(new Error('fail'))
+                .mockResolvedValueOnce(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.search(component.getActiveState(), 'query');
+            await vi.advanceTimersByTimeAsync(DEBOUNCE_TIME);
+            expect(component.getActiveState().status.type).toBe('error');
+            component.retry(component.getActiveState());
+            expect(component.getActiveState().status).toEqual({ type: 'loading', reason: 'search' });
+            expect(searchFunction).toHaveBeenCalledTimes(2);
+            expect(searchFunction).toHaveBeenLastCalledWith(expect.objectContaining({ query: 'query' }));
+        });
+    });
+    describe('stack', () => {
+        const searchResponse = {
+            sections: [{ id: 'results', type: 'items', items: [{ id: 'found', title: 'Found' }] }],
+            nextCursor: 'search-page-2',
+            analytics: { source: 'search' },
+        };
+        it('keeps the query and filter selections per state', () => {
+            var _a, _b, _c, _d;
+            const { component } = createDefaultComponent({}, vi.fn().mockResolvedValue(null));
+            component.fork();
+            component.search(component.getActiveState(), 'hello');
+            component.selectFilter(component.getActiveState(), 0, 1);
+            const [rootState, forkedState] = component.stack;
+            expect((_a = rootState.search) === null || _a === void 0 ? void 0 : _a.query).toBe('');
+            expect((_b = rootState.filters) === null || _b === void 0 ? void 0 : _b[0].options[1].selected).toBe(false);
+            expect((_c = forkedState === null || forkedState === void 0 ? void 0 : forkedState.search) === null || _c === void 0 ? void 0 : _c.query).toBe('hello');
+            expect((_d = forkedState === null || forkedState === void 0 ? void 0 : forkedState.filters) === null || _d === void 0 ? void 0 : _d[0].options[1].selected).toBe(true);
+        });
+        it('paginates a forked state with its own query and cursor', async () => {
+            var _a;
+            const searchFunction = vi.fn().mockResolvedValue(searchResponse);
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.fork();
+            component.search(component.getActiveState(), 'hello');
+            await vi.advanceTimersByTimeAsync(DEBOUNCE_TIME);
+            (_a = getLoadMore(component)) === null || _a === void 0 ? void 0 : _a();
+            expect(searchFunction).toHaveBeenLastCalledWith(expect.objectContaining({ cursor: 'search-page-2', query: 'hello' }));
+        });
+        it('includes initial search state components in its children, without duplicates', () => {
+            const searchLayout = createMarkdown('search-markdown', 'Search layout');
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { search: {
+                        param: 'q',
+                        initialSections: [{ id: 'layout', type: 'layout', components: [searchLayout] }],
+                    } }),
+            });
+            component.fork();
+            expect(component.getChildren().filter((child) => child === searchLayout)).toHaveLength(1);
+        });
+    });
+    describe('filters', () => {
+        it('keeps the filters from the response', () => {
+            const { component } = createDefaultComponent();
+            expect(component.getActiveState().filters).toEqual(defaultState.filters);
+        });
+        it('sets status to loading and triggers query when a filter is selected', () => {
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.selectFilter(component.getActiveState(), 0, 0);
+            expect(component.getActiveState().status).toEqual({ type: 'loading', reason: 'filter' });
+            expect(searchFunction).toHaveBeenCalledTimes(1);
+        });
+        it('toggles the selected state for single-selection filters', () => {
+            var _a, _b;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.selectFilter(component.getActiveState(), 0, 0);
+            expect((_a = component.getActiveState().filters) === null || _a === void 0 ? void 0 : _a[0].options[0].selected).toBe(true);
+            expect((_b = component.getActiveState().filters) === null || _b === void 0 ? void 0 : _b[0].options[1].selected).toBe(false);
+        });
+        it('deselects other options in a single-selection filter', () => {
+            var _a, _b;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.selectFilter(component.getActiveState(), 0, 0);
+            component.selectFilter(component.getActiveState(), 0, 1);
+            expect((_a = component.getActiveState().filters) === null || _a === void 0 ? void 0 : _a[0].options[0].selected).toBe(false);
+            expect((_b = component.getActiveState().filters) === null || _b === void 0 ? void 0 : _b[0].options[1].selected).toBe(true);
+        });
+        it('allows multiple selections for multi-selection filters', () => {
+            var _a, _b;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { filters: [
+                        {
+                            type: 'select',
+                            param: 'tags',
+                            multiSelect: true,
+                            options: [
+                                { value: 'a', title: 'A', selected: false },
+                                { value: 'b', title: 'B', selected: false },
+                            ],
+                        },
+                    ] }),
+            }, searchFunction);
+            component.selectFilter(component.getActiveState(), 0, 0);
+            component.selectFilter(component.getActiveState(), 0, 1);
+            expect((_a = component.getActiveState().filters) === null || _a === void 0 ? void 0 : _a[0].options[0].selected).toBe(true);
+            expect((_b = component.getActiveState().filters) === null || _b === void 0 ? void 0 : _b[0].options[1].selected).toBe(true);
+        });
+    });
+    describe('pagination', () => {
+        it('sets status to loading when more results are loaded', () => {
+            const searchFunction = vi.fn().mockReturnValue(new Promise(() => { }));
+            const { component } = createDefaultComponent({ state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2' }) }, searchFunction);
+            component.loadMore(component.getActiveState());
+            expect(component.getActiveState().status).toEqual({ type: 'loading', reason: 'pagination' });
+        });
+        it('calls search function with cursor when loadMore is triggered', () => {
+            var _a;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({ state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2' }) }, searchFunction);
+            (_a = getLoadMore(component)) === null || _a === void 0 ? void 0 : _a();
+            expect(searchFunction).toHaveBeenCalledWith(expect.objectContaining({ cursor: 'page-2' }));
+        });
+        it('sets error with reason "pagination" when loadMore fails', async () => {
+            var _a;
+            const searchFunction = vi.fn().mockRejectedValue(new Error('fail'));
+            const { component } = createDefaultComponent({ state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2' }) }, searchFunction);
+            (_a = getLoadMore(component)) === null || _a === void 0 ? void 0 : _a();
+            await vi.advanceTimersByTimeAsync(0);
+            expect(component.getActiveState().status.type).toBe('error');
+            expect(component.getActiveState().status.reason).toBe('pagination');
+        });
+        it('provides a new loadMore when response has a nextCursor', async () => {
+            var _a;
+            const response = {
+                sections: [
+                    {
+                        type: 'items',
+                        id: 'section-1',
+                        items: [{ id: 'page-2-item', title: 'Page 2 Item' }],
+                    },
+                ],
+                nextCursor: 'page-3',
+                analytics: {},
+            };
+            const searchFunction = vi.fn().mockResolvedValue(response);
+            const { component } = createDefaultComponent({ state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2' }) }, searchFunction);
+            (_a = getLoadMore(component)) === null || _a === void 0 ? void 0 : _a();
+            await vi.advanceTimersByTimeAsync(0);
+            expect(component.getActiveState().status.type).toBe('idle');
+            expect(getLoadMore(component)).toBeDefined();
+        });
+        it('appends components when paginating an existing layout section', async () => {
+            var _a;
+            const response = {
+                sections: [
+                    {
+                        type: 'layout',
+                        id: 'layout',
+                        components: [createMarkdown('page-2-markdown', 'Page 2 layout')],
+                    },
+                ],
+                analytics: {},
+            };
+            const searchFunction = vi.fn().mockResolvedValue(response);
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2', sections: [
+                        {
+                            type: 'layout',
+                            id: 'layout',
+                            components: [createMarkdown('page-1-markdown', 'Page 1 layout')],
+                        },
+                    ] }),
+            }, searchFunction);
+            (_a = getLoadMore(component)) === null || _a === void 0 ? void 0 : _a();
+            await vi.advanceTimersByTimeAsync(0);
+            const section = component.getActiveState().sections[0];
+            expect(section.type).toBe('layout');
+            expect(section.components).toEqual([
+                expect.objectContaining({ content: 'Page 1 layout' }),
+                expect.objectContaining({ content: 'Page 2 layout' }),
+            ]);
+        });
+    });
+    it('uses the incoming section callToAction when a paginated response contains an existing section id', async () => {
+        var _a, _b;
+        const oldSectionCallToAction = {
+            type: 'link',
+            title: 'Old Section Link',
+            href: 'https://old-section-link.com',
+            hrefWithTracking: vi.fn(() => ({
+                href: 'https://old-section-link.com',
+                target: '_blank',
+                onClick: undefined,
+            })),
+            onClick: vi.fn(),
+        };
+        const newSectionCallToAction = {
+            type: 'link',
+            title: 'New Section Link',
+            href: 'https://new-section-link.com',
+            hrefWithTracking: vi.fn(() => ({
+                href: 'https://new-section-link.com',
+                target: '_blank',
+                onClick: undefined,
+            })),
+            onClick: vi.fn(),
+        };
+        const response = {
+            sections: [
+                {
+                    type: 'items',
+                    id: 'section-1',
+                    callToAction: newSectionCallToAction,
+                    items: [{ id: 'page-2-item', title: 'Page 2 Item' }],
+                },
+            ],
+            analytics: {},
+        };
+        const searchFunction = vi.fn().mockResolvedValue(response);
+        const { component } = createDefaultComponent({
+            state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2', sections: [
+                    Object.assign(Object.assign({}, defaultState.sections[0]), { callToAction: oldSectionCallToAction }),
+                ] }),
+        }, searchFunction);
+        (_a = getLoadMore(component)) === null || _a === void 0 ? void 0 : _a();
+        await vi.advanceTimersByTimeAsync(0);
+        expect((_b = component.getActiveState().sections[0].callToAction) === null || _b === void 0 ? void 0 : _b.title).toBe('New Section Link');
+        expect(component.getActiveState().sections[0].callToAction).toBe(newSectionCallToAction);
+    });
+    describe('abort behavior', () => {
+        it('aborts previous request when a new search is triggered', () => {
+            const searchFunction = vi.fn().mockImplementation(async () => {
+                await wait(1000);
+                return null;
+            });
+            const { component } = createDefaultComponent({}, searchFunction);
+            component.search(component.getActiveState(), 'first');
+            vi.advanceTimersByTime(DEBOUNCE_TIME);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            const firstSignal = searchFunction.mock.calls[0][0].signal;
+            component.search(component.getActiveState(), 'second');
+            vi.advanceTimersByTime(DEBOUNCE_TIME);
+            expect(firstSignal.aborted).toBe(true);
+        });
+    });
+});

package/build/domain/components/collectionComponent/CollectionController.js

@@ -0,0 +1,138 @@
+import { applyCollectionResponse } from './applyCollectionResponse';
+import { recursiveMerge } from '../../../utils/recursiveMerge';
+import { getRequestAbortController } from '../../../controller/getRequestAbortController';
+import { debounce } from '../utils/debounce';
+import { setError, setLoading, setQuery } from './CollectionState';
+import { toggleFilterOption } from './toggleFilterOption';
+/** Coordinates collection commands and owns request lifetimes independently of state. */
+export const createCollectionController = ({ stack, collectionClient, trackEvent, }) => {
+    let requests = new Map();
+    const getRequest = (id) => {
+        const existing = requests.get(id);
+        if (existing) {
+            return existing;
+        }
+        const request = createSchedulableRequest((mode, signal) => executeRequest(id, mode, signal));
+        requests = new Map([...requests, [id, request]]);
+        return request;
+    };
+    const queueRequest = (id, mode, transform) => {
+        if (!stack.getState(id)) {
+            return;
+        }
+        stack.update(id, (state) => setLoading(transform(state), mode));
+        getRequest(id).queue(mode);
+    };
+    const runRequest = (id, mode, transform = (state) => state) => {
+        if (!stack.getState(id)) {
+            return;
+        }
+        stack.update(id, (state) => setLoading(transform(state), mode));
+        getRequest(id).run(mode);
+    };
+    const handleSuccess = (state, mode, response) => {
+        trackEvent(getEventName(mode, 'Succeeded'), mode === 'pagination'
+            ? recursiveMerge(state.analytics, response.analytics)
+            : response.analytics);
+        stack.update(state.id, (current) => applyCollectionResponse(current, mode, response));
+    };
+    const handleFailure = (state, mode) => {
+        trackEvent(getEventName(mode, 'Failed'), state.analytics);
+        stack.update(state.id, (current) => setError(current, mode));
+    };
+    const executeRequest = async (id, mode, signal) => {
+        const state = stack.getState(id);
+        if (!state) {
+            return;
+        }
+        const { analytics, filters, search } = state;
+        trackEvent(getEventName(mode, 'Triggered'), analytics);
+        try {
+            const response = await collectionClient({
+                searchParam: search === null || search === void 0 ? void 0 : search.param,
+                query: search === null || search === void 0 ? void 0 : search.query,
+                cursor: mode === 'pagination' ? state.nextCursor : undefined,
+                signal,
+                filters,
+            });
+            if (response && !signal.aborted) {
+                handleSuccess(state, mode, response);
+            }
+        }
+        catch (_a) {
+            if (!signal.aborted) {
+                handleFailure(state, mode);
+            }
+        }
+    };
+    return {
+        search(id, value) {
+            queueRequest(id, 'search', (state) => setQuery(state, value));
+        },
+        selectFilter(id, filterIndex, optionIndex) {
+            var _a, _b;
+            if (!((_b = (_a = stack.getState(id)) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b[filterIndex])) {
+                return;
+            }
+            runRequest(id, 'filter', (state) => toggleFilterOption(state, filterIndex, optionIndex));
+        },
+        loadMore(id) {
+            runRequest(id, 'pagination');
+        },
+        retry(id) {
+            var _a;
+            const status = (_a = stack.getState(id)) === null || _a === void 0 ? void 0 : _a.status;
+            if ((status === null || status === void 0 ? void 0 : status.type) !== 'error') {
+                return;
+            }
+            runRequest(id, status.reason);
+        },
+        fork: stack.fork,
+        pop() {
+            var _a;
+            const states = stack.getStates();
+            if (states.length === 1) {
+                return;
+            }
+            const { id } = stack.getActiveState();
+            (_a = requests.get(id)) === null || _a === void 0 ? void 0 : _a.abort();
+            requests = new Map([...requests].filter(([stateId]) => stateId !== id));
+            stack.pop();
+        },
+    };
+};
+const DEBOUNCE_TIME = 800;
+const createSchedulableRequest = (execute) => {
+    const { abort, refresh } = getRequestAbortController();
+    const run = (mode) => {
+        void execute(mode, refresh());
+    };
+    const debouncedRun = debounce(run, DEBOUNCE_TIME);
+    return {
+        run(mode) {
+            debouncedRun.cancel();
+            run(mode);
+        },
+        queue(mode) {
+            abort();
+            debouncedRun(mode);
+        },
+        abort() {
+            debouncedRun.cancel();
+            abort();
+        },
+    };
+};
+const getEventName = (mode, status) => {
+    const getMode = () => {
+        switch (mode) {
+            case 'pagination':
+                return 'Pagination';
+            case 'search':
+                return 'Search';
+            case 'filter':
+                return 'Filter';
+        }
+    };
+    return `Collection ${getMode()} ${status}`;
+};

package/build/domain/components/collectionComponent/CollectionController.test.js

@@ -0,0 +1,58 @@
+import { vi } from 'vitest';
+import { createCollectionController } from './CollectionController';
+import { createCollectionStack } from './CollectionStack';
+describe('CollectionController', () => {
+    it('schedules queries and cancels each fork independently', async () => {
+        const collectionClient = vi.fn().mockResolvedValue(null);
+        const stack = createCollectionStack('collection', { sections: [], search: { param: 'q' }, analytics: {} }, vi.fn());
+        const controller = createCollectionController({ stack, collectionClient, trackEvent: vi.fn() });
+        const rootId = stack.getActiveState().id;
+        controller.search(rootId, 'root');
+        controller.fork();
+        const forkId = stack.getActiveState().id;
+        controller.search(forkId, 'fork');
+        expect(collectionClient).not.toHaveBeenCalled();
+        await vi.advanceTimersByTimeAsync(800);
+        expect(collectionClient).toHaveBeenCalledTimes(2);
+        expect(collectionClient).toHaveBeenNthCalledWith(1, expect.objectContaining({ query: 'root' }));
+        expect(collectionClient).toHaveBeenNthCalledWith(2, expect.objectContaining({ query: 'fork' }));
+        const rootSignal = collectionClient.mock.calls[0][0].signal;
+        const forkSignal = collectionClient.mock.calls[1][0].signal;
+        expect(rootSignal).toBeInstanceOf(AbortSignal);
+        expect(forkSignal).toBeInstanceOf(AbortSignal);
+        controller.pop();
+        expect(forkSignal.aborted).toBe(true);
+        expect(rootSignal.aborted).toBe(false);
+        controller.search(rootId, 'replacement');
+        expect(rootSignal.aborted).toBe(true);
+        await vi.advanceTimersByTimeAsync(800);
+        expect(collectionClient).toHaveBeenCalledTimes(3);
+    });
+    it('notifies once with both the filter change and loading state before executing', () => {
+        var _a;
+        const onChange = vi.fn();
+        const stack = createCollectionStack('collection', {
+            sections: [],
+            analytics: {},
+            filters: [
+                {
+                    type: 'select',
+                    param: 'category',
+                    multiSelect: true,
+                    options: [{ value: 'one', title: 'One', selected: false }],
+                },
+            ],
+        }, onChange);
+        const collectionClient = vi.fn().mockResolvedValue(null);
+        const controller = createCollectionController({
+            stack,
+            collectionClient,
+            trackEvent: vi.fn(),
+        });
+        controller.selectFilter(stack.getActiveState().id, 0, 0);
+        expect(collectionClient).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(stack.getActiveState().status).toEqual({ type: 'loading', reason: 'filter' });
+        expect((_a = stack.getActiveState().filters) === null || _a === void 0 ? void 0 : _a[0].options[0].selected).toBe(true);
+    });
+});