', async () => {
+ const {element, getEventSnapshot} = setup('
')
+ await userEvent.click(element)
+ expect(getEventSnapshot()).toMatchInlineSnapshot(`
+ Events fired on: div
+
+ div - pointerover
+ div - pointerenter
+ div - mouseover: Left (0)
+ div - mouseenter: Left (0)
+ div - pointermove
+ div - mousemove: Left (0)
+ div - pointerdown
+ div - mousedown: Left (0)
+ div - pointerup
+ div - mouseup: Left (0)
+ div - click: Left (0)
+ `)
+})
+
+test('toggles the focus', async () => {
+ const {element} = setup(`
`)
+
+ const a = element.children[0]
+ const b = element.children[1]
+
+ expect(a).not.toHaveFocus()
+ expect(b).not.toHaveFocus()
+
+ await userEvent.click(a)
+ expect(a).toHaveFocus()
+ expect(b).not.toHaveFocus()
+
+ await userEvent.click(b)
+ expect(a).not.toHaveFocus()
+ expect(b).toHaveFocus()
+})
+
+test('should blur the previous element', async () => {
+ const {element, getEventSnapshot, clearEventCalls} = setup(
+ `
`,
+ )
+
+ const a = element.children[0]
+ const b = element.children[1]
+
+ const aListeners = addListeners(a)
+ const bListeners = addListeners(b)
+
+ await userEvent.click(a)
+ clearEventCalls()
+ await userEvent.click(b)
+ expect(getEventSnapshot()).toMatchInlineSnapshot(`
+ Events fired on: div
+
+ input[name="b"][value=""] - pointerover
+ input[name="b"][value=""] - mouseover: Left (0)
+ input[name="b"][value=""] - pointermove
+ input[name="b"][value=""] - mousemove: Left (0)
+ input[name="b"][value=""] - pointerdown
+ input[name="b"][value=""] - mousedown: Left (0)
+ input[name="a"][value=""] - focusout
+ input[name="b"][value=""] - focusin
+ input[name="b"][value=""] - pointerup
+ input[name="b"][value=""] - mouseup: Left (0)
+ input[name="b"][value=""] - click: Left (0)
+ `)
+ // focus/blur events don't bubble (but the focusout/focusin do!)
+ // we just want to make sure the blur was fired on a
+ // and the focus was fired on b
+ expect(aListeners.eventWasFired('blur')).toBe(true)
+ expect(bListeners.eventWasFired('focus')).toBe(true)
+})
+
+test('should not blur the previous element when mousedown prevents default', async () => {
+ const {element, getEventSnapshot, clearEventCalls} = setup(
+ `
`,
+ )
+
+ const a = element.children[0]
+ const b = element.children[1]
+
+ const aListeners = addListeners(a)
+ const bListeners = addListeners(b, {
+ eventHandlers: {mouseDown: e => e.preventDefault()},
+ })
+
+ await userEvent.click(a)
+ clearEventCalls()
+ await userEvent.click(b)
+ expect(getEventSnapshot()).toMatchInlineSnapshot(`
+ Events fired on: div
+
+ input[name="b"][value=""] - pointerover
+ input[name="b"][value=""] - mouseover: Left (0)
+ input[name="b"][value=""] - pointermove
+ input[name="b"][value=""] - mousemove: Left (0)
+ input[name="b"][value=""] - pointerdown
+ input[name="b"][value=""] - mousedown: Left (0)
+ input[name="b"][value=""] - pointerup
+ input[name="b"][value=""] - mouseup: Left (0)
+ input[name="b"][value=""] - click: Left (0)
+ `)
+ // focus/blur events don't bubble (but the focusout do!)
+ // we just want to make sure the blur was fired on a
+ // and the focus was fired on b
+ expect(aListeners.eventWasFired('blur')).toBe(false)
+ expect(bListeners.eventWasFired('focus')).toBe(false)
+})
+
+test('does not lose focus when click updates focus', async () => {
+ const {element} = setup(`
`)
+ const input = element.children[0]
+ const button = element.children[1]
+
+ addEventListener(button, 'click', () => input.focus())
+
+ expect(input).not.toHaveFocus()
+
+ await userEvent.click(button)
+ expect(input).toHaveFocus()
+
+ await userEvent.click(button)
+ expect(input).toHaveFocus()
+})
+
+test('gives focus to the form control when clicking the label', async () => {
+ const {element} = setup(`
+
+
+
+
+ `)
+ const label = element.children[0]
+ const input = element.children[1]
+
+ await userEvent.click(label)
+ expect(input).toHaveFocus()
+})
+
+test('gives focus to the form control when clicking within a label', async () => {
+ const {element} = setup(`
+
+
+
+
+ `)
+ const label = element.children[0]
+ const span = label.firstChild
+ const input = element.children[1]
+
+ await userEvent.click(span)
+ expect(input).toHaveFocus()
+})
+
+test('fires no events when clicking a label with a nested control that is disabled', async () => {
+ const {element, getEventSnapshot} = setup(`
`)
+ await userEvent.click(element)
+ expect(getEventSnapshot()).toMatchInlineSnapshot(
+ `No events were fired on: label`,
+ )
+})
+
+test('does not crash if the label has no control', async () => {
+ const {element} = setup(`
`)
+ await userEvent.click(element)
+})
+
+test('clicking a label checks the checkbox', async () => {
+ const {element} = setup(`
+
+
+
+
+ `)
+ const label = element.children[0]
+ const input = element.children[1]
+
+ await userEvent.click(label)
+ expect(input).toHaveFocus()
+ expect(input).toBeChecked()
+})
+
+test('clicking a label checks the radio', async () => {
+ const {element} = setup(`
+
+
+
+
+ `)
+ const label = element.children[0]
+ const input = element.children[1]
+
+ await userEvent.click(label)
+ expect(input).toHaveFocus()
+ expect(input).toBeChecked()
+})
+
+test('submits a form when clicking on a