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 @@
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@testing-library/jest-dom": "^4.0.0",
"@testing-library/react": "^8.0.7",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.5",
"codemirror": "^5.42.0",
"css-loader": "^2.1.0",
......@@ -60,7 +61,7 @@
"html-loader": "^0.5.5",
"html-webpack-harddisk-plugin": "^1.0.1",
"html-webpack-plugin": "^3.0.7",
"jest": "^23.6.0",
"jest": "^24.8.0",
"prettier": "^1.18.2",
"raw-loader": "^1.0.0",
"react": "^16.8.6",
......@@ -83,6 +84,9 @@
"jest": {
"moduleNameMapper": {
"^@webf/react(.*)$": "<rootDir>/src/$1"
}
},
"setupFilesAfterEnv": [
"@testing-library/jest-dom/extend-expect"
]
}
}
......@@ -66,7 +66,7 @@ class Button extends Component {
return (
<Component
className={className}
disabled={disabled || muted}
disabled={Component === 'button' ? disabled || muted : undefined}
onClick={onClick ? this.handleClick : undefined}
{...otherProps}
>
......@@ -112,15 +112,18 @@ Button.propTypes = {
/**
* La couleur du bouton
*/
color: PropTypes.oneOf([
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark'
color: PropTypes.oneOfType([
PropTypes.oneOf([
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark'
]),
PropTypes.string
]),
/**
......
import React, { Fragment } from 'react';
import renderer from 'react-test-renderer';
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 wrapToTest from '../utils/wrapToTest';
import Button from './Button';
describe('<Button />', () => {
let componentToTest;
let sheets;
let theme;
beforeEach(() => {
componentToTest = null;
sheets = null;
theme = null;
});
afterEach(() => {
if (componentToTest !== null) {
const options = {
...(sheets !== null ? { sheets } : {}),
...(theme !== null ? { theme } : {})
};
const component = renderer.create(wrapToTest(options)(componentToTest));
expect(component.toJSON()).toMatchSnapshot();
if (sheets !== null) {
expect(sheets.toString()).toMatchSnapshot();
afterEach(cleanup);
describe('color prop', () => {
it('must be "primary" by default', () => {});
it.each(['text', 'outline'])(
'must set the color when variant is %s',
variant => {
const palette = {
primary: '#abc123',
success: 'green',
danger: 'rgb(255, 0, 0)',
customColor: 'rgba(1, 2, 3, 0.8)'
};
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>
)
);
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', () => {
componentToTest = (
<BrowserRouter>
<Button component={Link} to={''}>
Hello <strong>you</strong>
</Button>
</BrowserRouter>
);
});
test('Render with color as `primary`', () => {
componentToTest = (
<Button color={'primary'}>
Hello <strong>you</strong>
</Button>
);
});
test('Render with color as `primary` and variant as `text`', () => {
componentToTest = (
<Button color={'primary'} variant={'text'}>
Hello <strong>you</strong>
</Button>
);
});
test('Render with color as `primary` and variant as `outline`', () => {
componentToTest = (
<Button color={'primary'} variant={'outline'}>
Hello <strong>you</strong>
</Button>
);
});
test('Render with color as `primary` and variant as `gradient`', () => {
componentToTest = (
<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', () => {
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>
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)'
};
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>
)
);
getAllByText(/primary/).forEach(element => {
expect(element).toHaveStyle(`background-color: ${palette.primary};`);
});
getAllByText(/success/).forEach(element => {
expect(element).toHaveStyle(`background-color: ${palette.success};`);
});
getAllByText(/danger/).forEach(element => {
expect(element).toHaveStyle(`background-color: ${palette.danger};`);
});
getAllByText(/customColor/).forEach(element => {
expect(element).toHaveStyle(
`background-color: ${palette.customColor};`
);
});
}
);
});
test('Render with color as `primary` and pill as `true`', () => {
componentToTest = (
<Button color={'primary'} pill>
Hello <strong>you</strong>
</Button>
);
});
describe('disabled prop', () => {
it('must disable `button` components', () => {
const { getByText } = render(
wrapToTest()(
<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', () => {
componentToTest = (
<Button fullWidth>
Hello <strong>you</strong>
</Button>
);
});
expect(getByText(/^button$/)).not.toBeDisabled();
expect(getByText(/disabled button/)).toBeDisabled();
expect(getByText(/^link$/)).not.toHaveAttribute('disabled');
expect(getByText(/disabled link/)).not.toHaveAttribute('disabled');
});
test('Render with prop `size` as `large`', () => {
componentToTest = (
<Button size={'large'}>
Hello <strong>you</strong>
</Button>
it.each(['text', 'outline'])(
'must change the color when variant is %s',
variant => {
const { getAllByText } = render(
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`', () => {
componentToTest = (
<Button muted>
Hello <strong>you</strong>
</Button>
it.each(['plain', 'gradient'])(
'must change the background color when variant is %s',
variant => {
const { getAllByText } = render(
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`', () => {
componentToTest = (
<Button disabled>
Hello <strong>you</strong>
</Button>
);
});
describe('fullWidth prop', () => {
it('must set the width to 100%', () => {
const { getByText } = render(
wrapToTest()(
<Fragment>
<Button>normal width</Button>
<Button fullWidth>full width</Button>
</Fragment>
)
);
test('Render with a custom theme', () => {
componentToTest = (
<Button color={'primary'}>
Hello <strong>you</strong>
</Button>
);
sheets = new SheetsRegistry();
theme = createTheme({
colors: {
palette: {
primary: '#ffaaaa'
}
}
expect(getByText(/normal width/)).not.toHaveStyle('width: 100%;');
expect(getByText(/full width/)).toHaveStyle('width: 100%;');
});
});
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Button /> Render a full-width (display: block) button 1`] = `
<button
className="Button-root-0-1-1 Button-primaryColor-0-1-6 Button-plainVariant-0-1-2 Button-fullWidth-0-1-21"
>
Hello
<strong>
you
</strong>
</button>
`;
exports[`<Button /> Render with a custom theme 1`] = `
<button
className="Button-root-0-1-1 Button-primaryColor-0-1-6 Button-plainVariant-0-1-2"
>
Hello
<strong>
you
</strong>
</button>
`;
exports[`<Button /> Render with a custom theme 2`] = `
".Button-root-0-1-1 {
color: inherit;
cursor: pointer;
display: inline-flex;
padding: 0.25rem 1rem;
outline: 0 !important;
transition: background-position 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
box-shadow: none;
user-select: none;
align-items: center;
line-height: 1.5;
font-weight: normal;
font-family: inherit;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-radius: 0.25rem;
vertical-align: middle;
justify-content: center;
text-decoration: none;
background-color: transparent;
background-image: none;
}
.Button-textVariant-0-1-3 {
background-color: transparent;
}
.Button-outlineVariant-0-1-4 {
background-color: transparent;
}
.Button-gradientVariant-0-1-5:not(.Button-disabled-0-1-10) {
padding: calc(0.25rem + 1px) calc(1rem + 1px);
}
.Button-primaryColor-0-1-6.Button-textVariant-0-1-3 {
color: #ffaaaa;
}
.Button-primaryColor-0-1-6.Button-outlineVariant-0-1-4 {
color: #ffaaaa;
border-color: #ffaaaa;
}
.Button-primaryColor-0-1-6.Button-plainVariant-0-1-2 {
color: rgba(0, 0, 0, 0.8);
background-color: #ffaaaa;
}
.Button-primaryColor-0-1-6.Button-gradientVariant-0-1-5 {
color: rgba(0, 0, 0, 0.8);
border-width: 0;
background-size: 200%;
background-color: #ffaaaa;
background-image: linear-gradient(60deg, hsl(0, 100%, 58.3%), hsl(0, 100%, 83.3%), rgb(255, 220, 202));
background-position: 100% 0;
}
.Button-primaryColor-0-1-6.Button-gradientVariant-0-1-5.Button-shadow-0-1-11 {
box-shadow: 0 0.4rem 2rem 0 rgba(255, 170, 170, 0.19999999999999996), 0 0.7rem 1rem -0.5rem rgba(255, 170, 170, 0.6);
}
.Button-primaryColor-0-1-6.Button-gradientVariant-0-1-5.Button-shadow-0-1-11:hover, .Button-primaryColor-0-1-6.Button-gradientVariant-0-1-5.Button-shadow-0-1-11:focus, .Button-primaryColor-0-1-6.Button-gradientVariant-0-1-5.Button-shadow-0-1-11:active {
box-shadow: 0 0.4rem 3rem 0 rgba(255, 170, 170, 0.19999999999999996), 0 0.7rem 2rem -0.5rem rgba(255, 170, 170, 0.6);
}
.Button-primaryColor-0-1-6.Button-gradientVariant-0-1-5:not(.Button-muted-0-1-9):hover, .Button-primaryColor-0-1-6.Button-gradientVariant-0-1-5:not(.Button-muted-0-1-9):focus {
background-position: 50% 0;
}
.Button-primaryColor-0-1-6.Button-gradientVariant-0-1-5:not(.Button-muted-0-1-9):active {
background-position: 0 0;
}
.Button-primaryColor-0-1-6.Button-plainVariant-0-1-2:not(.Button-muted-0-1-9):hover, .Button-primaryColor-0-1-6.Button-plainVariant-0-1-2:not(.Button-muted-0-1-9):focus {
background-color: rgb(230, 154, 154);
}
.Button-primaryColor-0-1-6.Button-plainVariant-0-1-2:not(.Button-muted-0-1-9):active {
background-color: rgb(206, 137, 137);
}
.Button-primaryColor-0-1-6.Button-outlineVariant-0-1-4:not(.Button-muted-0-1-9):hover, .Button-primaryColor-0-1-6.Button-outlineVariant-0-1-4:not(.Button-muted-0-1-9):focus {
color: rgb(230, 154, 154);
border-color: rgb(230, 154, 154);
background-color: rgba(255, 170, 170, 0.09999999999999998);
}
.Button-primaryColor-0-1-6.Button-outlineVariant-0-1-4:not(.Button-muted-0-1-9):active {
color: rgb(206, 137, 137);
border-color: rgb(206, 137, 137);
background-color: rgba(255, 170, 170, 0.19999999999999996);
}
.Button-primaryColor-0-1-6.Button-textVariant-0-1-3:not(.Button-muted-0-1-9):hover, .Button-primaryColor-0-1-6.Button-textVariant-0-1-3:not(.Button-muted-0-1-9):focus {
color: rgb(230, 154, 154);
background-color: rgba(255, 170, 170, 0.09999999999999998);
}
.Button-primaryColor-0-1-6.Button-textVariant-0-1-3:not(.Button-muted-0-1-9):active {
color: rgb(206, 137, 137);
background-color: rgba(255, 170, 170, 0.19999999999999996);
}
.Button-smallSize-0-1-7 {
padding: 0.2rem 0.8rem;
font-size: 0.8rem;
border-radius: 0.2rem;
}
.Button-smallSize-0-1-7.Button-gradientVariant-0-1-5:not(.Button-disabled-0-1-10) {
padding: calc(0.2rem + 1px) calc(0.8rem + 1px);
}
.Button-largeSize-0-1-8 {
padding: 0.3rem 1.2rem;
font-size: 1.2rem;
border-radius: 0.3rem;
}
.Button-largeSize-0-1-8.Button-gradientVariant-0-1-5:not(.Button-disabled-0-1-10) {
padding: calc(0.3rem + 1px) calc(1.2rem + 1px);
}
.Button-muted-0-1-9 {
cursor: not-allowed;
opacity: 0.5;
box-shadow: none !important;
}
.Button-disabled-0-1-10 {
color: rgba(0, 0, 0, 0.4) !important;
cursor: not-allowed;
opacity: 1;
box-shadow: none !important;
}
.Button-disabled-0-1-10.Button-textVariant-0-1-3, .Button-disabled-0-1-10.Button-outlineVariant-0-1-4 {
background-color: transparent !important;
}
.Button-disabled-0-1-10.Button-outlineVariant-0-1-4 {
border-color: rgba(0, 0, 0, 0.07999999999999996) !important;
}
.Button-disabled-0-1-10.Button-plainVariant-0-1-2, .Button-disabled-0-1-10.Button-gradientVariant-0-1-5 {
background-color: rgba(0, 0, 0, 0.07999999999999996) !important;
}
.Button-disabled-0-1-10.Button-gradientVariant-0-1-5 {
border-width: 1px;
background-image: none;
}
.Button-shadow-0-1-11:not(.Button-textVariant-0-1-3):not(.Button-gradientVariant-0-1-5):not(.Button-muted-0-1-9):not(.Button-disabled-0-1-10) {
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}
.Button-shadow-0-1-11:not(.Button-textVariant-0-1-3):not(.Button-gradientVariant-0-1-5):not(.Button-muted-0-1-9):not(.Button-disabled-0-1-10):hover, .Button-shadow-0-1-11:not(.Button-textVariant-0-1-3):not(.Button-gradientVariant-0-1-5):not(.Button-muted-0-1-9):not(.Button-disabled-0-1-10):focus, .Button-shadow-0-1-11:not(.Button-textVariant-0-1-3):not(.Button-gradientVariant-0-1-5):not(.Button-muted-0-1-9):not(.Button-disabled-0-1-10):active {
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 3px 3px -2px rgba(0, 0, 0, 0.12);
}
.Button-square-0-1-12 {
border-radius: 0;