@instructure/ui-focusable 10.14.1-snapshot-9 → 10.14.1-snapshot-12

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.14.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-9) (2025-03-28)
+## [10.14.1-snapshot-12](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-12) (2025-03-31)
 
 **Note:** Version bump only for package @instructure/ui-focusable
 

package/es/Focusable/__new-tests__/Focusable.test.js

@@ -0,0 +1,346 @@
+var _button, _button2, _input, _a, _a2, _button3, _button4, _span, _span2, _span3, _span4, _button5, _button6;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { Component } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { Focusable } from '../index';
+describe('<Focusable />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render', async () => {
+    render(/*#__PURE__*/React.createElement(Focusable, null, () => _button || (_button = /*#__PURE__*/React.createElement("button", null, "hello world"))));
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('hello world');
+  });
+  it('should call children function with focused when element receives focus', async () => {
+    const renderSpy = vi.fn();
+    render(/*#__PURE__*/React.createElement(Focusable, null, args => {
+      renderSpy(args);
+      return _button2 || (_button2 = /*#__PURE__*/React.createElement("button", {
+        type: "button"
+      }, "foo"));
+    }));
+    const focusable = screen.getByRole('button');
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(args).toHaveProperty('focused', false);
+      expect(args).toHaveProperty('focusable', focusable);
+      expect(args).toHaveProperty('focusVisible', false);
+    });
+    await userEvent.type(focusable, '{enter}');
+    await focusable.focus();
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(document.activeElement).toBe(focusable);
+      expect(args).toHaveProperty('focused', true);
+      expect(args).toHaveProperty('focusable', focusable);
+      expect(args).toHaveProperty('focusVisible', true);
+    });
+    await focusable.blur();
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(document.activeElement).not.toBe(focusable);
+      expect(args).toHaveProperty('focused', false);
+      expect(args).toHaveProperty('focusable', focusable);
+      expect(args).toHaveProperty('focusVisible', false);
+    });
+  });
+  it('should handle conditionally rendered focus elements', async () => {
+    const renderSpy = vi.fn(({
+      focused
+    }) => /*#__PURE__*/React.createElement("div", null, focused ? _input || (_input = /*#__PURE__*/React.createElement("input", {
+      type: "text"
+    })) : _a || (_a = /*#__PURE__*/React.createElement("a", {
+      href: "http://focus.net"
+    }, "Click"))));
+    render(/*#__PURE__*/React.createElement(Focusable, {
+      render: renderSpy
+    }));
+    const firstFocusable = screen.getByText('Click');
+    expect(firstFocusable.tagName).toBe('A');
+    expect(firstFocusable).not.toHaveFocus();
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(args.focused).toBe(false);
+      expect(args.focusable).toBe(firstFocusable);
+    });
+    await firstFocusable.focus();
+    const nextFocusable = screen.getByRole('textbox');
+    expect(nextFocusable.tagName).toBe('INPUT');
+    expect(nextFocusable).toHaveFocus();
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(args.focused).toBe(true);
+      expect(args.focusable).toBe(nextFocusable);
+    });
+    await nextFocusable.blur();
+    const lastFocusable = screen.getByText('Click');
+    expect(lastFocusable.tagName).toBe('A');
+    expect(lastFocusable).not.toHaveFocus();
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(args.focused).toBe(false);
+      expect(args.focusable).toBe(lastFocusable);
+    });
+  });
+  it('should maintain focus when the focus element changes', async () => {
+    const renderSpy = vi.fn(() => _a2 || (_a2 = /*#__PURE__*/React.createElement("a", {
+      href: "http://focus.net"
+    }, "Click")));
+    const _render = render(/*#__PURE__*/React.createElement(Focusable, {
+        render: renderSpy
+      })),
+      rerender = _render.rerender;
+    const firstFocusable = screen.getByText('Click');
+    await firstFocusable.focus();
+    await waitFor(() => {
+      const lastCall = renderSpy.mock.lastCall;
+      const args = lastCall === null || lastCall === void 0 ? void 0 : lastCall[0];
+      expect(firstFocusable).toHaveFocus();
+      expect(args === null || args === void 0 ? void 0 : args.focused).toBe(true);
+      expect(args === null || args === void 0 ? void 0 : args.focusable).toBe(firstFocusable);
+    });
+
+    // Set prop: render
+    const nextRenderSpy = vi.fn(() => _button3 || (_button3 = /*#__PURE__*/React.createElement("button", null, "Click")));
+    rerender(/*#__PURE__*/React.createElement(Focusable, {
+      render: nextRenderSpy
+    }));
+    const nextFocusable = screen.getByText('Click');
+    expect(nextFocusable.tagName).toBe('BUTTON');
+    expect(nextFocusable).toHaveFocus();
+    await waitFor(() => {
+      const nextLastCall = nextRenderSpy.mock.lastCall;
+      const nextArgs = nextLastCall === null || nextLastCall === void 0 ? void 0 : nextLastCall[0];
+      expect(nextFocusable).toHaveFocus();
+      expect(nextArgs === null || nextArgs === void 0 ? void 0 : nextArgs.focused).toBe(true);
+      expect(nextArgs === null || nextArgs === void 0 ? void 0 : nextArgs.focusable).toBe(nextFocusable);
+    });
+  });
+  it('should update the focus element correctly', async () => {
+    const renderSpy = vi.fn();
+    const _render2 = render(/*#__PURE__*/React.createElement(Focusable, null, args => {
+        renderSpy(args);
+        return _button4 || (_button4 = /*#__PURE__*/React.createElement("button", null, "foo"));
+      })),
+      rerender = _render2.rerender;
+    const firstButton = screen.getByText('foo');
+    await firstButton.focus();
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(args.focused).toBe(true);
+    });
+    await firstButton.blur();
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(args.focused).toBe(false);
+    });
+
+    // Set child
+    rerender(/*#__PURE__*/React.createElement(Focusable, null, args => {
+      renderSpy(args);
+      return _span || (_span = /*#__PURE__*/React.createElement("span", null, "some content text", /*#__PURE__*/React.createElement("button", null, "bar")));
+    }));
+    const secondButton = screen.getByText('bar');
+    await secondButton.focus();
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(args.focused).toBe(true);
+    });
+  });
+  it('should warn when there is more than one focusable descendant', async () => {
+    render(/*#__PURE__*/React.createElement(Focusable, null, () => {
+      return _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", null, "foo"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", null, "bar"))));
+    }));
+    const expectedWarningMessage = 'Warning: [Focusable] Exactly one focusable child is required (2 found).';
+    expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
+  });
+  it('should warn when there are no focusable descendants', async () => {
+    render(/*#__PURE__*/React.createElement(Focusable, null, () => {
+      return _span3 || (_span3 = /*#__PURE__*/React.createElement("span", null, "hello!"));
+    }));
+    const expectedWarningMessage = 'Warning: [Focusable] Exactly one focusable child is required (0 found).';
+    expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining(expectedWarningMessage), expect.any(String));
+  });
+  it('should attach event listener correctly even when the focusable element is not the root', async () => {
+    const renderSpy = vi.fn();
+    render(/*#__PURE__*/React.createElement(Focusable, null, args => {
+      renderSpy(args);
+      return _span4 || (_span4 = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("h1", null, "hello world"), /*#__PURE__*/React.createElement("p", null, "some content"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", null, "foo"))));
+    }));
+    const button = screen.getByRole('button');
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(args.focused).toBe(false);
+    });
+    await button.focus();
+    await waitFor(() => {
+      const args = renderSpy.mock.lastCall[0];
+      expect(args.focused).toBe(true);
+    });
+  });
+  it('should provide a focus method', async () => {
+    let focusable;
+    render(/*#__PURE__*/React.createElement(Focusable, {
+      ref: el => {
+        focusable = el;
+      }
+    }, () => _button5 || (_button5 = /*#__PURE__*/React.createElement("button", null, "hello world"))));
+    await focusable.focus();
+    const button = screen.getByText('hello world');
+    expect(button).toHaveFocus();
+  });
+  it('should provide a focused getter', async () => {
+    var _focusableInstance;
+    let focusableInstance;
+    render(/*#__PURE__*/React.createElement(Focusable, null, args => {
+      focusableInstance = args;
+      return _button6 || (_button6 = /*#__PURE__*/React.createElement("button", null, "Click me"));
+    }));
+    const button = screen.getByText('Click me');
+    expect((_focusableInstance = focusableInstance) === null || _focusableInstance === void 0 ? void 0 : _focusableInstance.focused).toBe(false);
+    await button.focus();
+    await waitFor(() => {
+      var _focusableInstance2;
+      expect((_focusableInstance2 = focusableInstance) === null || _focusableInstance2 === void 0 ? void 0 : _focusableInstance2.focused).toBe(true);
+      expect(button).toHaveFocus();
+    });
+  });
+  it('should properly restore the event handlers', async () => {
+    let inputRef = null;
+    class TestComponent extends Component {
+      render() {
+        const changeValue = this.props.changeValue;
+        return /*#__PURE__*/React.createElement(Focusable, null, ({
+          focusVisible
+        }) => {
+          return /*#__PURE__*/React.createElement("input", {
+            readOnly: true,
+            ref: el => {
+              inputRef = el;
+            },
+            value: `${focusVisible}_${changeValue}`
+          });
+        });
+      }
+    }
+    TestComponent.displayName = "TestComponent";
+    const _render3 = render(/*#__PURE__*/React.createElement(TestComponent, {
+        changeValue: "A"
+      })),
+      rerender = _render3.rerender,
+      container = _render3.container;
+    const initialInput = container.querySelector('input');
+    await waitFor(() => {
+      expect(initialInput).toHaveValue('false_A');
+    });
+
+    // Set Prop: changeValue
+    rerender(/*#__PURE__*/React.createElement(TestComponent, {
+      changeValue: "B"
+    }));
+    await inputRef.focus();
+    await waitFor(() => {
+      expect(inputRef).toHaveValue('true_B');
+    });
+  });
+  it('should properly clear the focusable / focused state when focus is unexpectedly lost', async () => {
+    let buttonRef;
+    let focusableRef;
+    let labelRef;
+    class TestComponent extends Component {
+      constructor(...args) {
+        super(...args);
+        this.state = {
+          checked: false,
+          disabled: false
+        };
+      }
+      render() {
+        const _this$state = this.state,
+          checked = _this$state.checked,
+          disabled = _this$state.disabled;
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Focusable, {
+          ref: el => {
+            focusableRef = el;
+          }
+        }, () => {
+          return /*#__PURE__*/React.createElement("label", {
+            ref: el => {
+              labelRef = el;
+            },
+            "aria-label": 'test-label'
+          }, /*#__PURE__*/React.createElement("input", {
+            checked: checked,
+            disabled: disabled,
+            onChange: () => {
+              this.setState({
+                checked: true
+              });
+            },
+            type: "checkbox"
+          }));
+        }), /*#__PURE__*/React.createElement("button", {
+          onClick: () => {
+            this.setState({
+              disabled: true
+            });
+          },
+          ref: el => {
+            buttonRef = el;
+          }
+        }, "hello world"));
+      }
+    }
+    TestComponent.displayName = "TestComponent";
+    const _render4 = render(/*#__PURE__*/React.createElement(TestComponent, null)),
+      container = _render4.container;
+    const input = container.querySelector('input');
+    await waitFor(() => {
+      expect(focusableRef.focused).toBe(false);
+    });
+    await userEvent.click(labelRef);
+    await waitFor(() => {
+      expect(input).toHaveFocus();
+    });
+    await userEvent.click(buttonRef);
+    await waitFor(() => {
+      expect(input).not.toHaveFocus();
+    });
+  });
+});