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 <[email protected]> Co-authored-by: Jennifer Shehane <[email protected]>
cypress-io · Apr 10, 2024 · 1fa3e7f · 1fa3e7f · cypress-bot · Apr 10, 2024
1 parent 96b14c3
commit 1fa3e7f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/cli/CHANGELOG.md b/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).
 
 

diff --git a/packages/reporter/cypress/e2e/unit/formatted_message.cy.ts b/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', () => {

diff --git a/packages/reporter/src/commands/command.tsx b/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 = () => {