-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1775 from qdraw/feature/202410_code_smell_17
mkdir move to separate component
- Loading branch information
Showing
6 changed files
with
240 additions
and
42 deletions.
There are no files selected for viewing
73 changes: 73 additions & 0 deletions
73
...p/src/components/molecules/menu-option-archive-rename/menu-option-archive-rename.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { fireEvent, render, screen } from "@testing-library/react"; | ||
| import React from "react"; | ||
| import { IArchiveProps } from "../../../interfaces/IArchiveProps"; | ||
| import * as ModalArchiveRename from "../../organisms/modal-archive-rename/modal-archive-rename"; | ||
| import { MenuOptionArchiveRename } from "./menu-option-archive-rename"; | ||
|
|
||
| describe("MenuOptionArchiveRename", () => { | ||
| const mockDispatch = jest.fn(); | ||
| const mockState = { fileIndexItem: {} } as unknown as IArchiveProps; | ||
| let modalSpy = jest.spyOn(ModalArchiveRename, "default"); | ||
|
|
||
| function mockModalHandleExit() { | ||
| modalSpy.mockReset(); | ||
| modalSpy = jest.spyOn(ModalArchiveRename, "default").mockImplementation((props) => { | ||
| props.handleExit(); | ||
| return <h1 data-test="modal-archive-mkdir">test</h1>; | ||
| }); | ||
| } | ||
|
|
||
| function mockModal() { | ||
| modalSpy.mockReset(); | ||
| modalSpy = jest.spyOn(ModalArchiveRename, "default").mockImplementation(() => { | ||
| return <h1 data-test="modal-archive-rename">test</h1>; | ||
| }); | ||
| } | ||
|
|
||
| const renderComponent = (readOnly = false) => { | ||
| return render( | ||
| <MenuOptionArchiveRename readOnly={readOnly} state={mockState} dispatch={mockDispatch} /> | ||
| ); | ||
| }; | ||
|
|
||
| it("should not show the modal initially", () => { | ||
| mockModal(); | ||
| const component = renderComponent(); | ||
| expect(screen.queryByTestId("modal-archive-rename")).not.toBeTruthy(); | ||
| expect(modalSpy).toHaveBeenCalledTimes(0); | ||
| component.unmount(); | ||
| }); | ||
|
|
||
| it("should open the modal when the button is clicked", () => { | ||
| mockModal(); | ||
| const component = renderComponent(); | ||
|
|
||
| fireEvent.click(screen.getByTestId("rename")); | ||
| expect(modalSpy).toHaveBeenCalledTimes(1); | ||
|
|
||
| expect(screen.getByTestId("modal-archive-rename")).toBeTruthy(); | ||
| component.unmount(); | ||
| }); | ||
|
|
||
| it("should close the modal when the handleExit function is called", () => { | ||
| const stateSpy = jest.spyOn(React, "useState").mockReturnValueOnce([true, jest.fn()]); | ||
| mockModalHandleExit(); | ||
|
|
||
| const component = renderComponent(); | ||
| fireEvent.click(screen.getByTestId("rename")); | ||
| expect(screen.getByTestId("rename")).toBeTruthy(); | ||
|
|
||
| expect(stateSpy).toHaveBeenCalledTimes(1); | ||
| expect(stateSpy).toHaveBeenCalledWith(false); | ||
| component.unmount(); | ||
| }); | ||
|
|
||
| it("should not open the modal if readOnly is true", () => { | ||
| mockModal(); | ||
|
|
||
| const component = renderComponent(true); | ||
| fireEvent.click(screen.getByTestId("rename")); | ||
| expect(screen.queryByTestId("modal-archive-rename")).not.toBeTruthy(); | ||
| component.unmount(); | ||
| }); | ||
| }); |
43 changes: 43 additions & 0 deletions
43
...entapp/src/components/molecules/menu-option-archive-rename/menu-option-archive-rename.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { useState } from "react"; | ||
| import { ArchiveAction } from "../../../contexts/archive-context"; | ||
| import { IArchiveProps } from "../../../interfaces/IArchiveProps"; | ||
| import localization from "../../../localization/localization.json"; | ||
| import MenuOptionModal from "../../atoms/menu-option-modal/menu-option-modal"; | ||
| import ModalArchiveRename from "../../organisms/modal-archive-rename/modal-archive-rename"; | ||
|
|
||
| interface IMenuOptionArchiveRenameProps { | ||
| readOnly: boolean; | ||
| state: IArchiveProps; | ||
| dispatch: React.Dispatch<ArchiveAction>; | ||
| } | ||
|
|
||
| export const MenuOptionArchiveRename: React.FunctionComponent<IMenuOptionArchiveRenameProps> = ({ | ||
| readOnly, | ||
| state, | ||
| dispatch | ||
| }) => { | ||
| const [isModalRenameFolder, setIsModalRenameFolder] = useState(false); | ||
|
|
||
| return ( | ||
| <> | ||
| {isModalRenameFolder && !readOnly && state.subPath !== "/" ? ( | ||
| <ModalArchiveRename | ||
| subPath={state.subPath} | ||
| dispatch={dispatch} | ||
| handleExit={() => { | ||
| setIsModalRenameFolder(!isModalRenameFolder); | ||
| }} | ||
| isOpen={isModalRenameFolder} | ||
| /> | ||
| ) : null} | ||
|
|
||
| <MenuOptionModal | ||
| isReadOnly={readOnly || state.subPath === "/"} | ||
| isSet={isModalRenameFolder} | ||
| set={() => setIsModalRenameFolder(!isModalRenameFolder)} | ||
| localization={localization.MessageRenameDir} | ||
| testName="rename" | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
75 changes: 75 additions & 0 deletions
75
...y/starsky/clientapp/src/components/molecules/menu-option-mkdir/menu-option-mkdir.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { fireEvent, render, screen } from "@testing-library/react"; | ||
| import React from "react"; | ||
| import { IArchiveProps } from "../../../interfaces/IArchiveProps"; | ||
| import * as ModalArchiveMkdir from "../../organisms/modal-archive-mkdir/modal-archive-mkdir"; | ||
| import { MenuOptionMkdir } from "./menu-option-mkdir"; | ||
|
|
||
| describe("MenuOptionMkdir", () => { | ||
| const mockDispatch = jest.fn(); | ||
| const mockState = { fileIndexItem: {} } as unknown as IArchiveProps; | ||
| let modalSpy = jest.spyOn(ModalArchiveMkdir, "default"); | ||
|
|
||
| function mockModalHandleExit() { | ||
| modalSpy.mockReset(); | ||
| modalSpy = jest.spyOn(ModalArchiveMkdir, "default").mockImplementation((props) => { | ||
| props.handleExit(); | ||
| return <h1 data-test="modal-archive-mkdir">test</h1>; | ||
| }); | ||
| } | ||
|
|
||
| function mockModal() { | ||
| modalSpy.mockReset(); | ||
| modalSpy = jest.spyOn(ModalArchiveMkdir, "default").mockImplementation(() => { | ||
| return <h1 data-test="modal-archive-mkdir">test</h1>; | ||
| }); | ||
| } | ||
|
|
||
| const renderComponent = (readOnly = false) => { | ||
| return render( | ||
| <MenuOptionMkdir readOnly={readOnly} state={mockState} dispatch={mockDispatch} /> | ||
| ); | ||
| }; | ||
|
|
||
| it("should not show the modal initially", () => { | ||
| mockModal(); | ||
| const component = renderComponent(); | ||
| expect(screen.queryByTestId("modal-archive-mkdir")).not.toBeTruthy(); | ||
| expect(modalSpy).toHaveBeenCalledTimes(0); | ||
| component.unmount(); | ||
| }); | ||
|
|
||
| it("should open the modal when the button is clicked", () => { | ||
| mockModal(); | ||
| const component = renderComponent(); | ||
| fireEvent.click(screen.getByTestId("mkdir")); | ||
| expect(modalSpy).toHaveBeenCalledTimes(1); | ||
|
|
||
| expect(screen.getByTestId("modal-archive-mkdir")).toBeTruthy(); | ||
| component.unmount(); | ||
| }); | ||
|
|
||
| it("should close the modal when the handleExit function is called", () => { | ||
| const stateSpy = jest.spyOn(React, "useState").mockReturnValueOnce([true, jest.fn()]); | ||
| mockModalHandleExit(); | ||
|
|
||
| const component = renderComponent(); | ||
| fireEvent.click(screen.getByTestId("mkdir")); | ||
| expect(screen.getByTestId("mkdir")).toBeTruthy(); | ||
|
|
||
| // Simulate closing the modal | ||
| fireEvent.click(screen.getByTestId("mkdir")); | ||
|
|
||
| expect(stateSpy).toHaveBeenCalledTimes(1); | ||
| expect(stateSpy).toHaveBeenCalledWith(false); | ||
| component.unmount(); | ||
| }); | ||
|
|
||
| it("should not open the modal if readOnly is true", () => { | ||
| mockModal(); | ||
|
|
||
| const component = renderComponent(true); | ||
| fireEvent.click(screen.getByTestId("mkdir")); | ||
| expect(screen.queryByTestId("modal-archive-mkdir")).not.toBeTruthy(); | ||
| component.unmount(); | ||
| }); | ||
| }); |
42 changes: 42 additions & 0 deletions
42
starsky/starsky/clientapp/src/components/molecules/menu-option-mkdir/menu-option-mkdir.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { useState } from "react"; | ||
| import { ArchiveAction } from "../../../contexts/archive-context"; | ||
| import { IArchiveProps } from "../../../interfaces/IArchiveProps"; | ||
| import localization from "../../../localization/localization.json"; | ||
| import MenuOptionModal from "../../atoms/menu-option-modal/menu-option-modal"; | ||
| import ModalArchiveMkdir from "../../organisms/modal-archive-mkdir/modal-archive-mkdir"; | ||
|
|
||
| interface IMenuOptionMkdirProps { | ||
| readOnly: boolean; | ||
| state: IArchiveProps; | ||
| dispatch: React.Dispatch<ArchiveAction>; | ||
| } | ||
|
|
||
| export const MenuOptionMkdir: React.FunctionComponent<IMenuOptionMkdirProps> = ({ | ||
| readOnly, | ||
| state, | ||
| dispatch | ||
| }) => { | ||
| const [isModalMkdirOpen, setIsModalMkdirOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <> | ||
| {/* Modal new directory */} | ||
| {isModalMkdirOpen && !readOnly ? ( | ||
| <ModalArchiveMkdir | ||
| state={state} | ||
| dispatch={dispatch} | ||
| handleExit={() => setIsModalMkdirOpen(!isModalMkdirOpen)} | ||
| isOpen={isModalMkdirOpen} | ||
| /> | ||
| ) : null} | ||
|
|
||
| <MenuOptionModal | ||
| isReadOnly={readOnly} | ||
| isSet={isModalMkdirOpen} | ||
| set={() => setIsModalMkdirOpen(!isModalMkdirOpen)} | ||
| localization={localization.MessageMkdir} | ||
| testName="mkdir" | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93b49a4There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Published on https://starskyapp.netlify.app as production
🚀 Deployed on https://671152a98de98d94298890e8--starskyapp.netlify.app