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 (
@@ -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});
});
});