97 lines
4.6 KiB
JavaScript
97 lines
4.6 KiB
JavaScript
// Generated, do not edit. sha256:c600398d0ae11406268c5d41b736927a6f99cb317255efb1ff1d262f6e741c31
|
|
import { describe, it, afterEach } from 'node:test';
|
|
import assert from 'node:assert/strict';
|
|
import { installDom } from '../helpers/mini-dom.mjs';
|
|
|
|
const dom = installDom();
|
|
const { resolveSelection, create, configureFilter } = await import('../../client/ui/filter.js');
|
|
|
|
const items = [{ id: 1 }, { id: 2 }, { id: 3 }];
|
|
const sorted = set => [...set].sort((a, b) => a - b);
|
|
|
|
describe('resolveSelection: the initial state', () => {
|
|
it('a stored choice wins', () => {
|
|
assert.deepEqual(sorted(resolveSelection({ saved: [2, 3], items })), [2, 3]);
|
|
});
|
|
|
|
it('a DELIBERATELY empty choice stays empty', () => {
|
|
assert.deepEqual(sorted(resolveSelection({ saved: [], items })), []);
|
|
});
|
|
|
|
it('a stored choice that EMPTIES OUT falls back on the initial state', () => {
|
|
assert.deepEqual(sorted(resolveSelection({ saved: [98, 99], items })), [1, 2, 3]);
|
|
});
|
|
|
|
it('unknown ids are filtered out, the rest is kept', () => {
|
|
assert.deepEqual(sorted(resolveSelection({ saved: [2, 99], items })), [2]);
|
|
});
|
|
|
|
it('the initial predicate when nothing is stored, and everything when it yields nothing', () => {
|
|
assert.deepEqual(sorted(resolveSelection({ saved: null, items, initial: i => i.slice(0, 1).map(x => x.id) })), [1]);
|
|
assert.deepEqual(sorted(resolveSelection({ saved: null, items, initial: () => [] })), [1, 2, 3]);
|
|
assert.deepEqual(sorted(resolveSelection({ saved: null, items, initial: () => [99] })), [1, 2, 3]);
|
|
assert.deepEqual(sorted(resolveSelection({ saved: null, items })), [1, 2, 3]);
|
|
});
|
|
});
|
|
|
|
describe('create: the chips', () => {
|
|
afterEach(() => configureFilter());
|
|
const chipItems = [{ id: 1, label: 'Een' }, { id: 2, label: '<Twee>', title: 'De tweede' }];
|
|
|
|
it('adds its classes to the host instead of replacing them, and draws the toggle plus a chip per item', () => {
|
|
const host = dom.host();
|
|
host.className = 'own';
|
|
create(host, { items: chipItems, selected: new Set([1]), className: 'fbar--tctl', onChange() {} });
|
|
assert.equal(host.className, 'own fbar fbar--chip fbar--tctl');
|
|
assert.equal(host.querySelectorAll('[data-fi]').length, 2);
|
|
assert.ok(host.querySelector('[data-fi="0"]').classList.contains('is-on'));
|
|
assert.equal(host.querySelector('[data-fi="1"]').textContent, '<Twee>');
|
|
assert.equal(host.querySelector('[data-fi="1"]').title, 'De tweede');
|
|
});
|
|
|
|
it('the toggle names what the click does: all when not everything is on, none when it is', () => {
|
|
const changes = [];
|
|
const host = dom.host();
|
|
create(host, { items: chipItems, selected: new Set([1]), onChange: s => changes.push(sorted(s)) });
|
|
assert.equal(host.querySelector('[data-fact]').textContent, 'All');
|
|
dom.click(host.querySelector('[data-fact]'));
|
|
create(host, { items: chipItems, selected: new Set([1, 2]), onChange: s => changes.push(sorted(s)) });
|
|
assert.equal(host.querySelector('[data-fact]').textContent, 'None');
|
|
dom.click(host.querySelector('[data-fact]'));
|
|
assert.deepEqual(changes, [[1, 2], []]);
|
|
});
|
|
|
|
it('a chip toggles its id, and the id keeps its own type', () => {
|
|
let got = null;
|
|
const host = dom.host();
|
|
create(host, { items: chipItems, selected: new Set([1]), onChange: s => { got = s; } });
|
|
dom.click(host.querySelector('[data-fi="1"]'));
|
|
assert.deepEqual([...got], [1, 2]);
|
|
assert.equal(typeof [...got][1], 'number');
|
|
});
|
|
|
|
it('with onCycle a chip cycles instead of toggling; collapsed chips are dimmed', () => {
|
|
const cycled = [];
|
|
const host = dom.host();
|
|
create(host, { items: chipItems, selected: new Set([1, 2]), collapsedIds: new Set([2]), onCycle: id => cycled.push(id), onChange() { throw new Error('no'); } });
|
|
assert.ok(host.querySelector('[data-fi="1"]').classList.contains('is-collapsed'));
|
|
dom.click(host.querySelector('[data-fi="1"]'));
|
|
assert.deepEqual(cycled, [2]);
|
|
});
|
|
|
|
it('disabled: every button disabled, and a click does nothing', () => {
|
|
const host = dom.host();
|
|
create(host, { items: chipItems, selected: new Set(), disabled: true, onChange() { throw new Error('no'); } });
|
|
assert.ok(host.querySelectorAll('button').every(b => b.hasAttribute('disabled')));
|
|
dom.click(host.querySelector('[data-fi="0"]'));
|
|
});
|
|
|
|
it('configureFilter sets the texts of the toggle, escaped', () => {
|
|
configureFilter({ labels: { all: 'Alles <x>', none: 'Niets' } });
|
|
const host = dom.host();
|
|
create(host, { items: chipItems, selected: new Set(), onChange() {} });
|
|
assert.equal(host.querySelector('[data-fact]').textContent, 'Alles <x>');
|
|
assert.equal(host.querySelector('[data-fact] x'), null);
|
|
});
|
|
});
|