chore: fix some tests and upgrade react to v18

nginformatica · Dec 12, 2022 · 9ec2c30 · 9ec2c30
1 parent 5c5ae40
commit 9ec2c30
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 62 deletions.
diff --git a/cypress/integration/Tooltip.feature b/cypress/integration/Tooltip.feature
@@ -9,5 +9,5 @@ Feature: Tooltip
         Then I should see 'Tooltip'
         And I expect 'tooltip-onopen' spy to have been called 1 times
 
-        When I exit 1th button
+        When I exit focus
         Then I expect 'tooltip-onclose' spy to have been called 1 times
diff --git a/cypress/integration/common/When.cy.tsx b/cypress/integration/common/When.cy.tsx
@@ -243,8 +243,8 @@ When('I focus {int}th button', (pos: number) => {
         .focus()
 })
 
-When('I exit {int}th button', (pos: number) => {
-    cy.get('button')
-        .eq(pos - 1)
-        .trigger('blur')
+When('I exit focus', () => {
+    cy.get('[data-testid="testing-outside-click"]')
+        .first()
+        .click(-1050, -1000, { force: true })
 })
diff --git a/cypress/support/factories/tooltip.tsx b/cypress/support/factories/tooltip.tsx
@@ -10,9 +10,15 @@ interface IProps {
 
 const Component: React.FC<IProps> = props => {
     return (
-        <Tooltip onClose={props.onClose} onOpen={props.onOpen} title='Tooltip'>
-            <Button variant='outlined'>Simple tooltip</Button>
-        </Tooltip>
+        <>
+            <Tooltip
+                onClose={props.onClose}
+                onOpen={props.onOpen}
+                title='Tooltip'>
+                <Button variant='outlined'>Simple tooltip</Button>
+            </Tooltip>
+            <div data-testid='testing-outside-click'></div>
+        </>
     )
 }
 

diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
         "@types/jest": "24.0.22",
         "@types/node": "10.9.4",
         "@types/ramda": "0.25.36",
-        "@types/react": "16.8.18",
+        "@types/react": "18.0.26",
         "@types/react-router": "5.1.2",
         "@types/react-router-dom": "5.1.2",
         "@types/styled-components": "4.4.2",
@@ -98,8 +98,8 @@
         "node-fetch": "2.6.1",
         "node-polyfill-webpack-plugin": "2.0.1",
         "prettier": "2.8.0",
-        "react": "16.14.0",
-        "react-dom": "16.14.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
         "react-router": "5.1.2",
         "react-router-dom": "5.1.2",
         "styled-components": "5.0.0",

diff --git a/src/core/Tree.tsx b/src/core/Tree.tsx
@@ -1,3 +1,4 @@
+import { omit } from 'ramda'
 import React from 'react'
 import Node from './Node'
 
@@ -10,32 +11,12 @@ export interface INode {
 interface TreeProps {
     nodes?: INode[]
 }
-
-// class Tree extends Component<TreeProps, {}> {
-//     public renderNode(node: INode, index: string, root = false) {
-//         const { id, name, nodes } = node
-
-//         return (
-//             <Node
-//                 id={index}
-//                 name={name}
-//                 key={id || index}
-//                 style={root ? { padding: 0 } : {}}>
-//                 {nodes && nodes.map(this.renderNode.bind(this))}
-//             </Node>
-//         )
-//     }
-
-//     public render() {
-//         return (this.props.nodes || []).map((node, index) =>
-//             this.renderNode(node, index.toString(), true)
-//         )
-//     }
-// }
-
-// convert to a functional component
-const Tree = ({ nodes = [] }: TreeProps) => {
-    const renderNode = (node: INode, index: string, root = false) => {
+const Tree = ({ nodes = [] }: TreeProps): JSX.Element => {
+    const renderNode = (
+        node: INode,
+        index: string,
+        root = false
+    ): React.ReactNode => {
         const { id, name, nodes } = node
 
         return (
@@ -46,13 +27,22 @@ const Tree = ({ nodes = [] }: TreeProps) => {
                 style={root ? { padding: 0 } : {}}>
                 {nodes &&
                     nodes.map(node => {
-                        renderNode(node, index.toString())
+                        return renderNode(
+                            omit(['array'], node),
+                            index.toString()
+                        )
                     })}
             </Node>
         )
     }
 
-    return nodes.map((node, index) => renderNode(node, index.toString(), true))
+    return (
+        <Node name='root'>
+            {nodes.map((node, index) =>
+                renderNode(node, index.toString(), true)
+            )}
+        </Node>
+    )
 }
 
 export default Tree
diff --git a/yarn.lock b/yarn.lock
@@ -4324,13 +4324,19 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@16.8.18":
-  version "16.8.18"
-  resolved "https://registry.npmjs.org/@types/react/-/react-16.8.18.tgz#fe66fb748b0b6ca9709d38b87b2d1356d960a511"
-  integrity sha512-lUXdKzRqWR4FebR5tGHkLCqnvQJS4fdXKCBrNGGbglqZg2gpU+J82pMONevQODUotATs9fc9k66bx3/St8vReg==
+"@types/react@18.0.26":
+  version "18.0.26"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
+  integrity sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==
   dependencies:
     "@types/prop-types" "*"
-    csstype "^2.2.0"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
 "@types/semver@^7.3.12":
   version "7.3.13"
@@ -14113,15 +14119,13 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@16.14.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.23.0"
 
 [email protected]:
   version "0.0.15"
@@ -14224,14 +14228,12 @@ react-transition-group@^4.0.0, react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@16.14.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-only-stream@^2.0.0:
   version "2.0.0"
@@ -14909,13 +14911,12 @@ sax@^1.2.4:
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 [email protected]:
   version "2.7.0"