1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/modal-focus/modal-focus.test.tsx
2023-05-09 14:33:29 -07:00

62 lines
1.8 KiB
TypeScript

/* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react';
import React from 'react';
import { ModalFocus } from './modal-focus';
describe('ModalFocus', () => {
it('should render with children inside the ModalFocus', () => {
const { getByText } = render(
<ModalFocus>
<div>modal focus</div>
</ModalFocus>,
);
expect(getByText('modal focus')).toBeDefined();
});
it('should render with the initial element focused', () => {
const { getByTestId } = render(
<ModalFocus>
<input data-testid="input" />
</ModalFocus>,
);
expect(getByTestId('input')).toHaveFocus();
});
it('should render with focused with autoFocus is set to false', () => {
const { getByTestId } = render(
<ModalFocus autoFocus={false}>
<input data-testid="input" />
</ModalFocus>,
);
expect(getByTestId('input')).not.toHaveFocus();
});
it('should focus initialFocusRef on render', () => {
const ref: React.RefObject<HTMLInputElement> = React.createRef();
const { getByTestId } = render(
<ModalFocus initialFocusRef={ref}>
<input />
<input />
<input data-testid="input" ref={ref} />
</ModalFocus>,
);
expect(getByTestId('input')).toHaveFocus();
});
it('should focus final focus ref when closed', () => {
const finalRef: React.RefObject<HTMLButtonElement> = React.createRef();
const { rerender, getByRole } = render(
<>
<button ref={finalRef}>button</button>
<ModalFocus finalFocusRef={finalRef}>
<div>modal focus</div>
</ModalFocus>
</>,
);
expect(finalRef.current).not.toHaveFocus();
rerender(<button ref={finalRef}>button</button>);
expect(getByRole('button')).toHaveFocus();
});
});