Fix: Expected to find element: span, but never found it.

Author: Deepak-cell311

cypress/components/Headlines.cy.tsx

@@ -6,6 +6,7 @@ import {
   Headline4,
 } from '~/components/Headlines';
 import mockNextRouter, { MockRouter } from '../plugins/mockNextRouterUtils';
+import slugifyMarkdownHeadline from '~/lib/slugifyMarkdownHeadline';
 
 describe('Headlines Component', () => {
   let mockRouter: MockRouter;
@@ -94,11 +95,14 @@ describe('Headlines Component', () => {
   it('should be active if the URL has the hash', () => {
     /* Testing the active headline with Headline1 */
 
-    // Set the URL with the hash
-    mockRouter.asPath = '/#what-is-json-schema';
+    const title = 'What is JSON Schema?'
+    const slug = slugifyMarkdownHeadline(title)
+    
+    // Update the existing mock router's properties
+    mockRouter.asPath = `/#${slug}`;
 
     // Check if Correct headline is active
-    cy.mount(<Headline1>What is JSON Schema?</Headline1>);
+    cy.mount(<Headline1>{title}</Headline1>);
     cy.get('span').should(
       'have.class',
       'text-startBlue dark:text-endBlue inline-block ml-2',

lib/slugifyMarkdownHeadline.ts

@@ -9,7 +9,7 @@ export default function slugifyMarkdownHeadline(
     return slugify(markdownChildren, {
       lower: true,
       trim: true,
-      remove: /[*+~.()'"!:@]/g,
+      remove: /[*+~()'"!]/g,
     });
 
   const metaSlug = markdownChildren.reduce((acc, child) => {
@@ -26,10 +26,12 @@ export default function slugifyMarkdownHeadline(
     .filter((child) => typeof child === 'string')
     .map((string) => string.replace(FRAGMENT_REGEX, ''))
     .join(' ');
+
   const slug = slugify(joinedChildren, {
     lower: true,
     trim: true,
-    remove: /[*+~.()'"!:@]/g,
+    remove: /[*+~()'"!]/g,
+
   });
   return slug;
 }