From 3a7638c68216751bcede3d8020b0ec72627ef2bc Mon Sep 17 00:00:00 2001 From: marcosvega91 Date: Sat, 20 Jun 2020 12:28:30 +0200 Subject: [PATCH 1/4] test: add failing tests --- src/__tests__/deselect-options.js | 2 ++ src/__tests__/select-options.js | 16 ++++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/__tests__/deselect-options.js b/src/__tests__/deselect-options.js index bf73a731..84fb9618 100644 --- a/src/__tests__/deselect-options.js +++ b/src/__tests__/deselect-options.js @@ -55,6 +55,8 @@ test('blurs previously focused element', () => { select[name="select"][value=[]] - focusin option[value="1"][selected=false] - pointerup option[value="1"][selected=false] - mouseup: Left (0) + select[name="select"][value=[]] - input + select[name="select"][value=[]] - change option[value="1"][selected=false] - click: Left (0) `) }) diff --git a/src/__tests__/select-options.js b/src/__tests__/select-options.js index 64fdf0bf..658a8e16 100644 --- a/src/__tests__/select-options.js +++ b/src/__tests__/select-options.js @@ -133,3 +133,19 @@ test('does not select anything if options are disabled', () => { expect(o2.selected).toBe(false) expect(o3.selected).toBe(false) }) + +test('should call onChange bubbling up the event when a new option is selected', () => { + const {select, form} = setupSelect({multiple: true}) + const onChangeSelect = jest.fn() + const onChangeForm = jest.fn() + select.addEventListener('change', onChangeSelect) + form.addEventListener('change', onChangeForm) + + expect(onChangeSelect.mock.calls).toHaveLength(0) + expect(onChangeForm.mock.calls).toHaveLength(0) + + userEvent.selectOptions(select, ['1']) + + expect(onChangeForm.mock.calls).toHaveLength(1) + expect(onChangeSelect.mock.calls).toHaveLength(1) +}) From a7af3acdacededa7b591d0f534dd18cbf9f25e40 Mon Sep 17 00:00:00 2001 From: marcosvega91 Date: Sat, 20 Jun 2020 12:30:44 +0200 Subject: [PATCH 2/4] test: update test wiht also input event --- src/__tests__/select-options.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/__tests__/select-options.js b/src/__tests__/select-options.js index 658a8e16..21f69243 100644 --- a/src/__tests__/select-options.js +++ b/src/__tests__/select-options.js @@ -134,18 +134,26 @@ test('does not select anything if options are disabled', () => { expect(o3.selected).toBe(false) }) -test('should call onChange bubbling up the event when a new option is selected', () => { +test('should call onChange/input bubbling up the event when a new option is selected', () => { const {select, form} = setupSelect({multiple: true}) const onChangeSelect = jest.fn() const onChangeForm = jest.fn() + const onInputSelect = jest.fn() + const onInputForm = jest.fn() select.addEventListener('change', onChangeSelect) + select.addEventListener('input', onInputSelect) form.addEventListener('change', onChangeForm) + form.addEventListener('input', onInputForm) expect(onChangeSelect.mock.calls).toHaveLength(0) expect(onChangeForm.mock.calls).toHaveLength(0) + expect(onInputSelect.mock.calls).toHaveLength(0) + expect(onInputForm.mock.calls).toHaveLength(0) userEvent.selectOptions(select, ['1']) expect(onChangeForm.mock.calls).toHaveLength(1) expect(onChangeSelect.mock.calls).toHaveLength(1) + expect(onInputSelect.mock.calls).toHaveLength(1) + expect(onInputForm.mock.calls).toHaveLength(1) }) From 66b1397400ee800ed712e8c69fa04287db2b0fcf Mon Sep 17 00:00:00 2001 From: marcosvega91 Date: Sat, 20 Jun 2020 12:31:35 +0200 Subject: [PATCH 3/4] fix: call default onChange and update input event with new default props --- src/select-options.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/select-options.js b/src/select-options.js index 4c55144b..a63cd238 100644 --- a/src/select-options.js +++ b/src/select-options.js @@ -60,8 +60,16 @@ function selectOptionsBase(newValue, select, values, init) { function selectOption(option) { option.selected = newValue - fireEvent(select, createEvent('input', select, init)) - fireEvent(select, createEvent('change', select, init)) + fireEvent( + select, + createEvent('input', select, { + bubbles: true, + cancelable: false, + composed: true, + ...init, + }), + ) + fireEvent.change(select, init) } } From d757b4740e1ea6e14c2920658b43d757b6f592a2 Mon Sep 17 00:00:00 2001 From: marcosvega91 Date: Sun, 21 Jun 2020 07:20:06 +0200 Subject: [PATCH 4/4] test: fix after review --- src/__tests__/select-options.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/__tests__/select-options.js b/src/__tests__/select-options.js index 21f69243..c28c27de 100644 --- a/src/__tests__/select-options.js +++ b/src/__tests__/select-options.js @@ -140,20 +140,22 @@ test('should call onChange/input bubbling up the event when a new option is sele const onChangeForm = jest.fn() const onInputSelect = jest.fn() const onInputForm = jest.fn() - select.addEventListener('change', onChangeSelect) - select.addEventListener('input', onInputSelect) - form.addEventListener('change', onChangeForm) - form.addEventListener('input', onInputForm) + addListeners(select, { + eventHandlers: {change: onChangeSelect, input: onInputSelect}, + }) + addListeners(form, { + eventHandlers: {change: onChangeForm, input: onInputForm}, + }) - expect(onChangeSelect.mock.calls).toHaveLength(0) - expect(onChangeForm.mock.calls).toHaveLength(0) - expect(onInputSelect.mock.calls).toHaveLength(0) - expect(onInputForm.mock.calls).toHaveLength(0) + expect(onChangeSelect).toHaveBeenCalledTimes(0) + expect(onChangeForm).toHaveBeenCalledTimes(0) + expect(onInputSelect).toHaveBeenCalledTimes(0) + expect(onInputForm).toHaveBeenCalledTimes(0) userEvent.selectOptions(select, ['1']) - expect(onChangeForm.mock.calls).toHaveLength(1) - expect(onChangeSelect.mock.calls).toHaveLength(1) - expect(onInputSelect.mock.calls).toHaveLength(1) - expect(onInputForm.mock.calls).toHaveLength(1) + expect(onChangeForm).toHaveBeenCalledTimes(1) + expect(onChangeSelect).toHaveBeenCalledTimes(1) + expect(onInputSelect).toHaveBeenCalledTimes(1) + expect(onInputForm).toHaveBeenCalledTimes(1) })