Skip to content

GitLab

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
Expand all Hide whitespace changes
Inline Side-by-side
package.json
View file @ 66c96481
...@@ -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"
]
} }
} }
src/Button/Button.js
View file @ 66c96481
...@@ -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,15 +112,18 @@ Button.propTypes = { ...@@ -112,15 +112,18 @@ Button.propTypes = {
/** /**
* La couleur du bouton * La couleur du bouton
*/ */
color: PropTypes.oneOf([ color: PropTypes.oneOfType([
'primary', PropTypes.oneOf([
'secondary', 'primary',
'success', 'secondary',
'danger', 'success',
'warning', 'danger',
'info', 'warning',
'light', 'info',
'dark' 'light',
'dark'
]),
PropTypes.string
]), ]),
/** /**
......
src/Button/Button.test.js
View file @ 66c96481
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 { getAllByText } = render(
wrapToTest({
const component = renderer.create(wrapToTest(options)(componentToTest)); theme: createTheme({ colors: { palette } })
})(
expect(component.toJSON()).toMatchSnapshot(); <Fragment>
if (sheets !== null) { <Button variant={variant} color='primary'>
expect(sheets.toString()).toMatchSnapshot(); primary
</Button>
<Button variant={variant} color='success'>
success
</Button>
<Button variant={variant} color='danger'>
danger
</Button>
<Button variant={variant} color='customColor'>
customColor
</Button>
</Fragment>
)
);
getAllByText(/primary/).forEach(element => {
expect(element).toHaveStyle(`color: ${palette.primary};`);
});
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();
});
test('Render with children', () => {
componentToTest = (
<Button>
Hello <strong>you</strong>
</Button>
);
sheets = new SheetsRegistry();
});
test('Render with an anchor component', () => {
componentToTest = (
<Button component={'a'}>
Hello <strong>you</strong>
</Button>
);
});
test('Should include className', () => {
componentToTest = (
<Button className={'my-custom-class'}>
Hello <strong>you</strong>
</Button>
); );
});
test('Should include other components and other props', () => { it.each(['plain', 'gradient'])(
componentToTest = ( 'must set the background color when variant is %s',
<BrowserRouter> variant => {
<Button component={Link} to={''}> const palette = {
Hello <strong>you</strong> primary: '#abc123',
</Button> success: 'green',
</BrowserRouter> danger: 'rgb(255, 0, 0)',
); customColor: 'rgba(1, 2, 3, 0.8)'
}); };
test('Render with color as `primary`', () => { const { getAllByText } = render(
componentToTest = ( wrapToTest({
<Button color={'primary'}> theme: createTheme({ colors: { palette } })
Hello <strong>you</strong> })(
</Button> <Fragment>
); <Button variant={variant} color='primary'>
}); primary
</Button>
test('Render with color as `primary` and variant as `text`', () => { <Button variant={variant} color='success'>
componentToTest = ( success
<Button color={'primary'} variant={'text'}> </Button>
Hello <strong>you</strong> <Button variant={variant} color='danger'>
</Button> danger
); </Button>
}); <Button variant={variant} color='customColor'>
customColor
test('Render with color as `primary` and variant as `outline`', () => { </Button>
componentToTest = ( </Fragment>
<Button color={'primary'} variant={'outline'}> )
Hello <strong>you</strong> );
</Button>
); getAllByText(/primary/).forEach(element => {
}); expect(element).toHaveStyle(`background-color: ${palette.primary};`);
});
test('Render with color as `primary` and variant as `gradient`', () => { getAllByText(/success/).forEach(element => {
componentToTest = ( expect(element).toHaveStyle(`background-color: ${palette.success};`);
<Button color={'primary'} variant={'gradient'}> });
Hello <strong>you</strong> getAllByText(/danger/).forEach(element => {
</Button> expect(element).toHaveStyle(`background-color: ${palette.danger};`);
); });
}); getAllByText(/customColor/).forEach(element => {
expect(element).toHaveStyle(
test('Render with color as `primary` and a shadow', () => { `background-color: ${palette.customColor};`
componentToTest = ( );
<Button color={'primary'} shadow> });
Hello <strong>you</strong> }
</Button>
);
});
test('Render with color as `primary`, variant as `gradient` and a shadow', () => {
componentToTest = (
<Button color={'primary'} variant={'gradient'} shadow>
Hello <strong>you</strong>
</Button>
);
});
test('Render with color as `primary` and square as `true`', () => {
componentToTest = (
<Button color={'primary'} square>
Hello <strong>you</strong>
</Button>
); );
}); });
test('Render with color as `primary` and pill as `true`', () => { describe('disabled prop', () => {
componentToTest = ( it('must disable `button` components', () => {
<Button color={'primary'} pill> const { getByText } = render(
Hello <strong>you</strong> wrapToTest()(
</Button> <Fragment>
); <Button>button</Button>
}); <Button disabled>disabled button</Button>
<Button component='a'>link</Button>
<Button component='a' disabled>
disabled link
</Button>
</Fragment>
)
);
test('Render a full-width (display: block) button', () => { expect(getByText(/^button$/)).not.toBeDisabled();
componentToTest = ( expect(getByText(/disabled button/)).toBeDisabled();
<Button fullWidth> expect(getByText(/^link$/)).not.toHaveAttribute('disabled');
Hello <strong>you</strong> expect(getByText(/disabled link/)).not.toHaveAttribute('disabled');
</Button> });
);
});
test('Render with prop `size` as `large`', () => { it.each(['text', 'outline'])(
componentToTest = ( 'must change the color when variant is %s',
<Button size={'large'}> variant => {
Hello <strong>you</strong> const { getAllByText } = render(
</Button> wrapToTest({
theme: createTheme({ colors: { disabled: '#aaa' } })
})(
<Fragment>
<Button variant={variant} disabled>
button
</Button>
<Button variant={variant} color='success' disabled>
button
</Button>
<Button variant={variant} color='customColor' disabled>
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(
</Button> wrapToTest({
theme: createTheme({ colors: { disabled: '#aaa' } })
})(
<Fragment>
<Button variant={variant} disabled>
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>
)
);
getAllByText(/button/).forEach(element => {
// Test if the opaque color is theme.colors.disabled
expect(
Color(
element.ownerDocument.defaultView.getComputedStyle(element)
.backgroundColor
)
.alpha(1)
.string()
).toEqual(Color('#aaa').string());
});
}
); );
}); });
test('Render with prop `disabled` as `true`', () => { describe('fullWidth prop', () => {
componentToTest = ( it('must set the width to 100%', () => {
<Button disabled> const { getByText } = render(
Hello <strong>you</strong> wrapToTest()(
</Button> <Fragment>
); <Button>normal width</Button>
}); <Button fullWidth>full width</Button>
</Fragment>
)
);
test('Render with a custom theme', () => { expect(getByText(/normal width/)).not.toHaveStyle('width: 100%;');
componentToTest = ( expect(getByText(/full width/)).toHaveStyle('width: 100%;');
<Button color={'primary'}>
Hello <strong>you</strong>
</Button>
);
sheets = new SheetsRegistry();
theme = createTheme({
colors: {
palette: {
primary: '#ffaaaa'
}
}
}); });
}); });
......
src/Button/__snapshots__/Button.test.js.snap deleted 100644 → 0
View file @ d31b1493
This diff is collapsed.
yarn.lock
View file @ 66c96481
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