fix: format special characters correctly (#22537)

* Update packages/reporter/cypress/e2e/unit/formatted_message.cy.ts

Co-authored-by: Rachel <rachel@cypress.io>

* Update packages/reporter/cypress/e2e/unit/formatted_message.cy.ts

Co-authored-by: Rachel <rachel@cypress.io>

* Remove extra spaces

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Matt Henkes <mjhenkes@gmail.com>
Co-authored-by: Rachel <rachel@cypress.io>
Co-authored-by: Tyler Biethman <tbiethman@users.noreply.github.com>
Co-authored-by: Benjamin Mayanja <vibenjamin6@gmail.com>

packages/reporter/cypress/e2e/unit/formatted_message.cy.ts

@@ -0,0 +1,30 @@
+import { formattedMessage } from '../../../src/commands/command'
+
+describe('formattedMessage', () => {
+  it('returns empty string when message is falsy', () => {
+    const result = formattedMessage('')
+
+    expect(result).to.equal('')
+  })
+
+  it('maintains special characters when using "to match"', () => {
+    const specialMessage = 'expected **__*abcdef*__** to match /__.*abcdef.*__/'
+    const result = formattedMessage(specialMessage)
+
+    expect(result).to.equal('expected <strong><strong><em>abcdef</em></strong></strong> to match <strong>/__.*abcdef.*__/</strong>')
+  })
+
+  it('maintains special characters when using "to contain"', () => {
+    const specialMessage = 'expected ***abcdef*** to equal ***abcdef***'
+    const result = formattedMessage(specialMessage)
+
+    expect(result).to.equal('expected <em><strong>abcdef</strong></em> to equal <strong>***abcdef***</strong>')
+  })
+
+  it('does NOT maintain special characters when "to equal" or "to match" are not in assertion', () => {
+    const specialMessage = 'expected ***abcdef*** to contain ***abcdef***'
+    const result = formattedMessage(specialMessage)
+
+    expect(result).to.equal('expected <em><strong>abcdef</strong></em> to contain <em><strong>abcdef</strong></em>')
+  })
+})

packages/reporter/src/commands/command.tsx

@@ -25,7 +25,21 @@ const md = new Markdown()
 
 const displayName = (model: CommandModel) => model.displayName || model.name
 const nameClassName = (name: string) => name.replace(/(\s+)/g, '-')
-const formattedMessage = (message: string) => message ? md.renderInline(message) : ''
+
+export const formattedMessage = (message: string) => {
+  if (!message) return ''
+
+  const searchText = ['to match', 'to equal']
+  const regex = new RegExp(searchText.join('|'))
+  const split = message.split(regex)
+  const matchingText = searchText.find((text) => message.includes(text))
+  const textToConvert = [split[0].trim(), ...(matchingText ? [matchingText] : [])].join(' ')
+  const converted = md.renderInline(textToConvert)
+  const assertion = (split[1] && [`<strong>${split[1].trim()}</strong>`]) || []
+
+  return [converted, ...assertion].join(' ')
+}
+
 const invisibleMessage = (model: CommandModel) => {
   return model.numElements > 1 ?
     'One or more matched elements are not visible.' :

packages/reporter/src/errors/test-error.tsx

@@ -12,6 +12,7 @@ import FlashOnClick from '../lib/flash-on-click'
 import { onEnterOrSpace } from '../lib/util'
 import Attempt from '../attempts/attempt-model'
 import Command from '../commands/command-model'
+import { formattedMessage } from '../commands/command'
 
 import WarningIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/warning_x8.svg'
 import TerminalIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/technology-terminal_x16.svg'
@@ -54,10 +55,6 @@ const TestError = observer((props: TestErrorProps) => {
     onPrint()
   }
 
-  const formattedMessage = (message?: string) => {
-    return message ? md.renderInline(message) : ''
-  }
-
   const { err } = props.model
   const { codeFrame } = err