import { describe, expect, it } from 'vitest';
import type { CatalogItem } from '@tool.io/tools/compare';
import {
filterCompareModalItems,
groupCompareSuggestions
} from './modal';
const item = (
id: string,
name: string,
categoryIds: string[]
): CatalogItem => ({
attributes: {},
categoryIds,
id,
image: null,
name,
schemaVersion: 1,
slug: id,
sourceIds: ['fixture'],
summary: `${name} fixture`,
updatedAt: '2026-08-09T00:00:00Z'
});
const tesla = item('tesla-model-3', 'Tesla Model 3', [
'vehicle',
'car'
]);
const toyota = item('toyota-corolla', 'Toyota Corolla', [
'vehicle',
'car'
]);
const bicycle = item('trek-fx-3', 'Trek FX 3', [
'vehicle',
'bicycle'
]);
const banana = item('banana', 'Banana', ['food', 'fruit']);
describe('compare modal category behavior', () => {
it('groups related category items ahead of unrelated top comparisons', () => {
const groups = groupCompareSuggestions(
[tesla, toyota, bicycle, banana],
{
activeCategoryId: 'car',
excludedItemIds: [tesla.id],
preferredRelatedSlugs: [toyota.slug],
query: '',
topComparedSlugs: [banana.slug, bicycle.slug]
}
);
expect(groups.map((group) => group.title)).toEqual([
'Related items',
'Top comparisons'
]);
expect(
groups[0].items.map((candidate) => candidate.slug)
).toEqual(['toyota-corolla']);
expect(
groups[1].items.map((candidate) => candidate.slug)
).toEqual(['banana', 'trek-fx-3']);
});
it('uses one global result group once the user searches', () => {
const groups = groupCompareSuggestions(
[tesla, toyota, bicycle, banana],
{
activeCategoryId: 'car',
excludedItemIds: [tesla.id],
query: 'banana',
topComparedSlugs: []
}
);
expect(groups).toHaveLength(1);
expect(groups[0].title).toBe('Search results');
expect(
groups[0].items.map((candidate) => candidate.slug)
).toEqual(['banana']);
});
it('shows only the active category until the user searches', () => {
expect(
filterCompareModalItems(
[tesla, toyota, bicycle, banana],
{
activeCategoryId: 'car',
anchorItemId: tesla.id,
query: ''
}
).map((candidate) => candidate.slug)
).toEqual(['toyota-corolla']);
expect(
filterCompareModalItems(
[tesla, toyota, bicycle, banana],
{
activeCategoryId: 'car',
anchorItemId: tesla.id,
query: 'banana'
}
).map((candidate) => candidate.slug)
).toEqual(['banana']);
});
it('shows every category by default on the general compare page', () => {
expect(
filterCompareModalItems(
[tesla, toyota, bicycle, banana],
{
activeCategoryId: null,
anchorItemId: tesla.id,
query: ''
}
)
).toHaveLength(3);
});
});
Browse the implementation files for Electric Cars Comparison.