frontend: fixed storybook config & updated snapshots

MUI5 has a different styling engine, therefore the snaposhots have changed
flatcar · Dec 18, 2024 · 874ef2b · 874ef2b
1 parent 6e9d2a4
commit 874ef2b
Show file tree

Hide file tree

Showing 41 changed files with 1,605 additions and 7,438 deletions.
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import themesConf from '../src/lib/themes';
-import { StylesProvider } from '@material-ui/core/styles';
+import { StylesProvider } from '@mui/styles';
 import '../src/i18n/config';
 import ThemeProviderNexti18n from '../src/i18n/ThemeProviderNexti18n';
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/__tests__/Common/SectionHeader.spec.js b/frontend/src/__tests__/Common/SectionHeader.spec.js
@@ -1,8 +1,9 @@
 import '../../i18n/config.ts';
+import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
-import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import SectionHeader from '../../components/common/SectionHeader';
+import themes from '../../lib/themes';
 
 describe('Section Header', () => {
   const minProps = {
@@ -16,9 +17,13 @@ describe('Section Header', () => {
   };
   it('renders section header correctly', () => {
     const { asFragment } = render(
-      <BrowserRouter>
-        <SectionHeader {...minProps} />
-      </BrowserRouter>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={themes['light']}>
+          <BrowserRouter>
+            <SectionHeader {...minProps} />
+          </BrowserRouter>
+        </ThemeProvider>
+      </StyledEngineProvider>
     );
     expect(asFragment()).toMatchSnapshot();
   });

diff --git a/frontend/src/__tests__/Common/__snapshots__/EmptyContent.spec.js.snap b/frontend/src/__tests__/Common/__snapshots__/EmptyContent.spec.js.snap
@@ -3,10 +3,10 @@
 exports[`Empty renders correct content 1`] = `
 <DocumentFragment>
   <div
-    class="MuiBox-root MuiBox-root-1"
+    class="MuiBox-root css-19midj6"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-alignCenter"
+      class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-12wjmzy-MuiTypography-root"
       data-testid="empty"
     >
       Some Dummy Content

diff --git a/frontend/src/__tests__/Common/__snapshots__/ListHeader.spec.js.snap b/frontend/src/__tests__/Common/__snapshots__/ListHeader.spec.js.snap
@@ -3,35 +3,32 @@
 exports[`List Header should render correct List Header actions 1`] = `
 <DocumentFragment>
   <div
-    class="MuiGrid-root makeStyles-sectionHeader-3 MuiGrid-container MuiGrid-align-items-xs-flex-start MuiGrid-justify-content-xs-space-between"
+    class="MuiGrid-root MuiGrid-container makeStyles-sectionHeader-2 css-eei0dj-MuiGrid-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-item"
+      class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <div>
         <button
           aria-label="add"
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
           data-testid="modal-button"
           tabindex="0"
           type="button"
         >
-          <span
-            class="MuiIconButton-label"
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge makeStyles-root-3 css-tzssek-MuiSvgIcon-root"
+            data-testid="AddIcon"
+            focusable="false"
+            viewBox="0 0 24 24"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root makeStyles-root-4 MuiSvgIcon-fontSizeLarge"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-            </svg>
-          </span>
+            <path
+              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
+            />
+          </svg>
           <span
-            class="MuiTouchRipple-root"
+            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
           />
         </button>
       </div>

diff --git a/frontend/src/__tests__/Common/__snapshots__/ListSearch.spec.js.snap b/frontend/src/__tests__/Common/__snapshots__/ListSearch.spec.js.snap
@@ -6,11 +6,11 @@ exports[`List Search should render correct ListSearch 1`] = `
     class="makeStyles-container-1"
   >
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline makeStyles-input-2"
+      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary makeStyles-input-2 css-z41pft-MuiInputBase-root-MuiInput-root"
     >
       <input
         aria-label="undefined"
-        class="MuiInputBase-input MuiInput-input"
+        class="MuiInputBase-input MuiInput-input css-1x51dt5-MuiInputBase-input-MuiInput-input"
         type="text"
         value=""
       />

diff --git a/frontend/src/__tests__/Common/__snapshots__/SectionHeader.spec.js.snap b/frontend/src/__tests__/Common/__snapshots__/SectionHeader.spec.js.snap
@@ -3,26 +3,26 @@
 exports[`Section Header renders section header correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiGrid-root makeStyles-sectionContainer-1 MuiGrid-container MuiGrid-align-items-xs-center"
+    class="MuiGrid-root MuiGrid-container makeStyles-sectionContainer-1 css-a8y23a-MuiGrid-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-item"
+      class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     >
       <nav
         aria-label="breadcrumbs"
-        class="MuiTypography-root MuiBreadcrumbs-root MuiTypography-body1 MuiTypography-colorTextSecondary"
+        class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-ojlt14-MuiTypography-root-MuiBreadcrumbs-root"
       >
         <ol
-          class="MuiBreadcrumbs-ol"
+          class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
         >
           <li
             class="MuiBreadcrumbs-li"
           >
             <span
-              class="MuiBox-root MuiBox-root-3 makeStyles-breadCrumbsItem-2"
+              class="makeStyles-breadCrumbsItem-2 MuiBox-root css-0"
             >
               <a
-                class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorPrimary"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1emptwe-MuiTypography-root-MuiLink-root"
                 href="/apps"
               >
                 Applications
@@ -31,24 +31,25 @@ exports[`Section Header renders section header correctly 1`] = `
           </li>
           <li
             aria-hidden="true"
-            class="MuiBreadcrumbs-separator"
+            class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
           >
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+              data-testid="NavigateNextIcon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <path
-                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
               />
             </svg>
           </li>
           <li
             class="MuiBreadcrumbs-li"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary"
+              class="MuiTypography-root MuiTypography-body1 css-1uzamrc-MuiTypography-root"
             >
               Flatcar
             </p>