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

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,32 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { renderToString } 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 class in Client component', () => {
+    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 class in Server component', () => {
+    const container = renderToString(
+      <FileUploaderInput id="test-uploader" name="test-uploader" label="upload" data-testid="test" />,
+    );
+
+    expect(container).not.toContain('has-drag-and-drop');
+  });
 });