box-ui-elements 16.0.0-beta.8 → 16.0.0

package/src/components/infinite-scroll/__tests__/InfiniteScroll.test.tsx

@@ -1,11 +1,8 @@
-import { mount, ReactWrapper } from 'enzyme';
+import { mount, ReactWrapper, shallow } from 'enzyme';
 import * as React from 'react';
-import sinon from 'sinon';
 
 import InfiniteScroll, { InfiniteScrollProps } from '../InfiniteScroll';
 
-const sandbox = sinon.sandbox.create();
-
 const mockOnLoadMore = jest.fn();
 
 const threshold = 100;
@@ -16,154 +13,108 @@ const propsList: InfiniteScrollProps = {
     useWindow: true,
     onLoadMore: mockOnLoadMore,
     threshold,
-};
-
-const getSentinel = () => {
-    const nodes = document.querySelectorAll('[data-testid="sentinel"]');
-    return nodes[nodes.length - 1];
+    throttle: 2,
 };
 
 describe('components/infinite-scroll/InfiniteScroll', () => {
+    const items = new Array(20).fill('ITEM');
+
     let attachTo: HTMLDivElement;
+    let component: ReactWrapper;
+
+    const getSentinel = () => {
+        return component?.find('[data-testid="sentinel"]').getDOMNode();
+    };
+
     beforeEach(() => {
         const container = document.createElement('div');
         document.body.appendChild(container);
         attachTo = container;
+
+        // Element initializes with sentinel above threshold (no initial load).
+        // Without this, top will always be 0 due to jest limitation.
+        jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+            top: window.innerHeight + (threshold + 1),
+        } as DOMRect);
     });
 
     afterEach(() => {
-        mockOnLoadMore.mockReset();
-        sandbox.verifyAndRestore();
+        component?.unmount();
+
+        document.body.innerHTML = '';
+        document.head.innerHTML = '';
+
+        jest.restoreAllMocks();
     });
 
     it('should render with default props', () => {
-        const component = mount(<InfiniteScroll {...propsList} />);
-        expect(component).toMatchInlineSnapshot(`
-            <InfiniteScroll
-              hasMore={false}
-              isLoading={false}
-              onLoadMore={[MockFunction]}
-              threshold={100}
-              useWindow={true}
-            >
+        const wrapper = shallow(<InfiniteScroll {...propsList} />);
+        expect(wrapper).toMatchInlineSnapshot(`
               <div>
                 <div
                   data-testid="sentinel"
                 />
               </div>
-            </InfiniteScroll>
         `);
     });
 
     it('should render sentinel to calculate scroll position', () => {
-        const component = mount(<InfiniteScroll {...propsList} />);
-        expect(component.find('[data-testid="sentinel"]').length).toEqual(1);
+        const wrapper = shallow(<InfiniteScroll {...propsList} />);
+        expect(wrapper.find('[data-testid="sentinel"]').length).toEqual(1);
     });
 
-    it('should call onLoadMore if sentinel is in threshold range while scrolling in window', () => {
-        const items = new Array(20).fill('ITEM');
-        mount(
-            <InfiniteScroll {...propsList} hasMore>
-                <div>
-                    {items.map((item, i) => (
-                        <div key={i} style={{ height: '100px' }}>
-                            {item}
-                        </div>
-                    ))}
-                </div>
-            </InfiniteScroll>,
-            { attachTo },
-        );
-
-        const sentinel = getSentinel();
-        sandbox
-            .stub(sentinel, 'getBoundingClientRect')
-            .returns({ top: window.innerHeight + (threshold - 1) } as DOMRect);
-
-        window.dispatchEvent(new Event('scroll'));
-        expect(mockOnLoadMore).toHaveBeenCalledTimes(1);
-    });
+    describe('using window', () => {
+        beforeEach(() => {
+            component = mount(
+                <InfiniteScroll {...propsList} hasMore>
+                    <div>
+                        {items.map((item, i) => (
+                            <div key={i} style={{ height: '100px' }}>
+                                {item}
+                            </div>
+                        ))}
+                    </div>
+                </InfiniteScroll>,
+                { attachTo },
+            );
+        });
 
-    it('should not call onLoadMore if sentinel is not in threshold range while scrolling in window', () => {
-        const items = new Array(20).fill('ITEM');
-        mount(
-            <InfiniteScroll {...propsList} hasMore>
-                <div>
-                    {items.map((item, i) => (
-                        <div key={i}>{item}</div>
-                    ))}
-                </div>
-            </InfiniteScroll>,
-            { attachTo },
-        );
-
-        const sentinel = getSentinel();
-        sandbox
-            .stub(sentinel, 'getBoundingClientRect')
-            .returns({ top: window.innerHeight + (threshold + 1) } as DOMRect);
-
-        window.dispatchEvent(new Event('scroll'));
-        expect(mockOnLoadMore).not.toHaveBeenCalled();
-    });
+        it('should call onLoadMore if sentinel is in threshold range and window is not scrollable', () => {
+            const sentinel = getSentinel();
+            sentinel.getBoundingClientRect = jest
+                .fn()
+                .mockReturnValue({ top: window.innerHeight + (threshold - 1) } as DOMRect);
 
-    it('should call onLoadMore if sentinel is in threshold range while scrolling scrollContainerNode', () => {
-        const scrollContainer = document.createElement('div');
-        sandbox.stub(scrollContainer, 'getBoundingClientRect').returns({ bottom: 500 } as DOMRect);
-
-        const items = new Array(20).fill('ITEM');
-        mount(
-            <InfiniteScroll {...propsList} hasMore scrollContainerNode={scrollContainer} useWindow={false}>
-                <div>
-                    {items.map((item, i) => (
-                        <div key={i} style={{ height: '100px' }}>
-                            {item}
-                        </div>
-                    ))}
-                </div>
-            </InfiniteScroll>,
-            { attachTo },
-        );
-
-        const sentinel = getSentinel();
-        sandbox.stub(sentinel, 'getBoundingClientRect').returns({ top: 500 + (threshold - 1) } as DOMRect);
-
-        scrollContainer.dispatchEvent(new Event('scroll'));
-        expect(mockOnLoadMore).toHaveBeenCalledTimes(1);
-    });
+            // update prop to trigger useEffect
+            component.setProps({ throttle: 1 });
+            expect(mockOnLoadMore).toBeCalledTimes(1);
+        });
 
-    it('should call onLoadMore if sentinel is in threshold range while scrolling scrollContainerNode', () => {
-        const scrollContainer = document.createElement('div');
-        sandbox.stub(scrollContainer, 'getBoundingClientRect').returns({ bottom: 500 } as DOMRect);
-
-        const items = new Array(20).fill('ITEM');
-        mount(
-            <InfiniteScroll {...propsList} hasMore scrollContainerNode={scrollContainer} useWindow={false}>
-                <div>
-                    {items.map((item, i) => (
-                        <div key={i} style={{ height: '100px' }}>
-                            {item}
-                        </div>
-                    ))}
-                </div>
-            </InfiniteScroll>,
-            { attachTo },
-        );
-
-        const sentinel = getSentinel();
-        sandbox.stub(sentinel, 'getBoundingClientRect').returns({ top: 500 + (threshold + 1) } as DOMRect);
-
-        scrollContainer.dispatchEvent(new Event('scroll'));
-        expect(mockOnLoadMore).not.toHaveBeenCalled();
+        it('should call onLoadMore if sentinel is in threshold range while scrolling in window', () => {
+            const sentinel = getSentinel();
+            sentinel.getBoundingClientRect = jest
+                .fn()
+                .mockReturnValue({ top: window.innerHeight + (threshold - 1) } as DOMRect);
+
+            window.dispatchEvent(new Event('scroll'));
+            expect(mockOnLoadMore).toBeCalledTimes(1);
+        });
+
+        it('should not call onLoadMore if sentinel is not in threshold range while scrolling in window', () => {
+            window.dispatchEvent(new Event('scroll'));
+            expect(mockOnLoadMore).toBeCalledTimes(0);
+        });
     });
 
-    describe('with sentinel in range', () => {
-        let component: ReactWrapper;
-        const mockedOnLoadMore = jest.fn();
+    describe('using scrollContainerNode', () => {
+        let scrollContainer: HTMLDivElement;
+
         beforeEach(() => {
-            const items = new Array(20).fill('ITEM');
+            scrollContainer = document.createElement('div');
+            scrollContainer.getBoundingClientRect = jest.fn().mockReturnValue({ bottom: 500 } as DOMRect);
 
             component = mount(
-                <InfiniteScroll {...propsList} hasMore onLoadMore={mockedOnLoadMore} useWindow>
+                <InfiniteScroll {...propsList} hasMore scrollContainerNode={scrollContainer} useWindow={false}>
                     <div>
                         {items.map((item, i) => (
                             <div key={i} style={{ height: '100px' }}>
@@ -174,28 +125,65 @@ describe('components/infinite-scroll/InfiniteScroll', () => {
                 </InfiniteScroll>,
                 { attachTo },
             );
+        });
 
+        it('should call onLoadMore if sentinel is in threshold range and window is not scrollable', () => {
             const sentinel = getSentinel();
-            sandbox
-                .stub(sentinel, 'getBoundingClientRect')
-                .returns({ top: window.innerHeight + (threshold - 1) } as DOMRect);
+            sentinel.getBoundingClientRect = jest.fn().mockReturnValue({ top: 500 + (threshold - 1) } as DOMRect);
+
+            // update prop to trigger useEffect
+            component.setProps({ throttle: 1 });
+            expect(mockOnLoadMore).toBeCalledTimes(1);
         });
 
-        afterEach(() => {
-            mockedOnLoadMore.mockReset();
+        it('should call onLoadMore if sentinel is in threshold range while scrolling scrollContainerNode', () => {
+            const sentinel = getSentinel();
+            sentinel.getBoundingClientRect = jest.fn().mockReturnValue({ top: 500 + (threshold - 1) } as DOMRect);
+
+            scrollContainer.dispatchEvent(new Event('scroll'));
+            expect(mockOnLoadMore).toBeCalledTimes(1);
+        });
+
+        it('should not call onLoadMore if sentinel is not in threshold range while scrolling scrollContainerNode', () => {
+            scrollContainer.dispatchEvent(new Event('scroll'));
+            expect(mockOnLoadMore).not.toBeCalled();
+        });
+    });
+
+    describe('with sentinel in range', () => {
+        beforeEach(() => {
+            component = mount(
+                <InfiniteScroll {...propsList} hasMore useWindow>
+                    <div>
+                        {items.map((item, i) => (
+                            <div key={i} style={{ height: '100px' }}>
+                                {item}
+                            </div>
+                        ))}
+                    </div>
+                </InfiniteScroll>,
+                { attachTo },
+            );
+
+            const sentinel = getSentinel();
+            sentinel.getBoundingClientRect = jest
+                .fn()
+                .mockReturnValue({ top: window.innerHeight + (threshold - 1) } as DOMRect);
+
+            jest.resetAllMocks();
         });
 
         it('should not call onLoadMore if isLoading', () => {
             component.setProps({ isLoading: true }, () => {
                 window.dispatchEvent(new Event('scroll'));
-                expect(mockedOnLoadMore).not.toHaveBeenCalled();
+                expect(mockOnLoadMore).not.toBeCalled();
             });
         });
 
         it('should not call onLoadMore if !hasMore', () => {
             component.setProps({ hasMore: false }, () => {
                 window.dispatchEvent(new Event('scroll'));
-                expect(mockedOnLoadMore).not.toHaveBeenCalled();
+                expect(mockOnLoadMore).not.toBeCalled();
             });
         });
     });
@@ -223,7 +211,7 @@ describe('components/infinite-scroll/InfiniteScroll', () => {
             assertScrollAndResizeEvents(addEventListenerScrollContainer, 0);
             assertScrollAndResizeEvents(removeEventListenerScrollContainer, 0);
 
-            const component = mount(<InfiniteScroll {...propsList} />);
+            component = mount(<InfiniteScroll {...propsList} />);
 
             assertScrollAndResizeEvents(addEventListenerWindow);
 

package/src/components/modal/Modal.scss

@@ -163,6 +163,7 @@
         }
 
         .modal-content {
+            flex-basis: 100%;
             margin-top: $responsive-modal-header-height;
             margin-bottom: $responsive-modal-actions-height;
             padding: 24px 16px 12px 16px;
@@ -193,11 +194,14 @@
             padding: 10px 16px;
             background-color: $white;
         }
+
+        .modal-dialog-container {
+            overflow: hidden;
+        }
     }
 
     .modal-dialog-container {
         flex-basis: 100%;
         width: 100%;
-        overflow: hidden;
     }
 }

package/src/components/search-form/SearchForm.js

@@ -165,7 +165,7 @@ class SearchForm extends React.Component<Props, State> {
             <div className="action-buttons">
                 {onSubmit ? (
                     <button
-                        type="button"
+                        type="submit"
                         className="action-button search-button"
                         title={formatMessage(messages.searchButtonTitle)}
                     >

package/src/components/search-form/__tests__/SearchForm.test.js

@@ -50,8 +50,7 @@ describe('components/search-form/SearchForm', () => {
         expect(wrapper.find('.search-button').type()).toEqual('div');
     });
 
-    test('should call onsubmit on search icon click', () => {
-        const onSubmitSpy = sinon.spy();
+    describe('onSubmitHandler()', () => {
         const event = {
             target: {
                 elements: [
@@ -61,10 +60,30 @@ describe('components/search-form/SearchForm', () => {
                 ],
             },
         };
-        const wrapper = mount(<SearchForm onSubmit={onSubmitSpy} placeholder="search" value="cheese" />);
-        const form = wrapper.find('form');
-        form.simulate('submit', event);
-        sinon.assert.calledWithMatch(onSubmitSpy, 'cheese', event);
+        const onSubmitMock = jest.fn();
+
+        afterEach(() => {
+            onSubmitMock.mockReset();
+        });
+
+        test('should call onsubmit on form submit event', () => {
+            const wrapper = mount(<SearchForm onSubmit={onSubmitMock} placeholder="search" value="cheese" />);
+            const form = wrapper.find('form');
+
+            form.simulate('submit', event);
+            expect(onSubmitMock).toBeCalledTimes(1);
+            expect(onSubmitMock).toBeCalledWith('cheese', expect.objectContaining(event));
+        });
+
+        test('should call onsubmit on search icon button submit event', () => {
+            const wrapper = mount(<SearchForm onSubmit={onSubmitMock} placeholder="search" value="cheese" />);
+            const searchButton = wrapper.find('.search-button');
+            expect(searchButton.prop('type')).toEqual('submit');
+
+            searchButton.simulate('submit', event);
+            expect(onSubmitMock).toBeCalledTimes(1);
+            expect(onSubmitMock).toBeCalledWith('cheese', expect.objectContaining(event));
+        });
     });
 
     test('should call onchange on form change', () => {

package/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton.test.js.snap

@@ -9,6 +9,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
       Object {
         "formatDate": [Function],
         "formatMessage": [Function],
+        "formatNumber": [Function],
         "formatRelativeTime": [Function],
       }
     }
@@ -106,6 +107,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
       Object {
         "formatDate": [Function],
         "formatMessage": [Function],
+        "formatNumber": [Function],
         "formatRelativeTime": [Function],
       }
     }
@@ -203,6 +205,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
       Object {
         "formatDate": [Function],
         "formatMessage": [Function],
+        "formatNumber": [Function],
         "formatRelativeTime": [Function],
       }
     }
@@ -298,6 +301,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
       Object {
         "formatDate": [Function],
         "formatMessage": [Function],
+        "formatNumber": [Function],
         "formatRelativeTime": [Function],
       }
     }