Handle className removal on SVG (airbytehq#17935)

jhammarstedt · Oct 31, 2022 · 5bf0a18 · 5bf0a18
1 parent 48fb83c
commit 5bf0a18
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 18 deletions.
diff --git a/airbyte-webapp/scripts/classname-serializer.js b/airbyte-webapp/scripts/classname-serializer.js
@@ -5,8 +5,13 @@ import { prettyDOM } from "@testing-library/react";
  * the count of classnames instead, e.g. "<3 classnames>"
  */
 const traverseAndRedactClasses = (node) => {
-  if (node.className && typeof node.className === "string") {
-    node.className = `<removed-for-snapshot-test>`;
+  if (
+    node.className &&
+    (typeof node.className === "string" || (node.className instanceof SVGAnimatedString && node.className.baseVal))
+  ) {
+    // We need to use setAttribute here, since on SVGElement we can't
+    // set `className` to a string for the `SVGAnimatedString` case.
+    node.setAttribute("class", `<removed-for-snapshot-test>`);
   }
   node.childNodes.forEach(traverseAndRedactClasses);
 };

diff --git a/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -160,7 +160,7 @@ exports[`CreateConnectionForm should render 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="svg-inline--fa fa-sort-down sc-dPyBCJ eGVczJ"
+                            class="<removed-for-snapshot-test>"
                             data-icon="sort-down"
                             data-prefix="fas"
                             focusable="false"
@@ -283,7 +283,7 @@ exports[`CreateConnectionForm should render 1`] = `
                           >
                             <svg
                               aria-hidden="true"
-                              class="svg-inline--fa fa-sort-down sc-dPyBCJ eGVczJ"
+                              class="<removed-for-snapshot-test>"
                               data-icon="sort-down"
                               data-prefix="fas"
                               focusable="false"
@@ -379,7 +379,7 @@ exports[`CreateConnectionForm should render 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="svg-inline--fa fa-rotate tryArrow"
+                        class="<removed-for-snapshot-test>"
                         data-icon="rotate"
                         data-prefix="fas"
                         focusable="false"
@@ -644,7 +644,7 @@ exports[`CreateConnectionForm should render 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="svg-inline--fa fa-chevron-right sc-ehmTmK eOIlNv"
+                            class="<removed-for-snapshot-test>"
                             data-icon="chevron-right"
                             data-prefix="fas"
                             focusable="false"
@@ -760,7 +760,7 @@ exports[`CreateConnectionForm should render 1`] = `
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="svg-inline--fa fa-sort-down sc-dPyBCJ eGVczJ"
+                                    class="<removed-for-snapshot-test>"
                                     data-icon="sort-down"
                                     data-prefix="fas"
                                     focusable="false"
@@ -977,7 +977,7 @@ exports[`CreateConnectionForm should render with an error 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="svg-inline--fa fa-xmark "
+            class="<removed-for-snapshot-test>"
             data-icon="xmark"
             data-prefix="fas"
             focusable="false"

diff --git a/...pp/src/packages/cloud/views/auth/components/GitBlock/__snapshots__/GitBlock.test.tsx.snap b/...pp/src/packages/cloud/views/auth/components/GitBlock/__snapshots__/GitBlock.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<GitBlock /> should render with default props 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="svg-inline--fa fa-github icon"
+            class="<removed-for-snapshot-test>"
             data-icon="github"
             data-prefix="fab"
             focusable="false"
@@ -66,7 +66,7 @@ exports[`<GitBlock /> should render with overwritten props 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="svg-inline--fa fa-github icon"
+            class="<removed-for-snapshot-test>"
             data-icon="github"
             data-prefix="fab"
             focusable="false"

diff --git a/...nectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/...nectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
@@ -107,7 +107,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="svg-inline--fa fa-sort-down sc-BeQoi gptVmb"
+                            class="<removed-for-snapshot-test>"
                             data-icon="sort-down"
                             data-prefix="fas"
                             focusable="false"
@@ -230,7 +230,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                           >
                             <svg
                               aria-hidden="true"
-                              class="svg-inline--fa fa-sort-down sc-BeQoi gptVmb"
+                              class="<removed-for-snapshot-test>"
                               data-icon="sort-down"
                               data-prefix="fas"
                               focusable="false"
@@ -326,7 +326,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class="svg-inline--fa fa-rotate tryArrow"
+                        class="<removed-for-snapshot-test>"
                         data-icon="rotate"
                         data-prefix="fas"
                         focusable="false"
@@ -591,7 +591,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                         >
                           <svg
                             aria-hidden="true"
-                            class="svg-inline--fa fa-chevron-right sc-ckMVTt eVXgVK"
+                            class="<removed-for-snapshot-test>"
                             data-icon="chevron-right"
                             data-prefix="fas"
                             focusable="false"
@@ -707,7 +707,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="svg-inline--fa fa-sort-down sc-BeQoi gptVmb"
+                                    class="<removed-for-snapshot-test>"
                                     data-icon="sort-down"
                                     data-prefix="fas"
                                     focusable="false"
@@ -804,7 +804,7 @@ exports[`ConnectionReplicationTab should show an error if there is a schemaError
           >
             <svg
               aria-hidden="true"
-              class="svg-inline--fa fa-xmark "
+              class="<removed-for-snapshot-test>"
               data-icon="xmark"
               data-prefix="fas"
               focusable="false"

diff --git a/...ponents/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap b/...ponents/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
           >
             <svg
               aria-hidden="true"
-              class="svg-inline--fa fa-chevron-left slick-arrow slick-prev slick-disabled"
+              class="<removed-for-snapshot-test>"
               data-icon="chevron-left"
               data-prefix="fas"
               data-role="none"
@@ -314,7 +314,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
           >
             <svg
               aria-hidden="true"
-              class="svg-inline--fa fa-chevron-right slick-arrow slick-next"
+              class="<removed-for-snapshot-test>"
               data-icon="chevron-right"
               data-prefix="fas"
               data-role="none"