Upgrade Testing Library dependencies to latest version (#10509)

Signed-off-by: Jon Koops <[email protected]>
patternfly · Jun 6, 2024 · 71d32a6 · 71d32a6
1 parent 658e64d
commit 71d32a6
Show file tree

Hide file tree

Showing 9 changed files with 2,960 additions and 4,077 deletions.
diff --git a/package.json b/package.json
@@ -33,9 +33,10 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-terser": "^0.4.4",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "29.5.12",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/...ct-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap b/...ct-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`allows tooltip via container component 1`] = `
       width="200"
     >
       <g
-        clip-path="url(#victory-clip-4)"
+        clip-path="url(#victory-clip-6)"
         style="height: 100%; width: 100%;"
       >
         <defs>
           <clippath
-            id="victory-clip-4"
+            id="victory-clip-6"
           >
             <rect
               height="100"
@@ -42,12 +42,12 @@ exports[`allows tooltip via container component 1`] = `
         />
       </g>
       <g
-        clip-path="url(#victory-clip-5)"
+        clip-path="url(#victory-clip-7)"
         style="height: 100%; width: 100%;"
       >
         <defs>
           <clippath
-            id="victory-clip-5"
+            id="victory-clip-7"
           >
             <rect
               height="100"

diff --git a/...t-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap b/...t-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`allows tooltip via container component 1`] = `
       width="200"
     >
       <g
-        clip-path="url(#victory-clip-4)"
+        clip-path="url(#victory-clip-6)"
         style="height: 100%; width: 100%;"
       >
         <defs>
           <clippath
-            id="victory-clip-4"
+            id="victory-clip-6"
           >
             <rect
               height="100"
@@ -42,12 +42,12 @@ exports[`allows tooltip via container component 1`] = `
         />
       </g>
       <g
-        clip-path="url(#victory-clip-5)"
+        clip-path="url(#victory-clip-7)"
         style="height: 100%; width: 100%;"
       >
         <defs>
           <clippath
-            id="victory-clip-5"
+            id="victory-clip-7"
           >
             <rect
               height="100"

diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`allows tooltip via container component 1`] = `
       width="200"
     >
       <g
-        clip-path="url(#victory-clip-2)"
+        clip-path="url(#victory-clip-4)"
         style="height: 100%; width: 100%;"
       >
         <defs>
           <clippath
-            id="victory-clip-2"
+            id="victory-clip-4"
           >
             <rect
               height="100"
@@ -42,12 +42,12 @@ exports[`allows tooltip via container component 1`] = `
         />
       </g>
       <g
-        clip-path="url(#victory-clip-3)"
+        clip-path="url(#victory-clip-5)"
         style="height: 100%; width: 100%;"
       >
         <defs>
           <clippath
-            id="victory-clip-3"
+            id="victory-clip-5"
           >
             <rect
               height="100"

diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
@@ -1096,7 +1096,7 @@ exports[`Nav Nav List with flyout 1`] = `
       data-popper-escaped="true"
       data-popper-placement="right-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     >
       <div>
         Flyout test

diff --git a/...s/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/...s/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -134,7 +134,7 @@ exports[`SearchInput advanced search 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     />
   </div>
 </DocumentFragment>
@@ -590,7 +590,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     />
   </div>
 </DocumentFragment>

diff --git a/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx b/packages/react-core/src/components/SimpleList/__tests__/SimpleList.test.tsx
@@ -14,13 +14,13 @@ const items = [
 ];
 
 const anchors = [
-  <SimpleListItem key="i1" component="a">
+  <SimpleListItem key="i1" component="a" href="#foo">
     Item 1
   </SimpleListItem>,
-  <SimpleListItem key="i2" component="a">
+  <SimpleListItem key="i2" component="a" href="#bar">
     Item 2
   </SimpleListItem>,
-  <SimpleListItem key="i3" component="a">
+  <SimpleListItem key="i3" component="a" href="#baz">
     Item 3
   </SimpleListItem>
 ];

diff --git a/packages/react-docs/patternfly-a11y.config.js b/packages/react-docs/patternfly-a11y.config.js
@@ -10,7 +10,7 @@ async function waitFor(page) {
 }
 
 const urls = Object.keys(fullscreenRoutes)
-  .map(key => {
+  .map((key) => {
     if (fullscreenRoutes[key].isFullscreenOnly) {
       return key;
     } else {
@@ -21,14 +21,16 @@ const urls = Object.keys(fullscreenRoutes)
         return path.replace(/\/react-demos$/, '');
       } else {
         // some demos have been moved to the component section, so their default tab has a trailing 'react-demos'
-        if (path.match(/\/components\/.*\/react-demos$/g)){
-          if (path.includes('/application-launcher/') ||
+        if (path.match(/\/components\/.*\/react-demos$/g)) {
+          if (
+            path.includes('/application-launcher/') ||
             path.includes('/context-selector/') ||
             path.includes('/date-and-time-picker/') ||
             path.includes('/password-generator/') ||
             path.includes('/password-strength/') ||
             path.includes('/custom-menus/') ||
-            path.includes('/options-menu/')) {
+            path.includes('/options-menu/')
+          ) {
             return path.replace(/\/react-demos$/, '');
           }
         }
@@ -48,7 +50,7 @@ module.exports = {
       url: '/',
       label: 'home fullscreen nav expanded',
       viewportDimensions: { width: 1920, height: 1080 },
-      afterNav: async page => {
+      afterNav: async (page) => {
         await page.click('button#nav-toggle');
       }
     },
@@ -66,7 +68,7 @@ module.exports = {
       url: '/',
       label: 'home mobile nav expanded',
       viewportDimensions: { width: 400, height: 900 },
-      afterNav: async page => {
+      afterNav: async (page) => {
         await page.click('button#nav-toggle');
       }
     },
@@ -91,7 +93,8 @@ module.exports = {
     'color-contrast',
     'landmark-no-duplicate-main',
     'landmark-main-is-top-level',
-    'scrollable-region-focusable'
+    'scrollable-region-focusable',
+    'aria-required-children'
   ].join(','),
   ignoreIncomplete: true
 };