added a11y axe tests, refactoring tests (nzambello#35)

Author: nzambello

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["react-app", "prettier", "prettier/react"],
+  "extends": ["react-app", "plugin:jsx-a11y/recommended", "prettier", "prettier/react"],
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": [

README.md

@@ -4,6 +4,7 @@
 [![npm version](https://badge.fury.io/js/react-csv-reader.svg)](https://www.npmjs.com/package/react-csv-reader)
 [![npm](https://img.shields.io/npm/dt/react-csv-reader.svg)](https://www.npmjs.com/package/react-csv-reader)
 ![Node.js CI](https://github.com/nzambello/react-csv-reader/workflows/Node.js%20CI/badge.svg?branch=master)
+![a11y axe](https://img.shields.io/badge/a11y-tested-brightgreen)
 
 React component that handles csv file input.  
 It handles file input and returns its content as a matrix.
@@ -126,4 +127,4 @@ To run the tests:
 yarn test
 ```
 
-Submitting a PR will trigger GitHub Actions to automatically run the tests.
+Automated accessibility tests are run with `jest-axe`.

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript', '@babel/preset-react'],
 }

package.json

@@ -16,6 +16,7 @@
     "@babel/preset-typescript": "^7.8.3",
     "@testing-library/react": "^10.0.1",
     "@types/jest": "^25.1.4",
+    "@types/jest-axe": "^3.2.1",
     "@types/papaparse": "^5.0.3",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
@@ -30,6 +31,7 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.19.0",
     "jest": "^25.1.0",
+    "jest-axe": "^3.4.0",
     "prettier": "^1.19.1",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",

src/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSVReader with all custom props is being rendered 1`] = `
+exports[`CSVReader is being rendered 1`] = `
 <div
   className="custom-csv-reader"
 >
@@ -24,19 +24,3 @@ exports[`CSVReader with all custom props is being rendered 1`] = `
   />
 </div>
 `;
-
-exports[`Renders basic CSVReader 1`] = `
-<div
-  className="csv-reader-input"
->
-  <input
-    accept=".csv, text/csv"
-    className="csv-input"
-    disabled={false}
-    id="react-csv-reader-input"
-    onChange={[Function]}
-    style={Object {}}
-    type="file"
-  />
-</div>
-`;

src/index.test.tsx

@@ -1,47 +1,50 @@
 import * as React from 'react'
 import * as renderer from 'react-test-renderer'
 import { cleanup, render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
 
 import CSVReader from './index'
 
+expect.extend(toHaveNoViolations)
 afterEach(cleanup)
 
-test('Renders basic CSVReader', () => {
-  const component = renderer.create(<CSVReader onFileLoaded={() => {}} />)
+const papaparseOptions = {
+  header: true,
+  dynamicTyping: true,
+  skipEmptyLines: true,
+  transformHeader: (header: string) => header.toLowerCase().replace(/\W/g, '_'),
+}
+
+const csvReader = (
+  <CSVReader
+    accept=".csv, text/csv, .tsv, test/tsv"
+    cssClass="custom-csv-reader"
+    cssInputClass="custom-csv-input"
+    fileEncoding="iso-8859-1"
+    inputId="react-csv-reader"
+    inputStyle={{ color: 'red' }}
+    label="CSV input label text"
+    onError={e => console.error(e)}
+    onFileLoaded={(data, fileInfo) => console.dir(data, fileInfo)}
+    parserOptions={papaparseOptions}
+    disabled
+  />
+)
+
+test('CSVReader is being rendered', () => {
+  const component = renderer.create(csvReader)
   let tree = component.toJSON()
   expect(tree).toMatchSnapshot()
 })
 
-describe('CSVReader with all custom props', () => {
-  const papaparseOptions = {
-    header: true,
-    dynamicTyping: true,
-    skipEmptyLines: true,
-    transformHeader: (header: string) => header.toLowerCase().replace(/\W/g, '_'),
-  }
-
-  const csvReader = (
-    <CSVReader
-      accept=".csv, text/csv, .tsv, test/tsv"
-      cssClass="custom-csv-reader"
-      cssInputClass="custom-csv-input"
-      fileEncoding="iso-8859-1"
-      inputId="react-csv-reader"
-      inputStyle={{ color: 'red' }}
-      label="CSV input label text"
-      onError={e => console.error(e)}
-      onFileLoaded={(data, fileInfo) => console.dir(data, fileInfo)}
-      parserOptions={papaparseOptions}
-      disabled
-    />
-  )
-
-  test('is being rendered', () => {
-    const component = renderer.create(csvReader)
-    let tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
-  })
+test('CSVReader is accessible', async () => {
+  const { container } = render(csvReader)
+  const results = await axe(container)
+
+  expect(results).toHaveNoViolations()
+})
 
+describe('Testing CSVReader props:', () => {
   test('has accept prop set', () => {
     const accept = '.csv, text/csv, .tsv, test/tsv'
     const { getByLabelText } = render(csvReader)

yarn.lock

@@ -1124,7 +1124,15 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^25.1.4":
+"@types/jest-axe@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@types/jest-axe/-/jest-axe-3.2.1.tgz#84dc4306c105b304f14a594765beaa6a7aef763e"
+  integrity sha512-sn+MFd66gNnvhtBkbQBY6q2aznzLXUIN/jJqXd11D0P+PbUnDrthqyOj81O8BLhEYopmUXIp/ktVvdtj/1GZdw==
+  dependencies:
+    "@types/jest" "*"
+    axe-core "^3.0.3"
+
+"@types/jest@*", "@types/jest@^25.1.4":
   version "25.1.4"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-25.1.4.tgz#9e9f1e59dda86d3fd56afce71d1ea1b331f6f760"
   integrity sha512-QDDY2uNAhCV7TMCITrxz+MRk1EizcsevzfeS6LykIlq2V1E5oO4wXG8V2ZEd9w7Snxeeagk46YbMgZ8ESHx3sw==
@@ -1619,6 +1627,11 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
 
+axe-core@^3.0.3, axe-core@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.2.tgz#1946be7a18a05b5d37f18d339989db0d5434ebf6"
+  integrity sha512-9wBDgdzbn06on6Xt+ay7EM4HV+NBOkeXhjK9DMezD8/qvJKeUTzheGHhM+U1uNaX4OvuIR4BePDStRLF7vyOfg==
+
 axobject-query@^2.0.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.2.tgz#2bdffc0371e643e5f03ba99065d5179b9ca79799"
@@ -3784,6 +3797,16 @@ istanbul-reports@^3.0.0:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+jest-axe@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/jest-axe/-/jest-axe-3.4.0.tgz#2bea80d37087e7723481ecc1b054f87ec563cabd"
+  integrity sha512-iKAq/cBxvyizSkpSY+CTndsXy2v5IWAkYXqanPF6bGaGXJ3fEtzEWQRVeZ0SHCEbsjnvDaOly5nwiiDOz0suDw==
+  dependencies:
+    axe-core "^3.5.1"
+    chalk "^3.0.0"
+    jest-matcher-utils "^25.1.0"
+    lodash.merge "^4.6.2"
+
 jest-changed-files@^25.1.0:
   version "25.1.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-25.1.0.tgz#73dae9a7d9949fdfa5c278438ce8f2ff3ec78131"
@@ -4361,6 +4384,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"