Skip to content

Commit dabd983

Browse files
rcdextarcdexta
committed
Add jest storybook add-on to use stories to create jest snapshots
1 parent 77f6639 commit dabd983

15 files changed

Lines changed: 55751 additions & 822 deletions

File tree

‎.storybook/config.js‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
1-
import {configure} from '@storybook/react'
2-
import {setOptions} from '@storybook/addon-options'
3-
import {setDefaults} from '@storybook/addon-info'
1+
import {addDecorator, configure} from '@storybook/react'
2+
import {withInfo} from '@storybook/addon-info'
3+
import {withOptions} from '@storybook/addon-options'
44

5-
setOptions({
6-
name: 'react-trello',
7-
url: 'https://github.com/rcdexta/react-trello',
8-
goFullScreen: false,
9-
showLeftPanel: true,
10-
showDownPanel: false,
11-
showSearchBox: false,
12-
downPanelInRight: false
13-
})
5+
addDecorator(
6+
withOptions({
7+
name: 'react-trello',
8+
url: 'https://github.com/rcdexta/react-trello',
9+
goFullScreen: false,
10+
showStoriesPanel: true,
11+
showSearchBox: false,
12+
addonPanelInRight: false
13+
})
14+
)
1415

15-
setDefaults({
16-
header: true,
17-
inline: false,
18-
source: true,
19-
propTables: false
20-
})
16+
addDecorator(
17+
withInfo({
18+
header: true,
19+
inline: false,
20+
source: true,
21+
propTables: false
22+
})
23+
)
2124

2225
function loadStories() {
2326
require('../stories')

‎jest.config.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// For a detailed explanation regarding each configuration property, visit:
2+
// https://jestjs.io/docs/en/configuration.html
3+
4+
module.exports = {
5+
transform: {
6+
'^.+\\.jsx?$': 'babel-jest'
7+
},
8+
'moduleNameMapper': {
9+
'\\.(jpg|png|gif|svg)$': '<rootDir>/tests/__mocks__/fileMock.js',
10+
"\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
11+
},
12+
'coveragePathIgnorePatterns': [
13+
'/stories/',
14+
'/.storybook/',
15+
'<rootDir>/node_modules/',
16+
'story(.*).tsx'
17+
],
18+
collectCoverage: true
19+
}

‎package.json‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
"redux": "^4.0.0",
4747
"redux-actions": "^2.6.1",
4848
"redux-logger": "^3.0.6",
49-
"smooth-dnd": "0.6.2",
49+
"smooth-dnd": "https://github.com/rcdexta/smooth-dnd",
5050
"styled-components": "4.0.3",
5151
"uuid": "^3.3.2"
5252
},
@@ -59,10 +59,11 @@
5959
"@babel/plugin-transform-runtime": "7.1.0",
6060
"@babel/preset-env": "7.1.0",
6161
"@babel/preset-react": " 7.0.0",
62-
"@storybook/addon-info": "^v4.0.0-alpha.20",
63-
"@storybook/addon-options": "^v4.0.0-alpha.20",
64-
"@storybook/cli": "^v4.0.0-alpha.20",
65-
"@storybook/react": "4.0.0-alpha.20",
62+
"@storybook/addon-info": "4.1.3",
63+
"@storybook/addon-options": "4.1.3",
64+
"@storybook/addon-storyshots": "4.1.3",
65+
"@storybook/cli": "4.1.3",
66+
"@storybook/react": "4.1.3",
6667
"@storybook/storybook-deployer": "^2.3.0",
6768
"autoprefixer": "^9.1.5",
6869
"babel-core": "^7.0.0-0",
@@ -88,8 +89,10 @@
8889
"eventsource-polyfill": "^0.9.6",
8990
"extract-text-webpack-plugin": "^3.0.2",
9091
"husky": "^1.1.2",
92+
"identity-obj-proxy": "^3.0.0",
9193
"jest": "^21.0.1",
9294
"jest-cli": "^21.0.1",
95+
"jest-css-modules": "^1.1.0",
9396
"jsdom": "^12.2.0",
9497
"mocha": "^5.2.0",
9598
"node-sass": "^4.5.3",
@@ -98,7 +101,7 @@
98101
"react": "^16.2.0",
99102
"react-addons-test-utils": "^15.6.2",
100103
"react-dom": "^16.2.0",
101-
"react-test-renderer": "^15.4.2",
104+
"react-test-renderer": "16.6.3",
102105
"sass-loader": "^6.0.6",
103106
"semantic-release": "^6.3.6",
104107
"style-loader": "^0.18.2",

‎src/components/BoardContainer.js‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ class BoardContainer extends Component {
153153
orientation="horizontal"
154154
onDragStart={this.onDragStart}
155155
dragClass={laneDragClass}
156+
dropClass=""
156157
onDrop={this.onLaneDrop}
157158
lockAxis="x"
158159
getChildPayload={index => this.getLaneDetails(index)}
@@ -174,17 +175,6 @@ class BoardContainer extends Component {
174175
return draggable && laneDraggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> : <span key={lane.id}>{laneToRender}</span>
175176
})}
176177
</Container>
177-
{canAddLanes && (
178-
<Container orientation="horizontal">
179-
{editable && !addLaneMode ? (
180-
<LaneSection style={{width: 200}}>
181-
<NewLaneButton onClick={this.showEditableLane}>{addLaneTitle}</NewLaneButton>
182-
</LaneSection>
183-
) : (
184-
addLaneMode && this.renderNewLane()
185-
)}
186-
</Container>
187-
)}
188178
</BoardDiv>
189179
)
190180
}

‎src/dnd/Container.js‎

Lines changed: 56 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class Container extends Component {
1717
componentDidMount() {
1818
this.containerDiv = this.containerDiv || ReactDOM.findDOMNode(this);
1919
this.prevContainer = this.containerDiv;
20-
this.container = container(this.containerDiv, this.getContainerOptions(this.props));
20+
this.container = container(this.containerDiv, this.getContainerOptions());
2121
}
2222

2323
componentWillUnmount() {
@@ -30,7 +30,7 @@ class Container extends Component {
3030
if (this.containerDiv) {
3131
if (this.prevContainer && this.prevContainer !== this.containerDiv) {
3232
this.container.dispose();
33-
this.container = container(this.containerDiv, this.getContainerOptions(this.props));
33+
this.container = container(this.containerDiv, this.getContainerOptions());
3434
this.prevContainer = this.containerDiv;
3535
}
3636
}
@@ -52,8 +52,54 @@ class Container extends Component {
5252
this.containerDiv = element;
5353
}
5454

55-
getContainerOptions(props) {
56-
return Object.assign({}, props);
55+
getContainerOptions() {
56+
const functionProps = {};
57+
58+
if (this.props.onDragStart) {
59+
functionProps.onDragStart = (...p) => this.props.onDragStart(...p);
60+
}
61+
62+
if (this.props.onDragEnd) {
63+
functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p);
64+
}
65+
66+
if (this.props.onDrop) {
67+
functionProps.onDrop = (...p) => this.props.onDrop(...p);
68+
}
69+
70+
if (this.props.getChildPayload) {
71+
functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p);
72+
}
73+
74+
if (this.props.shouldAnimateDrop) {
75+
functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p);
76+
}
77+
78+
if (this.props.shouldAcceptDrop) {
79+
functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p);
80+
}
81+
82+
if (this.props.onDragEnter) {
83+
functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p);
84+
}
85+
86+
if (this.props.onDragLeave) {
87+
functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p);
88+
}
89+
90+
if (this.props.render) {
91+
functionProps.render = (...p) => this.props.render(...p);
92+
}
93+
94+
if (this.props.onDropReady) {
95+
functionProps.onDropReady = (...p) => this.props.onDropReady(...p);
96+
}
97+
98+
if (this.props.getGhostParent) {
99+
functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p);
100+
}
101+
102+
return Object.assign({}, this.props, functionProps);
57103
}
58104
}
59105

@@ -63,6 +109,7 @@ Container.propTypes = {
63109
orientation: PropTypes.oneOf(["horizontal", "vertical"]),
64110
style: PropTypes.object,
65111
dragHandleSelector: PropTypes.string,
112+
className: PropTypes.string,
66113
nonDragAreaSelector: PropTypes.string,
67114
dragBeginDelay: PropTypes.number,
68115
animationDuration: PropTypes.number,
@@ -78,12 +125,15 @@ Container.propTypes = {
78125
shouldAcceptDrop: PropTypes.func,
79126
onDragEnter: PropTypes.func,
80127
onDragLeave: PropTypes.func,
81-
render: PropTypes.func
128+
render: PropTypes.func,
129+
getGhostParent: PropTypes.func,
130+
removeOnDropOut: PropTypes.bool
82131
};
83132

84133
Container.defaultProps = {
85134
behaviour: 'move',
86-
orientation: 'vertical'
135+
orientation: 'vertical',
136+
className: 'reactTrelloBoard'
87137
};
88138

89139
export default Container;

‎src/dnd/Draggable.js‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
1-
import React, { Component } from 'react';
2-
import PropTypes from 'prop-types';
3-
import { constants } from 'smooth-dnd';
4-
const {
5-
wrapperClass
6-
} = constants;
1+
import React, {Component} from 'react'
2+
import PropTypes from 'prop-types'
3+
import {constants} from 'smooth-dnd'
4+
const {wrapperClass} = constants
75

86
class Draggable extends Component {
9-
render() {
10-
if (this.props.render) {
11-
return React.cloneElement(this.props.render(), { className: wrapperClass });
12-
}
13-
14-
const clsName = `${this.props.className ? (this.props.className + ' ') : ''}`
15-
return (
16-
<div {...this.props} className={`${clsName}${wrapperClass}`} >
17-
{this.props.children}
18-
</div>
19-
);
20-
}
7+
render() {
8+
if (this.props.render) {
9+
return React.cloneElement(this.props.render(), {className: wrapperClass})
10+
}
11+
12+
const clsName = `${this.props.className ? this.props.className + ' ' : ''}`
13+
return (
14+
<div {...this.props} className={`${clsName}${wrapperClass}`}>
15+
{this.props.children}
16+
</div>
17+
)
18+
}
2119
}
2220

2321
Draggable.propTypes = {
24-
render: PropTypes.func
25-
};
22+
render: PropTypes.func
23+
}
2624

27-
export default Draggable;
25+
export default Draggable

‎src/styles/Base.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ export const GlobalStyle = createGlobalStyle`
1919
.react_trello_dragLaneClass {
2020
transform: rotate(3deg);
2121
}
22+
2223
`
2324

2425
export const BoardDiv = styled.div`
25-
background-color: #3179BA;
26+
background-color: #3179ba;
2627
overflow-y: hidden;
2728
padding: 5px;
2829
color: #393939;
@@ -52,8 +53,8 @@ export const Section = styled.section`
5253
`
5354

5455
export const LaneHeader = styled(Header)`
55-
padding: 0px 5px;
56-
margin-bottom: 0px;
56+
padding: 0px 5px;
57+
margin-bottom: 0px;
5758
`
5859

5960
export const LaneFooter = styled.div`
@@ -66,16 +67,16 @@ export const LaneFooter = styled.div`
6667
`
6768

6869
export const ScrollableLane = styled.div`
69-
flex: 1;
70-
overflow-y: auto;
71-
min-width: 250px;
72-
overflow-x: hidden;
73-
align-self: center;
74-
max-height: 90vh;
75-
padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
76-
margin-top: 10px;
77-
flex-direction: column;
78-
justify-content: space-between;
70+
flex: 1;
71+
overflow-y: auto;
72+
min-width: 250px;
73+
overflow-x: hidden;
74+
align-self: center;
75+
max-height: 90vh;
76+
padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
77+
margin-top: 10px;
78+
flex-direction: column;
79+
justify-content: space-between;
7980
`
8081

8182
export const Title = styled.span`
@@ -107,7 +108,7 @@ export const CardWrapper = styled.article`
107108
export const MovableCardWrapper = styled(CardWrapper)`
108109
&:hover {
109110
background-color: #f0f0f0;
110-
color: #000
111+
color: #000;
111112
}
112113
`
113114

@@ -167,14 +168,14 @@ export const AddCardLink = styled.a`
167168

168169
export const LaneTitle = styled.div`
169170
font-size: 15px;
170-
width:268px;
171+
width: 268px;
171172
height: auto;
172173
`
173174

174175
export const LaneSection = styled.section`
175-
background-color: #2B6AA3;
176+
background-color: #2b6aa3;
176177
border-radius: 3px;
177-
margin: 5px ;
178+
margin: 5px;
178179
position: relative;
179180
padding: 5px;
180181
display: inline-flex;
@@ -183,7 +184,7 @@ export const LaneSection = styled.section`
183184
`
184185

185186
export const NewLaneSection = styled(LaneSection)`
186-
background-color: #E0E3E6;
187+
background-color: #e0e3e6;
187188
`
188189

189190
export const NewLaneButtons = styled.div`

‎stories/AsyncLoad.story.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,20 @@ const data = require('./data/base.json')
99
class AsyncBoard extends Component {
1010
state = {boardData: {lanes: []}}
1111

12-
async componentDidMount () {
12+
async componentDidMount() {
1313
const response = await this.getBoard()
1414
this.setState({boardData: response})
1515
}
1616

17-
getBoard () {
17+
getBoard() {
1818
return new Promise(resolve => {
1919
resolve(data)
2020
})
2121
}
2222

23-
render () {
23+
render() {
2424
return <Board data={this.state.boardData} />
2525
}
2626
}
2727

28-
storiesOf('Advanced Features', module).add(
29-
'Async Load data',
30-
withInfo('Load board data asynchronously after the component has mounted')(() => <AsyncBoard />)
31-
)
28+
storiesOf('Advanced Features', module).add('Async Load data', () => <AsyncBoard />, {info: 'Load board data asynchronously after the component has mounted'})

0 commit comments

Comments
 (0)