From ac135dc2834751da784495d6b598e58096eeeb80 Mon Sep 17 00:00:00 2001 From: sipayrt Date: Mon, 2 Oct 2023 17:10:17 +0300 Subject: [PATCH] feat(screenshot-accepter): add more space for screenshot view --- .../modals/screenshot-accepter/body.jsx | 14 +++++---- .../modals/screenshot-accepter/style.css | 30 ++++++++++++------- lib/static/components/progress-bar/index.styl | 2 +- .../components/state/state-fail/index.jsx | 2 +- lib/static/styles.css | 4 +-- .../modals/screenshot-accepter/body.jsx | 29 ++++++++++++++---- 6 files changed, 55 insertions(+), 26 deletions(-) diff --git a/lib/static/components/modals/screenshot-accepter/body.jsx b/lib/static/components/modals/screenshot-accepter/body.jsx index ec574924c..6fa365cf7 100644 --- a/lib/static/components/modals/screenshot-accepter/body.jsx +++ b/lib/static/components/modals/screenshot-accepter/body.jsx @@ -13,7 +13,8 @@ class ScreenshotAccepterBody extends Component { expectedImg: PropTypes.object, actualImg: PropTypes.object, diffImg: PropTypes.object, - error: PropTypes.object + error: PropTypes.object, + parentId: PropTypes.string }), // from store testName: PropTypes.string, @@ -27,24 +28,26 @@ class ScreenshotAccepterBody extends Component {
{ isNoRefImageError(image.error) - ? this._renderImageBox('No reference image', image.actualImg) + ? this._renderImageBox(image.actualImg) : }
); } - _renderImageBox(label, image) { + _renderImageBox(image) { return (
-
{label}
); } _renderTitle() { - const {testName, browserName, image: {stateName, parentId: resultId}} = this.props; + const {testName, browserName, image: {stateName, parentId: resultId, error: imageError}} = this.props; + const imagesDescription = isNoRefImageError(imageError) + ? 'actual' + : 'expected, actual, diff'; return (
@@ -53,6 +56,7 @@ class ScreenshotAccepterBody extends Component { {browserName} {'/'} {stateName} + ({imagesDescription})
); diff --git a/lib/static/components/modals/screenshot-accepter/style.css b/lib/static/components/modals/screenshot-accepter/style.css index c85c38b98..99357b6ad 100644 --- a/lib/static/components/modals/screenshot-accepter/style.css +++ b/lib/static/components/modals/screenshot-accepter/style.css @@ -11,13 +11,15 @@ overflow-y: auto; } -.screenshot-accepter__header { +.screenshot-accepter__header.container { + padding-left: 15px; + padding-right: 15px; background-color: #fff; } .screenshot-accepter__controls.state-controls .progress-bar { margin-left: auto; - margin-bottom: 20px; + margin-bottom: 15px; } .screenshot-accepter__controls.state-controls .progress-bar::after { @@ -35,14 +37,14 @@ .state-controls.screenshot-accepter__controls { display: flex; flex-wrap: wrap; - margin-top: 20px; + margin-top: 15px; } .screenshot-accepter__controls .button, .screenshot-accepter__controls .tab-switcher, .screenshot-accepter__controls .select { - margin-right: 20px; - margin-bottom: 20px; + margin-right: 15px; + margin-bottom: 15px; } .button.screenshot-accepter__arrows-open-btn, @@ -85,7 +87,7 @@ .button.screenshot-accepter__arrow-down-btn, .button.screenshot-accepter__accept-btn { - margin-right: 20px; + margin-right: 15px; } .button.screenshot-accepter__arrow-down-btn .arrow-icon { @@ -104,15 +106,19 @@ .screenshot-accepter__title { font-size: 16px; - line-height: 20px; - margin-top: 20px; - margin-bottom: 20px; + line-height: 10px; + margin-top: 10px; + margin-bottom: 10px; } .screenshot-accepter__test-name { font-weight: bold; } +.screenshot-accepter__images-desc { + color: #808080; +} + .screenshot-accepter__title-divider { margin-left: 5px; margin-right: 5px; @@ -124,8 +130,10 @@ font-size: 20px; } -.screenshot-accepter__body { - margin-bottom: 30px; +.screenshot-accepter__body.container { + padding-left: 15px; + padding-right: 15px; + margin-bottom: 10px; } .screenshot-accepter__body .screenshot-accepter__icon_view-in-browser { diff --git a/lib/static/components/progress-bar/index.styl b/lib/static/components/progress-bar/index.styl index abc5afe72..02ea261a0 100644 --- a/lib/static/components/progress-bar/index.styl +++ b/lib/static/components/progress-bar/index.styl @@ -1,7 +1,7 @@ .progress-bar { position: relative; display: flex; - outline: 1px solid #ccc; + border: 1px solid #ccc; border-radius: 5px; &__container { diff --git a/lib/static/components/state/state-fail/index.jsx b/lib/static/components/state/state-fail/index.jsx index 24ede4059..d87331323 100644 --- a/lib/static/components/state/state-fail/index.jsx +++ b/lib/static/components/state/state-fail/index.jsx @@ -64,7 +64,7 @@ const StateFail = ({image, diffMode: diffModeProp, isScreenshotAccepterOpened}) return (
- {label &&
{titleText}
} + {label && !isScreenshotAccepterOpened &&
{titleText}
} ', () => { assert.isEmpty(component.find('.screenshot-accepter__title')); }); - it('should render full title of image state', () => { + it('should render full title of image state with image description', () => { const image = mkImage({id: 'img', parentId: 'res', stateName: 'state'}); const resultsById = mkResult({id: 'res', parentId: 'bro'}); const browsersById = mkBrowser({id: 'bro', parentId: 'suite', name: 'yabro'}); @@ -87,12 +87,30 @@ describe('', () => { assert.equal( component.find('.screenshot-accepter__title').text(), - 'suite/yabro/state' + 'suite/yabro/state (expected, actual, diff)' ); }); describe('no reference image error', () => { - it('should render screenshot with title', () => { + it('should render screenshot', () => { + const image = mkImage({ + id: 'img', + parentId: 'res', + stateName: 'state', + error: {stack: 'NoRefImageError'}, + actualImg: {path: 'some/path', size: {width: 10, height: 20}} + }); + const resultsById = mkResult({id: 'res', parentId: 'bro'}); + const browsersById = mkBrowser({id: 'bro', parentId: 'suite', name: 'yabro'}); + const tree = mkStateTree({browsersById, resultsById}); + isNoRefImageError.withArgs(image.error).returns(true); + + mkBodyComponent({image}, {tree}); + + assert.calledOnceWith(ResizedScreenshot, {image: image.actualImg}); + }); + + it('should render full title of image state with image description', () => { const image = mkImage({ id: 'img', parentId: 'res', @@ -108,10 +126,9 @@ describe('', () => { const component = mkBodyComponent({image}, {tree}); assert.equal( - component.find('.image-box__title').text(), - 'No reference image' + component.find('.screenshot-accepter__title').text(), + 'suite/yabro/state (actual)' ); - assert.calledOnceWith(ResizedScreenshot, {image: image.actualImg}); }); });