Fix errorOverlayText prop on small screens

UNRELEASED.md

@@ -15,6 +15,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Removed min-width from `FormLayout` `Items` and applying it only to `Items` used inside a `FormLayout.Group` ([#650](https://github.com/Shopify/polaris-react/pull/650))
 - Removed added space in `ChoiceList` when choice has children on selection but is not selected ([#665](https://github.com/Shopify/polaris-react/issues/665))
+- Fixed `errorOverlayText` on `Dropzone` ([#671](https://github.com/Shopify/polaris-react/pull/671))
 
 ### Documentation
 

src/components/DropZone/DropZone.tsx

@@ -259,7 +259,7 @@ export class DropZone extends React.Component<CombinedProps, State> {
               </DisplayText>
             )}
             {(size === 'medium' || size === 'large') && (
-              <Caption>{overlayText}</Caption>
+              <Caption>{errorOverlayText}</Caption>
             )}
           </Stack>
         </div>

src/components/DropZone/tests/DropZone.test.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import {Label, Labelled} from 'components';
+import {ReactWrapper} from 'enzyme';
+import {clock} from '@shopify/jest-dom-mocks';
+import {Label, Labelled, DisplayText, Caption} from 'components';
 import {mountWithAppProvider} from 'test-utilities';
 import DropZone from '../DropZone';
 
@@ -9,15 +11,31 @@ describe('<DropZone />', () => {
   let acceptedFiles: {}[];
   let rejectedFiles: {}[];
   let createEvent: any;
+  let setBoundingClientRect: any;
+  let origGetBoundingClientRect: any;
+  const widths = {
+    small: 99,
+    medium: 159,
+    large: 299,
+    extraLarge: 1024,
+  };
 
   const fireEvent = (eventType: string, element: any) => {
     spy.mockReset();
     const event = createEvent(eventType);
     element.getDOMNode().dispatchEvent(event);
   };
 
+  const triggerDragEnter = (element: ReactWrapper<any, any>) => {
+    const event = createEvent('dragenter');
+    element.getDOMNode().dispatchEvent(event);
+    clock.tick(50);
+    element.update();
+  };
+
   beforeEach(() => {
     spy = jest.fn();
+    clock.mock();
     files = [
       {
         name: 'jpeg file',
@@ -38,6 +56,24 @@ describe('<DropZone />', () => {
       });
       return evt;
     };
+    origGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+    setBoundingClientRect = (size: keyof typeof widths) => {
+      Element.prototype.getBoundingClientRect = jest.fn(() => {
+        return {
+          width: widths[size],
+          height: 100,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+        };
+      });
+    };
+  });
+
+  afterEach(() => {
+    clock.restore();
+    Element.prototype.getBoundingClientRect = origGetBoundingClientRect;
   });
 
   it('calls the onDrop callback when a drop event is fired', () => {
@@ -54,7 +90,7 @@ describe('<DropZone />', () => {
     expect(spy).toBeCalledWith(files, files, []);
   });
 
-  it('calls the onDrop callback corrently when it accepts only jpeg', () => {
+  it('calls the onDrop callback correctly when it accepts only jpeg', () => {
     const dropZone = mountWithAppProvider(
       <DropZone onDrop={spy} accept="image/jpeg" />,
     );
@@ -63,7 +99,7 @@ describe('<DropZone />', () => {
     expect(spy).toBeCalledWith(files, acceptedFiles, rejectedFiles);
   });
 
-  it('calls the onDropAccepted callback corrently when it accepts only jpeg', () => {
+  it('calls the onDropAccepted callback correctly when it accepts only jpeg', () => {
     const dropZone = mountWithAppProvider(
       <DropZone onDropAccepted={spy} accept="image/jpeg" />,
     );
@@ -72,7 +108,7 @@ describe('<DropZone />', () => {
     expect(spy).toBeCalledWith(acceptedFiles);
   });
 
-  it('calls the onDropRejected callback corrently when it accepts only jpeg', () => {
+  it('calls the onDropRejected callback correctly when it accepts only jpeg', () => {
     const dropZone = mountWithAppProvider(
       <DropZone onDropRejected={spy} accept="image/jpeg" />,
     );
@@ -207,4 +243,94 @@ describe('<DropZone />', () => {
       );
     });
   });
+
+  describe('overlayText', () => {
+    const overlayText = 'overlay text';
+    it('does not render the overlayText on small screens', () => {
+      setBoundingClientRect('small');
+      const dropZone = mountWithAppProvider(
+        <DropZone overlayText={overlayText} />,
+      );
+      triggerDragEnter(dropZone);
+      const displayText = dropZone.find(DisplayText);
+      const caption = dropZone.find(Caption);
+      expect(displayText).toHaveLength(0);
+      expect(caption).toHaveLength(0);
+    });
+
+    it('renders a Caption containing the overlayText on medium screens', () => {
+      setBoundingClientRect('medium');
+      const dropZone = mountWithAppProvider(
+        <DropZone overlayText={overlayText} />,
+      );
+      triggerDragEnter(dropZone);
+      const captionText = dropZone.find(Caption);
+      expect(captionText.contains(overlayText)).toBe(true);
+    });
+
+    it('renders a Caption containing the overlayText on large screens', () => {
+      setBoundingClientRect('large');
+      const dropZone = mountWithAppProvider(
+        <DropZone overlayText={overlayText} />,
+      );
+      triggerDragEnter(dropZone);
+      const captionText = dropZone.find(Caption);
+      expect(captionText.contains(overlayText)).toBe(true);
+    });
+
+    it('renders a DisplayText containing the overlayText on extra-large screens', () => {
+      setBoundingClientRect('extraLarge');
+      const dropZone = mountWithAppProvider(
+        <DropZone overlayText={overlayText} />,
+      );
+      triggerDragEnter(dropZone);
+      const displayText = dropZone.find(DisplayText);
+      expect(displayText.contains(overlayText)).toBe(true);
+    });
+  });
+
+  describe('errorOverlayText ', () => {
+    const errorOverlayText = "can't drop this";
+    it("doesn't render the overlayText on small screens", () => {
+      setBoundingClientRect('small');
+      const dropZone = mountWithAppProvider(
+        <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
+      );
+      triggerDragEnter(dropZone);
+      const displayText = dropZone.find(DisplayText);
+      const caption = dropZone.find(Caption);
+      expect(displayText).toHaveLength(0);
+      expect(caption).toHaveLength(0);
+    });
+
+    it('renders a Caption containing the overlayText on medium screens', () => {
+      setBoundingClientRect('medium');
+      const dropZone = mountWithAppProvider(
+        <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
+      );
+      triggerDragEnter(dropZone);
+      const captionText = dropZone.find(Caption);
+      expect(captionText.contains(errorOverlayText)).toBe(true);
+    });
+
+    it('renders a Caption containing the overlayText on large screens', () => {
+      setBoundingClientRect('large');
+      const dropZone = mountWithAppProvider(
+        <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
+      );
+      triggerDragEnter(dropZone);
+      const captionText = dropZone.find(Caption);
+      expect(captionText.contains(errorOverlayText)).toBe(true);
+    });
+
+    it('renders a DisplayText containing the overlayText on extra-large screens', () => {
+      setBoundingClientRect('extraLarge');
+      const dropZone = mountWithAppProvider(
+        <DropZone errorOverlayText={errorOverlayText} accept="image/gif" />,
+      );
+      triggerDragEnter(dropZone);
+      const displayText = dropZone.find(DisplayText);
+      expect(displayText.contains(errorOverlayText)).toBe(true);
+    });
+  });
 });