chore: fix tests missing React import and snapshots

klarna-incubator · Nov 15, 2023 · d071268 · d071268
1 parent e810ab6
commit d071268
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 20 deletions.
diff --git a/app/src/components/model/board/__snapshots__/Board.spec.js.snap b/app/src/components/model/board/__snapshots__/Board.spec.js.snap
@@ -28,7 +28,9 @@ exports[`Board renders Board 1`] = `
             >
               <svg
                 aria-hidden="true"
+                aria-label="Toggle pointer mode - allows you to select components"
                 class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                data-mui-internal-clone-element="true"
                 data-testid="HighlightAltIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -51,7 +53,9 @@ exports[`Board renders Board 1`] = `
             >
               <svg
                 aria-hidden="true"
+                aria-label="Toggle pan mode - allows you move the diagram. Hint: you can also hold space"
                 class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                data-mui-internal-clone-element="true"
                 data-testid="PanToolIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
@@ -117,14 +121,16 @@ exports[`Board renders Board 1`] = `
               />
             </button>
             <button
-              aria-pressed="false"
-              class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
+              class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
               tabindex="0"
               type="button"
+              value="download-image"
             >
               <svg
                 aria-hidden="true"
+                aria-label="Download as image"
                 class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                data-mui-internal-clone-element="true"
                 data-testid="ScreenshotMonitorIcon"
                 focusable="false"
                 value="export-image"
@@ -141,16 +147,30 @@ exports[`Board renders Board 1`] = `
                 class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
               />
             </button>
+            <button
+              class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
+              tabindex="0"
+              type="button"
+              value="add-component"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                data-testid="AddIcon"
+                focusable="false"
+                value="add-component"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                />
+              </svg>
+              <span
+                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              />
+            </button>
           </div>
         </div>
-        <div
-          class="loading"
-        >
-          <div />
-          <div />
-          <div />
-          <div />
-        </div>
         <div
           class="active-users-overlay"
         >
@@ -166,6 +186,14 @@ exports[`Board renders Board 1`] = `
             />
           </div>
         </div>
+        <div
+          class="loading"
+        >
+          <div />
+          <div />
+          <div />
+          <div />
+        </div>
       </div>
     </div>
   </body>,
@@ -193,7 +221,9 @@ exports[`Board renders Board 1`] = `
           >
             <svg
               aria-hidden="true"
+              aria-label="Toggle pointer mode - allows you to select components"
               class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-mui-internal-clone-element="true"
               data-testid="HighlightAltIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -216,7 +246,9 @@ exports[`Board renders Board 1`] = `
           >
             <svg
               aria-hidden="true"
+              aria-label="Toggle pan mode - allows you move the diagram. Hint: you can also hold space"
               class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-mui-internal-clone-element="true"
               data-testid="PanToolIcon"
               focusable="false"
               viewBox="0 0 24 24"
@@ -282,14 +314,16 @@ exports[`Board renders Board 1`] = `
             />
           </button>
           <button
-            aria-pressed="false"
-            class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
+            class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
             tabindex="0"
             type="button"
+            value="download-image"
           >
             <svg
               aria-hidden="true"
+              aria-label="Download as image"
               class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-mui-internal-clone-element="true"
               data-testid="ScreenshotMonitorIcon"
               focusable="false"
               value="export-image"
@@ -306,16 +340,30 @@ exports[`Board renders Board 1`] = `
               class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
             />
           </button>
+          <button
+            class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
+            tabindex="0"
+            type="button"
+            value="add-component"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-testid="AddIcon"
+              focusable="false"
+              value="add-component"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              />
+            </svg>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </button>
         </div>
       </div>
-      <div
-        class="loading"
-      >
-        <div />
-        <div />
-        <div />
-        <div />
-      </div>
       <div
         class="active-users-overlay"
       >
@@ -331,6 +379,14 @@ exports[`Board renders Board 1`] = `
           />
         </div>
       </div>
+      <div
+        class="loading"
+      >
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
     </div>
   </div>,
   "debug": [Function],

diff --git a/app/src/components/model/board/components/AddComponentButton.js b/app/src/components/model/board/components/AddComponentButton.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { Add } from "@mui/icons-material";
 import {
   ListItemText,

diff --git a/app/src/components/model/board/components/DownloadImageButton.js b/app/src/components/model/board/components/DownloadImageButton.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { ScreenshotMonitor } from "@mui/icons-material";
 import { ToggleButton, Tooltip } from "@mui/material";
 import Konva from "konva";