-
Notifications
You must be signed in to change notification settings - Fork 240
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add capslock to userEvent.type #507
Changes from 4 commits
0e44292
007ce22
6f1335b
f56db31
9cfbb8f
f978e9e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -353,6 +353,39 @@ test('{shift}a{/shift}', () => { | |
`) | ||
}) | ||
|
||
test('{capslock}a{/capslock}', () => { | ||
const {element, getEventSnapshot} = setup('<input />') | ||
|
||
userEvent.type(element, '{capslock}a{/capslock}') | ||
|
||
expect(getEventSnapshot()).toMatchInlineSnapshot(` | ||
Events fired on: input[value="a"] | ||
|
||
input[value=""] - pointerover | ||
input[value=""] - pointerenter | ||
input[value=""] - mouseover: Left (0) | ||
input[value=""] - mouseenter: Left (0) | ||
input[value=""] - pointermove | ||
input[value=""] - mousemove: Left (0) | ||
input[value=""] - pointerdown | ||
input[value=""] - mousedown: Left (0) | ||
input[value=""] - focus | ||
input[value=""] - focusin | ||
input[value=""] - pointerup | ||
input[value=""] - mouseup: Left (0) | ||
input[value=""] - click: Left (0) | ||
input[value=""] - keydown: CapsLock (20) | ||
input[value=""] - keyup: CapsLock (20) | ||
input[value=""] - keydown: a (97) | ||
input[value=""] - keypress: a (97) | ||
input[value="a"] - input | ||
"{CURSOR}" -> "a{CURSOR}" | ||
input[value="a"] - keyup: a (97) | ||
input[value="a"] - keydown: CapsLock (20) | ||
input[value="a"] - keyup: CapsLock (20) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. And then this should keydown and keyup and disable the modifier state. I'm afraid this one isn't quite as simple as I thought at first. |
||
`) | ||
}) | ||
|
||
test('a{enter}', () => { | ||
const {element, getEventSnapshot} = setup('<input />') | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -42,6 +42,12 @@ const modifierCallbackMap = { | |
keyCode: 93, | ||
modifierProperty: 'metaKey', | ||
}), | ||
...createCapsLockModifierCallbackEntries({ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Rather than using a function, maybe it would make more sense to just inline this one with a comment explaining why it can't use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done. Sorry about the delay; I missed this comment at first. |
||
name: 'capslock', | ||
key: 'CapsLock', | ||
keyCode: 20, | ||
modifierProperty: 'modifierCapsLock', | ||
}), | ||
} | ||
|
||
const specialCharCallbackMap = { | ||
|
@@ -480,6 +486,62 @@ function createModifierCallbackEntries({name, key, keyCode, modifierProperty}) { | |
} | ||
} | ||
|
||
function createCapsLockModifierCallbackEntries({ | ||
name, | ||
key, | ||
keyCode, | ||
modifierProperty, | ||
}) { | ||
const openName = `{${name}}` | ||
const closeName = `{/${name}}` | ||
|
||
function open({currentElement, eventOverrides}) { | ||
const newEventOverrides = {[modifierProperty]: true} | ||
|
||
fireEvent.keyDown(currentElement(), { | ||
key, | ||
keyCode, | ||
which: keyCode, | ||
...eventOverrides, | ||
...newEventOverrides, | ||
}) | ||
fireEvent.keyUp(currentElement(), { | ||
key, | ||
keyCode, | ||
which: keyCode, | ||
...eventOverrides, | ||
...newEventOverrides, | ||
}) | ||
|
||
return {eventOverrides: newEventOverrides} | ||
} | ||
open.closeName = closeName | ||
function close({currentElement, eventOverrides}) { | ||
const newEventOverrides = {[modifierProperty]: false} | ||
|
||
fireEvent.keyDown(currentElement(), { | ||
key, | ||
keyCode, | ||
which: keyCode, | ||
...eventOverrides, | ||
...newEventOverrides, | ||
}) | ||
fireEvent.keyUp(currentElement(), { | ||
key, | ||
keyCode, | ||
which: keyCode, | ||
...eventOverrides, | ||
...newEventOverrides, | ||
}) | ||
|
||
return {eventOverrides: newEventOverrides} | ||
} | ||
return { | ||
[openName]: open, | ||
[closeName]: close, | ||
} | ||
} | ||
|
||
function handleEnter({currentElement, eventOverrides}) { | ||
const key = 'Enter' | ||
const keyCode = 13 | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, this one is tricky. Basically for caps lock, it should keydown and keyup here, but preserve the modifier state. Hmmm...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So, do you think a PR will also be needed to fireEvent for the case of CapsLock?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No,
fireEvent
is all about dispatching individual events in complete isolation. It is not concerned about state. This will only need to happen here in user-event. It's possible we won't be able to re-use the existingcreateModifierCallbackEntries
for this one.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Scratch that. Updated with a switch/case. I'm not sure if it's initially beneficial to write it that way, but I didn't know if other modifier keys might also require the behavior at some point.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Saw the comment after. I can write a separate function for it if preferred?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Sonic12040, could you try removing the custom logic and inlining it for the caps lock. I think that will result in simpler code in this case. I'm worried that this is a hasty abstraction (AHA Programming) and I think the small amount of duplication will be better.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated with a duplicate function that performs the CapsLock behavior.