import Keyboard from '../../../modules/keyboard'; import Picker from '../../../ui/picker'; function createKeydownEvent(keyCode) { let event; if (typeof Event === 'function') { event = new Event('keydown', { bubbles: true, cancelable: true, }); Object.defineProperty(event, 'keyCode', {'value': keyCode}); } else if (typeof Event === 'object') { // IE11 event = document.createEvent('Event'); Object.defineProperty(event, 'keyCode', {'value': keyCode}); event.initEvent('keydown', true, true); } return event; } describe('Picker', function() { beforeEach(function () { this.container.innerHTML = ''; this.pickerSelectorInstance = new Picker(this.container.firstChild); this.pickerSelector = this.container.querySelector('.ql-picker'); }); it('initialization', function() { expect(this.container.querySelector('.ql-picker')).toBeTruthy(); expect(this.container.querySelector('.ql-active')).toBeFalsy(); expect(this.container.querySelector('.ql-picker-item.ql-selected').outerHTML).toEqualHTML(''); expect(this.container.querySelector('.ql-picker-item:not(.ql-selected)').outerHTML).toEqualHTML(''); }); it('escape charcters', function() { let select = document.createElement('select'); let option = document.createElement('option'); this.container.appendChild(select); select.appendChild(option); let value = '"Helvetica Neue", \'Helvetica\', sans-serif'; option.value = value; value = value.replace(/\"/g, '\\"'); expect(select.querySelector(`option[value="${value}"]`)).toEqual(option); }); it('label is initialized with the correct aria attributes', function() { expect(this.pickerSelector.querySelector('.ql-picker-label').getAttribute('aria-expanded')).toEqual('false'); const optionsId = this.pickerSelector.querySelector('.ql-picker-options').id; expect(this.pickerSelector.querySelector('.ql-picker-label').getAttribute('aria-controls')).toEqual(optionsId); }); it('options container is initialized with the correct aria attributes', function() { expect(this.pickerSelector.querySelector('.ql-picker-options').getAttribute('aria-hidden')).toEqual('true'); const ariaControlsLabel = this.pickerSelector.querySelector('.ql-picker-label').getAttribute('aria-controls'); expect(this.pickerSelector.querySelector('.ql-picker-options').id).toEqual(ariaControlsLabel); expect(this.pickerSelector.querySelector('.ql-picker-options').tabIndex).toEqual(-1); }); it('aria attributes toggle correctly when the picker is opened via enter key', function() { const pickerLabel = this.pickerSelector.querySelector('.ql-picker-label'); // Select picker via enter key const e = createKeydownEvent(Keyboard.keys.ENTER); pickerLabel.dispatchEvent(e); expect(pickerLabel.getAttribute('aria-expanded')).toEqual('true'); expect(this.pickerSelector.querySelector('.ql-picker-options').getAttribute('aria-hidden')).toEqual('false'); }); it('aria attributes toggle correctly when the picker is opened via mousedown', function() { const pickerLabel = this.pickerSelector.querySelector('.ql-picker-label'); // Select picker via enter key let e; if (typeof Event === 'function') { e = new Event('mousedown', { bubbles: true, cancelable: true, }); } else if (typeof Event === 'object') { // IE11 e = document.createEvent('Event'); e.initEvent('mousedown', true, true); } pickerLabel.dispatchEvent(e); expect(pickerLabel.getAttribute('aria-expanded')).toEqual('true'); expect(this.pickerSelector.querySelector('.ql-picker-options').getAttribute('aria-hidden')).toEqual('false'); }); it('aria attributes toggle correctly when an item is selected via click', function() { const pickerLabel = this.pickerSelector.querySelector('.ql-picker-label'); pickerLabel.click(); const pickerItem = this.pickerSelector.querySelector('.ql-picker-item'); pickerItem.click(); expect(pickerLabel.getAttribute('aria-expanded')).toEqual('false'); expect(this.pickerSelector.querySelector('.ql-picker-options').getAttribute('aria-hidden')).toEqual('true'); expect(pickerLabel.textContent.trim()).toEqual(pickerItem.textContent.trim()); }); it('aria attributes toggle correctly when an item is selected via enter', function() { const pickerLabel = this.pickerSelector.querySelector('.ql-picker-label'); pickerLabel.click(); const pickerItem = this.pickerSelector.querySelector('.ql-picker-item'); // Select picker item via enter key const e = createKeydownEvent(Keyboard.keys.ENTER); pickerItem.dispatchEvent(e); expect(pickerLabel.getAttribute('aria-expanded')).toEqual('false'); expect(this.pickerSelector.querySelector('.ql-picker-options').getAttribute('aria-hidden')).toEqual('true'); expect(pickerLabel.textContent.trim()).toEqual(pickerItem.textContent.trim()); }); it('aria attributes toggle correctly when the picker is closed via clicking on the label again', function() { const pickerLabel = this.pickerSelector.querySelector('.ql-picker-label'); pickerLabel.click(); pickerLabel.click(); expect(pickerLabel.getAttribute('aria-expanded')).toEqual('false'); expect(this.pickerSelector.querySelector('.ql-picker-options').getAttribute('aria-hidden')).toEqual('true'); }); it('aria attributes toggle correctly when the picker is closed via escaping out of it', function() { const pickerLabel = this.pickerSelector.querySelector('.ql-picker-label'); pickerLabel.click(); // Escape out of the picker const e = createKeydownEvent(Keyboard.keys.ESCAPE); pickerLabel.dispatchEvent(e); expect(pickerLabel.getAttribute('aria-expanded')).toEqual('false'); expect(this.pickerSelector.querySelector('.ql-picker-options').getAttribute('aria-hidden')).toEqual('true'); }); afterEach(function() { this.pickerSelectorInstance = null; }); });