From 7c63bf33e22e01a92e64227debed0bda4277552f Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Wed, 31 Jul 2024 13:26:28 -0700
Subject: [PATCH] fix-blockswitcher-value-conversion-for-emojis

---
 .../BlockSwitcher/BlockSwitcher.tsx           |  8 ++++-
 .../__tests__/BlockSwitcher.test.tsx          | 31 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/BlockSwitcher/BlockSwitcher.tsx b/src/components/BlockSwitcher/BlockSwitcher.tsx
index 6353d1a7021..9030dcecd38 100644
--- a/src/components/BlockSwitcher/BlockSwitcher.tsx
+++ b/src/components/BlockSwitcher/BlockSwitcher.tsx
@@ -20,7 +20,13 @@ export const BlockSwitcher = ({ children }: BlockSwitcherProps) => {
    * convert names with spaces to valid ID attribute values
    */
   const convertNameToValue = (name: string) => {
-    return `${name.split(' ').join('-').toLowerCase()}-${uniqueId}`;
+    return `${name
+      .replace(/\p{Emoji}/gu, '')
+      .split(' ')
+      // filter out leftover whitespace from emoji replacement
+      .filter(Boolean)
+      .join('-')
+      .toLowerCase()}-${uniqueId}`;
   };
 
   return (
diff --git a/src/components/BlockSwitcher/__tests__/BlockSwitcher.test.tsx b/src/components/BlockSwitcher/__tests__/BlockSwitcher.test.tsx
index 8fdf3206208..928a6eb5ec6 100644
--- a/src/components/BlockSwitcher/__tests__/BlockSwitcher.test.tsx
+++ b/src/components/BlockSwitcher/__tests__/BlockSwitcher.test.tsx
@@ -86,10 +86,41 @@ describe('BlockSwitcher', () => {
 
   it('should throw an error if only a single block exists', () => {
     const singleBlock = (
+      // @ts-expect-error we're testing for an error
       <BlockSwitcher>
         <Block name="JavaScript">{blockAContent}</Block>
       </BlockSwitcher>
     );
     expect(() => render(singleBlock)).toThrow(BlockSwitcherErrorMessage);
   });
+
+  it('should convert children names with spaces to values with dashes', () => {
+    const component = (
+      <BlockSwitcher>
+        <Block name="the first tab">sample content</Block>
+        <Block name="the second tab">sample content</Block>
+      </BlockSwitcher>
+    );
+    render(component);
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[0]).toHaveAttribute(
+      'id',
+      expect.stringMatching(/^the-first-tab\-.*/)
+    );
+  });
+
+  it('should convert children names with emojis to values without emojis', () => {
+    const component = (
+      <BlockSwitcher>
+        <Block name="🚀 rocket">sample content</Block>
+        <Block name="a second tab">sample content</Block>
+      </BlockSwitcher>
+    );
+    render(component);
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[0]).toHaveAttribute(
+      'id',
+      expect.stringMatching(/^rocket\-.*\-tab$/)
+    );
+  });
 });