From e4efb0cbf905380f87ebc65e03c9ccee8889f88b Mon Sep 17 00:00:00 2001
From: Tim Roes <tim@airbyte.io>
Date: Thu, 13 Oct 2022 11:16:20 +0200
Subject: [PATCH] Handle className removal on SVG

---
 airbyte-webapp/scripts/classname-serializer.js       |  9 +++++++--
 .../__snapshots__/CreateConnectionForm.test.tsx.snap | 12 ++++++------
 .../GitBlock/__snapshots__/GitBlock.test.tsx.snap    |  4 ++--
 .../ConnectionReplicationTab.test.tsx.snap           | 12 ++++++------
 .../FrequentlyUsedDestinations.test.tsx.snap         |  4 ++--
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/airbyte-webapp/scripts/classname-serializer.js b/airbyte-webapp/scripts/classname-serializer.js
index 40bb27a80cd6..a9f86a9f14a1 100644
--- 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/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
index 4bd204d77b07..19aca020b0a1 100644
--- a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
+++ b/airbyte-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/airbyte-webapp/src/packages/cloud/views/auth/components/GitBlock/__snapshots__/GitBlock.test.tsx.snap b/airbyte-webapp/src/packages/cloud/views/auth/components/GitBlock/__snapshots__/GitBlock.test.tsx.snap
index 89806b82f62a..ade8e4f48b8d 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/components/GitBlock/__snapshots__/GitBlock.test.tsx.snap
+++ b/airbyte-webapp/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/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
index 39598ee8fa73..d0c19fcb223a 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
+++ b/airbyte-webapp/src/pages/ConnectionPage/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/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
index a7c421c30a87..7eac3efa49d1 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/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"