Adding storybook tests on meta-types/display/components (#1862)

* working on a story for MoneyFieldDisplay

* Write test on MoneyDisplayField

front/src/testing/ComponentStorybookLayout.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-const StyledLayout = styled.div`
+const StyledLayout = styled.div<{ width?: number }>`
   background: ${({ theme }) => theme.background.primary};
   border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 5px;
@@ -12,13 +12,17 @@ const StyledLayout = styled.div`
   max-width: calc(100% - 40px);
   min-width: 300px;
   padding: 20px;
-  width: fit-content;
+  width: ${({ width }) => (width ? width + 'px' : 'fit-content')};
 `;
 
-type OwnProps = {
+type ComponentStorybookLayoutProps = {
+  width?: number;
   children: JSX.Element;
 };
 
-export const ComponentStorybookLayout = ({ children }: OwnProps) => (
-  <StyledLayout>{children}</StyledLayout>
+export const ComponentStorybookLayout = ({
+  width,
+  children,
+}: ComponentStorybookLayoutProps) => (
+  <StyledLayout width={width}>{children}</StyledLayout>
 );

front/src/testing/decorators/CatalogDecorator.tsx

@@ -108,41 +108,47 @@ export const CatalogDecorator: Decorator = (Story, context) => {
         <StyledColumnContainer key={value4}>
           <StyledColumnTitle>
             {dimension4.labels?.(value4) ??
-              (typeof value4 === 'string' ? value4 : '')}
+              (['string', 'number'].includes(typeof value4) ? value4 : '')}
           </StyledColumnTitle>
           {dimension3.values.map((value3: any) => (
             <StyledRowsContainer key={value3}>
               <StyledRowsTitle>
                 {dimension3.labels?.(value3) ??
-                  (typeof value3 === 'string' ? value3 : '')}
+                  (['string', 'number'].includes(typeof value3) ? value3 : '')}
               </StyledRowsTitle>
               {dimension2.values.map((value2: any) => (
                 <StyledRowContainer key={value2}>
                   <StyledRowTitle>
                     {dimension2.labels?.(value2) ??
-                      (typeof value2 === 'string' ? value2 : '')}
+                      (['string', 'number'].includes(typeof value2)
+                        ? value2
+                        : '')}
                   </StyledRowTitle>
-                  {dimension1.values.map((value1: any) => (
-                    <StyledCellContainer key={value1} id={value1}>
-                      <StyledElementTitle>
-                        {dimension1.labels?.(value1) ??
-                          (typeof value1 === 'string' ? value1 : '')}
-                      </StyledElementTitle>
-                      <StyledElementContainer
-                        width={options?.elementContainer?.width}
-                      >
-                        <Story
-                          args={{
-                            ...context.args,
-                            ...dimension1.props(value1),
-                            ...dimension2.props(value2),
-                            ...dimension3.props(value3),
-                            ...dimension4.props(value4),
-                          }}
-                        />
-                      </StyledElementContainer>
-                    </StyledCellContainer>
-                  ))}
+                  {dimension1.values.map((value1: any) => {
+                    return (
+                      <StyledCellContainer key={value1} id={value1}>
+                        <StyledElementTitle>
+                          {dimension1.labels?.(value1) ??
+                            (['string', 'number'].includes(typeof value1)
+                              ? value1
+                              : '')}
+                        </StyledElementTitle>
+                        <StyledElementContainer
+                          width={options?.elementContainer?.width}
+                        >
+                          <Story
+                            args={{
+                              ...context.args,
+                              ...dimension1.props(value1),
+                              ...dimension2.props(value2),
+                              ...dimension3.props(value3),
+                              ...dimension4.props(value4),
+                            }}
+                          />
+                        </StyledElementContainer>
+                      </StyledCellContainer>
+                    );
+                  })}
                 </StyledRowContainer>
               ))}
             </StyledRowsContainer>

front/src/testing/decorators/ComponentDecorator.tsx

@@ -2,8 +2,12 @@ import { Decorator } from '@storybook/react';
 
 import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
 
-export const ComponentDecorator: Decorator = (Story) => (
-  <ComponentStorybookLayout>
-    <Story />
-  </ComponentStorybookLayout>
-);
+export const ComponentDecorator: Decorator = (Story, context) => {
+  const { container } = context.parameters;
+
+  return (
+    <ComponentStorybookLayout width={container?.width}>
+      <Story />
+    </ComponentStorybookLayout>
+  );
+};