-
-
Notifications
You must be signed in to change notification settings - Fork 812
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: extract DeletePostModal from OrgPostCard to fix file-length…
… test
- Loading branch information
1 parent
0d75bef
commit 556efbe
Showing
4 changed files
with
149 additions
and
41 deletions.
There are no files selected for viewing
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,77 @@ | ||
| import React from 'react'; | ||
| import { render, screen, fireEvent } from '@testing-library/react'; | ||
| import { I18nextProvider } from 'react-i18next'; | ||
| import { vi } from 'vitest'; | ||
|
|
||
| import DeletePostModal from './DeletePostModal'; | ||
| import i18nForTest from 'utils/i18nForTest'; | ||
|
|
||
| describe('DeletePostModal', () => { | ||
| it('renders the delete modal with correct text', () => { | ||
| const mockOnHide = vi.fn(); | ||
| const mockOnDelete = vi.fn(); | ||
|
|
||
| render( | ||
| <I18nextProvider i18n={i18nForTest}> | ||
| <DeletePostModal | ||
| show={true} | ||
| onHide={mockOnHide} | ||
| onDelete={mockOnDelete} | ||
| /> | ||
| </I18nextProvider>, | ||
| ); | ||
|
|
||
| expect(screen.getByTestId('delete-post-modal')).toBeInTheDocument(); | ||
| expect(screen.getByText(/delete post/i)).toBeInTheDocument(); | ||
| expect( | ||
| screen.getByText(/do you want to remove this post\?/i), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('hides the modal when "No" is clicked', () => { | ||
| const mockOnHide = vi.fn(); | ||
| const mockOnDelete = vi.fn(); | ||
|
|
||
| render( | ||
| <I18nextProvider i18n={i18nForTest}> | ||
| <DeletePostModal | ||
| show={true} | ||
| onHide={mockOnHide} | ||
| onDelete={mockOnDelete} | ||
| /> | ||
| </I18nextProvider>, | ||
| ); | ||
|
|
||
| fireEvent.click(screen.getByTestId('deleteModalNoBtn')); | ||
| expect(mockOnHide).toHaveBeenCalledTimes(1); | ||
| expect(mockOnDelete).not.toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('calls onDelete and onHide when "Yes" is clicked', () => { | ||
| const mockOnHide = vi.fn(); | ||
| const mockOnDelete = vi.fn(); | ||
|
|
||
| render( | ||
| <I18nextProvider i18n={i18nForTest}> | ||
| <DeletePostModal | ||
| show={true} | ||
| onHide={mockOnHide} | ||
| onDelete={mockOnDelete} | ||
| /> | ||
| </I18nextProvider>, | ||
| ); | ||
|
|
||
| fireEvent.click(screen.getByTestId('deletePostBtn')); | ||
| expect(mockOnDelete).toHaveBeenCalledTimes(1); | ||
| expect(mockOnHide).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it('does not render the modal when show is false', () => { | ||
| const { queryByTestId } = render( | ||
| <I18nextProvider i18n={i18nForTest}> | ||
| <DeletePostModal show={false} onHide={vi.fn()} onDelete={vi.fn()} /> | ||
| </I18nextProvider>, | ||
| ); | ||
| expect(queryByTestId('delete-post-modal')).not.toBeInTheDocument(); | ||
| }); | ||
| }); |
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,56 @@ | ||
| import React, { type FC } from 'react'; | ||
| import { Modal, Button } from 'react-bootstrap'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| interface InterfaceDeletePostModalProps { | ||
| show: boolean; | ||
| onHide: () => void; | ||
| onDelete: () => void; | ||
| } | ||
|
|
||
| const DeletePostModal: FC<InterfaceDeletePostModalProps> = ({ | ||
| show, | ||
| onHide, | ||
| onDelete, | ||
| }) => { | ||
| const { t } = useTranslation('translation', { | ||
| keyPrefix: 'orgPostCard', | ||
| }); | ||
| const { t: tCommon } = useTranslation('common'); | ||
|
|
||
| const handleConfirmDelete = (): void => { | ||
| onDelete(); | ||
| onHide(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal show={show} onHide={onHide} data-testid="delete-post-modal"> | ||
| <Modal.Header> | ||
| <h5>{t('deletePost')}</h5> | ||
| <Button variant="danger" onClick={onHide}> | ||
| <i className="fa fa-times" /> | ||
| </Button> | ||
| </Modal.Header> | ||
| <Modal.Body>{t('deletePostMsg')}</Modal.Body> | ||
| <Modal.Footer> | ||
| <Button | ||
| variant="danger" | ||
| onClick={onHide} | ||
| data-testid="deleteModalNoBtn" | ||
| > | ||
| {tCommon('no')} | ||
| </Button> | ||
| <Button | ||
| type="button" | ||
| className="btn btn-success" | ||
| onClick={handleConfirmDelete} | ||
| data-testid="deletePostBtn" | ||
| > | ||
| {tCommon('yes')} | ||
| </Button> | ||
| </Modal.Footer> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default DeletePostModal; |
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