dialog を展開した際に背景のスクロールをロックするように修正

kuramapommel · Aug 28, 2024 · defa2c0 · defa2c0
1 parent 3d8acfe
commit defa2c0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 7 deletions.
diff --git a/sample/src/components/molecules/modals/modal.tsx b/sample/src/components/molecules/modals/modal.tsx
@@ -13,8 +13,14 @@ const Modal = React.memo(function Modal({
   onCancel,
 }: Props) {
   const dialogRef = useRef<HTMLDialogElement>(null)
-  const open = useCallback(() => dialogRef.current?.showModal(), [])
-  const close = useCallback(() => dialogRef.current?.close(), [])
+  const open = useCallback(() => {
+    dialogRef.current?.showModal()
+    document.body.classList?.add('overflow-hidden')
+  }, [])
+  const close = useCallback(() => {
+    dialogRef.current?.close()
+    document.body.classList?.remove('overflow-hidden')
+  }, [])
 
   useEffect(() => {
     const switchOpenClose = isOpen ? open : close
@@ -32,7 +38,7 @@ const Modal = React.memo(function Modal({
             onClick={onCancel}
           >
             <div
-              className="flex flex-col justify-center p-0 m-0"
+              className="flex flex-col justify-center p-0 m-0 overscroll-contain"
               onClick={(e) => e.stopPropagation()}
             >
               {children}

diff --git a/sample/src/hooks/__tests__/use-products.test.ts b/sample/src/hooks/__tests__/use-products.test.ts
@@ -36,6 +36,27 @@ test('should fetch and store products correctly', async () => {
         price: 2000,
         description: 'Description for product 2',
       },
+      {
+        id: 3,
+        name: 'Product 3',
+        image: 'https://placehold.jp/3d4070/ffffff/150x150.png',
+        price: 2500,
+        description: 'Description for product 2',
+      },
+      {
+        id: 4,
+        name: 'Product 4',
+        image: 'https://placehold.jp/3d4070/ffffff/150x150.png',
+        price: 3000,
+        description: 'Description for product 2',
+      },
+      {
+        id: 5,
+        name: 'Product 5',
+        image: 'https://placehold.jp/3d4070/ffffff/150x150.png',
+        price: 10000,
+        description: 'Description for product 2',
+      },
     ])
   })
 })

diff --git a/sample/src/pages/__tests__/product-list.test.tsx b/sample/src/pages/__tests__/product-list.test.tsx
@@ -85,8 +85,14 @@ describe('ProductList', () => {
   it('should display a list of products with their properties', async () => {
     expect(await screen.findByText('Product 1')).toBeInTheDocument()
     expect(await screen.findByText('Product 2')).toBeInTheDocument()
+    expect(await screen.findByText('Product 3')).toBeInTheDocument()
+    expect(await screen.findByText('Product 4')).toBeInTheDocument()
+    expect(await screen.findByText('Product 5')).toBeInTheDocument()
     expect(await screen.findByText('価格: 1,000円')).toBeInTheDocument()
     expect(await screen.findByText('価格: 2,000円')).toBeInTheDocument()
+    expect(await screen.findByText('価格: 2,500円')).toBeInTheDocument()
+    expect(await screen.findByText('価格: 3,000円')).toBeInTheDocument()
+    expect(await screen.findByText('価格: 10,000円')).toBeInTheDocument()
   })
 
   it('should open modal when clicking on "新規作成ボタン" and add a new product', async () => {
@@ -101,10 +107,10 @@ describe('ProductList', () => {
 
     await waitFor(() => {
       fireEvent.input(screen.getByLabelText('商品名'), {
-        target: { value: 'Product 3' },
+        target: { value: 'Product 100' },
       })
       fireEvent.input(screen.getByLabelText('商品単価'), {
-        target: { value: 3000 },
+        target: { value: 100 },
       })
       fireEvent.input(screen.getByLabelText('詳細'), {
         target: { value: 'Description for product 3' },
@@ -116,8 +122,8 @@ describe('ProductList', () => {
     expect(submitButton).toBeEnabled()
     fireEvent.submit(submitButton)
 
-    expect(await screen.findByText('Product 3')).toBeInTheDocument()
-    expect(await screen.findByText('価格: 3,000円')).toBeInTheDocument()
+    expect(await screen.findByText('Product 100')).toBeInTheDocument()
+    expect(await screen.findByText('価格: 100円')).toBeInTheDocument()
     expect(
       await screen.findByText('Description for product 3'),
     ).toBeInTheDocument()

diff --git a/sample/src/testing/mocks/handlers.ts b/sample/src/testing/mocks/handlers.ts
@@ -23,6 +23,27 @@ const initialProducts: Product[] = [
     price: 2000,
     description: 'Description for product 2',
   },
+  {
+    id: 3,
+    name: 'Product 3',
+    image: 'https://placehold.jp/3d4070/ffffff/150x150.png',
+    price: 2500,
+    description: 'Description for product 2',
+  },
+  {
+    id: 4,
+    name: 'Product 4',
+    image: 'https://placehold.jp/3d4070/ffffff/150x150.png',
+    price: 3000,
+    description: 'Description for product 2',
+  },
+  {
+    id: 5,
+    name: 'Product 5',
+    image: 'https://placehold.jp/3d4070/ffffff/150x150.png',
+    price: 10000,
+    description: 'Description for product 2',
+  },
 ]
 
 let products: Product[] = [...initialProducts]