+
diff --git a/tests/frontend/components/controls/scanScopeMenu.test.js b/tests/frontend/components/controls/scanScopeMenu.test.js
index b5dac3a4..c4f758c0 100644
--- a/tests/frontend/components/controls/scanScopeMenu.test.js
+++ b/tests/frontend/components/controls/scanScopeMenu.test.js
@@ -18,6 +18,9 @@ vi.mock(I18N_MODULE, () => ({
}));
const { renderScanScopeMenu, resolveScanScopeTarget } = await import(MODULE);
+const { i18n } = await import(
+ new URL('../../../../static/js/i18n/index.js', import.meta.url).pathname
+);
describe('ScanScopeMenu', () => {
let menu;
@@ -38,7 +41,8 @@ describe('ScanScopeMenu', () => {
expect(rows[0].dataset.action).toBe('scan-root');
expect(rows[0].dataset.root).toBe('/mnt/a/loras');
- expect(rows[0].title).toBe('/mnt/a/loras');
+ // Tooltip is always two lines: full path, then the exact count.
+ expect(rows[0].title).toBe('/mnt/a/loras\n7 models');
expect(rows[0].querySelector('.scan-root-label').textContent).toBe('a/loras');
expect(rows[0].querySelector('.scan-root-count').textContent).toBe('7 models');
expect(rows[0].classList.contains('is-offline')).toBe(false);
@@ -49,6 +53,29 @@ describe('ScanScopeMenu', () => {
expect(rows[1].dataset.action).toBe('scan-root');
});
+ it('abbreviates five digit counts and keeps the exact value in the row tooltip', async () => {
+ // The abbreviation itself is locale specific (K vs 万), so pin it.
+ const originalLocale = i18n.currentLocale;
+ i18n.currentLocale = 'en';
+ try {
+ renderScanScopeMenu(menu, [
+ { path: '/mnt/a/loras', label: 'a/loras', reachable: true, models: 12345 },
+ { path: '/mnt/b/loras', label: 'b/loras', reachable: true, models: 42 },
+ ]);
+
+ const rows = menu.querySelectorAll('.scan-root-item');
+ expect(rows[0].querySelector('.scan-root-count').textContent).toBe('12.3K models');
+ // Path stays in the tooltip; the exact count is always the second line, so
+ // the tooltip has the same shape at every magnitude.
+ expect(rows[0].title).toBe('/mnt/a/loras\n12,345 models');
+
+ expect(rows[1].querySelector('.scan-root-count').textContent).toBe('42 models');
+ expect(rows[1].title).toBe('/mnt/b/loras\n42 models');
+ } finally {
+ i18n.currentLocale = originalLocale;
+ }
+ });
+
it('resolveScanScopeTarget reads path, label and offline state', () => {
renderScanScopeMenu(menu, [
{ path: '/mnt/b/loras', label: 'b/loras', reachable: false, models: 0 },
diff --git a/tests/frontend/components/modelTypeDropdown.test.js b/tests/frontend/components/modelTypeDropdown.test.js
index e2ea81b6..02dcdf1a 100644
--- a/tests/frontend/components/modelTypeDropdown.test.js
+++ b/tests/frontend/components/modelTypeDropdown.test.js
@@ -1,5 +1,6 @@
import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
import { initModelTypeDropdown } from '../../../static/js/components/controls/ModelTypeDropdown.js';
+import { i18n } from '../../../static/js/i18n/index.js';
import { readTemplate } from '../utils/domFixtures.js';
function renderDropdownDom() {
@@ -93,6 +94,31 @@ describe('ModelTypeDropdown', () => {
expect(options[3].textContent).toBe('Text Encoder (30)');
});
+ it('abbreviates large counts and keeps the exact value in the option tooltip', async () => {
+ const originalLocale = i18n.currentLocale;
+ i18n.currentLocale = 'en';
+ try {
+ mockModelTypesResponse([
+ { type: 'lora', count: 19876 },
+ { type: 'vae', count: 12 },
+ ]);
+
+ await initModelTypeDropdown('loras');
+
+ const options = document.querySelectorAll('.model-type-option');
+ expect(options[1].textContent).toBe('LoRA (19.9K)');
+ expect(options[1].title).toBe('LoRA — 19,876 models');
+ // Every option carries its own tooltip, so hovering never depends on the
+ // magnitude and never falls back to the group's "Filter by model type".
+ expect(options[2].textContent).toBe('VAE (12)');
+ expect(options[2].title).toBe('VAE — 12 models');
+ // "All Types" is not a counted entry and keeps no tooltip of its own.
+ expect(options[0].title).toBe('');
+ } finally {
+ i18n.currentLocale = originalLocale;
+ }
+ });
+
it('ignores types without a known display name', async () => {
mockModelTypesResponse([
{ type: 'vae', count: 12 },
diff --git a/tests/frontend/managers/FilterManager.chipCounts.test.js b/tests/frontend/managers/FilterManager.chipCounts.test.js
new file mode 100644
index 00000000..4ef9b916
--- /dev/null
+++ b/tests/frontend/managers/FilterManager.chipCounts.test.js
@@ -0,0 +1,209 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+
+// Same dependency mocks as FilterManager.tagLogic.test.js: the manager touches
+// storage, toasts, the API factory and the preset manager on construction.
+vi.mock('../../../static/js/state/index.js', () => ({
+ getCurrentPageState: vi.fn(() => ({
+ filters: {},
+ })),
+ state: {
+ currentPageType: 'loras',
+ loadingManager: {
+ showSimpleLoading: vi.fn(),
+ hide: vi.fn(),
+ },
+ },
+}));
+
+vi.mock('../../../static/js/utils/uiHelpers.js', () => ({
+ showToast: vi.fn(),
+ updatePanelPositions: vi.fn(),
+}));
+
+vi.mock('../../../static/js/api/modelApiFactory.js', () => ({
+ getModelApiClient: vi.fn(() => ({
+ loadMoreWithVirtualScroll: vi.fn().mockResolvedValue(),
+ })),
+}));
+
+vi.mock('../../../static/js/utils/storageHelpers.js', () => ({
+ getStorageItem: vi.fn(),
+ setStorageItem: vi.fn(),
+ removeStorageItem: vi.fn(),
+}));
+
+vi.mock('../../../static/js/managers/FilterPresetManager.js', () => ({
+ FilterPresetManager: vi.fn().mockImplementation(() => ({
+ renderPresets: vi.fn(),
+ saveActivePreset: vi.fn(),
+ restoreActivePreset: vi.fn(),
+ updateAddButtonState: vi.fn(),
+ hasEmptyWildcardResult: vi.fn(() => false),
+ })),
+ EMPTY_WILDCARD_MARKER: '__EMPTY_WILDCARD_RESULT__',
+}));
+
+import { FilterManager } from '../../../static/js/managers/FilterManager.js';
+import { i18n } from '../../../static/js/i18n/index.js';
+
+const BASE_MODELS = [
+ { name: 'Illustrious', count: 19876 },
+ { name: 'Pony', count: 5210 },
+ { name: 'SD 1.5', count: 7 },
+];
+
+const MODEL_TYPES = [
+ { type: 'lora', count: 19876 },
+ { type: 'locon', count: 12 },
+];
+
+function jsonResponse(payload) {
+ return { ok: true, json: async () => payload };
+}
+
+/**
+ * Build a manager whose filter panel sections are populated from the mocked
+ * endpoints, i.e. through the real render path rather than by hand.
+ */
+async function createManagerWithChips() {
+ global.fetch = vi.fn(async (url) => {
+ const target = String(url);
+ if (target.includes('/base-models')) {
+ return jsonResponse({ success: true, base_models: BASE_MODELS });
+ }
+ if (target.includes('/model-types')) {
+ return jsonResponse({ success: true, model_types: MODEL_TYPES });
+ }
+ return jsonResponse({ success: false });
+ });
+
+ const manager = new FilterManager({ page: 'loras' });
+ // createBaseModelTags/createModelTypeTags are fire-and-forget fetches.
+ await vi.waitFor(() => {
+ expect(document.querySelectorAll('.model-type-tag').length).toBe(MODEL_TYPES.length);
+ });
+ return manager;
+}
+
+let originalLocale;
+
+beforeEach(() => {
+ originalLocale = i18n.currentLocale;
+ i18n.currentLocale = 'en';
+
+ // translate() resolves through window.i18n. Stubbing it lets the tests see
+ // which key a call site picked (the recipes page uses its own sentence);
+ // unknown keys fall back to the caller's English string, as in production.
+ window.i18n = {
+ t: (key, params) => {
+ if (key === 'header.filter.countTitle') {
+ return `${params.name} — ${params.count} models`;
+ }
+ if (key === 'recipes.filter.countTitle') {
+ return `${params.name} — ${params.count} recipes`;
+ }
+ return key;
+ },
+ };
+
+ document.body.innerHTML = `
+
+
+ `;
+});
+
+afterEach(() => {
+ i18n.currentLocale = originalLocale;
+ delete window.i18n;
+ delete global.fetch;
+ document.body.innerHTML = '';
+});
+
+describe('FilterManager chip counts', () => {
+ it('renders base model and model type chips as name + count slots', async () => {
+ await createManagerWithChips();
+
+ const baseModelChip = document.querySelector('.base-model-tag');
+ expect(baseModelChip.querySelector('.tag-name').textContent).toBe('Illustrious');
+ expect(baseModelChip.querySelector('.tag-count').textContent).toBe('19.9K');
+ expect(baseModelChip.title).toBe('Illustrious — 19,876 models');
+ expect(baseModelChip.getAttribute('aria-label')).toBe('Illustrious — 19,876 models');
+
+ const typeChip = document.querySelector('.model-type-tag');
+ expect(typeChip.querySelector('.tag-name').textContent).toBe('LoRA');
+ expect(typeChip.querySelector('.tag-count').textContent).toBe('19.9K');
+ expect(typeChip.title).toBe('LoRA — 19,876 models');
+ });
+
+ it('keeps the tooltip on every chip, abbreviated or not', async () => {
+ await createManagerWithChips();
+
+ const ponyChip = [...document.querySelectorAll('.base-model-tag')]
+ .find((chip) => chip.dataset.baseModel === 'Pony');
+ // The pill is already exact — the tooltip still exists, so hovering a
+ // count does not depend on the magnitude (or on the library size).
+ expect(ponyChip.querySelector('.tag-count').textContent).toBe('5,210');
+ expect(ponyChip.title).toBe('Pony — 5,210 models');
+ });
+
+ it('renders tag chips with the same structure and count formatting', async () => {
+ const manager = await createManagerWithChips();
+
+ manager.createTagFilterElements([
+ { tag: 'character', count: 19876 },
+ { tag: 'style', count: 42 },
+ ]);
+
+ const chips = document.querySelectorAll('#modelTagsFilter .tag-filter');
+ expect(chips[0].querySelector('.tag-name').textContent).toBe('character');
+ expect(chips[0].querySelector('.tag-count').textContent).toBe('19.9K');
+ expect(chips[0].title).toBe('character — 19,876 models');
+
+ expect(chips[1].querySelector('.tag-name').textContent).toBe('style');
+ expect(chips[1].querySelector('.tag-count').textContent).toBe('42');
+ expect(chips[1].title).toBe('style — 42 models');
+ // Trailing "No tags" chip carries no count.
+ expect(chips[2].querySelector('.tag-count')).toBeNull();
+ });
+
+ it('counts recipes, not models, on the recipes page', async () => {
+ global.fetch = vi.fn(async (url) => {
+ const target = String(url);
+ if (target.includes('/base-models')) {
+ return jsonResponse({ success: true, base_models: BASE_MODELS });
+ }
+ return jsonResponse({ success: false });
+ });
+
+ new FilterManager({ page: 'recipes' });
+ await vi.waitFor(() => {
+ expect(document.querySelectorAll('.base-model-tag').length).toBe(BASE_MODELS.length);
+ });
+
+ const chip = document.querySelector('.base-model-tag');
+ expect(chip.querySelector('.tag-count').textContent).toBe('19.9K');
+ expect(chip.title).toBe('Illustrious — 19,876 recipes');
+ });
+
+ it('treats tag names as text, never as markup', async () => {
+ const manager = await createManagerWithChips();
+
+ manager.createTagFilterElements([{ tag: '
', count: 5 }]);
+
+ const chip = document.querySelector('#modelTagsFilter .tag-filter');
+ expect(chip.querySelector('.tag-name').textContent).toBe('
');
+ expect(chip.querySelector('img')).toBeNull();
+ });
+});
diff --git a/tests/frontend/utils/formatters.count.test.js b/tests/frontend/utils/formatters.count.test.js
new file mode 100644
index 00000000..12ea1f97
--- /dev/null
+++ b/tests/frontend/utils/formatters.count.test.js
@@ -0,0 +1,131 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import {
+ formatCount,
+ formatCountExact,
+ formatCountTitle,
+} from '../../../static/js/utils/formatters.js';
+import { i18n } from '../../../static/js/i18n/index.js';
+
+// The display locale is a property of the app, not of the test runner, so it is
+// pinned here instead of relying on the environment default.
+let originalLocale;
+
+beforeEach(() => {
+ originalLocale = i18n.currentLocale;
+ i18n.currentLocale = 'en';
+ vi.stubGlobal('i18n', {
+ t: (key, params) => {
+ if (key === 'header.filter.countTitle') {
+ return `${params.name} — ${params.count} models`;
+ }
+ if (key === 'recipes.filter.countTitle') {
+ return `${params.name} — ${params.count} recipes`;
+ }
+ return key;
+ },
+ });
+});
+
+afterEach(() => {
+ i18n.currentLocale = originalLocale;
+ vi.unstubAllGlobals();
+});
+
+describe('formatCount', () => {
+ it('shows counts below the compact threshold exactly and grouped', () => {
+ expect(formatCount(0)).toBe('0');
+ expect(formatCount(7)).toBe('7');
+ expect(formatCount(999)).toBe('999');
+ expect(formatCount(5210)).toBe('5,210');
+ expect(formatCount(9999)).toBe('9,999');
+ });
+
+ it('abbreviates to three significant digits from 10000 up', () => {
+ expect(formatCount(10000)).toBe('10K');
+ expect(formatCount(12345)).toBe('12.3K');
+ expect(formatCount(19876)).toBe('19.9K');
+ expect(formatCount(123456)).toBe('123K');
+ expect(formatCount(1234567)).toBe('1.23M');
+ });
+
+ it('treats missing or non numeric values as zero', () => {
+ expect(formatCount(undefined)).toBe('0');
+ expect(formatCount(null)).toBe('0');
+ expect(formatCount('not-a-number')).toBe('0');
+ expect(formatCount('19876')).toBe('19.9K');
+ });
+
+ it('honours a caller supplied threshold', () => {
+ expect(formatCount(1234567, { compactFrom: 1000 })).toBe('1.23M');
+ expect(formatCount(19876, { compactFrom: Infinity })).toBe('19,876');
+ // The abbreviation still has to save width: "5.21K" is exactly as wide
+ // as "5,210", so the exact count wins.
+ expect(formatCount(5210, { compactFrom: 1000 })).toBe('5,210');
+ });
+
+ it('follows the UI locale rather than the browser locale', () => {
+ // Documents that the abbreviation itself is locale specific: Chinese
+ // switches to 万 at the same threshold instead of K.
+ i18n.currentLocale = 'zh-CN';
+ expect(formatCount(9999)).toBe('9,999');
+ expect(formatCount(19876)).toBe('1.99万');
+ });
+
+ it('keeps the exact count where the locale has no compact unit', () => {
+ // German has no compact unit below a million: Intl would render 18,475
+ // as the rounded plain number "18.500", which reads as exact but is not.
+ i18n.currentLocale = 'de';
+ expect(formatCount(18475)).toBe('18.475');
+ // The tooltip is exact either way, it just repeats the same number here.
+ expect(formatCountTitle('Flux.1 D', 18475)).toBe('Flux.1 D — 18.475 models');
+ // From a million up German does have a unit, and it is shorter.
+ // (Compared against Intl's own output: it uses a non-breaking space.)
+ const compact = i18n.formatNumber(12345678, {
+ notation: 'compact',
+ maximumSignificantDigits: 3,
+ });
+ expect(formatCount(12345678)).toBe(compact);
+ expect(compact.length).toBeLessThan(formatCountExact(12345678).length);
+ });
+
+ it('keeps the exact count where the locale abbreviation is wider', () => {
+ // Russian "18,5 тыс." is wider than the exact "18 475", which defeats
+ // the point of abbreviating; "1,23 млн" is genuinely shorter.
+ i18n.currentLocale = 'ru';
+ expect(formatCount(18475)).toBe(formatCountExact(18475));
+
+ const compact = i18n.formatNumber(1234567, {
+ notation: 'compact',
+ maximumSignificantDigits: 3,
+ });
+ expect(formatCount(1234567)).toBe(compact);
+ expect(compact.length).toBeLessThan(formatCountExact(1234567).length);
+ });
+});
+
+describe('formatCountExact', () => {
+ it('never abbreviates', () => {
+ expect(formatCountExact(19876)).toBe('19,876');
+ expect(formatCountExact(1234567)).toBe('1,234,567');
+ expect(formatCountExact(undefined)).toBe('0');
+ });
+});
+
+describe('formatCountTitle', () => {
+ it('pairs the full name with the exact count at every magnitude', () => {
+ // Set unconditionally: an affordance that only exists above a threshold
+ // is undiscoverable, and the name is what CSS may have ellipsized.
+ expect(formatCountTitle('character', 0)).toBe('character — 0 models');
+ expect(formatCountTitle('character', 578)).toBe('character — 578 models');
+ expect(formatCountTitle('character', 9999)).toBe('character — 9,999 models');
+ expect(formatCountTitle('character', 10000)).toBe('character — 10,000 models');
+ expect(formatCountTitle('character', 18475)).toBe('character — 18,475 models');
+ // The rendered pill may say "18.5K"; the tooltip never abbreviates.
+ expect(formatCountTitle('character', 18475)).not.toContain('18.5K');
+ });
+
+ it('uses the page specific sentence on the recipes page', () => {
+ expect(formatCountTitle('Illustrious', 19876, 'recipes.filter.countTitle'))
+ .toBe('Illustrious — 19,876 recipes');
+ });
+});