From 71555fb54033542ff8b8cc6d899c594b76e797b3 Mon Sep 17 00:00:00 2001 From: Stepan Date: Mon, 15 Mar 2021 23:36:44 +0300 Subject: [PATCH 1/4] Add key to events When trigger 'keydown.tab` - key does not exists. This affect case when in components we use w3c-keys for compare --- packages/test-utils/src/create-dom-event.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/test-utils/src/create-dom-event.js b/packages/test-utils/src/create-dom-event.js index fbc88d2cb..4c98f4d2b 100644 --- a/packages/test-utils/src/create-dom-event.js +++ b/packages/test-utils/src/create-dom-event.js @@ -27,6 +27,7 @@ const modifiers = { function getOptions(eventParams) { const { modifier, meta, options } = eventParams const keyCode = modifiers[modifier] || options.keyCode || options.code + const key = modifier return { ...options, // What the user passed in as the second argument to #trigger @@ -36,6 +37,7 @@ function getOptions(eventParams) { // Any derived options should go here keyCode, + key, code: keyCode } } From d6b0e885a8700e25ae2b75dd0060362a268bd07b Mon Sep 17 00:00:00 2001 From: Stepan Polevshchikov Date: Sat, 20 Mar 2021 16:32:48 +0300 Subject: [PATCH 2/4] fix: pass key proprety to event --- packages/test-utils/src/create-dom-event.js | 32 +++++++++++-- test/specs/wrapper/trigger.spec.js | 53 +++++++++++++++++---- 2 files changed, 74 insertions(+), 11 deletions(-) diff --git a/packages/test-utils/src/create-dom-event.js b/packages/test-utils/src/create-dom-event.js index 4c98f4d2b..3a9a94202 100644 --- a/packages/test-utils/src/create-dom-event.js +++ b/packages/test-utils/src/create-dom-event.js @@ -24,10 +24,35 @@ const modifiers = { pagedown: 34 } +// get from https://github.com/ashubham/w3c-keys/blob/master/index.ts +const w3cKeys = { + enter: 'Enter', + tab: 'Tab', + delete: 'Delete', + esc: 'Esc', + escape: 'Escape', + space: ' ', + up: 'Up', + left: 'Left', + right: 'Right', + down: 'Down', + end: 'End', + home: 'Home', + backspace: 'Backspace', + insert: 'Insert', + pageup: 'PageUp', + pagedown: 'PageDown' +} + +const codeToKeyNameMap = Object.entries(modifiers).reduce( + (acc, [key, value]) => Object.assign(acc, { [value]: w3cKeys[key] }), + {} +) + function getOptions(eventParams) { const { modifier, meta, options } = eventParams const keyCode = modifiers[modifier] || options.keyCode || options.code - const key = modifier + const key = codeToKeyNameMap[keyCode] return { ...options, // What the user passed in as the second argument to #trigger @@ -37,8 +62,8 @@ function getOptions(eventParams) { // Any derived options should go here keyCode, - key, - code: keyCode + code: keyCode, + key } } @@ -93,6 +118,7 @@ export default function createDOMEvent(type, options) { propertyDescriptor && propertyDescriptor.setter === undefined ) if (canSetProperty) { + console.log('canSetProperty') event[key] = options[key] } }) diff --git a/test/specs/wrapper/trigger.spec.js b/test/specs/wrapper/trigger.spec.js index ec32c2052..0fd33997b 100644 --- a/test/specs/wrapper/trigger.spec.js +++ b/test/specs/wrapper/trigger.spec.js @@ -43,23 +43,27 @@ describeWithShallowAndMount('trigger', mountingMethod => { expect(keydownHandler).toHaveBeenCalled() }) - describe('causes keydown handler to fire with the appropriate keyCode when wrapper.trigger("keydown", { keyCode: 65 }) is fired on a Component', async () => { + describe('causes keydown handler to fire with the appropriate keyCode when wrapper.trigger("keydown", { keyCode: 46 }) is fired on a Component', async () => { const keydownHandler = jest.fn() const wrapper = mountingMethod(ComponentWithEvents, { propsData: { keydownHandler } }) - await wrapper.find('.keydown').trigger('keydown', { keyCode: 65 }) + await wrapper.find('.keydown').trigger('keydown', { keyCode: 46 }) const keyboardEvent = keydownHandler.mock.calls[0][0] // Unfortunately, JSDom will give different types than PhantomJS for keyCodes (string vs number), so we have to use parseInt to normalize the types. it('contains the keyCode', () => { - expect(parseInt(keyboardEvent.keyCode, 10)).toEqual(65) + expect(parseInt(keyboardEvent.keyCode, 10)).toEqual(46) + }) + + it('contains the key', () => { + expect(keyboardEvent.key).toEqual('Delete') }) itDoNotRunIf(isRunningChrome, 'contains the code', () => { - expect(parseInt(keyboardEvent.code, 10)).toEqual(65) + expect(parseInt(keyboardEvent.code, 10)).toEqual(46) }) }) @@ -73,7 +77,7 @@ describeWithShallowAndMount('trigger', mountingMethod => { expect(keydownHandler).toHaveBeenCalled() }) - it.skip('convert a registered key name to a key code', async () => { + it('convert a registered key name to a key code key', async () => { const modifiers = { enter: 13, esc: 27, @@ -91,14 +95,47 @@ describeWithShallowAndMount('trigger', mountingMethod => { pageup: 33, pagedown: 34 } + + // get from https://github.com/ashubham/w3c-keys/blob/master/index.ts + const w3cKeys = { + enter: 'Enter', + tab: 'Tab', + delete: 'Delete', + esc: 'Esc', + escape: 'Escape', + space: ' ', + up: 'Up', + left: 'Left', + right: 'Right', + down: 'Down', + end: 'End', + home: 'Home', + backspace: 'Backspace', + insert: 'Insert', + pageup: 'PageUp', + pagedown: 'PageDown' + } + + const codeToKeyNameMap = Object.entries(modifiers).reduce( + (acc, [key, value]) => Object.assign(acc, { [value]: w3cKeys[key] }), + {} + ) + + const modifiersArray = Object.entries(modifiers) + const keyupHandler = jest.fn() const wrapper = mountingMethod(ComponentWithEvents, { propsData: { keyupHandler } }) - for (const keyName in modifiers) { - const keyCode = modifiers[keyName] + + for (let index = 0; index < modifiersArray.length; index++) { + const [keyName, keyCode] = modifiersArray[index] await wrapper.find('.keydown').trigger(`keyup.${keyName}`) - expect(keyupHandler.mock.calls[0][0].keyCode).toEqual(keyCode) + + expect(keyupHandler.mock.calls[index][0].keyCode).toEqual(keyCode) + expect(keyupHandler.mock.calls[index][0].key).toEqual( + codeToKeyNameMap[keyCode] + ) } }) From 45234b502eb45bdd0a399403f2a02b6d736afbf3 Mon Sep 17 00:00:00 2001 From: Stepan Polevshchikov Date: Sat, 20 Mar 2021 16:49:47 +0300 Subject: [PATCH 3/4] refactor: remove console.log --- packages/test-utils/src/create-dom-event.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/test-utils/src/create-dom-event.js b/packages/test-utils/src/create-dom-event.js index 3a9a94202..7391bfd8e 100644 --- a/packages/test-utils/src/create-dom-event.js +++ b/packages/test-utils/src/create-dom-event.js @@ -118,7 +118,6 @@ export default function createDOMEvent(type, options) { propertyDescriptor && propertyDescriptor.setter === undefined ) if (canSetProperty) { - console.log('canSetProperty') event[key] = options[key] } }) From 2ea4fb10334a478cf76c563892f7d40a253ee06d Mon Sep 17 00:00:00 2001 From: Stepan Polevshchikov Date: Sat, 20 Mar 2021 16:56:26 +0300 Subject: [PATCH 4/4] fix: test describe --- test/specs/wrapper/trigger.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/specs/wrapper/trigger.spec.js b/test/specs/wrapper/trigger.spec.js index 0fd33997b..43bf77ce0 100644 --- a/test/specs/wrapper/trigger.spec.js +++ b/test/specs/wrapper/trigger.spec.js @@ -77,7 +77,7 @@ describeWithShallowAndMount('trigger', mountingMethod => { expect(keydownHandler).toHaveBeenCalled() }) - it('convert a registered key name to a key code key', async () => { + it('convert a registered key name to a key code and key', async () => { const modifiers = { enter: 13, esc: 27,