Add more tests around focusIDs

jamesplease · Jun 17, 2021 · fa9e3bf · fa9e3bf
1 parent 64bc83b
commit fa9e3bf
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 9 deletions.
diff --git a/src/focus-node.test.js b/src/focus-node.test.js
@@ -28,4 +28,112 @@ describe('FocusNode', () => {
     // Note: I'm not entirely sure why the warning is called twice in this test...but that's OK
     expect(warning.mock.calls[1][1]).toEqual('NO_FOCUS_PROVIDER_DETECTED');
   });
+
+  describe('focusId', () => {
+    it('uses the ID that you provide', () => {
+      let focusStore;
+
+      function TestComponent() {
+        focusStore = useFocusStoreDangerously();
+
+        return (
+          <>
+            <FocusNode focusId="nodeA" />
+            <FocusNode focusId="nodeB" />
+          </>
+        );
+      }
+
+      render(
+        <FocusRoot>
+          <TestComponent />
+        </FocusRoot>
+      );
+
+      expect(focusStore.getState().focusedNodeId).toBe('nodeA');
+    });
+
+    it('generates its own ID when one is not provided', () => {
+      let focusStore;
+
+      function TestComponent() {
+        focusStore = useFocusStoreDangerously();
+
+        return (
+          <>
+            <FocusNode data-testid="nodeA" />
+            <FocusNode focusId="nodeB" data-testid="nodeB" />
+          </>
+        );
+      }
+
+      render(
+        <FocusRoot>
+          <TestComponent />
+        </FocusRoot>
+      );
+
+      expect(typeof focusStore.getState().focusedNodeId === 'string').toBe(
+        true
+      );
+    });
+
+    it('warns if an invalid ID is passed, but still generates a valid one', () => {
+      let focusStore;
+
+      function TestComponent() {
+        focusStore = useFocusStoreDangerously();
+
+        return (
+          <>
+            <FocusNode focusId={{ pasta: 'yum' }} />
+            <FocusNode focusId="nodeB" />
+          </>
+        );
+      }
+
+      render(
+        <FocusRoot>
+          <TestComponent />
+        </FocusRoot>
+      );
+
+      expect(typeof focusStore.getState().focusedNodeId === 'string').toBe(
+        true
+      );
+
+      expect(warning).toHaveBeenCalledTimes(1);
+      expect(warning.mock.calls[0][1]).toEqual('INVALID_FOCUS_ID_PASSED');
+    });
+
+    it('warns if the ID "root" is passed in, but still generates a valid one', () => {
+      let focusStore;
+
+      function TestComponent() {
+        focusStore = useFocusStoreDangerously();
+
+        return (
+          <>
+            <FocusNode focusId="root" />
+            <FocusNode focusId="nodeB" />
+          </>
+        );
+      }
+
+      render(
+        <FocusRoot>
+          <TestComponent />
+        </FocusRoot>
+      );
+
+      expect(typeof focusStore.getState().focusedNodeId === 'string').toBe(
+        true
+      );
+
+      expect(focusStore.getState().focusedNodeId).not.toBe('root');
+
+      expect(warning).toHaveBeenCalledTimes(1);
+      expect(warning.mock.calls[0][1]).toEqual('ROOT_ID_WAS_PASSED');
+    });
+  });
 });
diff --git a/src/focus-node.tsx b/src/focus-node.tsx
@@ -177,17 +177,31 @@ export function FocusNode(
   );
 
   const [nodeId] = useState(() => {
-    const isInvalidId = focusId === 'root';
-
-    if (isInvalidId) {
-      warning(
-        'A focus node with an invalid focus ID was created: "root". This is a reserved ID, so it has been ' +
-          'ignored. Please choose another ID if you wish to specify an ID.',
-        'ROOT_ID_WAS_PASSED'
-      );
+    const nonStringFocusId = typeof focusId !== 'string';
+    const reservedFocusId = focusId === 'root';
+    const invalidNodeId = nonStringFocusId || reservedFocusId;
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (reservedFocusId) {
+        warning(
+          'A focus node with an invalid focus ID was created: "root". This is a reserved ID, so it has been ' +
+            'ignored. Please choose another ID if you wish to specify an ID.',
+          'ROOT_ID_WAS_PASSED'
+        );
+      }
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (nonStringFocusId) {
+        warning(
+          'A focus node with an invalid focus ID was created: "root". This is a reserved ID, so it has been ' +
+            'ignored. Please choose another ID if you wish to specify an ID.',
+          'INVALID_FOCUS_ID_PASSED'
+        );
+      }
     }
 
-    if (focusId && !isInvalidId) {
+    if (focusId && !invalidNodeId) {
       return focusId;
     } else {
       const id = `node-${uniqueId}`;