espurna/code/html/spec/settings.spec.mjs

import { assert, expect, test } from 'vitest';
import {
    addEnumerables,
    addSimpleEnumerables,
    checkAndSetElementChanged,
    getDataForElement,
    getEnumerables,
    isChangedElement,
    setOriginalsFromValues,
    setSpanValue,
    setInputValue,
    setSelectValue,
} from '../src/settings.mjs';

test('element input data with and without original', () => {
    const node = document.createElement('input');
    node.type = 'text';

    const data = 'some kind of basic input value';
    expect(getDataForElement(node)).toBe('');
    assert(!isChangedElement(node));

    node.value = data;
    assert(!isChangedElement(node));
    assert(checkAndSetElementChanged(node));
    expect(getDataForElement(node)).toBe(data);
    assert(isChangedElement(node));

    setOriginalsFromValues([node]);
    assert(!isChangedElement(node));

    node.value = `${data}${data}`;
    assert(checkAndSetElementChanged(node));
    assert(isChangedElement(node));
});

test('enumerables with an explicit structure', () => {
    const name = 'explicit';

    const first = getEnumerables(name);
    expect(first.length).toBe(0);

    const enumerables = [{id: 1, name: 'foo'}, {id: 2, name: 'bar'}];
    addEnumerables(name, enumerables);

    const second = getEnumerables(name);
    expect(second.length).toBe(2);

    expect(second[0].id).toBe(1);
    expect(second[0].name).toBe('foo');

    expect(second[1].id).toBe(2);
    expect(second[1].name).toBe('bar');
});

test('enumerables generated from a range', () => {
    const name = 'generated';

    const first = getEnumerables(name);
    expect(first.length).toBe(0);

    const number = 5;
    addSimpleEnumerables(name, name.toUpperCase(), number);

    const second = getEnumerables(name);
    expect(second.length).toBe(number);

    for (let entry of second) {
        assert(entry.name.startsWith(name.toUpperCase()));
    }
});

test('span value replacement', () => {
    const span = document.createElement('span');

    span.dataset['valueTrue'] = 'SUCCESS';
    setSpanValue(span, true);
    expect(span.textContent).toBe('SUCCESS');

    span.dataset['valueFalse'] = 'FAILURE';
    setSpanValue(span, false);
    expect(span.textContent).toBe('FAILURE');

    span.dataset['value12345'] = '...';
    setSpanValue(span, 12345);
    expect(span.textContent).toBe('...');

    span.dataset['value56789'] = '???';
    setSpanValue(span, '56789');
    expect(span.textContent).toBe('???');

    span.dataset['valueFoo'] = 'bar';
    setSpanValue(span, ['foo','bar']);
    expect(span.textContent).toBe('barbar');
});

test('span value update', () => {
    const span = document.createElement('span');

    setSpanValue(span, true);
    expect(span.textContent).toBe('true');

    setSpanValue(span, false);
    expect(span.textContent).toBe('false');

    setSpanValue(span, 12345);
    expect(span.textContent).toBe('12345');

    setSpanValue(span, '56789');
    expect(span.textContent).toBe('56789');

    setSpanValue(span, ['123', 456, true]);
    expect(span.textContent).toBe('123456true');
});

test('span value pre attribute contents before the value', () => {
    const span = document.createElement('span');
    span.dataset['pre'] = 'this is a ';

    setSpanValue(span, 'test');
    expect(span.textContent).toBe('this is a test');

    setSpanValue(span, 12345);
    expect(span.textContent).toBe('this is a 12345');

    setSpanValue(span, false);
    expect(span.textContent).toBe('this is a false');

    setSpanValue(span, null);
    expect(span.textContent).toBe('this is a ');
});

test('span value post attribute contents after the value', () => {
    const span = document.createElement('span');
    span.dataset['post'] = ' dataset attribute';

    setSpanValue(span, 'another test for post');
    expect(span.textContent).toBe('another test for post dataset attribute');

    setSpanValue(span, 'test');
    expect(span.textContent).toBe('test dataset attribute');

    setSpanValue(span, 56789);
    expect(span.textContent).toBe('56789 dataset attribute');

    setSpanValue(span, true);
    expect(span.textContent).toBe('true dataset attribute');

    setSpanValue(span, null);
    expect(span.textContent).toBe(' dataset attribute');
});

test('span value pre and post attributes', () => {
    const span = document.createElement('span');
    span.dataset['pre'] = 'begin ';
    span.dataset['post'] = ' end';
    setSpanValue(span, ['123', '456', '789']);
    expect(span.textContent).toBe('begin 123 endbegin 456 endbegin 789 end');
});

test('input value update', () => {
    const input = document.createElement('input');

    input.type = 'number';
    input.value = '';

    setInputValue(input, null);
    expect(getDataForElement(input)).toBeNull();

    setInputValue(input, 12345);
    expect(getDataForElement(input)).toBe(12345);

    setInputValue(input, '56789');
    expect(getDataForElement(input)).toBe(56789);

    setInputValue(input, 'text');
    expect(getDataForElement(input)).toBe(null);

    input.type = 'text';
    input.value = '';

    setInputValue(input, null);
    expect(getDataForElement(input)).toBe('');

    setInputValue(input, 12345);
    expect(getDataForElement(input)).toBe('12345');

    setInputValue(input, '56789');
    expect(getDataForElement(input)).toBe('56789');

    setInputValue(input, 'text');
    expect(getDataForElement(input)).toBe('text');
});

test('checkbox input value update', () => {
    const input = document.createElement('input');
    input.type = 'checkbox';

    setInputValue(input, null);
    expect(getDataForElement(input)).toEqual(false);

    setInputValue(input, 12345);
    expect(getDataForElement(input)).toEqual(true);

    setInputValue(input, 0);
    expect(getDataForElement(input)).toEqual(false);

    setInputValue(input, 'true');
    expect(getDataForElement(input)).toEqual(true);

    setInputValue(input, 'false');
    expect(getDataForElement(input)).toEqual(false);

    setInputValue(input, 'yes');
    expect(getDataForElement(input)).toEqual(true);

    setInputValue(input, 'no');
    expect(getDataForElement(input)).toEqual(false);
});

test('select value update', () => {
    const select = document.createElement('select');
    select.innerHTML = `
        <option value="initial"></option>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>`;

    expect(getDataForElement(select)).toEqual('initial');

    setSelectValue(select, 'one');
    expect(getDataForElement(select)).toEqual('one');

    setSelectValue(select, 'two');
    expect(getDataForElement(select)).toEqual('two');

    setSelectValue(select, 'three');
    expect(getDataForElement(select)).toEqual('three');
});

test('select bitset update', () => {
    const select = document.createElement('select');
    select.multiple = true;
    select.innerHTML = `
        <option value="0"></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>`;

    expect(getDataForElement(select)).toEqual(0);
    setOriginalsFromValues([select]);

    setSelectValue(select, 1 << 1);

    expect(getDataForElement(select))
        .toEqual(1 << 1);
    assert(checkAndSetElementChanged(select));

    setSelectValue(select, (1 << 2) | (1 << 4));

    expect(getDataForElement(select))
        .toEqual((1 << 2) | (1 << 4));
    assert(!checkAndSetElementChanged(select));
    assert(isChangedElement(select));

    setOriginalsFromValues([select]);
    setSelectValue(select, (1 << 2) | (1 << 4));

    assert(!checkAndSetElementChanged(select));
    assert(!isChangedElement(select));

    setSelectValue(select, (1 << 1) | (1 << 4));

    assert(checkAndSetElementChanged(select));
    assert(isChangedElement(select));

    setSelectValue(select, (1 << 2) | (1 << 4));
    assert(checkAndSetElementChanged(select));
    assert(!isChangedElement(select));
});