Continue writing tests

src/hooks/use-focus-events.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent, screen } from '@testing-library/react';
+import {
+  FocusRoot,
+  FocusNode,
+  useFocusEvents,
+  useFocusStoreDangerously,
+} from '../index';
+
+describe('useFocusEvents', () => {
+  describe('onBlur/onFocus', () => {
+    it('calls them when appropriate', () => {
+      const nodeAOnFocused = jest.fn();
+      const nodeAOnBlurred = jest.fn();
+      const nodeBOnFocused = jest.fn();
+      const nodeBOnBlurred = jest.fn();
+      let focusStore;
+
+      function TestComponent() {
+        focusStore = useFocusStoreDangerously();
+
+        useFocusEvents('nodeA', {
+          focus: nodeAOnFocused,
+          blur: nodeAOnBlurred,
+        });
+
+        useFocusEvents('nodeB', {
+          focus: nodeBOnFocused,
+          blur: nodeBOnBlurred,
+        });
+
+        return (
+          <>
+            <FocusNode focusId="nodeA" data-testid="nodeA" />
+            <FocusNode focusId="nodeB" data-testid="nodeB" />
+          </>
+        );
+      }
+
+      render(
+        <FocusRoot>
+          <TestComponent />
+        </FocusRoot>
+      );
+
+      let focusState = focusStore.getState();
+      expect(focusState.focusedNodeId).toEqual('nodeA');
+      expect(focusState.focusHierarchy).toEqual(['root', 'nodeA']);
+
+      expect(nodeAOnFocused.mock.calls.length).toBe(1);
+      expect(nodeAOnBlurred.mock.calls.length).toBe(0);
+      expect(nodeBOnFocused.mock.calls.length).toBe(0);
+      expect(nodeBOnBlurred.mock.calls.length).toBe(0);
+
+      fireEvent.keyDown(window, {
+        code: 'ArrowRight',
+        key: 'ArrowRight',
+      });
+
+      focusState = focusStore.getState();
+      expect(focusState.focusedNodeId).toEqual('nodeB');
+      expect(focusState.focusHierarchy).toEqual(['root', 'nodeB']);
+
+      expect(nodeAOnFocused.mock.calls.length).toBe(1);
+      expect(nodeAOnBlurred.mock.calls.length).toBe(1);
+      expect(nodeBOnFocused.mock.calls.length).toBe(1);
+      expect(nodeBOnBlurred.mock.calls.length).toBe(0);
+    });
+  });
+});

src/tests/focus-node-events.test.js

@@ -3,11 +3,6 @@ import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { FocusRoot, FocusNode, useFocusStoreDangerously } from '../index';
 
-//
-// These tests verify that the focus tree is accurate during the initial mount.
-// No state changes should be made in these tests...they should only test a static environment.
-//
-
 describe('FocusNode Events', () => {
   describe('onBlur/onFocus', () => {
     it('calls them when appropriate', () => {

src/tests/grids.test.js

@@ -3,11 +3,6 @@ import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { FocusRoot, FocusNode, useFocusStoreDangerously } from '../index';
 
-//
-// These tests verify that the focus tree is accurate during the initial mount.
-// No state changes should be made in these tests...they should only test a static environment.
-//
-
 describe('Grids', () => {
   describe('1x1', () => {
     it('mounts correctly', () => {