Skip to content

Commit df731d2

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

File tree

12 files changed

+3333
-87
lines changed

12 files changed

+3333
-87
lines changed

‎.babelrc

Lines changed: 11 additions & 1 deletion
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

Lines changed: 12 additions & 0 deletions
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

Lines changed: 8 additions & 0 deletions
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

Lines changed: 12 additions & 9 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 18 additions & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"author": "JUSTIN SCHRADER <icd2k3@gmail.com>",
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

Lines changed: 155 additions & 0 deletions
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)