feat(uuid): console errors if invalid ids

Author: synecdokey

src/components/AccordionItemButton.spec.tsx

@@ -59,22 +59,6 @@ describe('AccordionItem', () => {
         });
     });
 
-    it('throws on invalid uuid', () => {
-        expect(() => {
-            render(
-                <Accordion>
-                    <AccordionItem uuid={UUIDS.BAD_ID}>
-                        <AccordionItemHeading>
-                            <AccordionItemButton>
-                                Hello World
-                            </AccordionItemButton>
-                        </AccordionItemHeading>
-                    </AccordionItem>
-                </Accordion>,
-            );
-        }).toThrow();
-    });
-
     describe('children prop', () => {
         it('is respected', () => {
             const { getByText } = render(

src/components/AccordionItemHeading.spec.tsx

@@ -59,22 +59,6 @@ describe('AccordionItem', () => {
         });
     });
 
-    it('throws on invalid uuid', () => {
-        expect(() => {
-            render(
-                <Accordion>
-                    <AccordionItem>
-                        <AccordionItemHeading id={UUIDS.BAD_ID}>
-                            <AccordionItemButton>
-                                Hello World
-                            </AccordionItemButton>
-                        </AccordionItemHeading>
-                    </AccordionItem>
-                </Accordion>,
-            );
-        }).toThrow();
-    });
-
     describe('children prop', () => {
         it('is respected', () => {
             const { getByText } = render(

src/components/AccordionItemPanel.spec.tsx

@@ -54,18 +54,6 @@ describe('AccordionItem', () => {
         });
     });
 
-    it('throws on invalid id', () => {
-        expect(() => {
-            render(
-                <Accordion>
-                    <AccordionItem uuid={UUIDS.BAD_ID}>
-                        <AccordionItemPanel id={UUIDS.BAD_ID} />
-                    </AccordionItem>
-                </Accordion>,
-            );
-        }).toThrow();
-    });
-
     describe('children prop', () => {
         it('is respected', () => {
             const { getByText } = render(

src/helpers/uuid.spec.ts

@@ -1,4 +1,4 @@
-import { nextUuid, resetNextUuid } from './uuid';
+import { assertValidHtmlId, nextUuid, resetNextUuid } from './uuid';
 
 describe('UUID helper', () => {
     describe('nextUuid', () => {
@@ -16,4 +16,17 @@ describe('UUID helper', () => {
             expect(nextUuid()).toBe('raa-0');
         });
     });
+
+    describe('assertValidHtmlId', () => {
+        it("returns false in case there's a whitespace or an empty string", () => {
+            expect(assertValidHtmlId('a a')).toBe(false);
+            expect(assertValidHtmlId('a	a')).toBe(false);
+            expect(assertValidHtmlId('')).toBe(false);
+        });
+
+        it('returns true on a valid id', () => {
+            expect(assertValidHtmlId('💜')).toBe(true);
+            expect(assertValidHtmlId('✅')).toBe(true);
+        });
+    });
 });

src/helpers/uuid.ts

@@ -15,15 +15,19 @@ export function resetNextUuid(): void {
     counter = DEFAULT;
 }
 
-// https://stackoverflow.com/a/14664879
-// but modified to allow additional first characters per HTML5
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-const idRegex = /^[_\-.a-zA-Z][\w:.-]*$/;
-
-export function assertValidHtmlId(htmlId: string): void {
-    if (!htmlId.toString().match(idRegex)) {
-        throw new Error(
-            `uuid must be a valid HTML Id but was given "${htmlId}"`,
+// HTML5 ids allow all unicode characters, except for ASCII whitespaces
+// https://infra.spec.whatwg.org/#ascii-whitespace
+const idRegex = /[\u0009\u000a\u000c\u000d\u0020]/g;
+
+export function assertValidHtmlId(htmlId: string): boolean {
+    if (htmlId === '' || idRegex.test(htmlId)) {
+        // tslint:disable-next-line
+        console.error(
+            `uuid must be a valid HTML5 id but was given "${htmlId}", ASCII whitespaces are forbidden`,
         );
+
+        return false;
     }
+
+    return true;
 }