b6c827a908
* Add custom popup * Render popup window with react portal * Handle scroll * Handle pointer scroll * Refactor types * Add useOutsideClick * Restore button styles * Update types * Add tests * Set multiple refs * Cleanup * Cleanup * Move offset const to the utils * Add useCallback in useScroll * Remove empty lines in useElementPosition * Change styled components to functional * Make sure popup window stays in view * Highlight trigger button when popup is open * Add uesPopupWindow hook * Make triangle larger * Use full trigger height * Apply new lint rules Co-authored-by: Jaco Greeff <jacogr@gmail.com>
68 lines
1.4 KiB
TypeScript
68 lines
1.4 KiB
TypeScript
// Copyright 2017-2021 @polkadot/react-components authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import React from 'react';
|
|
|
|
import { Popup } from '@polkadot/react-components';
|
|
|
|
function TestPopup () {
|
|
return (
|
|
<>
|
|
<h1>Test outside text</h1>
|
|
<Popup
|
|
value={
|
|
<div>
|
|
Test popup content
|
|
</div>
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function renderPopup () {
|
|
return render(
|
|
<TestPopup/>
|
|
);
|
|
}
|
|
|
|
describe('Popup Component', () => {
|
|
it('opens and closes', async () => {
|
|
renderPopup();
|
|
|
|
await expectPopupToBeClosed();
|
|
await togglePopup();
|
|
await expectPopupToBeOpen();
|
|
await togglePopup();
|
|
await expectPopupToBeClosed();
|
|
});
|
|
|
|
it('closes popup with outside click', async () => {
|
|
renderPopup();
|
|
|
|
await expectPopupToBeClosed();
|
|
await togglePopup();
|
|
await expectPopupToBeOpen();
|
|
await clickOutside();
|
|
await expectPopupToBeClosed();
|
|
});
|
|
});
|
|
|
|
async function expectPopupToBeClosed () {
|
|
await screen.findByRole('button');
|
|
expect(screen.queryAllByText('Test popup content')).toHaveLength(0);
|
|
}
|
|
|
|
async function expectPopupToBeOpen () {
|
|
await screen.findByText('Test popup content');
|
|
}
|
|
|
|
async function togglePopup () {
|
|
fireEvent.click(await screen.findByRole('button'));
|
|
}
|
|
|
|
async function clickOutside () {
|
|
fireEvent.click(await screen.findByText('Test outside text'));
|
|
}
|