Tooltip alignment options, a11y improvements (#307)

* fix: Tooltip a11y improvements * Fix some failing tests * Add more tooltip alignment options, clean up hoverable area and transitions * Remove debug logging from a test * Removing jsdom 16 to keep compatibility with node 10
cision · Mar 19, 2021 · 974cbc0 · 974cbc0
1 parent 7966552
commit 974cbc0
Show file tree

Hide file tree

Showing 8 changed files with 763 additions and 504 deletions.
diff --git a/package.json b/package.json
@@ -88,10 +88,10 @@
     "@storybook/addons": "^5.3.19",
     "@storybook/preset-create-react-app": "^3.0.0",
     "@storybook/react": "^5.3.19",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^10.2.1",
-    "@testing-library/react-hooks": "^3.3.0",
-    "@testing-library/user-event": "^12.0.7",
+    "@testing-library/jest-dom": "5.11.9",
+    "@testing-library/react": "11.2.5",
+    "@testing-library/react-hooks": "5.1.0",
+    "@testing-library/user-event": "13.0.2",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.4",

diff --git a/src/components/InputTime/InputTime.test.tsx b/src/components/InputTime/InputTime.test.tsx
@@ -83,7 +83,7 @@ describe('InputTime', () => {
       expect(baseInput.validationMessage).toBeFalsy();
     });
 
-    // it.only('validates values against step + min if present', async () => {
+    // it('validates values against step + min if present', async () => {
     //   // const { debug, getByTestId, rerender } = render(
     //   //   <InputTime
     //   //     data-testid="InputTime test"
@@ -393,56 +393,59 @@ describe('InputTime', () => {
     });
 
     describe('validation', () => {
-      it('validates `value` against same day `min` and `max`', () => {
-        const { getByLabelText, rerender } = render(
-          <InputTime
-            fuzzyInputProps={{ 'aria-label': 'time input' }}
-            max="2020-06-29T20:00:00.000Z"
-            min="2020-06-29T10:00:00.000Z"
-            value="2020-06-29T20:00:00.000Z"
-          />
-        );
-
-        // Equals `max`
-        const baseInputTime = getByLabelText('time input') as HTMLInputElement;
-        expect(baseInputTime.validationMessage).toBeFalsy();
-
-        // Equals `min`
-        rerender(
-          <InputTime
-            min="2020-06-29T10:00:00.000Z"
-            value="2020-06-29T10:00:00.000Z"
-          />
-        );
-        expect(baseInputTime.validationMessage).toBeFalsy();
-
-        // Outside `max`
-        rerender(
-          <InputTime
-            max="2020-06-29T20:00:00.000Z"
-            value="2020-06-29T20:01:00.000Z"
-          />
-        );
-        expect(baseInputTime.validationMessage).toBeTruthy();
-
-        // Outside `min`
-        rerender(
-          <InputTime
-            min="2020-06-29T10:00:00.000Z"
-            value="2020-06-29T09:59:00.000Z"
-          />
-        );
-        expect(baseInputTime.validationMessage).toBeTruthy();
-
-        // Impossible
-        rerender(
-          <InputTime
-            max="2020-06-29T09:59:00.000Z"
-            min="2020-06-29T10:00:00.000Z"
-            value="2020-06-29T09:59:00.000Z"
-          />
-        );
-        expect(baseInputTime.validationMessage).toBeTruthy();
+      describe('validates `value` against same day `min` and `max`', () => {
+        const defaultProps = {
+          fuzzyInputProps: { 'aria-label': 'time input' },
+          max: '2020-06-29T20:00:00.000Z',
+          min: '2020-06-29T10:00:00.000Z',
+          value: '2020-06-29T20:00:00.000Z',
+        };
+
+        it('passes when value === max', () => {
+          const { getByLabelText } = render(<InputTime {...defaultProps} />);
+
+          const baseInputTime = getByLabelText(
+            'time input'
+          ) as HTMLInputElement;
+
+          expect(baseInputTime.validationMessage).toBeFalsy();
+        });
+
+        it('passes when value === min', () => {
+          const { getByLabelText } = render(
+            <InputTime {...defaultProps} value="2020-06-29T10:00:00.000Z" />
+          );
+
+          const baseInputTime = getByLabelText(
+            'time input'
+          ) as HTMLInputElement;
+
+          expect(baseInputTime.validationMessage).toBeFalsy();
+        });
+
+        it('fails when value > max', () => {
+          const { getByLabelText } = render(
+            <InputTime {...defaultProps} value="2020-06-29T20:01:00.000Z" />
+          );
+
+          const baseInputTime = getByLabelText(
+            'time input'
+          ) as HTMLInputElement;
+
+          expect(baseInputTime.validationMessage).toBeTruthy();
+        });
+
+        it('fails when value < min', () => {
+          const { getByLabelText } = render(
+            <InputTime {...defaultProps} value="2020-06-29T09:59:00.000Z" />
+          );
+
+          const baseInputTime = getByLabelText(
+            'time input'
+          ) as HTMLInputElement;
+
+          expect(baseInputTime.validationMessage).toBeTruthy();
+        });
       });
 
       it('disables when `min` or `max` make all selections impossible', () => {

diff --git a/src/components/Media/Media.test.tsx b/src/components/Media/Media.test.tsx
@@ -1,4 +1,7 @@
 import React, { useState } from 'react';
+
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { mount } from 'enzyme';
 
 import Media from '.';
@@ -12,9 +15,9 @@ const TestWrapper = () => {
 
   return (
     <Media>
-      <Media.Body id="media-body">
+      <Media.Body>
         <input
-          id="input-test"
+          data-testid="input-test"
           type="text"
           value={val}
           onChange={handleOnChange}
@@ -24,25 +27,17 @@ const TestWrapper = () => {
   );
 };
 
-type OverrideInstanceFocus = {
-  instance: () => {
-    focus: () => void;
-  };
-};
-
 describe('Media', () => {
   describe('Media.Item', () => {
     it('will not re-render everything unnecessarily', () => {
-      const wrapper = mount(<TestWrapper />);
-      const input = wrapper.find('input#input-test');
-
-      // TypeScript _really_ doesn't think `focus` exists.
-      ((input as unknown) as OverrideInstanceFocus).instance().focus();
+      const { getByTestId } = render(<TestWrapper />);
+      const input = getByTestId('input-test') as HTMLInputElement;
 
-      input.simulate('change', { target: { value: 'h' } });
-      input.simulate('change', { target: { value: 'he' } });
+      userEvent.tab();
+      userEvent.type(input, 'h');
+      userEvent.type(input, 'e');
 
-      expect(wrapper.find('#input-test').is(':focus')).toBe(true);
+      expect(document.activeElement).toEqual(input);
     });
 
     it('renders its children', () => {