From 415e3b80cc18a6909dc7f897bf74d3febf9e3cf3 Mon Sep 17 00:00:00 2001 From: Eric Date: Mon, 29 Jun 2020 16:01:52 -0500 Subject: [PATCH] Add additional react eslint checks. Illustrate its use on a single file. --- .eslintignore | 2 - .eslintrc.js | 49 +++++++++++++------ .../common/ScreenReaderOnlyText.spec.tsx | 15 +++--- .../common/ScreenReaderOnlyText.tsx | 32 ++++++------ package.json | 3 +- yarn.lock | 5 ++ 6 files changed, 64 insertions(+), 42 deletions(-) diff --git a/.eslintignore b/.eslintignore index 948a3021..ec1d562b 100644 --- a/.eslintignore +++ b/.eslintignore @@ -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 diff --git a/.eslintrc.js b/.eslintrc.js index 5fdc4ad9..00a340de 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -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" + }, } }; diff --git a/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx b/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx index b79664a0..c3c3f886 100644 --- a/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx +++ b/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx @@ -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(Test) - expect(toJson(text)).toMatchSnapshot() - }) -}) \ No newline at end of file + it('renders properly', () => { + expect.hasAssertions(); + const text = shallow(Test); + // eslint-disable-next-line jest/prefer-inline-snapshots + expect(toJson(text)).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.tsx b/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.tsx index 132a71f5..d91ae529 100644 --- a/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.tsx +++ b/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.tsx @@ -1,26 +1,22 @@ // License: LGPL-3.0-or-later import * as React from 'react'; -export interface ScreenReaderOnlyTextProps -{ -} -class ScreenReaderOnlyText extends React.Component { +class ScreenReaderOnlyText extends React.Component, Record> { - - 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 {this.props.children} - } + 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 {this.props.children}; + } } export default ScreenReaderOnlyText; diff --git a/package.json b/package.json index 56df5ea5..2fec4950 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 8dc76447..20385328 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"