Skip to content

Commit df731d2

Browse files
icd2k3icd2k3
committed
Add tests, lint, and better docs
1 parent 075e3e6 commit df731d2

12 files changed

+3333
-87
lines changed

‎.babelrc

+11-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@
66
"modules": false
77
}
88
],
9+
"react",
910
"stage-2"
10-
]
11+
],
12+
"env": {
13+
"test": {
14+
"presets": [
15+
"env",
16+
"react",
17+
"stage-2"
18+
],
19+
}
20+
}
1121
}

‎.eslintrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "airbnb",
3+
"parser": "babel-eslint",
4+
"rules": {
5+
"react/jsx-filename-extension": "off",
6+
"function-paren-newline": "off"
7+
},
8+
"globals": {
9+
"test": true,
10+
"expect": true
11+
}
12+
}

‎.travis.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
language: node_js
2+
node_js:
3+
- "8.11.1"
4+
before_install:
5+
- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.6.0
6+
- export PATH="$HOME/.yarn/bin:$PATH"
7+
script:
8+
- yarn run travis

‎README.md

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<h3 align="center">
2-
React Scroll Into View If Needed
3-
</h3>
1+
[![Build Status](https://travis-ci.org/icd2k3/react-scroll-into-view-if-needed.svg?branch=master)](https://travis-ci.org/icd2k3/react-scroll-into-view-if-needed)
2+
[![Coverage Status](https://coveralls.io/repos/github/icd2k3/react-scroll-into-view-if-needed/badge.svg)](https://coveralls.io/github/icd2k3/react-scroll-into-view-if-needed)
3+
[![dependencies Status](https://david-dm.org/icd2k3/react-scroll-into-view-if-needed/status.svg)](https://david-dm.org/icd2k3/react-scroll-into-view-if-needed)
44

55
## Description
66

7-
Just a thin component wrapper around the fantastic [scroll-into-view-if-needed](https://www.npmjs.com/package/scroll-into-view-if-needed) polyfill.
7+
A thin react component wrapper bundled with the fantastic [scroll-into-view-if-needed](https://www.npmjs.com/package/scroll-into-view-if-needed) polyfill.
88

99
## Install
1010

@@ -14,7 +14,7 @@ or
1414

1515
`npm install react-scroll-into-view-if-needed --save`
1616

17-
## Example
17+
## Usage
1818

1919
```js
2020
import ScrollIntoViewIfNeeded from 'react-scroll-into-view-if-needed';
@@ -28,19 +28,22 @@ const MyComponent = () => (
2828
);
2929
```
3030

31-
## Props
31+
## Optional Props
3232

3333
#### active
34+
> Type: `boolean`
3435
> Default: `true`
3536
36-
The `active` prop allows controll of _when_ to scroll to the component. By default, it will attempt to scroll as soon as it is mounted, but you can set this prop to manually control when to trigger the scroll behavior.
37+
The `active` prop allows controll of _when_ to scroll to the component. By default, it will attempt to scroll as soon as it is mounted, but you can set this prop to manually control when to trigger the scroll behavior from the parent component.
3738

3839
#### elementType
40+
> Type: `string`
3941
> Default: `'div'`
4042
41-
Set the wrapper component type. See the React [createElement](https://reactjs.org/docs/react-api.html#createelement) api
43+
Set the wrapper component type. For example, this could also be `'footer'`, `'button'`, etc... See the React [createElement](https://reactjs.org/docs/react-api.html#createelement) api.
4244

4345
#### options
46+
> Type: `object`
4447
> Default: `{ duration: 250, easing: 'easeOut' }`
4548
46-
The `options` prop simply passes options to `scroll-into-view-if-needed`. See all the possible options in their [API documentation](https://www.npmjs.com/package/scroll-into-view-if-needed#api)
49+
The `options` prop simply passes options to `scroll-into-view-if-needed`. See all the possible options in their [API documentation](https://www.npmjs.com/package/scroll-into-view-if-needed#api).

‎__mocks__/scroll-into-view-if-needed.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// const scrollIntoViewIfNeeded = jest.genMockFromModule('scroll-into-view-if-needed');
2+
3+
module.exports = jest.fn();

‎jest.config.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
collectCoverage: true,
3+
coverageDirectory: './coverage',
4+
coveragePathIgnorePatterns: [
5+
'/node_modules/',
6+
'/coverage/',
7+
'jest.setup.js'
8+
],
9+
coverageThreshold: {
10+
global: {
11+
branches: 100,
12+
functions: 100,
13+
lines: 100,
14+
statements: 100,
15+
},
16+
},
17+
setupFiles: ['./jest.setup.js'],
18+
};

‎jest.setup.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const Enzyme = require('enzyme');
2+
const Adapter = require('enzyme-adapter-react-16');
3+
4+
Enzyme.configure({ adapter: new Adapter() });

‎package.json

+19-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"author": "JUSTIN SCHRADER <[email protected]>",
99
"license": "MIT",
1010
"peerDependencies": {
11-
"react": "^16.3.0"
11+
"prop-types": "^15.6.1",
12+
"react": "^16.0.0"
1213
},
1314
"dependencies": {
1415
"scroll-into-view-if-needed": "^1.5.0"
@@ -17,18 +18,33 @@
1718
"babel-cli": "^6.26.0",
1819
"babel-core": "^6.26.0",
1920
"babel-eslint": "^8.2.3",
21+
"babel-jest": "^22.4.3",
2022
"babel-plugin-external-helpers": "^6.22.0",
2123
"babel-preset-env": "^1.6.1",
24+
"babel-preset-react": "^6.24.1",
2225
"babel-preset-stage-2": "^6.24.1",
26+
"coveralls": "^3.0.0",
27+
"enzyme": "^3.3.0",
28+
"enzyme-adapter-react-16": "^1.1.1",
29+
"eslint": "^4.19.1",
30+
"eslint-config-airbnb": "^16.1.0",
31+
"eslint-plugin-import": "^2.11.0",
32+
"eslint-plugin-jsx-a11y": "^6.0.3",
33+
"eslint-plugin-react": "^7.7.0",
34+
"jest": "^22.4.3",
2335
"prop-types": "^15.6.1",
2436
"react": "^16.3.2",
25-
"rollup": "^0.58.0",
37+
"react-dom": "^16.3.2",
38+
"rollup": "^0.58.1",
2639
"rollup-plugin-babel": "^3.0.3",
2740
"rollup-plugin-commonjs": "^9.1.0",
2841
"rollup-plugin-node-resolve": "^3.3.0"
2942
},
3043
"scripts": {
44+
"build": "rollup -c",
45+
"lint": "eslint ./src/**",
3146
"prepublishOnly": "yarn build",
32-
"build": "rollup -c"
47+
"test": "jest",
48+
"travis": "yarn run lint && jest && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
3349
}
3450
}

‎src/__tests__/__snapshots__/index.test.js.snap

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Render in inactive state, then toggle active state 1`] = `
4+
ShallowWrapper {
5+
"length": 1,
6+
Symbol(enzyme.__root__): [Circular],
7+
Symbol(enzyme.__unrendered__): <ScrollIntoViewIfNeeded
8+
active={false}
9+
elementType="div"
10+
options={
11+
Object {
12+
"duration": 250,
13+
"easing": "easeOut",
14+
}
15+
}
16+
>
17+
<MockChild />
18+
</ScrollIntoViewIfNeeded>,
19+
Symbol(enzyme.__renderer__): Object {
20+
"batchedUpdates": [Function],
21+
"getNode": [Function],
22+
"render": [Function],
23+
"simulateEvent": [Function],
24+
"unmount": [Function],
25+
},
26+
Symbol(enzyme.__node__): Object {
27+
"instance": null,
28+
"key": undefined,
29+
"nodeType": "host",
30+
"props": Object {
31+
"children": <MockChild />,
32+
},
33+
"ref": Object {
34+
"current": null,
35+
},
36+
"rendered": Object {
37+
"instance": null,
38+
"key": undefined,
39+
"nodeType": "function",
40+
"props": Object {},
41+
"ref": null,
42+
"rendered": null,
43+
"type": [Function],
44+
},
45+
"type": "div",
46+
},
47+
Symbol(enzyme.__nodes__): Array [
48+
Object {
49+
"instance": null,
50+
"key": undefined,
51+
"nodeType": "host",
52+
"props": Object {
53+
"children": <MockChild />,
54+
},
55+
"ref": Object {
56+
"current": null,
57+
},
58+
"rendered": Object {
59+
"instance": null,
60+
"key": undefined,
61+
"nodeType": "function",
62+
"props": Object {},
63+
"ref": null,
64+
"rendered": null,
65+
"type": [Function],
66+
},
67+
"type": "div",
68+
},
69+
],
70+
Symbol(enzyme.__options__): Object {
71+
"adapter": ReactSixteenAdapter {
72+
"options": Object {
73+
"enableComponentDidUpdateOnSetState": true,
74+
},
75+
},
76+
},
77+
}
78+
`;
79+
80+
exports[`Render with no props 1`] = `
81+
ShallowWrapper {
82+
"length": 1,
83+
Symbol(enzyme.__root__): [Circular],
84+
Symbol(enzyme.__unrendered__): <ScrollIntoViewIfNeeded
85+
active={true}
86+
elementType="div"
87+
options={
88+
Object {
89+
"duration": 250,
90+
"easing": "easeOut",
91+
}
92+
}
93+
>
94+
<MockChild />
95+
</ScrollIntoViewIfNeeded>,
96+
Symbol(enzyme.__renderer__): Object {
97+
"batchedUpdates": [Function],
98+
"getNode": [Function],
99+
"render": [Function],
100+
"simulateEvent": [Function],
101+
"unmount": [Function],
102+
},
103+
Symbol(enzyme.__node__): Object {
104+
"instance": null,
105+
"key": undefined,
106+
"nodeType": "host",
107+
"props": Object {
108+
"children": <MockChild />,
109+
},
110+
"ref": Object {
111+
"current": null,
112+
},
113+
"rendered": Object {
114+
"instance": null,
115+
"key": undefined,
116+
"nodeType": "function",
117+
"props": Object {},
118+
"ref": null,
119+
"rendered": null,
120+
"type": [Function],
121+
},
122+
"type": "div",
123+
},
124+
Symbol(enzyme.__nodes__): Array [
125+
Object {
126+
"instance": null,
127+
"key": undefined,
128+
"nodeType": "host",
129+
"props": Object {
130+
"children": <MockChild />,
131+
},
132+
"ref": Object {
133+
"current": null,
134+
},
135+
"rendered": Object {
136+
"instance": null,
137+
"key": undefined,
138+
"nodeType": "function",
139+
"props": Object {},
140+
"ref": null,
141+
"rendered": null,
142+
"type": [Function],
143+
},
144+
"type": "div",
145+
},
146+
],
147+
Symbol(enzyme.__options__): Object {
148+
"adapter": ReactSixteenAdapter {
149+
"options": Object {
150+
"enableComponentDidUpdateOnSetState": true,
151+
},
152+
},
153+
},
154+
}
155+
`;

0 commit comments

Comments
 (0)