Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

fix(ui): extract ReactModal elementApp and fix act warning in ut (#1756)

Browse source 
extract ReactModal elementApp and fix act warning in ut
This commit is contained in:
simeng-li 2022-08-09 11:00:43 +08:00 committed by GitHub
parent 4b972f2e23
commit 0270bf1be3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 34 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/ui/src/components/ConfirmModal/AcModal.tsx
View file

@ -27,7 +27,6 @@ const AcModal = ({
isOpen={isOpen} isOpen={isOpen}
className={classNames(styles.modal, className)} className={classNames(styles.modal, className)}
overlayClassName={classNames(modalStyles.overlay, styles.overlay)} overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
appElement={document.querySelector('main') ?? undefined}
> >
<div className={styles.container}> <div className={styles.container}>
<div className={styles.header}> <div className={styles.header}>

1
packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx
View file

@ -32,7 +32,6 @@ const IframeConfirmModal = ({
isOpen={isOpen} isOpen={isOpen}
className={classNames(styles.modal, className)} className={classNames(styles.modal, className)}
overlayClassName={classNames(modalStyles.overlay, styles.overlay)} overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
appElement={document.querySelector('main') ?? undefined}
> >
<div className={styles.container}> <div className={styles.container}>
<div className={styles.content}> <div className={styles.content}>

1
packages/ui/src/components/ConfirmModal/MobileModal.tsx
View file

@ -25,7 +25,6 @@ const MobileModal = ({
isOpen={isOpen} isOpen={isOpen}
className={classNames(styles.modal, className)} className={classNames(styles.modal, className)}
overlayClassName={classNames(modalStyles.overlay, styles.overlay)} overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
appElement={document.querySelector('main') ?? undefined}
> >
<div className={styles.container}> <div className={styles.container}>
<div className={styles.content}>{children}</div> <div className={styles.content}>{children}</div>

1
packages/ui/src/components/Drawer/index.tsx
View file

@ -23,7 +23,6 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => {
isOpen={isOpen} isOpen={isOpen}
className={classNames(styles.drawer, className)} className={classNames(styles.drawer, className)}
overlayClassName={modalStyles.overlay} overlayClassName={modalStyles.overlay}
appElement={document.querySelector('main') ?? undefined}
closeTimeoutMS={300} closeTimeoutMS={300}
onRequestClose={onClose} onRequestClose={onClose}
> >

8
packages/ui/src/containers/CreateAccount/index.test.tsx
View file

@ -1,4 +1,4 @@
import { fireEvent, waitFor } from '@testing-library/react'; import { fireEvent, waitFor, act } from '@testing-library/react';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider'; import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider';
@ -218,10 +218,12 @@ describe('<CreateAccount/>', () => {
const termsButton = getByText('description.agree_with_terms'); const termsButton = getByText('description.agree_with_terms');
fireEvent.click(termsButton); fireEvent.click(termsButton);
await waitFor(() => { act(() => {
fireEvent.click(submitButton); fireEvent.click(submitButton);
}); });
expect(register).toBeCalledWith('username', '123456'); await waitFor(() => {
expect(register).toBeCalledWith('username', '123456');
});
}); });
}); });

14
packages/ui/src/containers/Passwordless/EmailPasswordless.test.tsx
View file

@ -1,4 +1,4 @@
import { fireEvent, waitFor } from '@testing-library/react'; import { fireEvent, waitFor, act } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@ -78,11 +78,13 @@ describe('<EmailPasswordless/>', () => {
const submitButton = getByText('action.continue'); const submitButton = getByText('action.continue');
await waitFor(() => { act(() => {
fireEvent.click(submitButton); fireEvent.click(submitButton);
}); });
expect(sendSignInEmailPasscode).toBeCalledWith('foo@logto.io'); await waitFor(() => {
expect(sendSignInEmailPasscode).toBeCalledWith('foo@logto.io');
});
}); });
test('should call register method properly', async () => { test('should call register method properly', async () => {
@ -103,10 +105,12 @@ describe('<EmailPasswordless/>', () => {
const submitButton = getByText('action.continue'); const submitButton = getByText('action.continue');
await waitFor(() => { act(() => {
fireEvent.click(submitButton); fireEvent.click(submitButton);
}); });
expect(sendRegisterEmailPasscode).toBeCalledWith('foo@logto.io'); await waitFor(() => {
expect(sendRegisterEmailPasscode).toBeCalledWith('foo@logto.io');
});
}); });
}); });

14
packages/ui/src/containers/Passwordless/PhonePasswordless.test.tsx
View file

@ -1,4 +1,4 @@
import { fireEvent, waitFor } from '@testing-library/react'; import { fireEvent, waitFor, act } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom'; import { MemoryRouter } from 'react-router-dom';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@ -85,11 +85,13 @@ describe('<PhonePasswordless/>', () => {
const submitButton = getByText('action.continue'); const submitButton = getByText('action.continue');
await waitFor(() => { act(() => {
fireEvent.click(submitButton); fireEvent.click(submitButton);
}); });
expect(sendSignInSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`); await waitFor(() => {
expect(sendSignInSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
});
}); });
test('should call register method properly', async () => { test('should call register method properly', async () => {
@ -110,10 +112,12 @@ describe('<PhonePasswordless/>', () => {
const submitButton = getByText('action.continue'); const submitButton = getByText('action.continue');
await waitFor(() => { act(() => {
fireEvent.click(submitButton); fireEvent.click(submitButton);
}); });
expect(sendRegisterSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`); await waitFor(() => {
expect(sendRegisterSmsPasscode).toBeCalledWith(`${defaultCountryCallingCode}${phoneNumber}`);
});
}); });
}); });

6
packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn/index.test.tsx
View file

@ -81,11 +81,13 @@ describe('SecondarySocialSignIn', () => {
const socialButton = container.querySelector('button'); const socialButton = container.querySelector('button');
if (socialButton) { if (socialButton) {
await waitFor(() => { act(() => {
fireEvent.click(socialButton); fireEvent.click(socialButton);
}); });
expect(invokeSocialSignInSpy).toBeCalled(); void waitFor(() => {
expect(invokeSocialSignInSpy).toBeCalled();
});
} }
}); });

2
packages/ui/src/index.tsx
View file

@ -1,7 +1,9 @@
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import ReactModal from 'react-modal';
import App from './App'; import App from './App';
const app = document.querySelector('#app'); const app = document.querySelector('#app');
const root = app && createRoot(app); const root = app && createRoot(app);
ReactModal.setAppElement('#app');
root?.render(<App />); root?.render(<App />);

8
packages/ui/src/pages/SocialSignInCallback/index.test.tsx
View file

@ -1,4 +1,4 @@
import { waitFor } from '@testing-library/react'; import { waitFor, act } from '@testing-library/react';
import { MemoryRouter, Route, Routes } from 'react-router-dom'; import { MemoryRouter, Route, Routes } from 'react-router-dom';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext'; import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
@ -41,8 +41,10 @@ describe('SocialCallbackPage with code', () => {
</SettingsProvider> </SettingsProvider>
); );
await waitFor(() => { await act(async () => {
expect(signInWithSocialSpy).toBeCalled(); await waitFor(() => {
expect(signInWithSocialSpy).toBeCalled();
});
}); });
}); });
}); });