fix(settings): App Settings search finds Split and Tiles by what they do

Owner feedback: the Header buttons group's keywords named neither Split
nor Tiles. Both are now in the group's data-search. The filter
(_filterSettings) matches each chip by its own data-search and its label,
and never by the wrapper's keywords (which would light up every header
chip for "split"), so the two chips also get their own: "tiles tile grid
side by side several sessions" and "split pane side by side two
sessions". Before, only the label words matched; "tile grid" found
nothing. Pinned by running the real filter over the real markup (JSDOM).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-10-06 23:28:47 +02:00
parent 39d87e363f
commit dd01ea9927
2 changed files with 35 additions and 3 deletions
+32
View File
@@ -14,6 +14,7 @@ import { describe, it, expect } from 'vitest';
import { readFileSync } from 'node:fs';
import { fileURLToPath } from 'node:url';
import { join } from 'node:path';
import { JSDOM } from 'jsdom';
const HERE = fileURLToPath(new URL('.', import.meta.url));
const PUBLIC = join(HERE, '../src/web/public');
@@ -52,6 +53,37 @@ describe('showTileGridButton stays per-device: display key, stripped from the PU
});
});
describe('App Settings search finds Split and Tiles', () => {
// The real filter (settings-ui.js) over the real markup: it matches each chip
// by its own data-search and its text, so the chips carry their own keywords.
const html = read('index.html');
const settingsSrc = read('settings-ui.js');
const start = settingsSrc.indexOf(' _filterSettings(query) {');
const end = settingsSrc.indexOf('\n },', start);
const dom = new JSDOM(html);
const doc = dom.window.document;
const filter = new Function('document', `return ({${settingsSrc.slice(start, end + 4)}});`)(doc) as {
_filterSettings(q: string): void;
};
const shown = (id: string) => !doc.getElementById(id)!.closest('.set-chip')!.classList.contains('set-hit-hidden');
it.each([
['tiles', true, false],
['tile grid', true, false],
['side by side', true, true],
['split', false, true],
['split pane', false, true],
])('"%s": Tiles shown %s, Split shown %s', (query, tiles, split) => {
filter._filterSettings(query);
expect(shown('appSettingsShowTileGridButton')).toBe(tiles);
expect(shown('appSettingsShowSplitButton')).toBe(split);
});
it('the Header buttons group names both in its keywords', () => {
expect(html).toMatch(/data-search="header buttons [^"]*\bsplit tiles\b[^"]*"/);
});
});
describe('markup and styles', () => {
const html = read('index.html');
const css = read('styles.css');