test: coverage

components/attachments/DropArea.tsx

@@ -29,7 +29,7 @@ export default function DropArea(props: DropUploaderProps) {
   React.useEffect(() => {
     // Add global drop event
     if (container) {
-      const onDragEnter = (e: DragEvent) => {
+      const onDragEnter = () => {
         setShowArea(true);
       };
 
@@ -62,7 +62,7 @@ export default function DropArea(props: DropUploaderProps) {
   }, [!!container]);
 
   // =========================== Visible ============================
-  const showDropdown = getDropContainer && container && showArea !== null && !disabled;
+  const showDropdown = getDropContainer && container && showArea && !disabled;
 
   // ============================ Render ============================
   if (!showDropdown) {
@@ -76,9 +76,6 @@ export default function DropArea(props: DropUploaderProps) {
       className={classnames(areaCls, className, {
         [`${areaCls}-on-body`]: container.tagName === 'BODY',
       })}
-      style={{
-        display: showArea ? 'block' : 'none',
-      }}
     >
       {children}
     </div>,

components/attachments/PlaceholderUploader.tsx

@@ -35,10 +35,9 @@ function Placeholder(props: PlaceholderProps, ref: React.Ref<HTMLDivElement>) {
 
   const onDragLeave = (e: React.DragEvent) => {
     // Leave the div should end
-    if ((e.currentTarget as HTMLElement).contains(e.relatedTarget as HTMLElement)) {
-      return;
+    if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as HTMLElement)) {
+      setDragIn(false);
     }
-    setDragIn(false);
   };
 
   const onDrop = () => {

components/attachments/__tests__/drag.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import Attachments, { type AttachmentsProps } from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+
+describe('attachments.drag', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  const renderAttachments = (props?: AttachmentsProps) => {
+    return <Attachments beforeUpload={() => false} {...props} />;
+  };
+
+  it('drag and drop', async () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      renderAttachments({
+        onChange,
+        children: <div />,
+        getDropContainer: () => document.body,
+      }),
+    );
+
+    // Drag into document
+    fireEvent.dragEnter(document.body);
+    fireEvent.dragOver(document.body);
+
+    expect(document.querySelector('.ant-attachment-drop-area-on-body')).toBeTruthy();
+    expect(document.querySelector('.ant-attachment-placeholder')).toBeTruthy();
+    expect(document.querySelector('.ant-attachment-placeholder-drag-in')).toBeFalsy();
+
+    // Drag into placeholder
+    fireEvent.dragEnter(document.querySelector('.ant-attachment-placeholder')!);
+    fireEvent.dragOver(document.querySelector('.ant-attachment-placeholder')!);
+    expect(document.querySelector('.ant-attachment-placeholder-drag-in')).toBeTruthy();
+
+    // Drag out placeholder
+    fireEvent.dragLeave(document.querySelector('.ant-attachment-placeholder')!);
+    expect(document.querySelector('.ant-attachment-placeholder-drag-in')).toBeFalsy();
+
+    // Drop on placeholder
+    fireEvent.dragEnter(document.body);
+    fireEvent.drop(document.querySelector('.ant-attachment-placeholder')!);
+    expect(document.querySelector('.ant-attachment-drop-area')).toBeFalsy();
+  });
+});

components/attachments/__tests__/index.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Attachments from '..';
+import Attachments, { type AttachmentsProps } from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render } from '../../../tests/utils';
+import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 
 describe('attachments', () => {
   mountTest(() => <Attachments />);
@@ -15,4 +15,63 @@ describe('attachments', () => {
   afterAll(() => {
     jest.useRealTimers();
   });
+
+  const mockItems = Array.from({ length: 5 }).map(
+    (_, index) =>
+      ({
+        uid: String(index),
+        name: `file-${index}.jpg`,
+        status: 'done',
+        thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      }) as const,
+  );
+
+  const renderAttachments = (props?: AttachmentsProps) => {
+    return <Attachments beforeUpload={() => false} {...props} />;
+  };
+
+  it('add and remove file', async () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      renderAttachments({
+        onChange,
+      }),
+    );
+
+    // Add file
+    fireEvent.change(container.querySelector('input')!, {
+      target: { files: [{ file: 'foo.png' }] },
+    });
+    await waitFakeTimer();
+    expect(onChange.mock.calls[0][0].fileList).toHaveLength(1);
+    onChange.mockClear();
+
+    // Remove file
+    fireEvent.click(container.querySelector('.ant-attachment-list-card-remove')!);
+    await waitFakeTimer();
+    expect(onChange.mock.calls[0][0].fileList).toHaveLength(0);
+  });
+
+  it('overflow: scrollX', () => {
+    const { container } = render(
+      renderAttachments({
+        overflow: 'scrollX',
+        items: mockItems,
+      }),
+    );
+
+    expect(container.querySelector('.ant-attachment-list-overflow-scrollX')).toBeTruthy();
+  });
+
+  it('overflow: scrollY', () => {
+    const { container } = render(
+      renderAttachments({
+        overflow: 'scrollY',
+        items: mockItems,
+      }),
+    );
+
+    expect(container.querySelector('.ant-attachment-list-overflow-scrollY')).toBeTruthy();
+  });
 });