Testing/extend component unit tests (#490)

* chore: install react testing
library

* test: remove cypress test for faq item expansion

* chore(.eslintrc): get rid of warnings "XX should be listed in the project's dependencies, not devDependencies"

see https://stackoverflow.com/a/44939592

* chore: install @testing-library/jest-dom

* [WIP] test(reports/FaqItem): add first failing test

* test: remove unit test for faq item

react-testing-library is not able to detect that the ancestor element
of the element containing the text has overflow=hidden applied.
Cypress is way smarter here.

https://github.com/testing-library/jest-dom/#tobevisible
https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Additionally-an-element-is-considered-hidden-if

* Revert "test: remove cypress test for faq item expansion"

This reverts commit ec9b9c4

* [WIP]test(AutoCompleteGeocoder): add first unit tests

* test(AutoCompleteGeocode): test callbacks for focus and blur

* chore: add msw

https://github.com/mswjs/msw
https://kentcdodds.com/blog/stop-mocking-fetch

* chore: update jest to v25.4.0

testing-library/dom-testing-library#477 (comment)

* test(AutoCompleteGeocoder): [WIP] add more tests

* testing(AutoCompleteGeocoder): almost done (wip)

* test(AutoCompleteGeocoder): refactor unit tests

* test(AutoCompleteGeocoder): fix test for request buffering

* test(AutoCompleteGeocoder): prettify

* test(AutoCompleteGeocoder): sharpen test for locationPick callback

* test(AutoCompleteGeocoder): refactor tests for async input handling

* test(AutoCompleteGeocoder): [WIP]: test onEnter logic

* test(AutoCompleteGeocoder): test error and reset handling

* test(AutoCompleteGeocoder): correctly test enter press when only one suggestion is being displayed

* test(AutoCompleteGeocoder): minor cleanup

* fix broken tests by correctly overriding global fetch during tests

* fix(eslintrc): malconfiguration regarding implicit dependencies

* refactor: prettier

* Replacing globals can make debugging hard

The problem can be solved by importing node-fetch here. Even better
would be to use `ky-universal` but that
would require further refactoring.

* improve(AutoCompleteGeocoder.unit.test): speed up tests by lowering debounceTime

Co-authored-by: Vincent Ahrend <mail@vincentahrend.com>

.eslintrc

@@ -10,7 +10,13 @@
     "plugin:chai-friendly/recommended"
   ],
 
-  "plugins": ["prettier", "chai-friendly", "formatjs"],
+  "plugins": [
+    "prettier",
+    "chai-friendly",
+    "jest-dom",
+    "formatjs",
+    "testing-library"
+  ],
 
   "overrides": [
     {
@@ -34,7 +40,6 @@
         "no-dupe-class-members": "off",
         // 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/477)
         "no-undef": "off",
-
         // Add TypeScript specific rules (and turn off ESLint equivalents)
         "@typescript-eslint/consistent-type-assertions": "warn",
         "no-array-constructor": "off",
@@ -83,10 +88,7 @@
         "tsx": "never"
       }
     ],
-    "import/no-extraneous-dependencies": [
-      "error",
-      { "devDependencies": ["**/*.test.js", "**/*.spec.js", "cypress/**/*"] }
-    ]
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
   },
 
   "env": {

jest/jest.config.js

@@ -53,6 +53,10 @@ module.exports = {
   // environment before each test
   setupFiles: ['<rootDir>/jest/jest.setup.js'],
 
+  // A list of paths to modules that run some code to configure or
+  // set up the testing framework before each test file in the suite is executed.
+  setupFilesAfterEnv: ['<rootDir>/jest/jest.setupAfterEnv.js'],
+
   // An array of regexp pattern strings that are matched against all source
   // file paths, matched files will skip transformation
   transformIgnorePatterns: [`<rootDir>/node_modules/(?!${esModules.join('|')})`]

jest/jest.setup.js

@@ -1 +1,2 @@
+// read .env files in node tests
 require('dotenv').config();

jest/jest.setupAfterEnv.js

@@ -0,0 +1,30 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
+/* mock-service-worker setup, see https://kentcdodds.com/blog/stop-mocking-fetch */
+import { setupServer } from 'msw/node';
+import handlers from './mocks/mswHandlers';
+
+// Setup requests interception using the given handlers.
+export const server = setupServer(...handlers);
+
+beforeAll(() => {
+  // Enable the mocking in tests.
+  server.listen();
+});
+
+afterEach(() => {
+  // Reset any runtime handlers tests may use.
+  server.resetHandlers();
+});
+
+afterAll(() => {
+  // Clean up once the tests are done.
+  server.close();
+});
+
+// increase timeout for async tests
+jest.setTimeout(30000);
+

jest/mocks/mockLocationSuggestions.json

@@ -0,0 +1,81 @@
+{
+  "//": "I stripped all actual data und entered dummy data to not get into conflicts with MapBox' terms of usage",
+  "type": "FeatureCollection",
+  "query": [
+    "hauptstraße"
+  ],
+  "features": [
+    {
+      "id": "address.123",
+      "type": "Feature",
+      "place_type": [
+        "address"
+      ],
+      "relevance": 1,
+      "properties": {
+        "accuracy": "street"
+      },
+      "text_de": "Hauptstraße",
+      "place_name_de": "Hauptstraße, 123 DummyCity, Deutschland",
+      "center": [
+        6.123,
+        50.123
+      ],
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          6.123,
+          50.123
+        ]
+      }
+    },
+    {
+      "id": "address.234",
+      "type": "Feature",
+      "place_type": [
+        "address"
+      ],
+      "relevance": 1,
+      "properties": {
+        "accuracy": "street"
+      },
+      "text_de": "Hauptstraße",
+      "place_name_de": "Hauptstraße, 234 TestCity, Deutschland",
+      "center": [
+        6.234,
+        50.234
+      ],
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          6.234,
+          50.234
+        ]
+      }
+    },
+    {
+      "id": "address.345",
+      "type": "Feature",
+      "place_type": [
+        "address"
+      ],
+      "relevance": 1,
+      "properties": {
+        "accuracy": "street"
+      },
+      "text_de": "Hauptstraße",
+      "place_name_de": "Hauptstraße, 345 MockVillage, Deutschland",
+      "center": [
+        6.345,
+        50.345
+      ],
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          6.345,
+          50.345
+        ]
+      }
+    }
+  ]
+}

jest/mocks/mswHandlers.js

@@ -0,0 +1,15 @@
+import { rest } from 'msw';
+import mockLocationSuggestions from './mockLocationSuggestions.json'
+
+// msw route handlers designated to be used in various places,
+// see https://kentcdodds.com/blog/stop-mocking-fetch
+export default [
+  rest.get(
+    new RegExp('^https://api.mapbox.com/geocoding/v5/mapbox.places'),
+    (req, res, ctx) => {
+      return res(
+        ctx.json(mockLocationSuggestions)
+      );
+    }
+  )
+]