update snapshots

chanzuckerberg · Jul 28, 2023 · e6728ba · e6728ba
1 parent 1078aaa
commit e6728ba
Show file tree

Hide file tree

Showing 21 changed files with 100 additions and 80 deletions.
diff --git a/fileTransformer.js b/fileTransformer.js
@@ -0,0 +1,41 @@
+const path = require("path");
+
+/**
+ * (thuang): Inspired by https://github.com/cwmoo740/jest-svg-transformer/issues/3#issuecomment-1229928189
+ * We export as { ReactComponent }, because we import svg that way
+ * E.g., import { ReactComponent as IconBacteriaLarge }
+ */
+module.exports = {
+  process(_, filePath) {
+    if (path.extname(filePath) !== ".svg") {
+      return {
+        code: `module.exports = ${JSON.stringify(path.basename(filePath))};`,
+      };
+    }
+
+    const name = `${path.basename(filePath, ".svg")}`
+      .split(/\W+/)
+      .map((x) => `${x.charAt(0).toUpperCase()}${x.slice(1)}`)
+      .join("");
+
+    return {
+      code: `
+        const React = require('react');
+        function ${name}(props) {
+          return React.createElement(
+            'svg',
+            Object.assign(
+              {},
+              props,
+              {
+                'data-file-name': ${name}.name,
+                'data-testid': ${name}.name,
+              }
+            )
+          );
+        }
+        module.exports = { ReactComponent: ${name} };
+      `,
+    };
+  },
+};
diff --git a/intersectionObserverMock.js b/intersectionObserverMock.js
@@ -0,0 +1,20 @@
+// Mock IntersectionObserver
+class IntersectionObserver {
+  observe = jest.fn();
+
+  disconnect = jest.fn();
+
+  unobserve = jest.fn();
+}
+
+Object.defineProperty(window, "IntersectionObserver", {
+  configurable: true,
+  value: IntersectionObserver,
+  writable: true,
+});
+
+Object.defineProperty(global, "IntersectionObserver", {
+  configurable: true,
+  value: IntersectionObserver,
+  writable: true,
+});
diff --git a/jest.common.config.js b/jest.common.config.js
@@ -1,10 +1,11 @@
 module.exports = {
   moduleDirectories: ["node_modules", "<rootDir>"],
   preset: "ts-jest",
-  setupFiles: ["jest-canvas-mock"],
+  setupFiles: ["jest-canvas-mock", "../../intersectionObserverMock.js"],
   testEnvironment: "jsdom",
   transform: {
-    "^.+\\.svg$": "svg-jest",
+    "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "../../fileTransformer.js",
     "^.+\\.tsx?$": [
       "ts-jest",
       {

diff --git a/package.json b/package.json
@@ -101,7 +101,6 @@
     "stylelint": "^13.11.0",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-standard": "^20.0.0",
-    "svg-jest": "^1.0.1",
     "ts-jest": "^29.1.1",
     "typescript": "^5.1.3",
     "url-loader": "^4.1.1"

diff --git a/packages/components/src/core/Accordion/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Accordion/__snapshots__/index.test.tsx.snap
@@ -26,8 +26,7 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
-          data-jest-file-name="IconChevronDownSmall.svg"
-          data-jest-svg-name="IconChevronDownSmall"
+          data-file-name="IconChevronDownSmall"
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
           focusable="false"

diff --git a/packages/components/src/core/Banner/__snapshots__/banner.test.tsx.snap b/packages/components/src/core/Banner/__snapshots__/banner.test.tsx.snap
@@ -17,8 +17,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
-          data-jest-file-name="IconInfoCircleLarge.svg"
-          data-jest-svg-name="IconInfoCircleLarge"
+          data-file-name="IconInfoCircleLarge"
           data-testid="IconInfoCircleLarge"
           fillcontrast="white"
           focusable="false"
@@ -40,8 +39,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
       <svg
         aria-hidden="true"
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-        data-jest-file-name="IconXMarkSmall.svg"
-        data-jest-svg-name="IconXMarkSmall"
+        data-file-name="IconXMarkSmall"
         data-testid="IconXMarkSmall"
         fillcontrast="white"
         focusable="false"

diff --git a/packages/components/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap
@@ -16,8 +16,7 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
       <svg
         aria-hidden="true"
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
-        data-jest-file-name="IconDownloadLarge.svg"
-        data-jest-svg-name="IconDownloadLarge"
+        data-file-name="IconDownloadLarge"
         data-testid="IconDownloadLarge"
         fillcontrast="white"
         focusable="false"
@@ -35,8 +34,7 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
       <svg
         aria-hidden="true"
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
-        data-jest-file-name="IconChevronDownSmall.svg"
-        data-jest-svg-name="IconChevronDownSmall"
+        data-file-name="IconChevronDownSmall"
         data-testid="IconChevronDownSmall"
         fillcontrast="white"
         focusable="false"

diff --git a/packages/components/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap
@@ -13,8 +13,7 @@ exports[`<ButtonIcon /> Default story renders snapshot 1`] = `
     <svg
       aria-hidden="true"
       class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-      data-jest-file-name="IconDotsHorizontal3Large.svg"
-      data-jest-svg-name="IconDotsHorizontal3Large"
+      data-file-name="IconDotsHorizontal3Large"
       data-testid="IconDotsHorizontal3Large"
       fillcontrast="white"
       focusable="false"

diff --git a/packages/components/src/core/CellHeader/__snapshots__/index.test.tsx.snap b/packages/components/src/core/CellHeader/__snapshots__/index.test.tsx.snap
@@ -27,8 +27,7 @@ exports[`<CellHeader /> Default story renders snapshot 1`] = `
               <svg
                 aria-hidden="true"
                 class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-                data-jest-file-name="IconChevronDownSmall.svg"
-                data-jest-svg-name="IconChevronDownSmall"
+                data-file-name="IconChevronDownSmall"
                 data-testid="IconChevronDownSmall"
                 fillcontrast="white"
                 focusable="false"

diff --git a/packages/components/src/core/ComplexFilter/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ComplexFilter/__snapshots__/index.test.tsx.snap
@@ -27,8 +27,7 @@ exports[`<ComplexFilter /> Default story renders snapshot 1`] = `
           <svg
             aria-hidden="true"
             class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
-            data-jest-file-name="IconChevronDownSmall.svg"
-            data-jest-svg-name="IconChevronDownSmall"
+            data-file-name="IconChevronDownSmall"
             data-testid="IconChevronDownSmall"
             fillcontrast="white"
             focusable="false"

diff --git a/packages/components/src/core/Dialog/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dialog/__snapshots__/index.test.tsx.snap
@@ -32,8 +32,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
       <svg
         aria-hidden="true"
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-        data-jest-file-name="IconXMarkSmall.svg"
-        data-jest-svg-name="IconXMarkSmall"
+        data-file-name="IconXMarkSmall"
         data-testid="IconXMarkSmall"
         fillcontrast="white"
         focusable="false"
@@ -112,8 +111,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
       <svg
         aria-hidden="true"
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-        data-jest-file-name="IconXMarkLarge.svg"
-        data-jest-svg-name="IconXMarkLarge"
+        data-file-name="IconXMarkLarge"
         data-testid="IconXMarkLarge"
         fillcontrast="white"
         focusable="false"
@@ -192,8 +190,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
       <svg
         aria-hidden="true"
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-        data-jest-file-name="IconXMarkLarge.svg"
-        data-jest-svg-name="IconXMarkLarge"
+        data-file-name="IconXMarkLarge"
         data-testid="IconXMarkLarge"
         fillcontrast="white"
         focusable="false"
@@ -272,8 +269,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
       <svg
         aria-hidden="true"
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-        data-jest-file-name="IconXMarkLarge.svg"
-        data-jest-svg-name="IconXMarkLarge"
+        data-file-name="IconXMarkLarge"
         data-testid="IconXMarkLarge"
         fillcontrast="white"
         focusable="false"

diff --git a/packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dropdown/__snapshots__/index.test.tsx.snap
@@ -24,8 +24,7 @@ exports[`<Dropdown /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
-          data-jest-file-name="IconChevronDownSmall.svg"
-          data-jest-svg-name="IconChevronDownSmall"
+          data-file-name="IconChevronDownSmall"
           data-testid="IconChevronDownSmall"
           fillcontrast="white"
           focusable="false"

diff --git a/packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputCheckbox/__snapshots__/index.test.tsx.snap
@@ -21,8 +21,7 @@ exports[`<InputCheckbox /> Default story renders snapshot 1`] = `
       <svg
         aria-hidden="true"
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-jest-file-name="IconCheckboxUnchecked.svg"
-        data-jest-svg-name="IconCheckboxUnchecked"
+        data-file-name="IconCheckboxUnchecked"
         data-testid="IconCheckboxUnchecked"
         fillcontrast="white"
         focusable="false"

diff --git a/packages/components/src/core/InputDropdown/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputDropdown/__snapshots__/index.test.tsx.snap
@@ -31,8 +31,7 @@ exports[`<InputDropdown /> Default story renders snapshot 1`] = `
           <svg
             aria-hidden="true"
             class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-tr2xv3-MuiSvgIcon-root"
-            data-jest-file-name="IconChevronDownSmall.svg"
-            data-jest-svg-name="IconChevronDownSmall"
+            data-file-name="IconChevronDownSmall"
             data-testid="IconChevronDownSmall"
             fillcontrast="white"
             focusable="false"

diff --git a/packages/components/src/core/InputRadio/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputRadio/__snapshots__/index.test.tsx.snap
@@ -25,8 +25,7 @@ exports[`<InputRadio /> Default story renders snapshot 1`] = `
       <svg
         aria-hidden="true"
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-jest-file-name="IconRadioChecked.svg"
-        data-jest-svg-name="IconRadioChecked"
+        data-file-name="IconRadioChecked"
         data-testid="IconRadioChecked"
         fillcontrast="white"
         focusable="false"

diff --git a/packages/components/src/core/LoadingIndicator/__snapshots__/index.test.tsx.snap b/packages/components/src/core/LoadingIndicator/__snapshots__/index.test.tsx.snap
@@ -10,8 +10,7 @@ exports[`<LoadingIndicator /> Default story renders snapshot 1`] = `
     <svg
       aria-hidden="true"
       class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
-      data-jest-file-name="IconLoadingLarge.svg"
-      data-jest-svg-name="IconLoadingLarge"
+      data-file-name="IconLoadingLarge"
       data-testid="IconLoadingLarge"
       fillcontrast="white"
       focusable="false"

diff --git a/packages/components/src/core/Pagination/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Pagination/__snapshots__/index.test.tsx.snap
@@ -21,8 +21,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-          data-jest-file-name="IconChevronLeftSmall.svg"
-          data-jest-svg-name="IconChevronLeftSmall"
+          data-file-name="IconChevronLeftSmall"
           data-testid="IconChevronLeftSmall"
           fillcontrast="white"
           focusable="false"
@@ -71,8 +70,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-          data-jest-file-name="IconDotsHorizontal3Small.svg"
-          data-jest-svg-name="IconDotsHorizontal3Small"
+          data-file-name="IconDotsHorizontal3Small"
           data-testid="IconDotsHorizontal3Small"
           fillcontrast="white"
           focusable="false"
@@ -105,8 +103,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
-          data-jest-file-name="IconChevronRightSmall.svg"
-          data-jest-svg-name="IconChevronRightSmall"
+          data-file-name="IconChevronRightSmall"
           data-testid="IconChevronRightSmall"
           fillcontrast="white"
           focusable="false"

diff --git a/packages/components/src/core/SegmentedControl/__snapshots__/index.test.tsx.snap b/packages/components/src/core/SegmentedControl/__snapshots__/index.test.tsx.snap
@@ -23,8 +23,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
-          data-jest-file-name="IconListSmall.svg"
-          data-jest-svg-name="IconListSmall"
+          data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
           focusable="false"
@@ -51,8 +50,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
-          data-jest-file-name="IconListSmall.svg"
-          data-jest-svg-name="IconListSmall"
+          data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
           focusable="false"
@@ -79,8 +77,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
-          data-jest-file-name="IconListSmall.svg"
-          data-jest-svg-name="IconListSmall"
+          data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
           focusable="false"
@@ -107,8 +104,7 @@ exports[`<SegmentedControl /> Default story renders snapshot 1`] = `
         <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
-          data-jest-file-name="IconListSmall.svg"
-          data-jest-svg-name="IconListSmall"
+          data-file-name="IconListSmall"
           data-testid="IconListSmall"
           fillcontrast="white"
           focusable="false"