Improve tests (#871)

front/src/testing/ComponentStorybookLayout.tsx

@@ -9,6 +9,7 @@ const StyledLayout = styled.div`
   flex-direction: row;
 
   height: fit-content;
+  max-width: calc(100% - 40px);
   min-width: 300px;
   padding: 20px;
   width: fit-content;

front/src/testing/decorators.tsx

@@ -1,32 +0,0 @@
-import { ApolloProvider } from '@apollo/client';
-import { Decorator } from '@storybook/react';
-import { RecoilRoot } from 'recoil';
-
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
-import { CellContext } from '@/ui/table/states/CellContext';
-import { RowContext } from '@/ui/table/states/RowContext';
-
-import { ComponentStorybookLayout } from './ComponentStorybookLayout';
-import { mockedClient } from './mockedClient';
-
-export const RootDecorator: Decorator = (Story) => (
-  <RecoilRoot>
-    <ApolloProvider client={mockedClient}>
-      <Story />
-    </ApolloProvider>
-  </RecoilRoot>
-);
-
-export const ComponentDecorator: Decorator = (Story) => (
-  <ComponentStorybookLayout>
-    <Story />
-  </ComponentStorybookLayout>
-);
-
-export const CellPositionDecorator: Decorator = (Story) => (
-  <RecoilScope SpecificContext={RowContext}>
-    <RecoilScope SpecificContext={CellContext}>
-      <Story />
-    </RecoilScope>
-  </RecoilScope>
-);

front/src/testing/decorators/CellPositionDecorator.tsx

@@ -0,0 +1,13 @@
+import { Decorator } from '@storybook/react';
+
+import { RecoilScope } from '../../modules/ui/recoil-scope/components/RecoilScope';
+import { CellContext } from '../../modules/ui/table/states/CellContext';
+import { RowContext } from '../../modules/ui/table/states/RowContext';
+
+export const CellPositionDecorator: Decorator = (Story) => (
+  <RecoilScope SpecificContext={RowContext}>
+    <RecoilScope SpecificContext={CellContext}>
+      <Story />
+    </RecoilScope>
+  </RecoilScope>
+);

front/src/testing/decorators/ComponentDecorator.tsx

@@ -0,0 +1,9 @@
+import { Decorator } from '@storybook/react';
+
+import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
+
+export const ComponentDecorator: Decorator = (Story) => (
+  <ComponentStorybookLayout>
+    <Story />
+  </ComponentStorybookLayout>
+);

front/src/testing/decorators/ComponentWithRouterDecorator.tsx

@@ -0,0 +1,12 @@
+import { MemoryRouter } from 'react-router-dom';
+import { Decorator } from '@storybook/react';
+
+import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
+
+export const ComponentWithRouterDecorator: Decorator = (Story) => (
+  <ComponentStorybookLayout>
+    <MemoryRouter>
+      <Story />
+    </MemoryRouter>
+  </ComponentStorybookLayout>
+);

front/src/testing/decorators/ExhaustiveComponentDecorator.tsx

@@ -0,0 +1,110 @@
+import styled from '@emotion/styled';
+import { Decorator, StrictArgs } from '@storybook/react';
+
+function stateProps(state: string) {
+  switch (state) {
+    case 'default':
+      return {};
+    case 'hover':
+      return { className: 'hover' };
+    case 'active':
+      return { className: 'active' };
+    case 'disabled':
+      return { disabled: true };
+    default:
+      return {};
+  }
+}
+
+const StyledSizeTitle = styled.h1`
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledVariantTitle = styled.h1`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledStateTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-align: center;
+  text-transform: uppercase;
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const StyledSizeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledLineContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledComponentContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+function renderSize(
+  size: string,
+  variants: string[],
+  states: string[],
+  args: StrictArgs,
+  Story: React.FC<StrictArgs>,
+) {
+  return (
+    <StyledSizeContainer key={size}>
+      <StyledSizeTitle>{size}</StyledSizeTitle>
+      {variants.map((variant) => (
+        <div key={variant}>
+          <StyledVariantTitle>{variant}</StyledVariantTitle>
+          <StyledLineContainer>
+            {states.map((state) => (
+              <StyledComponentContainer key={`${variant}-container-${state}`}>
+                <StyledStateTitle>{state}</StyledStateTitle>
+                <Story
+                  args={{ ...args, variant: variant, ...stateProps(state) }}
+                />
+              </StyledComponentContainer>
+            ))}
+          </StyledLineContainer>
+        </div>
+      ))}
+    </StyledSizeContainer>
+  );
+}
+
+export const ExhaustiveComponentDecorator: Decorator = (Story, context) => {
+  const parameters = context.parameters;
+  return (
+    <StyledContainer>
+      {parameters.sizes.map((size: string) =>
+        renderSize(
+          size,
+          parameters.variants,
+          parameters.states,
+          context.args,
+          Story,
+        ),
+      )}
+    </StyledContainer>
+  );
+};

front/src/testing/decorators/RootDecorator.tsx

@@ -0,0 +1,13 @@
+import { ApolloProvider } from '@apollo/client';
+import { Decorator } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+
+import { mockedClient } from '../mockedClient';
+
+export const RootDecorator: Decorator = (Story) => (
+  <RecoilRoot>
+    <ApolloProvider client={mockedClient}>
+      <Story />
+    </ApolloProvider>
+  </RecoilRoot>
+);