@instructure/ui-focusable 10.19.2-snapshot-3 → 10.19.2-snapshot-4

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

@@ -1,412 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = require("react");
-var _react2 = require("@testing-library/react");
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _vitest = require("vitest");
-require("@testing-library/jest-dom");
-var _index = require("../index");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-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.
- */
-describe('<Focusable />', () => {
-  let consoleWarningMock;
-  let consoleErrorMock;
-  beforeEach(() => {
-    // Mocking console to prevent test output pollution and expect for messages
-    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
-    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleWarningMock.mockRestore();
-    consoleErrorMock.mockRestore();
-  });
-  it('should render', async () => {
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-      children: () => _button || (_button = (0, _jsxRuntime.jsx)("button", {
-        children: "hello world"
-      }))
-    }));
-    const button = _react2.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 = _vitest.vi.fn();
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-      children: args => {
-        renderSpy(args);
-        return _button2 || (_button2 = (0, _jsxRuntime.jsx)("button", {
-          type: "button",
-          children: "foo"
-        }));
-      }
-    }));
-    const focusable = _react2.screen.getByRole('button');
-    await (0, _react2.waitFor)(() => {
-      const args = renderSpy.mock.lastCall[0];
-      expect(args).toHaveProperty('focused', false);
-      expect(args).toHaveProperty('focusable', focusable);
-      expect(args).toHaveProperty('focusVisible', false);
-    });
-    await _userEvent.default.type(focusable, '{enter}');
-    await focusable.focus();
-    await (0, _react2.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 (0, _react2.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 = _vitest.vi.fn(({
-      focused
-    }) => (0, _jsxRuntime.jsx)("div", {
-      children: focused ? _input || (_input = (0, _jsxRuntime.jsx)("input", {
-        type: "text"
-      })) : _a || (_a = (0, _jsxRuntime.jsx)("a", {
-        href: "http://focus.net",
-        children: "Click"
-      }))
-    }));
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-      render: renderSpy
-    }));
-    const firstFocusable = _react2.screen.getByText('Click');
-    expect(firstFocusable.tagName).toBe('A');
-    expect(firstFocusable).not.toHaveFocus();
-    await (0, _react2.waitFor)(() => {
-      const args = renderSpy.mock.lastCall[0];
-      expect(args.focused).toBe(false);
-      expect(args.focusable).toBe(firstFocusable);
-    });
-    await firstFocusable.focus();
-    const nextFocusable = _react2.screen.getByRole('textbox');
-    expect(nextFocusable.tagName).toBe('INPUT');
-    expect(nextFocusable).toHaveFocus();
-    await (0, _react2.waitFor)(() => {
-      const args = renderSpy.mock.lastCall[0];
-      expect(args.focused).toBe(true);
-      expect(args.focusable).toBe(nextFocusable);
-    });
-    await nextFocusable.blur();
-    const lastFocusable = _react2.screen.getByText('Click');
-    expect(lastFocusable.tagName).toBe('A');
-    expect(lastFocusable).not.toHaveFocus();
-    await (0, _react2.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 = _vitest.vi.fn(() => _a2 || (_a2 = (0, _jsxRuntime.jsx)("a", {
-      href: "http://focus.net",
-      children: "Click"
-    })));
-    const _render = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-        render: renderSpy
-      })),
-      rerender = _render.rerender;
-    const firstFocusable = _react2.screen.getByText('Click');
-    await firstFocusable.focus();
-    await (0, _react2.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 = _vitest.vi.fn(() => _button3 || (_button3 = (0, _jsxRuntime.jsx)("button", {
-      children: "Click"
-    })));
-    rerender((0, _jsxRuntime.jsx)(_index.Focusable, {
-      render: nextRenderSpy
-    }));
-    const nextFocusable = _react2.screen.getByText('Click');
-    expect(nextFocusable.tagName).toBe('BUTTON');
-    expect(nextFocusable).toHaveFocus();
-    await (0, _react2.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 = _vitest.vi.fn();
-    const _render2 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-        children: args => {
-          renderSpy(args);
-          return _button4 || (_button4 = (0, _jsxRuntime.jsx)("button", {
-            children: "foo"
-          }));
-        }
-      })),
-      rerender = _render2.rerender;
-    const firstButton = _react2.screen.getByText('foo');
-    await firstButton.focus();
-    await (0, _react2.waitFor)(() => {
-      const args = renderSpy.mock.lastCall[0];
-      expect(args.focused).toBe(true);
-    });
-    await firstButton.blur();
-    await (0, _react2.waitFor)(() => {
-      const args = renderSpy.mock.lastCall[0];
-      expect(args.focused).toBe(false);
-    });
-
-    // Set child
-    rerender((0, _jsxRuntime.jsx)(_index.Focusable, {
-      children: args => {
-        renderSpy(args);
-        return _span || (_span = (0, _jsxRuntime.jsxs)("span", {
-          children: ["some content text", (0, _jsxRuntime.jsx)("button", {
-            children: "bar"
-          })]
-        }));
-      }
-    }));
-    const secondButton = _react2.screen.getByText('bar');
-    await secondButton.focus();
-    await (0, _react2.waitFor)(() => {
-      const args = renderSpy.mock.lastCall[0];
-      expect(args.focused).toBe(true);
-    });
-  });
-  it('should warn when there is more than one focusable descendant', async () => {
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-      children: () => {
-        return _span2 || (_span2 = (0, _jsxRuntime.jsxs)("span", {
-          children: [(0, _jsxRuntime.jsx)("button", {
-            children: "foo"
-          }), (0, _jsxRuntime.jsx)("span", {
-            children: (0, _jsxRuntime.jsx)("button", {
-              children: "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 () => {
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-      children: () => {
-        return _span3 || (_span3 = (0, _jsxRuntime.jsx)("span", {
-          children: "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 = _vitest.vi.fn();
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-      children: args => {
-        renderSpy(args);
-        return _span4 || (_span4 = (0, _jsxRuntime.jsxs)("span", {
-          children: [(0, _jsxRuntime.jsx)("h1", {
-            children: "hello world"
-          }), (0, _jsxRuntime.jsx)("p", {
-            children: "some content"
-          }), (0, _jsxRuntime.jsx)("span", {
-            children: (0, _jsxRuntime.jsx)("button", {
-              children: "foo"
-            })
-          })]
-        }));
-      }
-    }));
-    const button = _react2.screen.getByRole('button');
-    await (0, _react2.waitFor)(() => {
-      const args = renderSpy.mock.lastCall[0];
-      expect(args.focused).toBe(false);
-    });
-    await button.focus();
-    await (0, _react2.waitFor)(() => {
-      const args = renderSpy.mock.lastCall[0];
-      expect(args.focused).toBe(true);
-    });
-  });
-  it('should provide a focus method', async () => {
-    let focusable;
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-      ref: el => {
-        focusable = el;
-      },
-      children: () => _button5 || (_button5 = (0, _jsxRuntime.jsx)("button", {
-        children: "hello world"
-      }))
-    }));
-    await focusable.focus();
-    const button = _react2.screen.getByText('hello world');
-    expect(button).toHaveFocus();
-  });
-  it('should provide a focused getter', async () => {
-    var _focusableInstance;
-    let focusableInstance;
-    (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Focusable, {
-      children: args => {
-        focusableInstance = args;
-        return _button6 || (_button6 = (0, _jsxRuntime.jsx)("button", {
-          children: "Click me"
-        }));
-      }
-    }));
-    const button = _react2.screen.getByText('Click me');
-    expect((_focusableInstance = focusableInstance) === null || _focusableInstance === void 0 ? void 0 : _focusableInstance.focused).toBe(false);
-    await button.focus();
-    await (0, _react2.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 _react.Component {
-      render() {
-        const changeValue = this.props.changeValue;
-        return (0, _jsxRuntime.jsx)(_index.Focusable, {
-          children: ({
-            focusVisible
-          }) => {
-            return (0, _jsxRuntime.jsx)("input", {
-              readOnly: true,
-              ref: el => {
-                inputRef = el;
-              },
-              value: `${focusVisible}_${changeValue}`
-            });
-          }
-        });
-      }
-    }
-    TestComponent.displayName = "TestComponent";
-    const _render3 = (0, _react2.render)((0, _jsxRuntime.jsx)(TestComponent, {
-        changeValue: "A"
-      })),
-      rerender = _render3.rerender,
-      container = _render3.container;
-    const initialInput = container.querySelector('input');
-    await (0, _react2.waitFor)(() => {
-      expect(initialInput).toHaveValue('false_A');
-    });
-
-    // Set Prop: changeValue
-    rerender((0, _jsxRuntime.jsx)(TestComponent, {
-      changeValue: "B"
-    }));
-    await inputRef.focus();
-    await (0, _react2.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 _react.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 (0, _jsxRuntime.jsxs)("div", {
-          children: [(0, _jsxRuntime.jsx)(_index.Focusable, {
-            ref: el => {
-              focusableRef = el;
-            },
-            children: () => {
-              return (0, _jsxRuntime.jsx)("label", {
-                ref: el => {
-                  labelRef = el;
-                },
-                "aria-label": 'test-label',
-                children: (0, _jsxRuntime.jsx)("input", {
-                  checked: checked,
-                  disabled: disabled,
-                  onChange: () => {
-                    this.setState({
-                      checked: true
-                    });
-                  },
-                  type: "checkbox"
-                })
-              });
-            }
-          }), (0, _jsxRuntime.jsx)("button", {
-            onClick: () => {
-              this.setState({
-                disabled: true
-              });
-            },
-            ref: el => {
-              buttonRef = el;
-            },
-            children: "hello world"
-          })]
-        });
-      }
-    }
-    TestComponent.displayName = "TestComponent";
-    const _render4 = (0, _react2.render)((0, _jsxRuntime.jsx)(TestComponent, {})),
-      container = _render4.container;
-    const input = container.querySelector('input');
-    await (0, _react2.waitFor)(() => {
-      expect(focusableRef.focused).toBe(false);
-    });
-    await _userEvent.default.click(labelRef);
-    await (0, _react2.waitFor)(() => {
-      expect(input).toHaveFocus();
-    });
-    await _userEvent.default.click(buttonRef);
-    await (0, _react2.waitFor)(() => {
-      expect(input).not.toHaveFocus();
-    });
-  });
-});