Merge pull request #386 from aVileBroker/upgrade-to-react-18

React 18 upgrade
Headstorm · May 3, 2022 · 6ced1cd · 6ced1cd
2 parents 19dada4 + a76f2a9
commit 6ced1cd
Show file tree

Hide file tree

Showing 20 changed files with 6,118 additions and 5,902 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -30,7 +30,7 @@ module.exports = {
     'function-paren-newline': 0,
     'implicit-arrow-linebreak': 0,
     'import/extensions': 0,
-    'import/no-extraneous-dependencies': 1,
+    'import/no-extraneous-dependencies': 0,
     'import/no-unresolved': 0,
     'import/prefer-default-export': 1,
     'jsx-a11y/label-has-associated-control': 0,

diff --git a/package.json b/package.json
@@ -37,20 +37,19 @@
     "@storybook/addon-links": "^6.3.6",
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/react": "^6.3.6",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^10.0.4",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^14.1.1",
     "@types/faker": "^4.1.12",
     "@types/jest": "^26.0.0",
     "@types/jest-axe": "^3.5.0",
     "@types/lodash": "^4.14.150",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^13.11.1",
-    "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
-    "@types/react-portal": "^4.0.2",
+    "@types/react-portal": "^4.0.4",
     "@types/shortid": "^0.0.29",
-    "@types/styled-components": "^5.1.7",
+    "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^3.0.0",
     "@typescript-eslint/parser": "^3.0.0",
     "babel-loader": "^8.1.0",
@@ -72,9 +71,9 @@
     "jest-styled-components": "^7.0.2",
     "lodash": "^4.17.15",
     "pre-commit": "^1.2.2",
-    "react": "^16.13.1",
+    "react": "^18.1.0",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^16.13.1",
+    "react-dom": "^18.1.0",
     "react-is": "^16.13.1",
     "react-scripts": "3.4.1",
     "react-use-gesture": "^9.1.3",
@@ -86,7 +85,7 @@
     "src": "^1.1.2",
     "storybook-addon-designs": "^6.0.1",
     "style-loader": "^1.2.1",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.3.5",
     "ts-loader": "^7.0.4",
     "typescript": "^3.8.3",
     "use-resize-observer": "^7.0.0",
@@ -103,12 +102,13 @@
     "polished": "^4.1.1",
     "react-aria": "^3.9.0",
     "react-device-detect": "^1.17.0",
-    "react-portal": "^4.2.1",
+    "react-portal": "^4.2.2",
     "react-virtuoso": "^1.10.5",
     "src": "^1.1.2"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.2.4",
+    "@types/react": "^18.0.8",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -655,7 +655,7 @@ const Dropdown = ({
   );
 
   const keyDownHandler = useCallback(
-    ({ key }) => {
+    ({ key }: { key: string }) => {
       // setTimeout(0) needed when responding to key events to push back call
       // to activeElement to after it is updated in the DOM
       window.setTimeout(() => {
@@ -739,7 +739,7 @@ const Dropdown = ({
   }, [keyDownHandler]);
 
   const optionsScrollListenerCallbackRef = useCallback(
-    node => {
+    (node: HTMLElement) => {
       if (node && rememberScrollPosition) {
         node.addEventListener('scroll', scrollListener, true);
 
@@ -898,6 +898,7 @@ const Dropdown = ({
             <TextInput
               id={`${name}-search-input`}
               aria-label={`${name}-search-input`}
+              role="searchbox"
               onChange={handleSearchChange}
               debouncedOnChange={handleSearchDebouncedChange}
               StyledContainer={StyledSearchContainer}

diff --git a/src/components/Dropdown/__tests__/Dropdown.test.tsx b/src/components/Dropdown/__tests__/Dropdown.test.tsx
@@ -66,6 +66,7 @@ afterEach(() => {
   window.IntersectionObserver.mockClear();
   // @ts-ignore
   global.IntersectionObserver.mockClear();
+  mockedSelectHandler.mockClear();
 });
 
 describe('Dropdown', () => {
@@ -171,8 +172,9 @@ describe('Dropdown', () => {
       <Dropdown onSelect={mockedSelectHandler} options={pokeOptions} virtualizeOptions={false} />,
     );
 
-    // TODO - Don't use id, see if we can use a more semantically meaningful element
-    fireEvent.focus(screen.getByRole('button'));
+    act(() => {
+      fireEvent.focus(screen.getByRole('button'));
+    });
     await waitFor(() => getByText('Charmander'));
     act(() => {
       fireEvent.click(getByText('Charmander'));
@@ -191,7 +193,10 @@ describe('Dropdown', () => {
         virtualizeOptions={false}
       />,
     );
-    screen.getByRole('button').focus();
+    act(() => {
+      screen.getByRole('button').focus();
+    });
+    await waitFor(() => getByText('Charmander'));
     act(() => {
       fireEvent.click(getByText('Charmander'));
       fireEvent.click(getByText('Squirtle'));
@@ -232,33 +237,33 @@ describe('Dropdown', () => {
       <Dropdown onSelect={mockedSelectHandler} options={pokeOptions} />,
     );
 
-    screen.getByRole('button').focus();
+    act(() => {
+      screen.getByRole('button').focus();
+    });
     // need to wait for observer to be called (for hidden options container and options container)
     // before the dropdown is rendered correctly
     await waitFor(() => expect(observe).toHaveBeenCalledTimes(2));
-    await waitFor(() => queryByText('Squirtle') !== null);
-    const optionsOutFrag = asFragment();
-    expect(optionsOutFrag).toMatchSnapshot();
+    const optionsOpenFrag = asFragment();
+    expect(optionsOpenFrag).toMatchSnapshot();
 
     act(() => {
-      fireEvent.blur(screen.getByRole('button'));
+      screen.getByRole('button').blur();
     });
-    await waitFor(() => queryByText('Squirtle') === null);
-    expect(queryByText('Squirtle')).toBeNull();
+    await waitFor(() => expect(queryByText('Charmander')).toBeNull());
 
     const optionsClosedFrag = asFragment();
     expect(optionsClosedFrag).toMatchSnapshot();
   });
 
   it('can use arrow keys and enter to navigate options', async () => {
     generateIntersectionObserver([]);
-    const { queryByText } = render(
+    render(
       <Dropdown onSelect={mockedSelectHandler} options={pokeOptions} virtualizeOptions={false} />,
     );
     act(() => {
       screen.getByRole('button').focus();
     });
-    await waitFor(() => expect(queryByText('Squirtle')).toBeTruthy());
+    await waitFor(() => expect(observe).toHaveBeenCalledTimes(2));
     act(() => {
       fireEvent.keyDown(document.activeElement, {
         key: 'ArrowDown',
@@ -272,10 +277,6 @@ describe('Dropdown', () => {
         key: 'ArrowDown',
         code: 'ArrowDown',
       });
-      fireEvent.keyDown(document.activeElement, {
-        key: 'ArrowDown',
-        code: 'ArrowDown',
-      });
       fireEvent.keyDown(document.activeElement, {
         key: 'ArrowUp',
         code: 'ArrowUp',
@@ -291,7 +292,7 @@ describe('Dropdown', () => {
 
   it('can use arrow keys and enter to navigate options when searchable is true', async () => {
     generateIntersectionObserver([]);
-    const { queryByText } = render(
+    render(
       <Dropdown
         onSelect={mockedSelectHandler}
         searchable
@@ -300,9 +301,9 @@ describe('Dropdown', () => {
       />,
     );
     act(() => {
-      screen.getByRole('button').focus();
+      screen.getByRole('searchbox').focus();
     });
-    await waitFor(() => expect(queryByText('Squirtle')).toBeTruthy());
+    await waitFor(() => expect(observe).toHaveBeenCalledTimes(2));
     act(() => {
       fireEvent.keyDown(document.activeElement, {
         key: 'ArrowDown',
@@ -316,10 +317,6 @@ describe('Dropdown', () => {
         key: 'ArrowDown',
         code: 'ArrowDown',
       });
-      fireEvent.keyDown(document.activeElement, {
-        key: 'ArrowDown',
-        code: 'ArrowDown',
-      });
       fireEvent.keyDown(document.activeElement, {
         key: 'ArrowUp',
         code: 'ArrowUp',
@@ -474,7 +471,6 @@ describe('Dropdown', () => {
       act(() => {
         fireEvent.focus(screen.getByRole('button'));
       });
-      // observe should not be called
       expect(observe).toHaveBeenCalledTimes(0);
     });
 

diff --git a/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -1606,7 +1606,7 @@ exports[`Dropdown closes options when clicking outside 2`] = `
   transition: filter .5s,box-shadow .5s;
   contain: layout;
   position: relative;
-  z-index: 1;
+  z-index: 7;
 }
 
 .c3 {
@@ -1629,6 +1629,9 @@ exports[`Dropdown closes options when clicking outside 2`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-bottom: 0px solid transparent;
+  border-bottom-right-radius: 0rem;
+  border-bottom-left-radius: 0rem;
   width: 15em;
   padding: .5em 1em;
 }
@@ -1649,6 +1652,39 @@ exports[`Dropdown closes options when clicking outside 2`] = `
   text-align: left;
 }
 
+.c13 {
+  background: white;
+  position: absolute;
+  left: 0px;
+  max-height: 10em;
+  overflow-y: auto;
+  width: 15em;
+  border: 1px solid undefined;
+  z-index: 1000;
+  bottom: 100%;
+  border-bottom: 0px solid transparent;
+  border-radius: 0.25rem 0.25rem 0rem 0rem;
+}
+
+.c12 {
+  background: white;
+  position: absolute;
+  left: 0px;
+  height: 10em;
+  overflow-y: auto;
+  width: 15em;
+  border: 1px solid #252D34;
+  z-index: 1000;
+  top: 100%;
+  border-top: 0px solid transparent;
+  border-radius: 0rem 0rem 0.25rem 0.25rem;
+}
+
+.c14 {
+  visibility: hidden;
+  bottom: 100%;
+}
+
 .c4 {
   position: absolute;
   opacity: 0.8;
@@ -1685,7 +1721,7 @@ exports[`Dropdown closes options when clicking outside 2`] = `
           viewBox="0 0 24 24"
         >
           <path
-            d="M7,10L12,15L17,10H7Z"
+            d="M7,15L12,10L17,15H7Z"
             style="fill: currentColor;"
           />
         </svg>
@@ -1705,6 +1741,22 @@ exports[`Dropdown closes options when clicking outside 2`] = `
         color="#252D34"
       />
     </button>
+    <div
+      class=" c12"
+      color="#252D34"
+      role="listbox"
+    >
+      <div
+        style="width: 100%; height: 100%; position: absolute; top: 0px;"
+      >
+        <div
+          style="box-sizing: border-box; padding-top: 0px; padding-bottom: 0px; margin-top: 0px;"
+        />
+      </div>
+    </div>
+    <div
+      class=" c13 c14"
+    />
   </div>
 </DocumentFragment>
 `;

diff --git a/src/components/Label/__tests__/Label.test.tsx b/src/components/Label/__tests__/Label.test.tsx
@@ -37,7 +37,7 @@ describe('Label', () => {
 
   it('should have default color text if not given a isValid', () => {
     const container = render(
-      <Label labelProps={{ id: 'label' }} color={'#FF4500'} labelText="Test text" />,
+      <Label labelProps={{ id: 'label' }} color="#FF4500" labelText="Test text" />,
     );
 
     expect(container).toMatchSnapshot();