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'); + }); + }); +});