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 fe5d92e91f..ff298983d3 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, fireEvent, waitFor } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; @@ -14,7 +14,7 @@ describe('FileUploaderInput', () => { validationTextPropsTest(FileUploaderInput, '.FileUploaderInput__validationText'); - it('should have drag-and-drop listeners in CSR when draggable is supported', () => { + it('should have drag-and-drop class in Client component', () => { render(); const dropZone = screen.getAllByTestId('test')[0]; @@ -22,86 +22,13 @@ describe('FileUploaderInput', () => { expect(dropZone).toHaveClass('has-drag-and-drop'); }); - it('should not have drag-and-drop listeners in SSR', () => { - const ui = ; + it('should not have drag-and-drop class in Server component', () => { const container = document.createElement('div'); document.body.appendChild(container); - container.innerHTML = ReactDOMServer.renderToString(ui); + container.innerHTML = ReactDOMServer.renderToString( + , + ); - act(() => { - render(ui, { hydrate: true, container }); - }); - - const dropZone = screen.getAllByTestId('test')[0]; - - expect(dropZone).not.toHaveClass('has-drag-and-drop'); - }); -}); - -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 onDragOver event', () => { - it('should have is-dragging class on dragOver', () => { - render(); - const dropZone = screen.getAllByTestId('test')[0]; - - fireEvent.dragOver(dropZone); - - waitFor(() => { - expect(dropZone).toHaveClass('is-dragging'); - }); + expect(container).not.toContainHTML('has-drag-and-drop'); }); });