Merge pull request #265 from springload/feature/assert-ids-uuids

Assert that uuids and ids are valid HTML ids

Author: Matthew Holloway

src/components/AccordionItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
-import { nextUuid } from '../helpers/uuid';
+import { assertValidHtmlId, nextUuid } from '../helpers/uuid';
 import {
     Consumer as ItemConsumer,
     ItemContext,
@@ -41,7 +41,15 @@ export default class AccordionItem extends React.Component<Props> {
     };
 
     render(): JSX.Element {
-        const { uuid = this.instanceUuid, dangerouslySetExpanded } = this.props;
+        const {
+            uuid = this.instanceUuid,
+            dangerouslySetExpanded,
+            ...rest
+        } = this.props;
+
+        if (rest.id) {
+            assertValidHtmlId(rest.id);
+        }
 
         return (
             <ItemProvider

src/components/AccordionItemButton.spec.tsx

@@ -8,6 +8,7 @@ import AccordionItemHeading from './AccordionItemHeading';
 enum UUIDS {
     FOO = 'FOO',
     BAR = 'BAR',
+    BAD_ID = 'BAD ID',
 }
 
 describe('AccordionItem', () => {

src/components/AccordionItemButton.tsx

@@ -9,6 +9,7 @@ import {
 } from '../helpers/focus';
 import keycodes from '../helpers/keycodes';
 import { DivAttributes } from '../helpers/types';
+import { assertValidHtmlId } from '../helpers/uuid';
 
 import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
 
@@ -70,6 +71,10 @@ export class AccordionItemButton extends React.PureComponent<Props> {
     render(): JSX.Element {
         const { toggleExpanded, ...rest } = this.props;
 
+        if (rest.id) {
+            assertValidHtmlId(rest.id);
+        }
+
         return (
             <div
                 {...rest}

src/components/AccordionItemHeading.spec.tsx

@@ -8,6 +8,7 @@ import AccordionItemHeading, { SPEC_ERROR } from './AccordionItemHeading';
 enum UUIDS {
     FOO = 'FOO',
     BAR = 'BAR',
+    BAD_ID = 'BAD ID',
 }
 
 describe('AccordionItem', () => {

src/components/AccordionItemHeading.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { InjectedHeadingAttributes } from '../helpers/AccordionStore';
 import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
+import { assertValidHtmlId } from '../helpers/uuid';
 
 import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
 
@@ -77,6 +78,10 @@ const AccordionItemHeadingWrapper: React.SFC<DivAttributes> = (
         {(itemContext: ItemContext): JSX.Element => {
             const { headingAttributes } = itemContext;
 
+            if (props.id) {
+                assertValidHtmlId(props.id);
+            }
+
             return <AccordionItemHeading {...props} {...headingAttributes} />;
         }}
     </ItemConsumer>

src/components/AccordionItemPanel.spec.tsx

@@ -7,6 +7,7 @@ import AccordionItemPanel from './AccordionItemPanel';
 enum UUIDS {
     FOO = 'FOO',
     BAR = 'BAR',
+    BAD_ID = 'BAD ID',
 }
 
 describe('AccordionItem', () => {

src/components/AccordionItemPanel.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import DisplayName from '../helpers/DisplayName';
 import { DivAttributes } from '../helpers/types';
+import { assertValidHtmlId } from '../helpers/uuid';
 import { Consumer as ItemConsumer, ItemContext } from './ItemContext';
 
 type Props = DivAttributes;
@@ -16,6 +17,10 @@ export default class AccordionItemPanel extends React.Component<Props> {
         DisplayName.AccordionItemPanel;
 
     renderChildren = ({ panelAttributes }: ItemContext): JSX.Element => {
+        if (this.props.id) {
+            assertValidHtmlId(this.props.id);
+        }
+
         return (
             <div
                 data-accordion-component="AccordionItemPanel"

src/components/ItemContext.tsx

@@ -11,7 +11,7 @@ import {
     Consumer as AccordionContextConsumer,
 } from './AccordionContext';
 
-export type UUID = string | number;
+export type UUID = string;
 
 type ProviderProps = {
     children?: React.ReactNode;

src/helpers/uuid.spec.ts

@@ -1,19 +1,31 @@
-import { nextUuid, resetNextUuid } from './uuid';
+import { assertValidHtmlId, nextUuid, resetNextUuid } from './uuid';
 
 describe('UUID helper', () => {
     describe('nextUuid', () => {
         it('generates incremental uuids', () => {
-            expect(nextUuid()).toBe(0);
-            expect(nextUuid()).toBe(1);
+            expect(nextUuid()).toBe('raa-0');
+            expect(nextUuid()).toBe('raa-1');
         });
     });
 
     describe('resetNextUuid', () => {
         it('resets the uuid', () => {
             resetNextUuid();
-            expect(nextUuid()).toBe(0);
+            expect(nextUuid()).toBe('raa-0');
             resetNextUuid();
-            expect(nextUuid()).toBe(0);
+            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('')).toBe(false);
+        });
+
+        it('returns true on a valid id', () => {
+            expect(assertValidHtmlId('💜')).toBe(true);
+            expect(assertValidHtmlId('✅')).toBe(true);
         });
     });
 });

src/helpers/uuid.ts

@@ -1,14 +1,33 @@
+import { UUID } from '../components/ItemContext';
+
 const DEFAULT = 0;
 
 let counter = DEFAULT;
 
-export function nextUuid(): number {
+export function nextUuid(): UUID {
     const current = counter;
     counter = counter + 1;
 
-    return current;
+    return `raa-${current}`;
 }
 
 export function resetNextUuid(): void {
     counter = DEFAULT;
 }
+
+// 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;
+}