Fix(web-react): FileUploaderInput className #DS-1508

configs/jest-config-spirit/jsdom/setup/setupAfterEnv.js

@@ -1,6 +1,5 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
-// eslint-disable-next-line import/no-extraneous-dependencies
+import { TextEncoder, TextDecoder } from 'util';
 import ResizeObserverPolyfill from 'resize-observer-polyfill';
 
 /**
@@ -18,3 +17,8 @@ global.ResizeObserver = ResizeObserverPolyfill;
  * Also consider better patching of the Console.
  * @see { @link https://github.com/carbon-design-system/carbon/blob/main/config/jest-config-carbon/setup/setupAfterEnv.js }
  */
+
+/**
+ * While it should be bundled with jsdom, it isn't with jsdom 16.
+ */
+Object.assign(global, { TextDecoder, TextEncoder });

examples/next-with-app-router/src/app/fileuploader.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import {
+  FileUploader,
+  FileUploaderAttachment,
+  FileUploaderInput,
+  FileUploaderList,
+  SpiritFileUploaderAttachmentProps,
+  useFileQueue,
+} from '@lmc-eu/spirit-web-react';
+import React, { useState } from 'react';
+
+const FileuploaderTest = () => {
+  const [errorMessage, setErrorMessage] = useState<(string | Error)[]>([]);
+
+  const {
+    fileQueue: fileQueueWarning,
+    addToQueue: addToQueueWarning,
+    clearQueue: clearQueueWarning,
+    onDismiss: onDismissWarning,
+    findInQueue: findInQueueWarning,
+    updateQueue: updateQueueWarning,
+  } = useFileQueue();
+
+  const attachmentComponent = ({ id, ...props }: SpiritFileUploaderAttachmentProps) => (
+    <FileUploaderAttachment key={id} id={id} {...props} />
+  );
+
+  return (
+    <FileUploader
+      addToQueue={(key, file) => {
+        return addToQueueWarning(key, file);
+      }}
+      clearQueue={clearQueueWarning}
+      fileQueue={fileQueueWarning}
+      findInQueue={findInQueueWarning}
+      id="file-uploader-validation-states-warning"
+      onDismiss={onDismissWarning}
+      updateQueue={updateQueueWarning}
+    >
+      <FileUploaderInput
+        helperText="Max file size is 50 kb"
+        id="file-uploader-validation-states-warning-input"
+        label="Label"
+        labelText="or drag and drop here"
+        linkText="Upload your file"
+        name="attachmentsWarning"
+        onError={(error) => {
+          setErrorMessage((prevErrors) => [...prevErrors, error]);
+        }}
+        validationText={`${errorMessage.join(', ')}`}
+        validationState="warning"
+        isRequired
+        isMultiple
+        maxFileSize={51200} // 50 kb
+        // add onInput callback should solve issue if upload files by select them (not for drag and drop)
+        // onInput={() => setErrorMessage([])}
+      />
+      <FileUploaderList
+        attachmentComponent={attachmentComponent}
+        id="file-uploader-validation-states-warning-attachment"
+        inputName="attachmentsWarning"
+        label="Attachments"
+      />
+    </FileUploader>
+  );
+};
+
+export default FileuploaderTest;

examples/next-with-app-router/src/app/page.tsx

@@ -1,6 +1,6 @@
-import { Heading } from '@lmc-eu/spirit-web-react';
+import FileuploaderTest from '@/app/fileuploader';
 import { NextPage } from 'next';
 
-const Home: NextPage = () => <Heading size="large">Spirit App Router</Heading>;
+const Home: NextPage = () => <FileuploaderTest />;
 
 export default Home;

packages/web-react/src/components/FileUploader/FileUploaderInput.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDeprecationMessage, useStyleProps } from '../../hooks';
 import { SpiritFileUploaderInputProps } from '../../types';
 import { HelperText, ValidationText, useAriaIds } from '../Field';
@@ -11,6 +11,7 @@ import { useFileUploaderInput } from './useFileUploaderInput';
 import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
 
 const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
+  const [isDragAndDropSupported, setIsDragAndDropSupported] = useState(false);
   const {
     accept,
     'aria-describedby': ariaDescribedBy = '',
@@ -34,10 +35,6 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
     validationText,
     ...restProps
   } = props;
-
-  const isDragAndDropSupported =
-    typeof document !== 'undefined' ? 'draggable' in document.createElement('span') : false;
-
   const {
     isDisabledByQueueLimitBehavior,
     isDragging,
@@ -67,9 +64,12 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
     validationState,
   });
   const { styleProps, props: transferProps } = useStyleProps(restProps);
-
   const [ids, register] = useAriaIds(ariaDescribedBy);
 
+  useEffect(() => {
+    setIsDragAndDropSupported('draggable' in document.createElement('span'));
+  }, []);
+
   useDeprecationMessage({
     method: 'custom',
     trigger: !id,

packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx

@@ -1,12 +1,107 @@
+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';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { validationTextPropsTest } from '../../../../tests/providerTests/validationTextPropsTest';
 import FileUploaderInput from '../FileUploaderInput';
+import '@testing-library/jest-dom';
 
 describe('FileUploaderInput', () => {
   classNamePrefixProviderTest(FileUploaderInput, 'FileUploaderInput');
 
   restPropsTest(FileUploaderInput, 'div');
 
   validationTextPropsTest(FileUploaderInput, '.FileUploaderInput__validationText');
+
+  it('should have drag-and-drop listeners in CSR when draggable is supported', () => {
+    render(<FileUploaderInput id="test-uploader" name="test-uploader" label="upload" data-testid="test" />);
+
+    const dropZone = screen.getAllByTestId('test')[0];
+
+    expect(dropZone).toHaveClass('has-drag-and-drop');
+  });
+
+  it('should not have drag-and-drop listeners in SSR', () => {
+    const ui = <FileUploaderInput id="test-uploader" name="test-uploader" label="upload" data-testid="test" />;
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = ReactDOMServer.renderToString(ui);
+
+    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(<FileUploaderInput name="bagr" id="pokus" data-testid="test" />, { 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(<FileUploaderInput name="bagr" id="pokus" data-testid="test" />, { 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(<FileUploaderInput name="bagr" id="pokus" data-testid="test" />);
+
+    // 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(<FileUploaderInput name="bagr" id="pokus" data-testid="test" />);
+
+    // 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(<FileUploaderInput name="bagr" id="pokus" data-testid="test" />);
+    const dropZone = screen.getAllByTestId('test')[0];
+
+    fireEvent.dragOver(dropZone);
+
+    waitFor(() => {
+      expect(dropZone).toHaveClass('is-dragging');
+    });
+  });
 });