Skip to content

Commit

Permalink
fix: 🐛 click handles checkboxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gpx
Gpx committed Sep 22, 2018
1 parent d1f6734 commit c00e865
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 134 deletions.
234 changes: 138 additions & 96 deletions __tests__/events.js
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,99 @@
import React from 'react'
import { render, cleanup } from 'react-testing-library'
import 'jest-dom/extend-expect'
import userEvent from '../src'
import React from "react";
import { render, cleanup } from "react-testing-library";
import "jest-dom/extend-expect";
import userEvent from "../src";

afterEach(cleanup)
afterEach(cleanup);

describe('fireEvent.click', () => {
it.each(['input', 'textarea'])(
'should fire the correct events for <%s>',
describe("fireEvent.click", () => {
it.each(["input", "textarea"])(
"should fire the correct events for <%s>",
type => {
const onMouseOver = jest.fn()
const onMouseMove = jest.fn()
const onMouseDown = jest.fn()
const onFocus = jest.fn()
const onMouseUp = jest.fn()
const onClick = jest.fn()
const onMouseOver = jest.fn();
const onMouseMove = jest.fn();
const onMouseDown = jest.fn();
const onFocus = jest.fn();
const onMouseUp = jest.fn();
const onClick = jest.fn();
const { getByTestId } = render(
React.createElement(type, {
'data-testid': 'element',
"data-testid": "element",
onMouseOver: onMouseOver,
onMouseMove: onMouseMove,
onMouseDown: onMouseDown,
onFocus: onFocus,
onMouseUp: onMouseUp,
onClick: onClick,
onClick: onClick
})
)

expect(onMouseOver).not.toHaveBeenCalled()
expect(onMouseMove).not.toHaveBeenCalled()
expect(onMouseDown).not.toHaveBeenCalled()
expect(onFocus).not.toHaveBeenCalled()
expect(onMouseUp).not.toHaveBeenCalled()
expect(onClick).not.toHaveBeenCalled()

userEvent.click(getByTestId('element'))

expect(onMouseOver).toHaveBeenCalledTimes(1)
expect(onMouseMove).toHaveBeenCalledTimes(1)
expect(onMouseDown).toHaveBeenCalledTimes(1)
expect(onFocus).toHaveBeenCalledTimes(1)
expect(onMouseUp).toHaveBeenCalledTimes(1)
expect(onClick).toHaveBeenCalledTimes(1)
);

expect(onMouseOver).not.toHaveBeenCalled();
expect(onMouseMove).not.toHaveBeenCalled();
expect(onMouseDown).not.toHaveBeenCalled();
expect(onFocus).not.toHaveBeenCalled();
expect(onMouseUp).not.toHaveBeenCalled();
expect(onClick).not.toHaveBeenCalled();

userEvent.click(getByTestId("element"));

expect(onMouseOver).toHaveBeenCalledTimes(1);
expect(onMouseMove).toHaveBeenCalledTimes(1);
expect(onMouseDown).toHaveBeenCalledTimes(1);
expect(onFocus).toHaveBeenCalledTimes(1);
expect(onMouseUp).toHaveBeenCalledTimes(1);
expect(onClick).toHaveBeenCalledTimes(1);
}
)

it('should fire the correct events for <div>', () => {
const onMouseOver = jest.fn()
const onMouseMove = jest.fn()
const onMouseDown = jest.fn()
const onFocus = jest.fn()
const onMouseUp = jest.fn()
const onClick = jest.fn()
);

it('should fire the correct events for <input type="checkbox">', () => {
const onMouseOver = jest.fn();
const onMouseMove = jest.fn();
const onMouseDown = jest.fn();
const onFocus = jest.fn();
const onMouseUp = jest.fn();
const onClick = jest.fn();
const onChange = jest.fn();
const { getByTestId } = render(
<input
data-testid="element"
type="checkbox"
onMouseOver={onMouseOver}
onMouseMove={onMouseMove}
onMouseDown={onMouseDown}
onFocus={onFocus}
onMouseUp={onMouseUp}
onClick={onClick}
onChange={onChange}
/>
);

expect(onMouseOver).not.toHaveBeenCalled();
expect(onMouseMove).not.toHaveBeenCalled();
expect(onMouseDown).not.toHaveBeenCalled();
expect(onFocus).not.toHaveBeenCalled();
expect(onMouseUp).not.toHaveBeenCalled();
expect(onClick).not.toHaveBeenCalled();
expect(onChange).not.toHaveBeenCalled();

userEvent.click(getByTestId("element"));

expect(onMouseOver).toHaveBeenCalledTimes(1);
expect(onMouseMove).toHaveBeenCalledTimes(1);
expect(onMouseDown).toHaveBeenCalledTimes(1);
expect(onFocus).not.toHaveBeenCalledTimes(1);
expect(onMouseUp).toHaveBeenCalledTimes(1);
expect(onClick).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledTimes(1);
expect(getByTestId("element")).toHaveProperty("checked", true);
});

it("should fire the correct events for <div>", () => {
const onMouseOver = jest.fn();
const onMouseMove = jest.fn();
const onMouseDown = jest.fn();
const onFocus = jest.fn();
const onMouseUp = jest.fn();
const onClick = jest.fn();
const { getByTestId } = render(
<div
data-testid="div"
Expand All @@ -62,93 +104,93 @@ describe('fireEvent.click', () => {
onMouseUp={onMouseUp}
onClick={onClick}
/>
)

expect(onMouseOver).not.toHaveBeenCalled()
expect(onMouseMove).not.toHaveBeenCalled()
expect(onMouseDown).not.toHaveBeenCalled()
expect(onFocus).not.toHaveBeenCalled()
expect(onMouseUp).not.toHaveBeenCalled()
expect(onClick).not.toHaveBeenCalled()

userEvent.click(getByTestId('div'))

expect(onMouseOver).toHaveBeenCalledTimes(1)
expect(onMouseMove).toHaveBeenCalledTimes(1)
expect(onMouseDown).toHaveBeenCalledTimes(1)
expect(onFocus).not.toHaveBeenCalled()
expect(onMouseUp).toHaveBeenCalledTimes(1)
expect(onClick).toHaveBeenCalledTimes(1)
})

it('toggles the focus', () => {
);

expect(onMouseOver).not.toHaveBeenCalled();
expect(onMouseMove).not.toHaveBeenCalled();
expect(onMouseDown).not.toHaveBeenCalled();
expect(onFocus).not.toHaveBeenCalled();
expect(onMouseUp).not.toHaveBeenCalled();
expect(onClick).not.toHaveBeenCalled();

userEvent.click(getByTestId("div"));

expect(onMouseOver).toHaveBeenCalledTimes(1);
expect(onMouseMove).toHaveBeenCalledTimes(1);
expect(onMouseDown).toHaveBeenCalledTimes(1);
expect(onFocus).not.toHaveBeenCalled();
expect(onMouseUp).toHaveBeenCalledTimes(1);
expect(onClick).toHaveBeenCalledTimes(1);
});

it("toggles the focus", () => {
const { getByTestId } = render(
<React.Fragment>
<input data-testid="A" />
<input data-testid="B" />
</React.Fragment>
)
);

const a = getByTestId('A')
const b = getByTestId('B')
const a = getByTestId("A");
const b = getByTestId("B");

expect(a).not.toHaveFocus()
expect(b).not.toHaveFocus()
expect(a).not.toHaveFocus();
expect(b).not.toHaveFocus();

userEvent.click(a)
expect(a).toHaveFocus()
expect(b).not.toHaveFocus()
userEvent.click(a);
expect(a).toHaveFocus();
expect(b).not.toHaveFocus();

userEvent.click(b)
expect(a).not.toHaveFocus()
expect(a).not.toHaveFocus()
})
userEvent.click(b);
expect(a).not.toHaveFocus();
expect(a).not.toHaveFocus();
});

it.each(['input', 'textarea'])(
'gives focus to <%s> when clicking a <label> with htmlFor',
it.each(["input", "textarea"])(
"gives focus to <%s> when clicking a <label> with htmlFor",
type => {
const { getByTestId } = render(
<React.Fragment>
<label htmlFor="input" data-testid="label">
Label
</label>
{React.createElement(type, { id: 'input', 'data-testid': 'input' })}
{React.createElement(type, { id: "input", "data-testid": "input" })}
</React.Fragment>
)
userEvent.click(getByTestId('label'))
expect(getByTestId('input')).toHaveFocus()
);
userEvent.click(getByTestId("label"));
expect(getByTestId("input")).toHaveFocus();
}
)
);

it.each(['input', 'textarea'])(
'gives focus to <%s> when clicking a <label> without htmlFor',
it.each(["input", "textarea"])(
"gives focus to <%s> when clicking a <label> without htmlFor",
type => {
const { getByTestId } = render(
<React.Fragment>
<label data-testid="label">
Label
{React.createElement(type, { 'data-testid': 'input' })}
{React.createElement(type, { "data-testid": "input" })}
</label>
</React.Fragment>
)
userEvent.click(getByTestId('label'))
expect(getByTestId('input')).toHaveFocus()
);
userEvent.click(getByTestId("label"));
expect(getByTestId("input")).toHaveFocus();
}
)
);

it.each(['input', 'textarea'])(
'gives focus to <%s> when clicking on an element contained within a <label>',
it.each(["input", "textarea"])(
"gives focus to <%s> when clicking on an element contained within a <label>",
type => {
const { getByText, getByTestId } = render(
<React.Fragment>
<label htmlFor="input" data-testid="label">
<span>Label</span>
</label>
{React.createElement(type, { id: 'input', 'data-testid': 'input' })}
{React.createElement(type, { id: "input", "data-testid": "input" })}
</React.Fragment>
)
userEvent.click(getByText('Label'))
expect(getByTestId('input')).toHaveFocus()
);
userEvent.click(getByText("Label"));
expect(getByTestId("input")).toHaveFocus();
}
)
})
);
});
Loading

0 comments on commit c00e865

Please sign in to comment.