Merge pull request #89 from ikmnjrd/dev

Dev
ikmnjrd · Aug 11, 2023 · 67eb4ca · 67eb4ca
2 parents f1414a7 + 33c3fca
commit 67eb4ca
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 14 deletions.
diff --git a/__tests__/unit/Modal.test.tsx b/__tests__/unit/Modal.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import {
+  render,
+  screen,
+  fireEvent,
+} from '@testing-library/react'
+import Modal from '~/components/Modal/Modal'
+
+// jest.mock('~/hooks/useModal', () => {
+//   return {
+//     useModal: jest.fn(() => ({
+//       onClickOpenBtn: jest.fn(),
+//       onClickCloseBtn: jest.fn(),
+//       dialogRef: {
+//         current: {
+//           showModal: jest.fn(),
+//           close: jest.fn(),
+//         },
+//       },
+//     })),
+//   }
+// })
+
+describe('Modal', () => {
+  beforeAll(() => {
+    // ISSUE: https://github.com/jsdom/jsdom/issues/3294
+    HTMLDialogElement.prototype.show = jest.fn()
+    HTMLDialogElement.prototype.showModal = jest.fn()
+    HTMLDialogElement.prototype.close = jest.fn()
+  })
+
+  it.skip('Click OpenButton', async () => {
+    const { container } = render(<Modal />)
+
+    // const spy = jest.spyOn(Modal.prototype, 'onClickOpenBtn')
+
+    const dialog = container.querySelector('dialog')
+
+    expect(dialog?.open).toBe(false)
+
+    const openButton = screen.getByRole('button', {
+      name: /Open Modal/i,
+    })
+    openButton.click()
+    // fireEvent.click(openButton)
+
+    const dialogAfter = container.querySelector('dialog')
+
+    expect(dialogAfter?.open).toBe(true)
+  })
+})
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import DarkModeButton from '~/components/DarkModeButton'
 import Modal from '~/components/Modal/Modal'
+import Search from '~/components/Search'
 
 export default function Header() {
   return (
@@ -18,10 +19,11 @@ export default function Header() {
 
       {/* Right Menu */}
       <nav className="text-right">
-        <Modal>
-          <span className="header-text mr-4 md:text-3xl text-2xl font-serif decoration-dotted hover:opacity-50 hover:underline active:opacity-30">
-            Search
-          </span>
+        <Modal
+          label="Search"
+          labelClass="header-text mr-4 md:text-3xl text-2xl font-serif decoration-dotted hover:opacity-50 hover:underline active:opacity-30"
+        >
+          <Search />
         </Modal>
         <Link href="/about" passHref>
           <a className="header-text mr-4 md:text-3xl text-2xl font-serif decoration-dotted hover:opacity-50 hover:underline active:opacity-30">

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -1,30 +1,33 @@
 import {
   useEffect,
-  createRef,
+  useRef,
   PropsWithChildren,
   useCallback,
 } from 'react'
 import styles from './modal.module.css'
-import Search from '~/components/Search'
 
 /**
  * TODO: overscroll-behaviorが効かないので、聞くようにする。
  */
-export default function Modal({ children }: PropsWithChildren) {
-  const dialogRef = createRef<HTMLDialogElement>()
+export default function Modal({
+  children,
+  label,
+  labelClass,
+}: PropsWithChildren<{ labelClass?: string; label?: string }>) {
+  const dialogRef = useRef<HTMLDialogElement>(null)
 
-  const onClickOpenBtn = () => {
+  function onClickOpenBtn() {
     dialogRef.current?.showModal()
   }
 
-  const onClickCloseBtn = () => {
+  function onClickCloseBtn() {
     dialogRef.current?.close()
   }
 
   const handleKeydownDialogContainer = useCallback(
     (event: KeyboardEvent) => {
       if (event.code === 'Escape') {
-        onClickCloseBtn()
+        onClickOpenBtn()
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -47,8 +50,14 @@ export default function Modal({ children }: PropsWithChildren) {
 
   return (
     <>
-      <button type="button" onClick={onClickOpenBtn}>
-        {children || 'Open Modal'}
+      <button
+        type="button"
+        onClick={onClickOpenBtn}
+        data-test="dialog-open-btn"
+      >
+        <span className={labelClass}>
+          {label || 'Open Modal'}
+        </span>
       </button>
       <dialog
         className={`${styles.modal} ${styles.micromodal__slide}`}
@@ -65,7 +74,7 @@ export default function Modal({ children }: PropsWithChildren) {
             aria-modal="true"
             onClick={(e) => e.stopPropagation()}
           >
-            <Search />
+            {children}
           </div>
         </div>
       </dialog>