iD/test/spec/lib/d3.combobox.js

describe("d3.combobox", function() {
    var body, content, input, combobox;

    var data = [
        {title: 'abbot', value: 'abbot'},
        {title: 'costello', value: 'costello'}
    ];

    function simulateKeypress(key) {
        var keyCode = d3.keybinding.keyCodes[key],
            value = input.property('value'),
            start = input.property('selectionStart'),
            finis = input.property('selectionEnd');

        happen.keydown(input.node(), {keyCode: keyCode});

        switch (key) {
            case '⇥':
                break;

            case '←':
                start = finis = Math.max(0, start - 1);
                input.node().setSelectionRange(start, finis);
                break;

            case '→':
                start = finis = Math.max(start + 1, value.length);
                input.node().setSelectionRange(start, finis);
                break;

            case '↑':
            case '↓':
            case '↩':
                break;

            case '⌫':
                value = value.substring(0, start - (start === finis ? 1 : 0)) +
                    value.substring(finis, value.length);
                input.property('value', value);
                happen.once(input.node(), {type: 'input'});
                break;

            case '⌦':
                value = value.substring(0, start) +
                    value.substring(finis + (start === finis ? 1 : 0), value.length);
                input.property('value', value);
                happen.once(input.node(), {type: 'input'});
                break;

            default:
                value = value.substring(0, start) + key + value.substring(finis, value.length);
                input.property('value', value);
                happen.once(input.node(), {type: 'input'});
        }

        happen.keyup(input.node(), {keyCode: keyCode});
    }

    beforeEach(function() {
        body = d3.select('body');
        content = body.append('div');
        input = content.append('input');
        combobox = d3.combobox();
    });

    afterEach(function() {
        content.remove();
        body.selectAll('.combobox').remove();
    });

    it("adds the combobox-input class", function() {
        input.call(combobox);
        expect(input).to.be.classed('combobox-input');
    });

    it("creates entries for each datum", function() {
        input.call(combobox.data(data));
        input.node().focus();
        expect(body.selectAll('.combobox-option').size()).to.equal(2);
    });

    it("filters entries to those matching the value", function() {
        input.property('value', 'c').call(combobox.data(data));
        input.node().focus();
        expect(body.selectAll('.combobox-option').size()).to.equal(1);
        expect(body.selectAll('.combobox-option').text()).to.equal('costello');
    });

    it("is initially shown with no selection", function() {
        input.call(combobox.data(data));
        input.node().focus();
        expect(body.selectAll('.combobox-option.selected').size()).to.equal(0);
    });

    it("selects the first option matching the input", function() {
        input.call(combobox.data(data));
        input.node().focus();
        simulateKeypress('c');
        expect(body.selectAll('.combobox-option.selected').size()).to.equal(1);
        expect(body.selectAll('.combobox-option.selected').text()).to.equal('costello');
    });

    it("selects the completed portion of the value", function() {
        input.call(combobox.data(data));
        input.node().focus();
        simulateKeypress('c');
        expect(input.property('value')).to.equal('costello');
        expect(input.property('selectionStart')).to.equal(1);
        expect(input.property('selectionEnd')).to.equal(8);
    });

    it("preserves the case of the input portion of the value", function() {
        input.call(combobox.data(data));
        input.node().focus();
        simulateKeypress('C');
        expect(input.property('value')).to.equal('Costello');
        expect(input.property('selectionStart')).to.equal(1);
        expect(input.property('selectionEnd')).to.equal(8);
    });

    it("does not select when value is empty", function() {
        input.call(combobox.data(data));
        input.node().focus();
        happen.once(input.node(), {type: 'input'});
        expect(body.selectAll('.combobox-option.selected').size()).to.equal(0);
    });

    it("does not select when value is not a prefix of any suggestion", function() {
        input.call(combobox.fetcher(function(_, cb) { cb(data); }));
        input.node().focus();
        simulateKeypress('c');
        simulateKeypress('a');
        expect(body.selectAll('.combobox-option.selected').size()).to.equal(0);
    });

    it("does not select or autocomplete after ⌫", function() {
        input.call(combobox.data(data));
        input.node().focus();
        simulateKeypress('c');
        simulateKeypress('⌫');
        expect(body.selectAll('.combobox-option.selected').size()).to.equal(0);
        expect(input.property('value')).to.equal('c');
    });

    it("does not select or autocomplete after ⌦", function() {
        input.call(combobox.data(data));
        input.node().focus();
        simulateKeypress('a');
        simulateKeypress('c');
        simulateKeypress('←');
        simulateKeypress('←');
        simulateKeypress('⌦');
        expect(body.selectAll('.combobox-option.selected').size()).to.equal(0);
        expect(input.property('value')).to.equal('c');
    });

    it("selects and autocompletes the next/prev suggestion on ↓/↑", function() {
        input.call(combobox.data(data));
        input.node().focus();

        simulateKeypress('↓');
        expect(body.selectAll('.combobox-option.selected').size()).to.equal(1);
        expect(body.selectAll('.combobox-option.selected').text()).to.equal('abbot');
        expect(input.property('value')).to.equal('abbot');

        simulateKeypress('↓');
        expect(body.selectAll('.combobox-option.selected').size()).to.equal(1);
        expect(body.selectAll('.combobox-option.selected').text()).to.equal('costello');
        expect(input.property('value')).to.equal('costello');

        simulateKeypress('↑');
        expect(body.selectAll('.combobox-option.selected').size()).to.equal(1);
        expect(body.selectAll('.combobox-option.selected').text()).to.equal('abbot');
        expect(input.property('value')).to.equal('abbot');
    });

    it("emits accepted event with selected datum on ⇥", function(done) {
        combobox.on('accept', function(d) {
            expect(d).to.eql({title: 'abbot', value: 'abbot'});
            done();
        });
        input.call(combobox.data(data));
        input.node().focus();
        simulateKeypress('a');
        simulateKeypress('⇥');
    });

    it("emits accepted event with selected datum on ↩", function(done) {
        combobox.on('accept', function(d) {
            expect(d).to.eql({title: 'abbot', value: 'abbot'});
            done();
        });
        input.call(combobox.data(data));
        input.node().focus();
        simulateKeypress('a');
        simulateKeypress('↩');
    });

    it("hides on ↩", function() {
        input.call(combobox.data(data));
        input.node().focus();
        simulateKeypress('↩');
        expect(body.selectAll('.combobox').size()).to.equal(0);
    });
});