Merge pull request #589 from gemini-testing/sp.fix-ansi

fix: strip ansi markup for error message

Author: sipayRT

lib/static/components/state/state-error.jsx

@@ -8,6 +8,7 @@ import {isEmpty, map, isFunction} from 'lodash';
 import ReactHtmlParser from 'html-react-parser';
 import escapeHtml from 'escape-html';
 import ansiHtml from 'ansi-html-community';
+import stripAnsi from 'strip-ansi';
 import * as actions from '../../modules/actions';
 import ResizedScreenshot from './screenshot/resized';
 import ErrorDetails from './error-details';
@@ -95,7 +96,7 @@ class StateError extends Component {
                 content = isFunction(value) ? value : () => value;
             }
 
-            const title = <Fragment><span className="error__item-key">{key}: </span>{titleText}</Fragment>;
+            const title = <Fragment><span className="error__item-key">{key}: </span>{stripAnsi(titleText)}</Fragment>;
             const asHtml = typeof content === 'string';
 
             return <Details

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

@@ -29,6 +29,10 @@ describe('failed describe', function() {
         throw new Error('Some error');
     });
 
+    it('failed test with ansi markup', async () => {
+        await expect({a: {b: 'c'}}).toMatchObject({c: {b: 'a'}});
+    });
+
     it.skip('test skipped', async ({browser}) => {
         await browser.url(browser.options.baseUrl);
     });

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

@@ -42,7 +42,7 @@ describe('Test results appearance', () => {
 
         it('should display 3 images', async ({browser}) => {
             for (const imageStatus of ['Expected', 'Actual', 'Diff']) {
-                const imageElement = browser.$(
+                const imageElement = await browser.$(
                     getTestSectionByNameSelector('test with image comparison diff') +
                     getImageSectionSelector(imageStatus) +
                     '//img'
@@ -57,7 +57,7 @@ describe('Test results appearance', () => {
 
         it('should not display error info', async ({browser}) => {
             for (const field of ['message', 'name', 'stack']) {
-                const errorMessage = browser.$(
+                const errorMessage = await browser.$(
                     getTestSectionByNameSelector('test with image comparison diff') +
                     getTestStateByNameSelector('header') +
                     getElementWithTextSelector('span', field) + '/..'
@@ -86,7 +86,7 @@ describe('Test results appearance', () => {
 
         it('should display error message, name and stack', async ({browser}) => {
             for (const field of ['message', 'name', 'stack']) {
-                const errorMessage = browser.$(
+                const errorMessage = await browser.$(
                     getTestSectionByNameSelector('test without screenshot') +
                     getTestStateByNameSelector('header') +
                     getElementWithTextSelector('span', field) + '/..'
@@ -97,7 +97,7 @@ describe('Test results appearance', () => {
         });
 
         it('should display actual screenshot', async ({browser}) => {
-            const imageElement = browser.$(
+            const imageElement = await browser.$(
                 getTestSectionByNameSelector('test without screenshot') +
                 '//' + getSpoilerByNameSelector('header') +
                 '//img'
@@ -124,14 +124,23 @@ describe('Test results appearance', () => {
 
         it('should display error message, name and stack', async ({browser}) => {
             for (const field of ['message', 'name', 'stack']) {
-                const errorMessage = browser.$(
+                const errorMessage = await browser.$(
                     getTestSectionByNameSelector('test with long error message') +
                     getElementWithTextSelector('span', field) + '/..'
                 );
 
                 await expect(errorMessage).toBeDisplayed();
             }
         });
+
+        it('should show message without ansi markup', async ({browser}) => {
+            const expectedErrorText = 'expect(received).toMatchObject(expected)';
+            const testElem = await browser.$(getTestSectionByNameSelector('failed test with ansi markup'));
+
+            const errorText = await testElem.$('.tab .error__item.details__summary').getText();
+
+            assert.equal(errorText, `message: ${expectedErrorText}`);
+        });
     });
 
     describe('Test with successful assertView and error', () => {