From 9312838ff8ae9a71c0a6327ed601e7fb20662cf9 Mon Sep 17 00:00:00 2001
From: vatl1x <vadimkul321@yandex.ru>
Date: Fri, 12 Jun 2026 19:40:39 +0300
Subject: [PATCH 1/2] YH-2078: add tests for DeleteButton

---
 .../ui/DeleteButton/DeleteButton.test.tsx     | 103 ++++++++++++++++++
 src/shared/ui/DeleteButton/DeleteButton.tsx   |   2 +-
 2 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/shared/ui/DeleteButton/DeleteButton.test.tsx

diff --git a/src/shared/ui/DeleteButton/DeleteButton.test.tsx b/src/shared/ui/DeleteButton/DeleteButton.test.tsx
new file mode 100644
index 000000000..606496db2
--- /dev/null
+++ b/src/shared/ui/DeleteButton/DeleteButton.test.tsx
@@ -0,0 +1,103 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Translation } from '@/shared/config';
+import { renderComponent } from '@/shared/libs';
+import type { TooltipProps } from '@/shared/ui/Tooltip';
+
+import { DeleteButton, DeleteButtonProps } from './DeleteButton';
+
+type OverrideProps = Partial<DeleteButtonProps>;
+
+jest.mock('@/shared/ui/Tooltip', () => ({
+	Tooltip: ({ children, placement, shouldShowTooltip, title, ...rest }: TooltipProps) => (
+		<>
+			{children}
+
+			{shouldShowTooltip && (
+				<div role="tooltip" data-placement={placement} {...rest}>
+					{title}
+				</div>
+			)}
+		</>
+	),
+}));
+
+const renderDeleteButton = (props: OverrideProps = {}) => {
+	const { onDelete = jest.fn(), ...rest } = props;
+
+	renderComponent(<DeleteButton onDelete={onDelete} {...rest} />);
+
+	return { onDelete, user: userEvent.setup() };
+};
+
+describe('DeleteButton', () => {
+	test('render button text', () => {
+		renderDeleteButton();
+
+		expect(screen.getByText(Translation.DELETE)).toBeInTheDocument();
+	});
+
+	test('render tooltip title when button disabled', async () => {
+		renderDeleteButton({ disabled: true });
+
+		const tooltip = await screen.findByRole('tooltip');
+		expect(tooltip).toHaveTextContent(Translation.TOOLTIP_COLLECTION_DISABLED_INFO);
+	});
+
+	test('render without isDetailPage prop', async () => {
+		renderDeleteButton({ disabled: true });
+
+		const tooltip = await screen.findByRole('tooltip');
+		expect(tooltip).toHaveAttribute('data-placement', 'left');
+	});
+
+	test('render with isDetailPage equal true', async () => {
+		renderDeleteButton({ disabled: true, isDetailPage: true });
+
+		const tooltip = await screen.findByRole('tooltip');
+		expect(tooltip).toHaveAttribute('data-placement', 'bottom-start');
+	});
+
+	test('not render Tooltip when showTooltip equal false', () => {
+		renderDeleteButton({ disabled: true, showTooltip: false });
+
+		const tooltip = screen.queryByRole('tooltip');
+		expect(tooltip).not.toBeInTheDocument();
+	});
+
+	test('render modal message after click delete button', async () => {
+		const { user } = renderDeleteButton();
+
+		await user.click(screen.getByRole('button'));
+		expect(screen.getByText(Translation.MODAL_DELETE_TITLE)).toBeInTheDocument();
+	});
+
+	test('call onDelete when confirm delete in modal', async () => {
+		const { onDelete, user } = renderDeleteButton();
+
+		await user.click(screen.getByRole('button'));
+
+		const confirmButton = screen.getByRole('button', {
+			name: Translation.MODAL_ACTIONS_OK,
+		});
+
+		await user.click(confirmButton);
+
+		expect(onDelete).toHaveBeenCalledTimes(1);
+	});
+
+	test('does not call onDelete when cancel delete in modal', async () => {
+		const { onDelete, user } = renderDeleteButton();
+
+		await user.click(screen.getByRole('button'));
+
+		const cancelButton = screen.getByRole('button', {
+			name: Translation.MODAL_ACTIONS_CANCEL,
+		});
+
+		await user.click(cancelButton);
+
+		expect(onDelete).not.toHaveBeenCalled();
+	});
+});
diff --git a/src/shared/ui/DeleteButton/DeleteButton.tsx b/src/shared/ui/DeleteButton/DeleteButton.tsx
index a4dfaac7d..94fa6d21a 100644
--- a/src/shared/ui/DeleteButton/DeleteButton.tsx
+++ b/src/shared/ui/DeleteButton/DeleteButton.tsx
@@ -7,7 +7,7 @@ import { Button } from '@/shared/ui/Button';
 import { Icon } from '@/shared/ui/Icon';
 import { Tooltip } from '@/shared/ui/Tooltip';
 
-interface DeleteButtonProps {
+export interface DeleteButtonProps {
 	onDelete: () => void;
 	isDetailPage?: boolean;
 	disabled?: boolean;

From 85ace0a98714cf53005ce5576bcabc2ae0431f81 Mon Sep 17 00:00:00 2001
From: vatl1x <vadimkul321@yandex.ru>
Date: Sat, 13 Jun 2026 19:50:37 +0300
Subject: [PATCH 2/2] YH-2078: fix aria-label in DeleteButton

---
 src/shared/ui/DeleteButton/DeleteButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/ui/DeleteButton/DeleteButton.tsx b/src/shared/ui/DeleteButton/DeleteButton.tsx
index 94fa6d21a..6d5b71c23 100644
--- a/src/shared/ui/DeleteButton/DeleteButton.tsx
+++ b/src/shared/ui/DeleteButton/DeleteButton.tsx
@@ -42,7 +42,7 @@ export const DeleteButton = ({
 			>
 				<Button
 					disabled={disabled}
-					aria-label="Large"
+					aria-label={t(buttonText)}
 					style={{
 						width: isDetailPage ? 'auto' : '100%',
 						padding: isDetailPage ? '0 32px' : '6px 10px',