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

[Button] Replace snapshot testing


- Only set `disabled` prop when component is a `button`
parent d31b1493
...@@ -47,10 +47,11 @@ ...@@ -47,10 +47,11 @@
"@babel/plugin-proposal-class-properties": "^7.2.3", "@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/preset-env": "^7.2.3", "@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"@testing-library/jest-dom": "^4.0.0",
"@testing-library/react": "^8.0.7", "@testing-library/react": "^8.0.7",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0", "babel-jest": "^24.8.0",
"babel-loader": "^8.0.5", "babel-loader": "^8.0.5",
"codemirror": "^5.42.0", "codemirror": "^5.42.0",
"css-loader": "^2.1.0", "css-loader": "^2.1.0",
...@@ -60,7 +61,7 @@ ...@@ -60,7 +61,7 @@
"html-loader": "^0.5.5", "html-loader": "^0.5.5",
"html-webpack-harddisk-plugin": "^1.0.1", "html-webpack-harddisk-plugin": "^1.0.1",
"html-webpack-plugin": "^3.0.7", "html-webpack-plugin": "^3.0.7",
"jest": "^23.6.0", "jest": "^24.8.0",
"prettier": "^1.18.2", "prettier": "^1.18.2",
"raw-loader": "^1.0.0", "raw-loader": "^1.0.0",
"react": "^16.8.6", "react": "^16.8.6",
...@@ -83,6 +84,9 @@ ...@@ -83,6 +84,9 @@
"jest": { "jest": {
"moduleNameMapper": { "moduleNameMapper": {
"^@webf/react(.*)$": "<rootDir>/src/$1" "^@webf/react(.*)$": "<rootDir>/src/$1"
} },
"setupFilesAfterEnv": [
"@testing-library/jest-dom/extend-expect"
]
} }
} }
...@@ -66,7 +66,7 @@ class Button extends Component { ...@@ -66,7 +66,7 @@ class Button extends Component {
return ( return (
<Component <Component
className={className} className={className}
disabled={disabled || muted} disabled={Component === 'button' ? disabled || muted : undefined}
onClick={onClick ? this.handleClick : undefined} onClick={onClick ? this.handleClick : undefined}
{...otherProps} {...otherProps}
> >
...@@ -112,7 +112,8 @@ Button.propTypes = { ...@@ -112,7 +112,8 @@ Button.propTypes = {
/** /**
* La couleur du bouton * La couleur du bouton
*/ */
color: PropTypes.oneOf([ color: PropTypes.oneOfType([
PropTypes.oneOf([
'primary', 'primary',
'secondary', 'secondary',
'success', 'success',
...@@ -122,6 +123,8 @@ Button.propTypes = { ...@@ -122,6 +123,8 @@ Button.propTypes = {
'light', 'light',
'dark' 'dark'
]), ]),
PropTypes.string
]),
/** /**
* Composant à utiliser en tant que composant racine * Composant à utiliser en tant que composant racine
......
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import renderer from 'react-test-renderer';
import { cleanup, fireEvent, render } from '@testing-library/react'; import { cleanup, fireEvent, render } from '@testing-library/react';
import { SheetsRegistry } from 'react-jss'; import Color from 'color';
import { BrowserRouter, Link } from 'react-router-dom';
import { createTheme } from '../styles'; import { createTheme } from '../styles';
import wrapToTest from '../utils/wrapToTest'; import wrapToTest from '../utils/wrapToTest';
import Button from './Button'; import Button from './Button';
describe('<Button />', () => { describe('<Button />', () => {
let componentToTest; afterEach(cleanup);
let sheets;
let theme; describe('color prop', () => {
it('must be "primary" by default', () => {});
beforeEach(() => {
componentToTest = null; it.each(['text', 'outline'])(
sheets = null; 'must set the color when variant is %s',
theme = null; variant => {
}); const palette = {
primary: '#abc123',
afterEach(() => { success: 'green',
if (componentToTest !== null) { danger: 'rgb(255, 0, 0)',
const options = { customColor: 'rgba(1, 2, 3, 0.8)'
...(sheets !== null ? { sheets } : {}),
...(theme !== null ? { theme } : {})
}; };
const component = renderer.create(wrapToTest(options)(componentToTest)); const { getAllByText } = render(
wrapToTest({
theme: createTheme({ colors: { palette } })
})(
<Fragment>
<Button variant={variant} color='primary'>
primary
</Button>
<Button variant={variant} color='success'>
success
</Button>
<Button variant={variant} color='danger'>
danger
</Button>
<Button variant={variant} color='customColor'>
customColor
</Button>
</Fragment>
)
);
expect(component.toJSON()).toMatchSnapshot(); getAllByText(/primary/).forEach(element => {
if (sheets !== null) { expect(element).toHaveStyle(`color: ${palette.primary};`);
expect(sheets.toString()).toMatchSnapshot(); });
} getAllByText(/success/).forEach(element => {
expect(element).toHaveStyle(`color: ${palette.success};`);
});
getAllByText(/danger/).forEach(element => {
expect(element).toHaveStyle(`color: ${palette.danger};`);
});
getAllByText(/customColor/).forEach(element => {
expect(element).toHaveStyle(`color: ${palette.customColor};`);
});
} }
);
cleanup(); it.each(['plain', 'gradient'])(
}); 'must set the background color when variant is %s',
variant => {
const palette = {
primary: '#abc123',
success: 'green',
danger: 'rgb(255, 0, 0)',
customColor: 'rgba(1, 2, 3, 0.8)'
};
test('Render with children', () => { const { getAllByText } = render(
componentToTest = ( wrapToTest({
<Button> theme: createTheme({ colors: { palette } })
Hello <strong>you</strong> })(
<Fragment>
<Button variant={variant} color='primary'>
primary
</Button> </Button>
); <Button variant={variant} color='success'>
sheets = new SheetsRegistry(); success
});
test('Render with an anchor component', () => {
componentToTest = (
<Button component={'a'}>
Hello <strong>you</strong>
</Button> </Button>
); <Button variant={variant} color='danger'>
}); danger
test('Should include className', () => {
componentToTest = (
<Button className={'my-custom-class'}>
Hello <strong>you</strong>
</Button> </Button>
); <Button variant={variant} color='customColor'>
}); customColor
test('Should include other components and other props', () => {
componentToTest = (
<BrowserRouter>
<Button component={Link} to={''}>
Hello <strong>you</strong>
</Button> </Button>
</BrowserRouter> </Fragment>
)
); );
});
test('Render with color as `primary`', () => { getAllByText(/primary/).forEach(element => {
componentToTest = ( expect(element).toHaveStyle(`background-color: ${palette.primary};`);
<Button color={'primary'}>
Hello <strong>you</strong>
</Button>
);
}); });
getAllByText(/success/).forEach(element => {
test('Render with color as `primary` and variant as `text`', () => { expect(element).toHaveStyle(`background-color: ${palette.success};`);
componentToTest = (
<Button color={'primary'} variant={'text'}>
Hello <strong>you</strong>
</Button>
);
}); });
getAllByText(/danger/).forEach(element => {
test('Render with color as `primary` and variant as `outline`', () => { expect(element).toHaveStyle(`background-color: ${palette.danger};`);
componentToTest = (
<Button color={'primary'} variant={'outline'}>
Hello <strong>you</strong>
</Button>
);
}); });
getAllByText(/customColor/).forEach(element => {
test('Render with color as `primary` and variant as `gradient`', () => { expect(element).toHaveStyle(
componentToTest = ( `background-color: ${palette.customColor};`
<Button color={'primary'} variant={'gradient'}>
Hello <strong>you</strong>
</Button>
); );
}); });
}
test('Render with color as `primary` and a shadow', () => {
componentToTest = (
<Button color={'primary'} shadow>
Hello <strong>you</strong>
</Button>
); );
}); });
test('Render with color as `primary`, variant as `gradient` and a shadow', () => { describe('disabled prop', () => {
componentToTest = ( it('must disable `button` components', () => {
<Button color={'primary'} variant={'gradient'} shadow> const { getByText } = render(
Hello <strong>you</strong> wrapToTest()(
<Fragment>
<Button>button</Button>
<Button disabled>disabled button</Button>
<Button component='a'>link</Button>
<Button component='a' disabled>
disabled link
</Button> </Button>
</Fragment>
)
); );
});
test('Render with color as `primary` and square as `true`', () => { expect(getByText(/^button$/)).not.toBeDisabled();
componentToTest = ( expect(getByText(/disabled button/)).toBeDisabled();
<Button color={'primary'} square> expect(getByText(/^link$/)).not.toHaveAttribute('disabled');
Hello <strong>you</strong> expect(getByText(/disabled link/)).not.toHaveAttribute('disabled');
</Button>
);
}); });
test('Render with color as `primary` and pill as `true`', () => { it.each(['text', 'outline'])(
componentToTest = ( 'must change the color when variant is %s',
<Button color={'primary'} pill> variant => {
Hello <strong>you</strong> const { getAllByText } = render(
wrapToTest({
theme: createTheme({ colors: { disabled: '#aaa' } })
})(
<Fragment>
<Button variant={variant} disabled>
button
</Button> </Button>
); <Button variant={variant} color='success' disabled>
}); button
test('Render a full-width (display: block) button', () => {
componentToTest = (
<Button fullWidth>
Hello <strong>you</strong>
</Button> </Button>
); <Button variant={variant} color='customColor' disabled>
}); button
test('Render with prop `size` as `large`', () => {
componentToTest = (
<Button size={'large'}>
Hello <strong>you</strong>
</Button> </Button>
</Fragment>
)
); );
getAllByText(/button/).forEach(element => {
expect(element).toHaveStyle('color: #aaa;');
}); });
}
);
test('Render with prop `muted` as `true`', () => { it.each(['plain', 'gradient'])(
componentToTest = ( 'must change the background color when variant is %s',
<Button muted> variant => {
Hello <strong>you</strong> const { getAllByText } = render(
wrapToTest({
theme: createTheme({ colors: { disabled: '#aaa' } })
})(
<Fragment>
<Button variant={variant} disabled>
button
</Button> </Button>
<Button variant={variant} color='success' disabled>
button
</Button>
<Button variant={variant} color='customColor' disabled>
button
</Button>
<Button variant={variant} disabled muted>
button
</Button>
<Button variant={variant} color='success' disabled muted>
button
</Button>
<Button variant={variant} color='customColor' disabled muted>
button
</Button>
</Fragment>
)
); );
});
test('Render with prop `disabled` as `true`', () => { getAllByText(/button/).forEach(element => {
componentToTest = ( // Test if the opaque color is theme.colors.disabled
<Button disabled> expect(
Hello <strong>you</strong> Color(
</Button> element.ownerDocument.defaultView.getComputedStyle(element)
.backgroundColor
)
.alpha(1)
.string()
).toEqual(Color('#aaa').string());
});
}
); );
}); });
test('Render with a custom theme', () => { describe('fullWidth prop', () => {
componentToTest = ( it('must set the width to 100%', () => {
<Button color={'primary'}> const { getByText } = render(
Hello <strong>you</strong> wrapToTest()(
</Button> <Fragment>
<Button>normal width</Button>
<Button fullWidth>full width</Button>
</Fragment>
)
); );
sheets = new SheetsRegistry();
theme = createTheme({ expect(getByText(/normal width/)).not.toHaveStyle('width: 100%;');
colors: { expect(getByText(/full width/)).toHaveStyle('width: 100%;');
palette: {
primary: '#ffaaaa'
}
}
}); });
}); });
......
This diff is collapsed.
This diff is collapsed.
Supports Markdown
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