diff --git a/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx b/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx
index fa3fb71524..69df65ddeb 100644
--- a/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx
+++ b/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, fireEvent, waitFor } from '@testing-library/react';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
@@ -15,9 +15,9 @@ describe('FileUploaderInput', () => {
validationTextPropsTest(FileUploaderInput, '.FileUploaderInput__validationText');
it('should have drag-and-drop listeners in CSR when draggable is supported', () => {
- render();
+ render();
- const dropZone = screen.getByLabelText(/upload/i).parentElement;
+ const dropZone = screen.getAllByTestId('test')[0];
expect(dropZone).toHaveAttribute('ondragover');
expect(dropZone).toHaveAttribute('ondragenter');
@@ -26,7 +26,7 @@ describe('FileUploaderInput', () => {
});
it('should not have drag-and-drop listeners in SSR', () => {
- const ui = ;
+ const ui = ;
const container = document.createElement('div');
document.body.appendChild(container);
container.innerHTML = ReactDOMServer.renderToString(ui);
@@ -35,7 +35,7 @@ describe('FileUploaderInput', () => {
render(ui, { hydrate: true, container });
});
- const dropZone = screen.getByLabelText(/upload/i).parentElement;
+ const dropZone = screen.getAllByTestId('test')[0];
expect(dropZone).not.toHaveAttribute('ondragover');
expect(dropZone).not.toHaveAttribute('ondragenter');
@@ -43,3 +43,71 @@ describe('FileUploaderInput', () => {
expect(dropZone).not.toHaveAttribute('ondrop');
});
});
+
+describe('Listener approach', () => {
+ it('should not register onDragOver event listener during SSR', () => {
+ // Simulace addEventListener pomocí jest.spyOn
+ const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+
+ // Simulujeme SSR renderováním pouze komponenty bez vykonání useEffect
+ // Abychom simulovali SSR, renderování komponenty nebude obsahovat "hydration" logiku.
+ render(, { hydrate: false });
+
+ // Ověřujeme, že event listener nebyl zaregistrován
+ expect(addEventListenerSpy).not.toHaveBeenCalledWith('dragover', expect.any(Function));
+
+ // Vyčistíme spy
+ addEventListenerSpy.mockRestore();
+ });
+
+ it('should register onDragOver event listener during CSR', () => {
+ const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+
+ // Simulujeme CSR renderováním komponenty s vykonáním useEffect
+ render(, { hydrate: true });
+
+ expect(addEventListenerSpy).toHaveBeenCalledWith('dragover', expect.any(Function));
+
+ addEventListenerSpy.mockRestore();
+ });
+});
+
+describe('mock useeffect approach', () => {
+ it('should not register onDragOver event listener during SSR', () => {
+ jest.spyOn(React, 'useEffect').mockImplementation(() => {});
+ const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+ // Simulujeme SSR renderování komponenty
+ render();
+
+ // Kontrolujeme, že během SSR nebyl zaregistrován žádný onDragOver listener
+ expect(addEventListenerSpy).not.toHaveBeenCalledWith('dragover', expect.any(Function));
+
+ addEventListenerSpy.mockRestore();
+ });
+
+ it('should register onDragOver event listener during CSR', () => {
+ const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+ // Simulujeme CSR renderování komponenty
+ render();
+
+ // Kontrolujeme, že během CSR byl zaregistrován onDragOver listener
+ expect(addEventListenerSpy).toHaveBeenCalledWith('dragover', expect.any(Function));
+
+ addEventListenerSpy.mockRestore();
+ });
+});
+
+describe('is-dragging class on drag vent', () => {
+ it('should have is-dragging class on dragOver', () => {
+ render();
+ const dropZone = screen.getAllByTestId('test')[0];
+
+ fireEvent.dragOver(dropZone);
+
+ waitFor(() => {
+ expect(dropZone).toHaveClass('is-dragging');
+ });
+ });
+});