NPO-Accounting/houdini
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add additional react eslint checks. Illustrate its use on a single file.

Browse source
This commit is contained in:
Eric 2020-06-29 16:01:52 -05:00 committed by Eric Schultz
parent 6b29991870
commit 415e3b80cc
6 changed files with 64 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintignore
View file

@ -401,8 +401,6 @@ app/javascript/legacy_react/src/components/common/Modal.tsx
app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx
app/javascript/legacy_react/src/components/common/ProgressableButton.tsx
app/javascript/legacy_react/src/components/common/Root.tsx
app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx
app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.tsx
app/javascript/legacy_react/src/components/common/selectable_table_row/connect.tsx
app/javascript/legacy_react/src/components/common/selectable_table_row/SelectableTableRow.spec.tsx
app/javascript/legacy_react/src/components/common/selectable_table_row/SelectableTableRow.tsx

49
.eslintrc.js
View file

@ -13,14 +13,38 @@ const tsSpecBase = {
'plugin:@typescript-eslint/recommended',
'plugin:jest/all'
],
rules:{
"jest/lowercase-name": ["error", { "ignore": ["describe"]}]
rules: {
"jest/lowercase-name": ["error", { "ignore": ["describe"] }]
}
};
const tsSpec = _.cloneDeep(tsSpecBase);
tsSpec['files'] = ['**/*.spec.ts'];
const tsxSpec = _.cloneDeep(tsSpecBase);
tsxSpec['files'] = ['**/*.spec.tsx'];
tsxSpec['plugins'] = [...tsxSpec['plugins'], "react"];
tsxSpec['extends'] = [...tsxSpec['extends'], "plugin:react/recommended"];
const tsBase = {
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
"plugin:react-hooks/recommended",
]
};
const tsSettings = _.cloneDeep(tsBase);
tsSettings['files'] = ['**/*.ts'];
const tsxSettings = _.cloneDeep(tsBase);
tsxSettings['files'] = ['**/*.tsx'];
module.exports = {
root: true,
@ -33,18 +57,10 @@ module.exports = {
'plugin:node/recommended'
],
},
{
"files": ['**/*.ts'],
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
]
},
tsSpec
tsSpec,
tsxSpec,
tsSettings,
tsxSettings
],
"rules": {
"linebreak-style": [
@ -57,5 +73,10 @@ module.exports = {
],
"no-trailing-spaces": ["error"],
"indent": ["error", "tab"], // we use tabs for accessibility
},
"settings": {
"react": {
"version": "detect"
},
}
};

15
app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx
View file

@ -1,13 +1,14 @@
// License: LGPL-3.0-or-later
import * as React from 'react';
import 'jest';
import ScreenReaderOnlyText from './ScreenReaderOnlyText'
import ScreenReaderOnlyText from './ScreenReaderOnlyText';
import toJson from 'enzyme-to-json';
import { shallow } from 'enzyme';
describe('ScreenReaderOnlyText', () => {
it('renders properly', () => {
let text = shallow(<ScreenReaderOnlyText>Test</ScreenReaderOnlyText>)
expect(toJson(text)).toMatchSnapshot()
})
})
it('renders properly', () => {
expect.hasAssertions();
const text = shallow(<ScreenReaderOnlyText>Test</ScreenReaderOnlyText>);
// eslint-disable-next-line jest/prefer-inline-snapshots
expect(toJson(text)).toMatchSnapshot();
});
});

32
app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.tsx
View file

@ -1,26 +1,22 @@
// License: LGPL-3.0-or-later
import * as React from 'react';
export interface ScreenReaderOnlyTextProps
{
}
class ScreenReaderOnlyText extends React.Component<ScreenReaderOnlyTextProps, {}> {
class ScreenReaderOnlyText extends React.Component<Record<string,unknown>, Record<string,unknown>> {
render() {
const style:React.CSSProperties = {
position: 'absolute',
width: '1px',
height: '1px',
padding: 0,
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0,0,0,0)',
border: 0
}
return <span style={style}>{this.props.children}</span>
}
render() : JSX.Element {
const style:React.CSSProperties = {
position: 'absolute',
width: '1px',
height: '1px',
padding: 0,
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0,0,0,0)',
border: 0
};
return <span style={style}>{this.props.children}</span>;
}
}
export default ScreenReaderOnlyText;

3
package.json
View file

@ -10,7 +10,7 @@
"ci-build-all": "script/compile-assets.sh && yarn build",
"test": "rake -v spec && yarn build && yarn jest",
"jest": "jest",
"eslint": "eslint . --ext .ts,.js,.es6",
"eslint": "eslint . --ext .ts,.js,.es6,.tsx",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
@ -62,6 +62,7 @@
"eslint-plugin-jest": "^23.17.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-react": "^7.20.2",
"eslint-plugin-react-hooks": "^4.0.4",
"fork-ts-checker-webpack-plugin": "^5.0.4",
"jest": "^24.1.0",
"jest-enzyme": "^7.0.1",

5
yarn.lock
View file

@ -6489,6 +6489,11 @@ eslint-plugin-node@^11.1.0:
resolve "^1.10.1"
semver "^6.1.0"
eslint-plugin-react-hooks@^4.0.4:
version "4.0.4"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz#aed33b4254a41b045818cacb047b81e6df27fa58"
integrity sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA==
eslint-plugin-react@^7.20.2:
version "7.20.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.2.tgz#b0d72abcd94c59c842338aa09c800808219ea77d"