Commit cacd0a1d authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

[ListItem] Prevent default event on click if component is "a"

Closes #18
parent 0e0f1602
Pipeline #1503 passed with stage
in 1 minute and 13 seconds
......@@ -245,44 +245,44 @@ describe('<Button />', () => {
});
it('must not be called when disabled or muted', () => {
const buttonDisabledCalllback = jest.fn();
const linkDisabledCalllback = jest.fn();
const buttonMutedCalllback = jest.fn();
const linkMutedCalllback = jest.fn();
const buttonDisabledCallback = jest.fn();
const linkDisabledCallback = jest.fn();
const buttonMutedCallback = jest.fn();
const linkMutedCallback = jest.fn();
const { getByText } = render(
wrapToTest()(
<Fragment>
<Button disabled onClick={buttonDisabledCalllback}>
<Button disabled onClick={buttonDisabledCallback}>
button disabled
</Button>
<Button component='a' disabled onClick={linkDisabledCalllback}>
<Button component='a' disabled onClick={linkDisabledCallback}>
link disabled
</Button>
<Button muted onClick={buttonMutedCalllback}>
<Button muted onClick={buttonMutedCallback}>
button muted
</Button>
<Button component='a' muted onClick={linkMutedCalllback}>
<Button component='a' muted onClick={linkMutedCallback}>
link muted
</Button>
</Fragment>
)
);
expect(buttonDisabledCalllback).not.toHaveBeenCalled();
expect(linkDisabledCalllback).not.toHaveBeenCalled();
expect(buttonMutedCalllback).not.toHaveBeenCalled();
expect(linkMutedCalllback).not.toHaveBeenCalled();
expect(buttonDisabledCallback).not.toHaveBeenCalled();
expect(linkDisabledCallback).not.toHaveBeenCalled();
expect(buttonMutedCallback).not.toHaveBeenCalled();
expect(linkMutedCallback).not.toHaveBeenCalled();
fireEvent.click(getByText(/button disabled/));
fireEvent.click(getByText(/link disabled/));
fireEvent.click(getByText(/button muted/));
fireEvent.click(getByText(/link muted/));
expect(buttonDisabledCalllback).not.toHaveBeenCalled();
expect(linkDisabledCalllback).not.toHaveBeenCalled();
expect(buttonMutedCalllback).not.toHaveBeenCalled();
expect(linkMutedCalllback).not.toHaveBeenCalled();
expect(buttonDisabledCallback).not.toHaveBeenCalled();
expect(linkDisabledCallback).not.toHaveBeenCalled();
expect(buttonMutedCallback).not.toHaveBeenCalled();
expect(linkMutedCallback).not.toHaveBeenCalled();
});
});
......
......@@ -4,7 +4,7 @@ import { cleanup, render } from '@testing-library/react';
import { createTheme } from '../styles';
import wrapToTest from '../utils/wrapToTest';
describe('<Button />', () => {
describe('<IconButton />', () => {
afterEach(cleanup);
describe('size prop', () => {
......
......@@ -21,7 +21,11 @@ import styles from './ListItem.styles';
*/
class ListItem extends Component {
handleClick = (...args) => {
const { disabled, muted, onClick } = this.props;
const { component, disabled, muted, onClick } = this.props;
if (component === 'a' && (disabled || muted)) {
args[0].preventDefault();
}
if (onClick && !disabled && !muted) {
onClick(...args);
......
import React from 'react';
import {
cleanup,
createEvent,
fireEvent,
render
} from '@testing-library/react';
import wrapToTest from '../utils/wrapToTest';
import List from '../List';
import ListItem from './ListItem';
describe('<ListItem />', () => {
afterEach(cleanup);
describe('component', () => {
it('must have click events default prevented if it is a "a"', () => {
const { getByText } = render(
wrapToTest()(
<List>
<ListItem clickable component='a' disabled>
disabled
</ListItem>
<ListItem clickable component='a' muted>
muted
</ListItem>
</List>
)
);
const disabled = getByText(/disabled/);
const muted = getByText(/muted/);
const disabledEvent = createEvent.click(disabled);
const mutedEvent = createEvent.click(muted);
fireEvent(disabled, disabledEvent);
fireEvent(muted, mutedEvent);
expect(disabledEvent.defaultPrevented).toBe(true);
expect(mutedEvent.defaultPrevented).toBe(true);
});
});
describe('onClick', () => {
it('must be called on click', () => {
const callback = jest.fn();
const { getByText } = render(
wrapToTest()(
<List>
<ListItem clickable onClick={callback}>
Item
</ListItem>
</List>
)
);
expect(callback).not.toHaveBeenCalled();
fireEvent.click(getByText(/Item/));
expect(callback).toHaveBeenCalled();
});
it('must not be called when disabled or muted', () => {
const disabledCallback = jest.fn();
const mutedCallback = jest.fn();
const { getByText } = render(
wrapToTest()(
<List>
<ListItem clickable disabled onClick={disabledCallback}>
disabled
</ListItem>
<ListItem clickable muted onClick={mutedCallback}>
muted
</ListItem>
</List>
)
);
expect(disabledCallback).not.toHaveBeenCalled();
expect(mutedCallback).not.toHaveBeenCalled();
fireEvent.click(getByText(/disabled/));
fireEvent.click(getByText(/muted/));
expect(disabledCallback).not.toHaveBeenCalled();
expect(mutedCallback).not.toHaveBeenCalled();
});
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment