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 @@
"@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"
]
}
}
src/Button/Button.js
View file @ 66c96481
......@@ -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
]),
/**
......
src/Button/Button.test.js
View file @ 66c96481
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%;');
});
});
......
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