Front-end testing cleanup and improvements (#7059)

* add eslint testing library plugin

* fix lint error in article

* fix lint error by destructuring props

* import jest-dom before tests

* rearrange plugins

* rearrange plugins

* add setup file

.eslintrc.js

@@ -17,13 +17,15 @@ module.exports = {
         'import',
         'jsx-a11y',
         'react-hooks',
+        'testing-library',
     ],
     extends: [
         'eslint:recommended',
         'plugin:import/errors',
         'plugin:flowtype/recommended',
         'plugin:jsx-a11y/recommended',
         'plugin:jest-dom/recommended',
+        'plugin:testing-library/recommended',
         'prettier',
     ],
     rules: {

jest.config.js

@@ -121,7 +121,7 @@ module.exports = {
     // setupFiles: [],
 
     // The path to a module that runs some code to configure or set up the testing framework before each test
-    // setupTestFrameworkScriptFile: null,
+    setupFilesAfterEnv: ['./jest.setup.js'],
 
     // A list of paths to snapshot serializer modules Jest should use for snapshot testing
     // snapshotSerializers: []

jest.setup.js

@@ -0,0 +1,2 @@
+// Custom Jest matchers that allow for declarative testing
+import '@testing-library/jest-dom';

kuma/javascript/src/.eslintrc.js

@@ -13,13 +13,24 @@ module.exports = {
             jsx: true,
         },
     },
-    plugins: ['jest', 'flowtype', 'react', 'import', 'jsx-a11y'],
+    plugins: [
+        'jest',
+        'jest-dom',
+        'flowtype',
+        'react',
+        'react-hooks',
+        'import',
+        'jsx-a11y',
+        'testing-library',
+    ],
     extends: [
         'eslint:recommended',
         'plugin:import/errors',
         'plugin:flowtype/recommended',
         'plugin:react/recommended',
         'plugin:jsx-a11y/recommended',
+        'plugin:testing-library/recommended',
+        'plugin:testing-library/react',
         'prettier',
         'prettier/react',
     ],

kuma/javascript/src/article.jsx

@@ -55,7 +55,9 @@ export default function Article({ document }: DocumentProps) {
     // This is a one-time effect we need to call the first time an article
     // is rendered, to ensure that interactive examples resize themselves
     // if the browser width changes.
-    useEffect(InteractiveExamples.makeResponsive, []);
+    useEffect(() => {
+        InteractiveExamples.makeResponsive();
+    }, []);
 
     // Each time we display an article we need to patch it up
     // in various ways.

kuma/javascript/src/breadcrumbs.test.jsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
-import {
-    toBeInTheDocument,
-    toHaveClass,
-} from '@testing-library/jest-dom/matchers';
 import GAProvider from './ga-provider.jsx';
 import Breadcrumbs from './breadcrumbs.jsx';
 
-expect.extend({ toBeInTheDocument, toHaveClass });
-
 describe('Breadcrumbs', () => {
     const mockDocumentData = {
         // url needs a # to trick it into thinking it's a hash change:

kuma/javascript/src/header/search.jsx

@@ -9,16 +9,16 @@ type Props = {
     initialQuery: string,
 };
 
-export default function Search(props: Props) {
+export default function Search({ initialQuery }: Props) {
     const locale = getLocale();
 
     // After our first render, set the input field's initial value
     const inputfield = useRef(null);
     useEffect(() => {
-        if (inputfield.current && props.initialQuery) {
-            inputfield.current.value = props.initialQuery;
+        if (inputfield.current && initialQuery) {
+            inputfield.current.value = initialQuery;
         }
-    }, [props.initialQuery]);
+    }, [initialQuery]);
 
     return (
         <form

kuma/javascript/src/payments/components/cancel-subscription-form.test.jsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import { toBeVisible, toBeDisabled } from '@testing-library/jest-dom/matchers';
 import CancelSubscriptionForm from './cancel-subscription-form.jsx';
 import { SUBSCRIPTIONS_URL } from '../api.js';
 
-expect.extend({ toBeVisible, toBeDisabled });
-
 const setup = (props = {}) => {
     const mockProps = {
         setShowForm: () => {},

kuma/javascript/src/payments/components/errors.test.jsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { toBeInTheDocument } from '@testing-library/jest-dom/matchers';
 import { GenericError, ErrorWithRetry } from './errors.jsx';
 
-expect.extend({ toBeInTheDocument });
-
 describe('ErrorWithRetry', () => {
     it('renders text and a functioning button', () => {
         const mockProps = {

kuma/javascript/src/payments/components/feedback-form.test.jsx

@@ -1,12 +1,9 @@
 //@flow
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import { toHaveAttribute } from '@testing-library/jest-dom/matchers';
 import FeedbackForm from './feedback-form.jsx';
 import { SUBSCRIPTIONS_FEEDBACK_URL } from '../api.js';
 
-expect.extend({ toHaveAttribute });
-
 const setup = () => {
     const utils = render(<FeedbackForm />);
     const input = utils.getByTestId('feedback-input');

kuma/javascript/src/payments/components/subscription-form.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import { toBeInTheDocument } from '@testing-library/jest-dom/matchers';
 import SubscriptionForm, {
     STRIPE_CONTINUE_SESSIONSTORAGE_KEY,
 } from './subscription-form.jsx';
@@ -10,8 +9,6 @@ import useScriptLoading from './use-script-loading.js';
 
 jest.mock('./use-script-loading.js');
 
-expect.extend({ toBeInTheDocument });
-
 describe('When submitting Subscription Form', () => {
     beforeAll(() => {
         useScriptLoading.mockReturnValue([

kuma/javascript/src/payments/pages/management.test.jsx

@@ -1,16 +1,10 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import {
-    toBeVisible,
-    toBeInTheDocument,
-} from '@testing-library/jest-dom/matchers';
 import UserProvider from '../../user-provider.jsx';
 import { title as cancelTitle } from '../components/cancel-subscription-form.jsx';
 import { formatDate } from '../../formatters.js';
 import ManagementPage, { title, successMsg } from './management.jsx';
 
-expect.extend({ toBeVisible, toBeInTheDocument });
-
 const setup = (userData = {}) => {
     const mockUserData = {
         ...UserProvider.defaultUserData,

kuma/javascript/src/payments/pages/page.test.jsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { toBeInTheDocument } from '@testing-library/jest-dom/matchers';
 import Page from './page.jsx';
 
-expect.extend({ toBeInTheDocument });
-
 describe('Page', () => {
     it('renders a11y nav, header, and footer', () => {
         const { queryByTestId } = render(<Page>hello</Page>);

kuma/javascript/src/payments/pages/terms.test.jsx

@@ -1,13 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import {
-    toBeInTheDocument,
-    toHaveTextContent,
-} from '@testing-library/jest-dom/matchers';
 import TermsPage, { title } from './terms.jsx';
 
-expect.extend({ toBeInTheDocument, toHaveTextContent });
-
 describe('Payments Terms page', () => {
     it('renders', () => {
         const mockEmail = 'mock-support@mozilla.com';

kuma/javascript/src/payments/routes.test.jsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { toBeInTheDocument } from '@testing-library/jest-dom/matchers';
 import { PaymentPage, PAYMENT_PATHS } from './routes.jsx';
 
-expect.extend({ toBeInTheDocument });
-
 describe('PaymentPage', () => {
     const mockData = { email: 'mock-support@mozilla.com' };
 

package.json

@@ -75,6 +75,7 @@
         "eslint-plugin-prettier": "^3.1.3",
         "eslint-plugin-react": "^7.12.4",
         "eslint-plugin-react-hooks": "4.0.0",
+        "eslint-plugin-testing-library": "^3.1.2",
         "flow-bin": "^0.111.0",
         "hard-source-webpack-plugin": "0.13.1",
         "husky": "0.14.3",

yarn.lock

@@ -1493,6 +1493,16 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@typescript-eslint/experimental-utils@^2.29.0":
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.32.0.tgz#bee7fbe1d21d13a273066d70abc82549d0b7943e"
+  integrity sha512-oDWuB2q5AXsQ/mLq2N4qtWiBASWXPf7KhqXgeGH4QsyVKx+km8F6Vfqd3bspJQyhyCqxcbLO/jKJuIV3DzHZ6A==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/typescript-estree" "2.32.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
 "@typescript-eslint/experimental-utils@^2.5.0":
   version "2.29.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.29.0.tgz#3cb8060de9265ba131625a96bbfec31ba6d4a0fe"
@@ -1516,6 +1526,19 @@
     semver "^6.3.0"
     tsutils "^3.17.1"
 
+"@typescript-eslint/typescript-estree@2.32.0":
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.32.0.tgz#0e4ae2e883557f94039b13ac0ecfcfbb09835b8d"
+  integrity sha512-hQpbWM/Y2iq6jB9FHYJBqa3h1R9IEGodOtajhb261cVHt9cz30AKjXM6WP7LxJdEPPlyJ9rPTZVgBUgZgiyPgw==
+  dependencies:
+    debug "^4.1.1"
+    eslint-visitor-keys "^1.1.0"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
 "@tyriar/fibonacci-heap@^2.0.7":
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/@tyriar/fibonacci-heap/-/fibonacci-heap-2.0.9.tgz#df3dcbdb1b9182168601f6318366157ee16666e9"
@@ -3674,6 +3697,13 @@ eslint-plugin-react@^7.12.4:
     string.prototype.matchall "^4.0.2"
     xregexp "^4.3.0"
 
+eslint-plugin-testing-library@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.1.2.tgz#7d67ddc1b7d60af04c02bfe81ca5a96352fd125f"
+  integrity sha512-Xuty2MvgA3vg0dutUwTSeUkOsWtg5Fj6v0c9K930bVfNwmgzF0yLRsZ/xD0OK6t+8UX9O5SZShpHYkk/gWovcA==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^2.29.0"
+
 eslint-scope@^4.0.0, eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
@@ -8203,6 +8233,11 @@ semver@^6.0.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"