From 12c77b81855e1abd3e6f90029b44e16a763b7eab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Mon, 7 Oct 2024 15:58:16 +0200
Subject: [PATCH 1/2] Fix(web-react): FileUploaderInput className  #DS-1508

---
 .../FileUploader/FileUploaderInput.tsx        | 12 +++++------
 .../__tests__/FileUploaderInput.test.tsx      | 20 +++++++++++++++++++
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx b/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx
index 0248cbd6ca..d704a3eb0a 100644
--- a/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx
+++ b/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,
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 3b6478f34b..c516f0f69a 100644
--- a/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx
+++ b/packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx
@@ -1,7 +1,11 @@
+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');
@@ -9,4 +13,20 @@ describe('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');
+  });
 });

From 8aa78d81a60777b05b838d2afc06af4fb903e223 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Mon, 21 Oct 2024 14:21:56 +0200
Subject: [PATCH 2/2] Feat(jest-config): Mock TextEncoder and TextDecoder in
 DOM

---
 configs/jest-config-spirit/jsdom/setup/setupAfterEnv.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/configs/jest-config-spirit/jsdom/setup/setupAfterEnv.js b/configs/jest-config-spirit/jsdom/setup/setupAfterEnv.js
index b81ec5568c..f88ae5694d 100644
--- a/configs/jest-config-spirit/jsdom/setup/setupAfterEnv.js
+++ b/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 });