fix: Fix issue with display of assertions when using custom messages (#…

…29243)

* fix: added optional custom message to regex

* add changelog entry

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

* moved changelog entry to new cypress version

---------

Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com>
Co-authored-by: Jennifer Shehane <jennifer@cypress.io>

cli/CHANGELOG.md

@@ -10,6 +10,7 @@ _Released 4/16/2024 (PENDING)_
 
 **Bugfixes:**
 
+- Fixed an issue where asserts with custom messages weren't displaying properly. Fixes [#29167](https://github.com/cypress-io/cypress/issues/29167)
 - Fixed and issue where cypress launch arguments were not being escaped correctly with multiple values inside quotes. Fixes [#27454](https://github.com/cypress-io/cypress/issues/27454).
 
 

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

@@ -85,6 +85,13 @@ describe('formattedMessage', () => {
 
       expect(result).to.equal('expected <strong>&lt;button#increment&gt;</strong> to be enabled')
     })
+
+    it('renders the custom message properly with the assertion message', () => {
+      const specialMessage = 'My Custom Message: expected **abcdef** to equal **abcdef**'
+      const result = formattedMessage(specialMessage, 'assert')
+
+      expect(result).to.equal('My Custom Message: expected <strong>abcdef</strong> to equal <strong>abcdef</strong>')
+    })
   })
 
   describe('when command that accepts url', () => {

packages/reporter/src/commands/command.tsx

@@ -35,15 +35,15 @@ const asterisksRegex = /^\*\*(.+?)\*\*$/gs
 // 'expected **<span>** to exist in the DOM'
 // `expected **glob*glob** to contain *****`
 // `expected **<span>** to have CSS property **background-color** with the value **rgb(0, 0, 0)**, but the value was **rgba(0, 0, 0, 0)**`
-const assertionRegex = /expected | to[^\*]+| not[^\*]+| with[^\*]+|, but[^\*]+/g
+const assertionRegex = /.*expected | to[^\*]+| not[^\*]+| with[^\*]+|, but[^\*]+/g
 
 // used to format the display of command messages and error messages
 // we use markdown syntax within our error messages (code ticks, urls, etc)
 // and cy.log and Cypress.log supports markdown formatting
 export const formattedMessage = (message: string, name?: string) => {
   if (!message) return ''
 
-  // the command message is formatted as 'expected <actual> to {assertion} <expected>'
+  // the command message is formatted as '(Optional Custom Msg:) expected <actual> to {assertion} <expected>'
   const assertionArray = message.match(assertionRegex)
 
   const expectedActualArray = () => {