added testing for drag and drop, deprecation patch, and removed dual flag logic

Author: JamesNewbyAtMicrosoft

CHANGELOG.md

@@ -102,7 +102,11 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - Attaching files will no longer remove previously attached files
    - Updated Fluent theme to use the new attachment preview feature
 - Added collapsible activity and activity with abstract handling, in PR [#5506](https://github.com/microsoft/BotFramework-WebChat/pull/5506), in PR [#5513](https://github.com/microsoft/BotFramework-WebChat/pull/5513), by [@OEvgeny](https://github.com/OEvgeny)
-- Added `disableFileUpload` flag to completelly disable file upload feature, in PR [#5508](https://github.com/microsoft/BotFramework-WebChat/pull/5508), by [@JamesNewbyAtMicrosoft](https://github.com/JamesNewbyAtMicrosoft)
+- Added `disableFileUpload` flag to completelly disable file upload feature,
+- Deprecated `hideUploadButton` in favor of `disableFileUpload`. Added rectification logic in `patchStyleOptionsFromDeprecatedProps.js`.
+- Updated `BasicSendBoxToolbar` to rely solely on `disableFileUpload`.
+- Improved test to simulate keyboard and mouse behavior instead of DOM-only checks.
+  in PR [#5508](https://github.com/microsoft/BotFramework-WebChat/pull/5508), by [@JamesNewbyAtMicrosoft](https://github.com/JamesNewbyAtMicrosoft)
 
 ### Changed
 

__tests__/html2/basic/disableFileUpload.html

@@ -17,17 +17,71 @@
       run(async function () {
         const { directLine, store } = testHelpers.createDirectLineEmulator();
 
-        renderWebChat({
-          directLine,
-          store,
-          styleOptions: { disableFileUpload: true }
-        }, document.getElementById('webchat')); 
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: { disableFileUpload: true }
+          },
+          document.getElementById('webchat')
+        );
 
         await pageConditions.uiConnected();
 
-        // THEN: No attach button should be render.
+        // DOM-based checks
         expect(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton)).toBeFalsy();
         expect(pageElements.byTestId(WebChat.testIds.sendBoxDropZone)).toBeFalsy();
+
+        // Keyboard interaction: try to tab to the upload button
+        await pageObjects.focusSendBoxTextBox();
+        await host.sendTab();
+        console.log('document.activeElement', document.activeElement);
+
+        expect(document.activeElement).not.toBe(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton));
+       
+        // Simulate drag-and-drop using dispatchEvent
+        const sendBox = document.querySelector('[role="form"]');
+        if (sendBox) {
+          const dataTransfer = new DataTransfer();
+          const file = new File(['dummy content'], 'test.txt', { type: 'text/plain' });
+          dataTransfer.items.add(file);
+
+          const dragEnterEvent = new DragEvent('dragenter', {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer
+          });
+
+          const dragOverEvent = new DragEvent('dragover', {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer
+          });
+
+          const dropEvent = new DragEvent('drop', {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer
+          });
+
+          sendBox.dispatchEvent(dragEnterEvent);
+          sendBox.dispatchEvent(dragOverEvent);
+          sendBox.dispatchEvent(dropEvent);
+
+          // Drop zone should still not appear
+          expect(pageElements.byTestId(WebChat.testIds.sendBoxDropZone)).toBeFalsy();
+          
+          // Attachment bar item should not appear
+          expect(pageElements.byTestId(WebChat.testIds.sendBoxAttachmentBarItem)).toBeFalsy();
+
+          await host.snapshot('drag-and-drop-disabled');
+        }
+
+        // Hover interaction: hover over the send box area
+        await host.hover(document.querySelector('[role="form"]'));
+        await host.snapshot('hover-over-sendbox-toolbar');
+
+        // Final visual confirmation
         await host.snapshot('local');
       });
     </script>

packages/api/src/patchStyleOptionsFromDeprecatedProps.js

@@ -10,5 +10,12 @@ export default function patchStyleOptionsFromDeprecatedProps(styleOptions) {
     styleOptions = updateIn(styleOptions, ['slowConnectionAfter'], () => 0);
   }
 
+  // Rectify deprecated "hideUploadButton" into "disableFileUpload"
+  if ('hideUploadButton' in styleOptions && !('disableFileUpload' in styleOptions)) {
+    console.warn('Web Chat: "hideUploadButton" is deprecated. Please use "disableFileUpload" instead.');
+
+    styleOptions = updateIn(styleOptions, ['disableFileUpload'], () => !!styleOptions.hideUploadButton);
+  }
+
   return styleOptions;
 }

packages/component/src/SendBoxToolbar/BasicSendBoxToolbar.tsx

@@ -5,10 +5,12 @@ import UploadButton from './UploadButton';
 
 const { useStyleOptions } = hooks;
 
+// NOTE: "hideUploadButton" is deprecated. Use "disableFileUpload" instead.
+//       Rectification logic is handled in patchStyleOptionsFromDeprecatedProps.js
 function BasicSendBoxToolbar({ className }: SendBoxToolbarMiddlewareProps) {
-  const [{ disableFileUpload, hideUploadButton }] = useStyleOptions();
+  const [{ disableFileUpload }] = useStyleOptions();
 
-  return !(disableFileUpload || hideUploadButton) && <UploadButton className={className} />;
+  return !disableFileUpload && <UploadButton className={className} />;
 }
 
 export default memo(BasicSendBoxToolbar);

packages/component/src/SendBoxToolbar/UploadButton.tsx

@@ -13,6 +13,7 @@ import useMakeThumbnail from '../hooks/useMakeThumbnail';
 import useStyleSet from '../hooks/useStyleSet';
 import useSubmit from '../providers/internal/SendBox/useSubmit';
 import AttachmentIcon from './Assets/AttachmentIcon';
+import testIds from '../testIds';
 
 const { useSendBoxAttachments, useLocalizer, useStyleOptions, useUIState } = hooks;
 
@@ -120,7 +121,13 @@ function UploadButton(props: UploadButtonProps) {
         tabIndex={-1}
         type="file"
       />
-      <IconButton alt={uploadFileString} aria-label={uploadFileString} disabled={disabled} onClick={handleClick}>
+      <IconButton
+        alt={uploadFileString}
+        aria-label={uploadFileString}
+        data-testid={testIds.basicSendBoxUploadButton}
+        disabled={disabled}
+        onClick={handleClick}
+      >
         <AttachmentIcon checked={!!sendBoxAttachments.length} />
       </IconButton>
     </div>

packages/component/src/testIds.ts

@@ -1,4 +1,5 @@
 const testIds = {
+  basicSendBoxUploadButton: 'basic send box toolbar upload button',
   codeBlockCopyButton: 'code block copy button',
   copyButton: 'copy button',
   feedbackButton: 'feedback button',

packages/fluent-theme/src/components/sendBox/SendBox.tsx

@@ -48,7 +48,7 @@ type Props = Readonly<{
 }>;
 
 function SendBox(props: Props) {
-  const [{ disableFileUpload, hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions();
+  const [{ disableFileUpload, hideTelephoneKeypadButton, maxMessageLength }] = useStyleOptions();
   const [attachments, setAttachments] = useSendBoxAttachments();
   const [globalMessage, setGlobalMessage] = useSendBoxValue();
   const [localMessage, setLocalMessage] = useState('');
@@ -238,7 +238,7 @@ function SendBox(props: Props) {
           )}
           <Toolbar>
             {!hideTelephoneKeypadButton && <TelephoneKeypadToolbarButton />}
-            {!(disableFileUpload || hideUploadButton) && <AddAttachmentButton onFilesAdded={handleAddFiles} />}
+            {!disableFileUpload && <AddAttachmentButton onFilesAdded={handleAddFiles} />}
             <ToolbarSeparator />
             <ToolbarButton
               aria-label={localize('TEXT_INPUT_SEND_BUTTON_ALT')}