move DeleteDeck to Menu

royisy · Jun 20, 2023 · 07165bc · 07165bc
1 parent a13d559
commit 07165bc
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 170 deletions.
diff --git a/src/components/AddDeck.tsx b/src/components/AddDeck.tsx
@@ -1,25 +1,36 @@
+import { XMarkIcon } from '@heroicons/react/24/solid'
 import { useContext } from 'react'
 import { CircleFlag } from 'react-circle-flags'
 import { MenuContext } from '../contexts/MenuContext'
 import { useAddDeck } from '../hooks/useAddDeck'
 import { useDeckList } from '../hooks/useDeckList'
 import { type CsvDeck } from '../models/CsvDeck'
-import { DeckList } from './DeckList'
-import { MenuHeader } from './MenuHeader'
 
 export const AddDeck = (): JSX.Element => {
+  const { setMenuComponent } = useContext(MenuContext)
   const deckList = useDeckList()
 
   return (
     <>
-      <MenuHeader title="Add Deck" />
-      <DeckList>
+      <div className="flex items-center p-4">
+        <button
+          className="btn-ghost btn-square btn"
+          onClick={() => {
+            setMenuComponent('menu')
+          }}
+          title="Close"
+        >
+          <XMarkIcon className="min-h-0 w-10" />
+        </button>
+        <h1 className="ml-2 text-2xl font-bold">Add Deck</h1>
+      </div>
+      <ul className="menu">
         <>
           {deckList.map((csvDeck) => (
             <DeckItem key={csvDeck.id} csvDeck={csvDeck} />
           ))}
         </>
-      </DeckList>
+      </ul>
     </>
   )
 }

diff --git a/src/components/DeckList.tsx b/src/components/DeckList.tsx
diff --git a/src/components/DeleteDeck.test.tsx b/src/components/DeleteDeck.test.tsx
diff --git a/src/components/DeleteDeck.tsx b/src/components/DeleteDeck.tsx
diff --git a/src/components/Home.test.tsx b/src/components/Home.test.tsx
@@ -43,12 +43,6 @@ vi.mock('./AddDeck', () => {
   return { AddDeck }
 })
 
-vi.mock('./DeleteDeck', () => {
-  const DeleteDeck = (): JSX.Element => <h1>DeleteDeck component</h1>
-  DeleteDeck.displayName = 'DeleteDeck'
-  return { DeleteDeck }
-})
-
 describe('Home', () => {
   it('should render deck title and words list', async () => {
     const appSetting = new AppSetting()
@@ -92,10 +86,10 @@ describe('Home', () => {
     expect(screen.getByText('AddDeck component')).toBeInTheDocument()
   })
 
-  it('should render Menu by default and can switch to DeleteDeck', () => {
+  it('should render Menu when Delete deck is clicked', () => {
     render(<Home />)
     expect(screen.getByText('Menu component')).toBeInTheDocument()
     fireEvent.click(screen.getByText('Delete deck'))
-    expect(screen.getByText('DeleteDeck component')).toBeInTheDocument()
+    expect(screen.getByText('Menu component')).toBeInTheDocument()
   })
 })
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -13,7 +13,6 @@ import { type Word } from '../models/Word'
 import { getAppSetting } from '../repositories/appSetting'
 import { AddDeck } from './AddDeck'
 import { DeckProgress } from './DeckProgress'
-import { DeleteDeck } from './DeleteDeck'
 import { Logo } from './Logo'
 import { Menu } from './Menu'
 
@@ -57,13 +56,15 @@ export const Home = (): JSX.Element => {
           <MenuContext.Provider
             value={{
               setMenuComponent,
+              menuComponent,
               toggleDrawerOpen,
               setDeckToDelete,
             }}
           >
-            {menuComponent === 'menu' && <Menu />}
+            {(menuComponent === 'menu' || menuComponent === 'delete-deck') && (
+              <Menu />
+            )}
             {menuComponent === 'add-deck' && <AddDeck />}
-            {menuComponent === 'delete-deck' && <DeleteDeck />}
           </MenuContext.Provider>
         </div>
       </div>

diff --git a/src/components/Menu.test.tsx b/src/components/Menu.test.tsx
@@ -42,15 +42,15 @@ describe('Menu', () => {
       <MenuContext.Provider
         value={{
           setMenuComponent: mockSetMenuComponent,
+          menuComponent: 'menu',
           toggleDrawerOpen: mockToggleDrawerOpen,
           setDeckToDelete: mockSetDeckToDelete,
         }}
       >
         <Menu />
       </MenuContext.Provider>
     )
-    const buttons = screen.getAllByRole('button')
-    const addButton = buttons[0]
+    const addButton = screen.getByTitle('Add Deck')
     fireEvent.click(addButton)
     expect(mockSetMenuComponent).toHaveBeenCalledWith('add-deck')
   })
@@ -60,16 +60,77 @@ describe('Menu', () => {
       <MenuContext.Provider
         value={{
           setMenuComponent: mockSetMenuComponent,
+          menuComponent: 'menu',
           toggleDrawerOpen: mockToggleDrawerOpen,
           setDeckToDelete: mockSetDeckToDelete,
         }}
       >
         <Menu />
       </MenuContext.Provider>
     )
-    const buttons = screen.getAllByRole('button')
-    const addButton = buttons[1]
-    fireEvent.click(addButton)
+    const deleteButton = screen.getByTitle('Delete Deck')
+    fireEvent.click(deleteButton)
     expect(mockSetMenuComponent).toHaveBeenCalledWith('delete-deck')
   })
+
+  it('should set menu component to menu', () => {
+    render(
+      <MenuContext.Provider
+        value={{
+          setMenuComponent: mockSetMenuComponent,
+          menuComponent: 'delete-deck',
+          toggleDrawerOpen: mockToggleDrawerOpen,
+          setDeckToDelete: mockSetDeckToDelete,
+        }}
+      >
+        <Menu />
+      </MenuContext.Provider>
+    )
+    const deleteButton = screen.getByTitle('Delete Deck')
+    fireEvent.click(deleteButton)
+    expect(mockSetMenuComponent).toHaveBeenCalledWith('menu')
+  })
+
+  it('should list decks to delete', async () => {
+    render(
+      <MenuContext.Provider
+        value={{
+          setMenuComponent: mockSetMenuComponent,
+          menuComponent: 'delete-deck',
+          toggleDrawerOpen: mockToggleDrawerOpen,
+          setDeckToDelete: mockSetDeckToDelete,
+        }}
+      >
+        <Menu />
+      </MenuContext.Provider>
+    )
+    await waitFor(() => {
+      expect(screen.getByText('deck 1')).toBeInTheDocument()
+      expect(screen.getByText('deck 2')).toBeInTheDocument()
+    })
+  })
+
+  it('should call setDeckToDelete with selected deck', async () => {
+    render(
+      <MenuContext.Provider
+        value={{
+          setMenuComponent: mockSetMenuComponent,
+          menuComponent: 'delete-deck',
+          toggleDrawerOpen: mockToggleDrawerOpen,
+          setDeckToDelete: mockSetDeckToDelete,
+        }}
+      >
+        <Menu />
+      </MenuContext.Provider>
+    )
+    const deck1Element = await screen.findByText('deck 1')
+    const parentLiElement = deck1Element.parentElement
+    const svgElement = parentLiElement?.querySelector('svg')
+    expect(svgElement).not.toBeNull()
+    if (svgElement == null) return
+    fireEvent.click(svgElement)
+    expect(mockSetDeckToDelete).toHaveBeenCalledWith(
+      new Deck(1, 'language 1', 'deck 1')
+    )
+  })
 })