fix: display error details even if test has successful assertView res…

…ults and fix e2e tests (#516)

* fix: display error details even if test has successful assertView results

* test: fix e2e tests

lib/static/components/icons/view-in-browser/index.styl

@@ -2,7 +2,6 @@
     display: inline-block;
     width: 16px;
     height: 19px;
-    vertical-align: middle;
     margin-left: 4px;
     margin-right: 0;
     padding: 0 2px;

lib/static/components/section/body/tabs.jsx

@@ -11,7 +11,6 @@ class Tabs extends Component {
             id: PropTypes.string.isRequired,
             status: PropTypes.string.isRequired,
             imageIds: PropTypes.array.isRequired,
-            multipleTabs: PropTypes.bool.isRequired,
             screenshot: PropTypes.bool.isRequired,
             error: PropTypes.object
         }).isRequired
@@ -20,7 +19,7 @@ class Tabs extends Component {
     _shouldAddErrorTab() {
         const {result} = this.props;
 
-        return result.multipleTabs && isErrorStatus(result.status) && !result.screenshot;
+        return isErrorStatus(result.status);
     }
 
     _drawTab({key, imageId = null}) {

lib/static/styles.css

@@ -21,7 +21,7 @@
 
 .report {
     font: 15px YS Text, Helvetica Neue, Arial, sans-serif;
-    line-height: 20px;
+    line-height: 15px;
     margin-bottom: 15px;
 }
 
@@ -320,7 +320,7 @@ main.container {
 
 .section__body .section__title {
     font-size: 15px;
-    line-height: 20px;
+    line-height: 15px;
 }
 
 .section__body .section__title.section__title_type_browser {
@@ -335,7 +335,7 @@ main.container {
 .sticky-header__wrap:before {
     content: '';
     width: 18px;
-    height: 16px;
+    height: 18px;
     display: inline-block;
     margin-right: 5px;
     vertical-align: middle;

test/func/common.hermione.conf.js

@@ -13,7 +13,7 @@ module.exports.getCommonConfig = (projectDir) => ({
             desiredCapabilities: {
                 browserName: 'chrome',
                 'goog:chromeOptions': {
-                    args: ['headless', 'no-sandbox'],
+                    args: ['headless', 'no-sandbox', 'hide-scrollbars'],
                     binary: CHROME_BINARY_PATH
                 }
             },

test/func/fixtures/hermione/failed-describe.hermione.js

@@ -21,6 +21,14 @@ describe('failed describe', function() {
         throw new Error(`long_error_message ${'0123456789'.repeat(20)}\n message content`);
     });
 
+    it('test with successful assertView and error', async ({browser}) => {
+        await browser.url(browser.options.baseUrl);
+
+        await browser.assertView('header', 'header');
+
+        throw new Error('Some error');
+    });
+
     it.skip('test skipped', async ({browser}) => {
         await browser.url(browser.options.baseUrl);
     });

test/func/fixtures/playwright/tests/failed-describe.spec.ts

@@ -34,6 +34,14 @@ test.describe('failed describe', () => {
         test.skip(true, 'foo-bar');
     });
 
+    test('test with successful assertView and error', async ({page, baseURL}) => {
+        await page.goto(baseURL as string);
+
+        await expect(page.locator('header')).toHaveScreenshot('header-success.png');
+
+        throw new Error('Some error');
+    });
+
     test.skip('test skipped', async ({page, baseURL}) => {
         await page.goto(baseURL as string);
     });

test/func/tests/common-gui/index.hermione.js

@@ -6,7 +6,7 @@ const {promisify} = require('util');
 const treeKill = promisify(require('tree-kill'));
 
 const {PORTS} = require('../../utils/constants');
-const {getTestSectionByNameSelector, getSpoilerByNameSelector, getElementWithTextSelector} = require('../utils');
+const {getTestSectionByNameSelector, getSpoilerByNameSelector, getElementWithTextSelector, hideScreenshots} = require('../utils');
 
 const serverHost = process.env.SERVER_HOST ?? 'host.docker.internal';
 
@@ -139,6 +139,7 @@ describe('GUI mode', () => {
                     getTestSectionByNameSelector(fullTestName) +
                     '//button[@data-test-id="retry-switcher"]';
                 const retrySwitcher = browser.$(`(${allRetryButtonsSelector})[last()]`);
+                await hideScreenshots(browser);
 
                 await retrySwitcher.assertView('retry-switcher');
 
@@ -155,13 +156,15 @@ describe('GUI mode', () => {
                 );
 
                 await retryButton.click();
+                await retryButton.waitForClickable({reverse: true, timeout: 10000});
                 await retryButton.waitForClickable({timeout: 10000});
 
                 // Verify green retry button
                 const allRetryButtonsSelector =
                     getTestSectionByNameSelector(fullTestName) +
                     '//button[@data-test-id="retry-switcher"]';
                 const retrySwitcher = browser.$(`(${allRetryButtonsSelector})[last()]`);
+                await hideScreenshots(browser);
 
                 await retrySwitcher.assertView('retry-switcher');
 

test/func/tests/common/test-results-appearance.hermione.js

@@ -1,4 +1,10 @@
-const {getTestSectionByNameSelector, getImageSectionSelector, getTestStateByNameSelector, getElementWithTextSelector, hideHeader} = require('../utils');
+const {
+    getTestSectionByNameSelector,
+    getImageSectionSelector,
+    getTestStateByNameSelector,
+    getElementWithTextSelector,
+    hideHeader, hideScreenshots
+} = require('../utils');
 
 describe('Test results appearance', () => {
     beforeEach(async ({browser}) => {
@@ -13,6 +19,7 @@ describe('Test results appearance', () => {
             );
 
             await hideHeader(browser);
+            await hideScreenshots(browser);
 
             await retrySelectorButton.assertView('retry-selector');
         });
@@ -26,6 +33,7 @@ describe('Test results appearance', () => {
             );
 
             await hideHeader(browser);
+            await hideScreenshots(browser);
 
             await retrySelectorButton.assertView('retry-selector');
         });
@@ -66,7 +74,8 @@ describe('Test results appearance', () => {
             );
 
             await hideHeader(browser);
-            await browser.execute(() =>{
+            await hideScreenshots(browser);
+            await browser.execute(() => {
                 window.scrollTo(0, 10000);
             });
 
@@ -106,6 +115,7 @@ describe('Test results appearance', () => {
             );
 
             await hideHeader(browser);
+            await hideScreenshots(browser);
 
             await retrySelectorButton.assertView('retry-selector');
         });
@@ -121,4 +131,19 @@ describe('Test results appearance', () => {
             }
         });
     });
+
+    describe('Test with successful assertView and error', () => {
+        // eslint-disable-next-line no-undef
+        hermione.only.in('chrome');
+        it('should display error message, name and stack', async ({browser}) => {
+            for (const field of ['message', 'name', 'stack']) {
+                const errorMessage = browser.$(
+                    getTestSectionByNameSelector('test with successful assertView and error') +
+                    getElementWithTextSelector('span', field) + '/..'
+                );
+
+                await expect(errorMessage).toBeDisplayed();
+            }
+        });
+    });
 });

test/func/tests/utils.js

@@ -20,11 +20,20 @@ const hideHeader = async (browser) => {
     });
 };
 
+const hideScreenshots = async (browser) => {
+    await browser.execute(() => {
+        document.querySelectorAll('.image-box__image').forEach(el => {
+            el.style.display = 'none';
+        });
+    });
+};
+
 module.exports = {
     getTestSectionByNameSelector,
     getTestStateByNameSelector,
     getImageSectionSelector,
     getElementWithTextSelector,
     getSpoilerByNameSelector,
-    hideHeader
+    hideHeader,
+    hideScreenshots
 };

test/unit/lib/static/components/section/body/tabs.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import proxyquire from 'proxyquire';
 import {defaultsDeep} from 'lodash';
-import {ERROR, SUCCESS} from 'lib/constants/test-statuses';
+import {ERROR, FAIL, SUCCESS} from 'lib/constants/test-statuses';
 import {mkConnectedComponent} from '../../utils';
 
 describe('<Tabs />', () => {
@@ -13,9 +13,7 @@ describe('<Tabs />', () => {
             result: {
                 id: 'default-result-id',
                 status: SUCCESS,
-                imageIds: [],
-                multipleTabs: true,
-                screenshot: true
+                imageIds: []
             }
         });
 
@@ -64,7 +62,7 @@ describe('<Tabs />', () => {
     });
 
     it('should render image tab for each image id', () => {
-        const result = {status: ERROR, imageIds: ['img-1', 'img-2']};
+        const result = {status: FAIL, imageIds: ['img-1', 'img-2']};
 
         const component = mkTabs({result});
 
@@ -75,7 +73,7 @@ describe('<Tabs />', () => {
     });
 
     it('should not render additional error tab if test errored with screenshot on reject', () => {
-        const result = {status: ERROR, imageIds: ['img-1'], screenshot: true};
+        const result = {status: FAIL, imageIds: ['img-1'], screenshot: true};
 
         const component = mkTabs({result});