diff --git a/frontend/app/components/preloader.tsx b/frontend/app/components/preloader.tsx index bbe34bed..9fca0f8e 100644 --- a/frontend/app/components/preloader.tsx +++ b/frontend/app/components/preloader.tsx @@ -6,5 +6,5 @@ type Props = { }; export function Preloader({ className }: Props) { - return
; + return
; } diff --git a/frontend/app/components/profile/profile.spec.tsx b/frontend/app/components/profile/profile.spec.tsx index 923da6de..bc01b5ac 100644 --- a/frontend/app/components/profile/profile.spec.tsx +++ b/frontend/app/components/profile/profile.spec.tsx @@ -171,12 +171,25 @@ describe('', () => { .spyOn(api, 'getUserComments') .mockImplementation(async () => ({ comments: new Array(10).fill(commentStub), count: 15 })); - const { findByRole, getByRole, queryByRole } = render(); + const { findByRole, getByRole, queryByRole, queryByTestId } = render(); expect(await findByRole('button', { name: /load more/i })).toBeInTheDocument(); fireEvent.click(getByRole('button', { name: /load more/i })); - expect(getByRole('presentation')).toHaveClass('spinner'); - await waitFor(() => expect(queryByRole('presentation')).not.toBeInTheDocument()); - expect(queryByRole('button', { name: /load more/i })).not.toBeInTheDocument(); + expect(queryByTestId('spinner')).toBeInTheDocument(); + + await waitFor(() => { + expect(queryByRole('button', { name: /load more/i })).not.toBeInTheDocument(); + }); + }); + + it('preloader should not be rendered after click on load more button', async () => { + jest + .spyOn(api, 'getUserComments') + .mockImplementation(async () => ({ comments: new Array(10).fill(commentStub), count: 15 })); + + const { findByRole, queryByTestId } = render(); + + fireEvent.click(await findByRole('button', { name: /load more/i })); + expect(queryByTestId('preloader')).not.toBeInTheDocument(); }); }); diff --git a/frontend/app/components/spinner/spinner.tsx b/frontend/app/components/spinner/spinner.tsx index f4450243..e972b43f 100644 --- a/frontend/app/components/spinner/spinner.tsx +++ b/frontend/app/components/spinner/spinner.tsx @@ -17,6 +17,7 @@ export function Spinner({ color }: Props) { className={clsx('spinner', styles.root, { [styles.dark]: color === 'gray' })} role="presentation" aria-label={intl.formatMessage(messages.loading)} + data-testid="spinner" /> ); }