feat: layout update to support admin area

Author: Hidetaka Okamoto

jest-setup.js

@@ -0,0 +1 @@
+require('@testing-library/jest-dom')

jest.config.js

@@ -1,6 +1,21 @@
 const {createJestConfig} = require('tsdx/dist/createJestConfig');
 const {paths} = require('tsdx/dist/constants');
 
+/**
+ * To support svg import
+ * @see https://www.npmjs.com/package/jest-svg-transformer
+ */
 const config = createJestConfig(undefined, paths.appRoot)
 config.transform["^.+\\.svg$"] = "jest-svg-transformer"
+
+/**
+ * For @testing-library/react
+ *
+ * @see https://github.com/testing-library/jest-dom#usage
+ **/
+if (config.setupFilesAfterEnv) {
+    config.setupFilesAfterEnv.push('<rootDir>/jest-setup.js')
+} else {
+    config.setupFilesAfterEnv = ['<rootDir>/jest-setup.js']
+}
 module.exports = config;

src/components/Layouts/Layouts.spec.tsx

@@ -1,10 +1,19 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { Default as Layouts } from './Layouts.stories';
+import { Layouts } from './Layouts';
+import { Default as LayoutsStory } from './Layouts.stories';
 
 describe('Layouts', () => {
   it('to match snapshot', () => {
-    const { asFragment } = render(<Layouts {...(Layouts.args as any)} />);
+    const { asFragment } = render(<LayoutsStory {...(LayoutsStory.args as any)} />);
     expect(asFragment()).toMatchSnapshot();
   });
+  it.each([
+    [undefined, 'shifter-dashboard'],
+    ['login' as const, 'shifter-dashboard-login'],
+    ['signup' as const, 'shifter-dashboard-signup'],
+  ])('variant is %p, should add the %p class name', (variant, expectedClassName) => {
+    const {container} = render(<Layouts variant={variant}>Dummy content</Layouts>)
+    expect(container.firstChild).toHaveClass(expectedClassName)
+  })
 });

src/components/Layouts/Layouts.stories.tsx

@@ -8,6 +8,12 @@ const meta: Meta = {
   parameters: {
     controls: { expanded: true },
   },
+  argTypes: {
+    variant: {
+      options: ['default', 'login', 'signup'],
+      control: {type: 'radio'}
+    }
+  }
 };
 
 export default meta;

src/components/Layouts/Layouts.tsx

@@ -1,7 +1,7 @@
 import React, { FC, PropsWithChildren, ReactNode } from 'react';
 
 export type LayoutsProps = PropsWithChildren<{
-  variant: 'login' | 'signup';
+  variant?: 'login' | 'signup';
   footer?: ReactNode;
 }>;
 export const Layouts: FC<LayoutsProps> = ({ children, variant, footer }) => {
@@ -14,6 +14,7 @@ export const Layouts: FC<LayoutsProps> = ({ children, variant, footer }) => {
       classNames.push('shifter-dashboard-login');
       break;
     default:
+      classNames.push('shifter-dashboard')
       break;
   }
   const className = classNames.join(' ');