Merge pull request #452 from gemini-testing/sp.modalMetaView

fix(modal-view): do not crash on ScreenshotAccepterMeta render

lib/static/components/modals/screenshot-accepter/header.js

@@ -131,6 +131,7 @@ export default class ScreenshotAccepterHeader extends Component {
                             label="Show meta"
                             title="Show test meta info"
                             isActive={showMeta}
+                            isDisabled={images.length === 0}
                             isSuiteControl={true}
                             extendClassNames="screenshot-accepter__show-meta-btn"
                             handler={onShowMeta}

lib/static/components/modals/screenshot-accepter/index.js

@@ -111,7 +111,7 @@ class ScreenshotAccepter extends Component {
                 />
                 <ScreenshotAccepterMeta
                     showMeta={showMeta}
-                    resultId={currImage.parentId}
+                    image={currImage}
                 />
                 <ScreenshotAccepterBody image={currImage} />
             </Fragment>

lib/static/components/modals/screenshot-accepter/meta.js

@@ -6,21 +6,23 @@ import MetaInfoContent from '../../section/body/meta-info/content';
 export default class ScreenshotAccepterMeta extends Component {
     static propTypes = {
         showMeta: PropTypes.bool.isRequired,
-        resultId: PropTypes.string.isRequired
+        image: PropTypes.shape({
+            parentId: PropTypes.string
+        })
     }
 
     render() {
-        const {showMeta, resultId} = this.props;
+        const {showMeta, image} = this.props;
 
-        if (!showMeta) {
-            return (<Fragment></Fragment>);
+        if (!showMeta || !image) {
+            return null;
         }
 
         return (
             <Fragment>
                 <div className="screenshot-accepter__meta container">
                     <MetaInfoContent
-                        resultId={resultId}
+                        resultId={image.parentId}
                     />
                 </div>
                 <hr className='tab__separator' />

lib/static/styles.css

@@ -142,6 +142,10 @@ main.container {
     border-color: #cebe7d;
 }
 
+.button_checked[disabled] {
+    border-color: #ccc;
+}
+
 .button.button_type_action {
     background: #ffde5a;
 }

test/unit/lib/static/components/modals/screenshot-accepter/header.js

@@ -340,6 +340,22 @@ describe('<ScreenshotAccepterHeader/>', () => {
         });
     });
 
+    describe('"Show meta" button', () => {
+        const metaSelector = '[label="Show meta"]';
+
+        it('should be disabled if there are no images to accept', () => {
+            const component = mkHeaderComponent({images: []});
+
+            assert.isTrue(component.find(metaSelector).prop('isDisabled'));
+        });
+
+        it('should be enabled if passed not empty "images" array', () => {
+            const component = mkHeaderComponent({images: [{id: 'img-1', parentId: 'res-1'}]});
+
+            assert.isFalse(component.find(metaSelector).prop('isDisabled'));
+        });
+    });
+
     describe('"Close screenshot accepting mode" button', () => {
         it('should call "onClose" handler on click', () => {
             const onClose = sandbox.stub();

test/unit/lib/static/components/modals/screenshot-accepter/index.js

@@ -202,7 +202,7 @@ describe('<ScreenshotAccepter/>', () => {
                 ScreenshotAccepterMeta,
                 {
                     showMeta: false,
-                    resultId: 'res-1'
+                    image
                 }
             );
         });

test/unit/lib/static/components/modals/screenshot-accepter/meta.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import proxyquire from 'proxyquire';
+import {mkConnectedComponent} from '../../utils';
+
+describe('<ScreenshotAccepterMeta/>', () => {
+    const sandbox = sinon.sandbox.create();
+    let ScreenshotAccepterMeta, MetaInfoContent;
+
+    const mkMetaComponent = (props = {}) => {
+        return mkConnectedComponent(<ScreenshotAccepterMeta {...props} />);
+    };
+
+    beforeEach(() => {
+        MetaInfoContent = sandbox.stub().returns(null);
+
+        ScreenshotAccepterMeta = proxyquire('lib/static/components/modals/screenshot-accepter/meta', {
+            '../../section/body/meta-info/content': {default: MetaInfoContent}
+        }).default;
+    });
+
+    afterEach(() => sandbox.restore());
+
+    describe('should not render meta info', () => {
+        it('if "showMeta" property is false', () => {
+            const component = mkMetaComponent({
+                showMeta: false,
+                image: {id: 'some-id'}
+            });
+
+            assert.isEmpty(component.html());
+        });
+
+        it('if "image" property is empty', () => {
+            const component = mkMetaComponent({
+                showMeta: true,
+                image: null
+            });
+
+            assert.isEmpty(component.html());
+        });
+    });
+});