From a60522ecc0eb1aacfb24e604c373cf0dfbace7e2 Mon Sep 17 00:00:00 2001
From: sipayrt <sipayrt@yandex.ru>
Date: Fri, 9 Aug 2024 17:06:21 +0300
Subject: [PATCH] fix: strip ansi markup for error message

---
 lib/static/components/state/state-error.jsx   |  3 ++-
 .../testplane/failed-describe.testplane.js    |  4 ++++
 .../test-results-appearance.testplane.js      | 19 ++++++++++++++-----
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/lib/static/components/state/state-error.jsx b/lib/static/components/state/state-error.jsx
index 9a17963f2..b7fba739c 100644
--- a/lib/static/components/state/state-error.jsx
+++ b/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
diff --git a/test/func/fixtures/testplane/failed-describe.testplane.js b/test/func/fixtures/testplane/failed-describe.testplane.js
index 0e9f20c6f..6c7b43cee 100644
--- a/test/func/fixtures/testplane/failed-describe.testplane.js
+++ b/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);
     });
diff --git a/test/func/tests/common/test-results-appearance.testplane.js b/test/func/tests/common/test-results-appearance.testplane.js
index 87f66b904..a34956cc6 100644
--- a/test/func/tests/common/test-results-appearance.testplane.js
+++ b/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,7 +124,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 with long error message') +
                     getElementWithTextSelector('span', field) + '/..'
                 );
@@ -132,6 +132,15 @@ describe('Test results appearance', () => {
                 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', () => {