From 66da8f121bc313b8719be38c8db83311928a2265 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Thu, 22 Nov 2018 16:08:17 -0500 Subject: [PATCH 1/2] fixing message on drop zone --- UNRELEASED.md | 1 + src/components/DropZone/DropZone.tsx | 2 +- .../DropZone/tests/DropZone.test.tsx | 134 +++++++++++++++++- 3 files changed, 132 insertions(+), 5 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 55a6b21d54d..3ec0e0b4602 100644 --- a/UNRELEASED.md +++ b/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 diff --git a/src/components/DropZone/DropZone.tsx b/src/components/DropZone/DropZone.tsx index dbfaa60f02e..f2b039df349 100755 --- a/src/components/DropZone/DropZone.tsx +++ b/src/components/DropZone/DropZone.tsx @@ -259,7 +259,7 @@ export class DropZone extends React.Component { )} {(size === 'medium' || size === 'large') && ( - {overlayText} + {errorOverlayText} )} diff --git a/src/components/DropZone/tests/DropZone.test.tsx b/src/components/DropZone/tests/DropZone.test.tsx index d70f9b7abd0..3f2c30081f8 100755 --- a/src/components/DropZone/tests/DropZone.test.tsx +++ b/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,6 +11,14 @@ describe('', () => { 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(); @@ -16,8 +26,16 @@ describe('', () => { element.getDOMNode().dispatchEvent(event); }; + const triggerDragEnter = (element: ReactWrapper) => { + 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('', () => { }); 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('', () => { 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( , ); @@ -63,7 +99,7 @@ describe('', () => { 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( , ); @@ -72,7 +108,7 @@ describe('', () => { 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( , ); @@ -207,4 +243,94 @@ describe('', () => { ); }); }); + + describe('overlayText', () => { + const overlayText = 'overlay text'; + it("doesn't renders the overlayText on small screens", () => { + setBoundingClientRect('small'); + const dropZone = mountWithAppProvider( + , + ); + 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( + , + ); + 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( + , + ); + 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( + , + ); + 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( + , + ); + 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( + , + ); + 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( + , + ); + 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( + , + ); + triggerDragEnter(dropZone); + const displayText = dropZone.find(DisplayText); + expect(displayText.contains(errorOverlayText)).toBe(true); + }); + }); }); From 68acdbd2daa1c482a82d1f525d5a8dd37b139f6d Mon Sep 17 00:00:00 2001 From: Solona Armstrong Date: Tue, 27 Nov 2018 11:48:27 -0500 Subject: [PATCH 2/2] Update src/components/DropZone/tests/DropZone.test.tsx Co-Authored-By: dleroux --- src/components/DropZone/tests/DropZone.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DropZone/tests/DropZone.test.tsx b/src/components/DropZone/tests/DropZone.test.tsx index 3f2c30081f8..f16c716776b 100755 --- a/src/components/DropZone/tests/DropZone.test.tsx +++ b/src/components/DropZone/tests/DropZone.test.tsx @@ -246,7 +246,7 @@ describe('', () => { describe('overlayText', () => { const overlayText = 'overlay text'; - it("doesn't renders the overlayText on small screens", () => { + it('does not render the overlayText on small screens', () => { setBoundingClientRect('small'); const dropZone = mountWithAppProvider( ,