From a1011f0c012bf869ea7613e76ac3fec3f5407f70 Mon Sep 17 00:00:00 2001
From: alesiahil <112590025+alesiahil@users.noreply.github.com>
Date: Fri, 15 Aug 2025 00:00:29 +0300
Subject: [PATCH 1/2] fix(toolbar): 21890 enable mouse wheel horizontal scroll

---
 .../ToolbarContent/ToolbarContent.test.tsx    | 49 +++++++++++++++++++
 .../ToolbarContent/ToolbarContent.tsx         |  2 +-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/features/toolbar/components/ToolbarContent/ToolbarContent.test.tsx

diff --git a/src/features/toolbar/components/ToolbarContent/ToolbarContent.test.tsx b/src/features/toolbar/components/ToolbarContent/ToolbarContent.test.tsx
new file mode 100644
index 000000000..5796ff54b
--- /dev/null
+++ b/src/features/toolbar/components/ToolbarContent/ToolbarContent.test.tsx
@@ -0,0 +1,49 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { test, expect, vi } from 'vitest';
+
+vi.mock('~features/toolbar/hooks/use-toolbar-content', () => ({
+  useToolbarContent: () => [
+    {
+      buttons: [
+        {
+          id: 'test-control',
+          settings: {} as any,
+          stateAtom: {} as any,
+        },
+      ],
+    },
+  ],
+}));
+
+vi.mock('../ToolbarControl/ToolbarControl', () => ({
+  ToolbarControl: ({ id }: { id: string }) => (
+    <div data-testid={id} style={{ width: '300px' }} />
+  ),
+}));
+
+vi.mock('../ToolbarButton/ToolbarButton', () => ({
+  ToolbarButton: () => <div />,
+}));
+
+vi.mock('@konturio/default-icons', () => ({}));
+vi.mock('@konturio/default-icons/tslib/index.js', () => ({}));
+
+test('scrollLeft changes on vertical wheel events', async () => {
+  const { ToolbarContent } = await import('./ToolbarContent');
+  const { getByTestId } = render(<ToolbarContent />);
+  const scroll = getByTestId('toolbar-content');
+
+  Object.defineProperty(scroll, 'scrollWidth', { value: 300, configurable: true });
+  Object.defineProperty(scroll, 'clientWidth', { value: 100, configurable: true });
+
+  scroll.dispatchEvent(new WheelEvent('wheel', { deltaY: 50, bubbles: true }));
+
+  expect(
+    (scroll as HTMLDivElement).scrollLeft > 0,
+    `scrollLeft should change after wheel event, got ${(scroll as HTMLDivElement).scrollLeft}`,
+  ).toBe(true);
+});
diff --git a/src/features/toolbar/components/ToolbarContent/ToolbarContent.tsx b/src/features/toolbar/components/ToolbarContent/ToolbarContent.tsx
index e79b6ca60..40101de55 100644
--- a/src/features/toolbar/components/ToolbarContent/ToolbarContent.tsx
+++ b/src/features/toolbar/components/ToolbarContent/ToolbarContent.tsx
@@ -11,7 +11,7 @@ export const ToolbarContent = () => {
   useWheelHorizontalScroll(scrollRef);
 
   return (
-    <div className={s.toolbarContent}>
+    <div ref={scrollRef} className={s.toolbarContent} data-testid="toolbar-content">
       {toolbarContent.map(({ id, settings, stateAtom }) => (
         <ToolbarControl
           id={id}

From 03bf9350e3960699ecca554337284190d954618b Mon Sep 17 00:00:00 2001
From: Darafei Praliaskouski <darafei@kontur.io>
Date: Wed, 27 Aug 2025 13:57:32 +0300
Subject: [PATCH 2/2] Delete
 src/features/toolbar/components/ToolbarContent/ToolbarContent.test.tsx

---
 .../ToolbarContent/ToolbarContent.test.tsx    | 49 -------------------
 1 file changed, 49 deletions(-)
 delete mode 100644 src/features/toolbar/components/ToolbarContent/ToolbarContent.test.tsx

diff --git a/src/features/toolbar/components/ToolbarContent/ToolbarContent.test.tsx b/src/features/toolbar/components/ToolbarContent/ToolbarContent.test.tsx
deleted file mode 100644
index 5796ff54b..000000000
--- a/src/features/toolbar/components/ToolbarContent/ToolbarContent.test.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * @vitest-environment happy-dom
- */
-import React from 'react';
-import { render } from '@testing-library/react';
-import { test, expect, vi } from 'vitest';
-
-vi.mock('~features/toolbar/hooks/use-toolbar-content', () => ({
-  useToolbarContent: () => [
-    {
-      buttons: [
-        {
-          id: 'test-control',
-          settings: {} as any,
-          stateAtom: {} as any,
-        },
-      ],
-    },
-  ],
-}));
-
-vi.mock('../ToolbarControl/ToolbarControl', () => ({
-  ToolbarControl: ({ id }: { id: string }) => (
-    <div data-testid={id} style={{ width: '300px' }} />
-  ),
-}));
-
-vi.mock('../ToolbarButton/ToolbarButton', () => ({
-  ToolbarButton: () => <div />,
-}));
-
-vi.mock('@konturio/default-icons', () => ({}));
-vi.mock('@konturio/default-icons/tslib/index.js', () => ({}));
-
-test('scrollLeft changes on vertical wheel events', async () => {
-  const { ToolbarContent } = await import('./ToolbarContent');
-  const { getByTestId } = render(<ToolbarContent />);
-  const scroll = getByTestId('toolbar-content');
-
-  Object.defineProperty(scroll, 'scrollWidth', { value: 300, configurable: true });
-  Object.defineProperty(scroll, 'clientWidth', { value: 100, configurable: true });
-
-  scroll.dispatchEvent(new WheelEvent('wheel', { deltaY: 50, bubbles: true }));
-
-  expect(
-    (scroll as HTMLDivElement).scrollLeft > 0,
-    `scrollLeft should change after wheel event, got ${(scroll as HTMLDivElement).scrollLeft}`,
-  ).toBe(true);
-});