#120: Refactor popup

tests/components/ui/popup/PopupStack.test.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { PopupStack } from 'components/ui/popup/PopupStack';
+import styles from 'components/ui/popup/popup.scss';
 
-function DummyPopup() {}
+function DummyPopup() {return null;}
 
 describe('<PopupStack />', () => {
     it('renders all popup components', () => {
@@ -12,10 +13,10 @@ describe('<PopupStack />', () => {
             destroy: () => {},
             popups: [
                 {
-                    type: DummyPopup
+                    Popup: DummyPopup
                 },
                 {
-                    type: DummyPopup
+                    Popup: DummyPopup
                 }
             ]
         };
@@ -24,7 +25,7 @@ describe('<PopupStack />', () => {
         expect(component.find(DummyPopup)).to.have.length(2);
     });
 
-    it('should pass provided props', () => {
+    it('should pass onClose as props', () => {
         const expectedProps = {
             foo: 'bar'
         };
@@ -33,47 +34,29 @@ describe('<PopupStack />', () => {
             destroy: () => {},
             popups: [
                 {
-                    type: DummyPopup,
-                    props: expectedProps
-                }
-            ]
-        };
-        const component = shallow(<PopupStack {...props} />);
+                    Popup: (props = {}) => {
+                        expect(props.onClose).to.be.a('function');
 
-        expect(component.find(DummyPopup).prop('foo')).to.be.equal(expectedProps.foo);
-    });
-
-    it('should use props as proxy if it is function', () => {
-        const expectedProps = {
-            foo: 'bar'
-        };
-
-        const props = {
-            destroy: () => {},
-            popups: [
-                {
-                    type: DummyPopup,
-                    props: (props) => {
-                        expect(props).to.have.property('onClose');
-
-                        return expectedProps;
+                        return <DummyPopup {...expectedProps} />;
                     }
                 }
             ]
         };
-        const component = shallow(<PopupStack {...props} />);
+        const component = mount(<PopupStack {...props} />);
 
-        expect(component.find(DummyPopup).props()).to.be.deep.equal(expectedProps);
+        const popup = component.find(DummyPopup);
+        expect(popup).to.have.length(1);
+        expect(popup.props()).to.deep.equal(expectedProps);
     });
 
     it('should hide popup, when onClose called', () => {
         const props = {
             popups: [
                 {
-                    type: DummyPopup
+                    Popup: DummyPopup
                 },
                 {
-                    type: DummyPopup
+                    Popup: DummyPopup
                 }
             ],
             destroy: sinon.stub()
@@ -85,4 +68,41 @@ describe('<PopupStack />', () => {
         sinon.assert.calledOnce(props.destroy);
         sinon.assert.calledWith(props.destroy, sinon.match.same(props.popups[1]));
     });
+
+    it('should hide popup, when overlay clicked', () => {
+        const preventDefault = sinon.stub();
+        const props = {
+            destroy: sinon.stub(),
+            popups: [
+                {
+                    Popup: DummyPopup
+                }
+            ]
+        };
+        const component = shallow(<PopupStack {...props} />);
+
+        const overlay = component.find(`.${styles.overlay}`);
+        overlay.simulate('click', {target: 1, currentTarget: 1, preventDefault});
+
+        sinon.assert.calledOnce(props.destroy);
+        sinon.assert.calledOnce(preventDefault);
+    });
+
+    it('should hide popup on overlay click if disableOverlayClose', () => {
+        const props = {
+            destroy: sinon.stub(),
+            popups: [
+                {
+                    Popup: DummyPopup,
+                    disableOverlayClose: true
+                }
+            ]
+        };
+        const component = shallow(<PopupStack {...props} />);
+
+        const overlay = component.find(`.${styles.overlay}`);
+        overlay.simulate('click', {target: 1, currentTarget: 1, preventDefault() {}});
+
+        sinon.assert.notCalled(props.destroy);
+    });
 });

tests/components/ui/popup/reducer.test.js

@@ -11,36 +11,38 @@ describe('popup/reducer', () => {
 
     describe('#create', () => {
         it('should create popup', () => {
+            const actual = reducer(undefined, create({
+                Popup: FakeComponent
+            }));
+
+            expect(actual.popups[0]).to.be.deep.equal({
+                Popup: FakeComponent
+            });
+        });
+
+        it('should support shortcut popup creation', () => {
             const actual = reducer(undefined, create(FakeComponent));
 
             expect(actual.popups[0]).to.be.deep.equal({
-                type: FakeComponent,
-                props: {}
+                Popup: FakeComponent
             });
         });
 
-        it('should store props', () => {
-            const expectedProps = {foo: 'bar'};
-            const actual = reducer(undefined, create(FakeComponent, expectedProps));
-
-            expect(actual.popups[0]).to.be.deep.equal({
-                type: FakeComponent,
-                props: expectedProps
-            });
-        });
-
-        it('should not remove existed popups', () => {
-            let actual = reducer(undefined, create(FakeComponent));
-            actual = reducer(actual, create(FakeComponent));
+        it('should create multiple popups', () => {
+            let actual = reducer(undefined, create({
+                Popup: FakeComponent
+            }));
+            actual = reducer(actual, create({
+                Popup: FakeComponent
+            }));
 
             expect(actual.popups[1]).to.be.deep.equal({
-                type: FakeComponent,
-                props: {}
+                Popup: FakeComponent
             });
         });
 
         it('throws when no type provided', () => {
-            expect(() => reducer(undefined, create())).to.throw('Popup type is required');
+            expect(() => reducer(undefined, create())).to.throw('Popup is required');
         });
     });
 
@@ -62,17 +64,15 @@ describe('popup/reducer', () => {
         });
 
         it('should not remove something, that it should not', () => {
-            state = reducer(state, create('foo'));
+            state = reducer(state, create({
+                Popup: FakeComponent
+            }));
 
             state = reducer(state, destroy(popup));
 
             expect(state.popups).to.have.length(1);
             expect(state.popups[0]).to.not.equal(popup);
         });
-
-        it('throws when no type provided', () => {
-            expect(() => reducer(undefined, destroy({}))).to.throw('Popup type is required');
-        });
     });
 });