forked from Github/ocrcc-chatbox
Eslint (#126)
* adding eslint to webpack and fixing errors * updating screenshot and tests to reflect dom changes
This commit is contained in:
Gavin Foster
Benjamin Boudreau
parent
f31f384afd
commit
d00d6af82a
70
package-lock.json
generated
70
package-lock.json
generated
@ -5084,6 +5084,19 @@
|
||||
"semver": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"eslint-loader": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-2.1.2.tgz",
|
||||
"integrity": "sha512-rA9XiXEOilLYPOIInvVH5S/hYfyTPyxag6DZhoQOduM+3TkghAEQ3VcFO8VnX4J4qg/UIBzp72aOf/xvYmpmsg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-fs-cache": "^1.0.0",
|
||||
"loader-utils": "^1.0.2",
|
||||
"object-assign": "^4.0.1",
|
||||
"object-hash": "^1.1.4",
|
||||
"rimraf": "^2.6.1"
|
||||
}
|
||||
},
|
||||
"eslint-module-utils": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.4.0.tgz",
|
||||
@ -9550,6 +9563,57 @@
|
||||
"strip-bom": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"loader-fs-cache": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.2.tgz",
|
||||
"integrity": "sha512-70IzT/0/L+M20jUlEqZhZyArTU6VKLRTYRDAYN26g4jfzpJqjipLL3/hgYpySqI9PwsVRHHFja0LfEmsx9X2Cw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"find-cache-dir": "^0.1.1",
|
||||
"mkdirp": "0.5.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"find-cache-dir": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-0.1.1.tgz",
|
||||
"integrity": "sha1-yN765XyKUqinhPnjHFfHQumToLk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"commondir": "^1.0.1",
|
||||
"mkdirp": "^0.5.1",
|
||||
"pkg-dir": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"find-up": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
|
||||
"integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"path-exists": "^2.0.0",
|
||||
"pinkie-promise": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"path-exists": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
|
||||
"integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"pinkie-promise": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"pkg-dir": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz",
|
||||
"integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"find-up": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"loader-runner": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
|
||||
@ -10506,6 +10570,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"object-hash": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-1.3.1.tgz",
|
||||
"integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==",
|
||||
"dev": true
|
||||
},
|
||||
"object-inspect": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz",
|
||||
|
||||
@ -87,6 +87,7 @@
|
||||
"eslint": "5.16.0",
|
||||
"eslint-config-airbnb": "17.1.0",
|
||||
"eslint-import-resolver-webpack": "0.11.1",
|
||||
"eslint-loader": "^2.1.2",
|
||||
"eslint-plugin-import": "2.17.3",
|
||||
"eslint-plugin-jsx-a11y": "6.2.1",
|
||||
"eslint-plugin-react": "7.13.0",
|
||||
|
||||
@ -31,12 +31,14 @@ exports[`<Widget /> open/close 1`] = `
|
||||
>
|
||||
Header
|
||||
</div>
|
||||
<a
|
||||
<button
|
||||
className="widget-header-icon"
|
||||
onClick={[Function]}
|
||||
onKeyPress={[Function]}
|
||||
type="button"
|
||||
>
|
||||
X
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="widget-body"
|
||||
@ -50,12 +52,14 @@ exports[`<Widget /> open/close 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
<a
|
||||
<button
|
||||
className="dock"
|
||||
onClick={[Function]}
|
||||
onKeyPress={[Function]}
|
||||
type="button"
|
||||
>
|
||||
^ OPEN ^
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</Widget>
|
||||
`;
|
||||
@ -91,12 +95,14 @@ exports[`<Widget /> open/close 2`] = `
|
||||
>
|
||||
Header
|
||||
</div>
|
||||
<a
|
||||
<button
|
||||
className="widget-header-icon"
|
||||
onClick={[Function]}
|
||||
onKeyPress={[Function]}
|
||||
type="button"
|
||||
>
|
||||
X
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="widget-body"
|
||||
@ -145,12 +151,14 @@ exports[`<Widget /> open/close 3`] = `
|
||||
>
|
||||
Header
|
||||
</div>
|
||||
<a
|
||||
<button
|
||||
className="widget-header-icon"
|
||||
onClick={[Function]}
|
||||
onKeyPress={[Function]}
|
||||
type="button"
|
||||
>
|
||||
X
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="widget-body"
|
||||
@ -164,12 +172,14 @@ exports[`<Widget /> open/close 3`] = `
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
<a
|
||||
<button
|
||||
className="dock"
|
||||
onClick={[Function]}
|
||||
onKeyPress={[Function]}
|
||||
type="button"
|
||||
>
|
||||
^ OPEN ^
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</Widget>
|
||||
`;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Transition } from 'react-transition-group';
|
||||
import './widget.scss';
|
||||
|
||||
@ -29,31 +28,43 @@ class Widget extends Component {
|
||||
}
|
||||
|
||||
renderBody = () => {
|
||||
if (this.state.showDock) {
|
||||
return (
|
||||
<a className="dock" onClick={this.handleToggleOpen}>
|
||||
^ OPEN ^
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return '';
|
||||
const { showDock } = this.state;
|
||||
|
||||
if (!showDock) return '';
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="dock"
|
||||
onClick={this.handleToggleOpen}
|
||||
onKeyPress={this.handleToggleOpen}
|
||||
>
|
||||
^ OPEN ^
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { opened } = this.state;
|
||||
const body = this.renderBody();
|
||||
|
||||
return (
|
||||
<div className="docked-widget">
|
||||
<Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
|
||||
<Transition in={opened} timeout={250} onExited={this.handleWidgetExit}>
|
||||
{status => (
|
||||
<div className={`widget widget-${status}`}>
|
||||
<div className="widget-header">
|
||||
<div className="widget-header-title">
|
||||
Header
|
||||
</div>
|
||||
<a className="widget-header-icon" onClick={this.handleToggleOpen}>
|
||||
<button
|
||||
type="button"
|
||||
className="widget-header-icon"
|
||||
onClick={this.handleToggleOpen}
|
||||
onKeyPress={this.handleToggleOpen}
|
||||
>
|
||||
X
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div className="widget-body">
|
||||
Body
|
||||
@ -70,6 +81,4 @@ class Widget extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
Widget.propTypes = {};
|
||||
|
||||
export default Widget;
|
||||
|
||||
@ -9,7 +9,7 @@ describe('<Widget />', () => {
|
||||
expect(widgetDom).toMatchSnapshot();
|
||||
|
||||
{
|
||||
const dockAnchorEl = widgetDom.find('a.dock');
|
||||
const dockAnchorEl = widgetDom.find('button.dock');
|
||||
expect(dockAnchorEl).toHaveLength(1);
|
||||
// open widget
|
||||
dockAnchorEl.simulate('click');
|
||||
@ -20,14 +20,14 @@ describe('<Widget />', () => {
|
||||
// dock does not exist anymore
|
||||
expect(widgetDom.find('a.dock')).toHaveLength(0);
|
||||
|
||||
const closeAnchorEl = await waitForSelection(widgetDom, 'a.widget-header-icon');
|
||||
const closeAnchorEl = await waitForSelection(widgetDom, 'button.widget-header-icon');
|
||||
|
||||
expect(closeAnchorEl).toHaveLength(1);
|
||||
// close widget
|
||||
closeAnchorEl.simulate('click');
|
||||
|
||||
{
|
||||
const dockAnchorEl = await waitForSelection(widgetDom, 'a.dock');
|
||||
const dockAnchorEl = await waitForSelection(widgetDom, 'button.dock');
|
||||
expect(dockAnchorEl).toHaveLength(1);
|
||||
}
|
||||
|
||||
|
||||
@ -36,6 +36,11 @@ const defaultConfig = {
|
||||
exclude: /node_modules/,
|
||||
use: ['babel-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: ['eslint-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
use: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user