diff --git a/packages/ra-ui-materialui/src/button/LocalesMenuButton.spec.tsx b/packages/ra-ui-materialui/src/button/LocalesMenuButton.spec.tsx index f2643c2d001..9342f34a64a 100644 --- a/packages/ra-ui-materialui/src/button/LocalesMenuButton.spec.tsx +++ b/packages/ra-ui-materialui/src/button/LocalesMenuButton.spec.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import { Basic } from './LocalesMenuButton.stories'; +import { + fireEvent, + render, + screen, + waitFor, + within, +} from '@testing-library/react'; +import { Basic, FullApp } from './LocalesMenuButton.stories'; describe('LocalesMenuButton', () => { it('should allow to change language', async () => { @@ -16,5 +22,30 @@ describe('LocalesMenuButton', () => { await waitFor(() => { expect(screen.queryByText('Tableau de bord')).not.toBeNull(); }); + + fireEvent.click(screen.getAllByText('Français')[0]); + fireEvent.click(screen.getByText('English')); + await waitFor(() => { + expect(screen.queryByText('Dashboard')).not.toBeNull(); + }); + }); + + it('should not make the title disappear', async () => { + const { container } = render(<FullApp />); + + await screen.findByText('War and Peace'); + let title = container.querySelector( + '#react-admin-title' + ) as HTMLElement; + expect(within(title).queryByText('Books')).not.toBeNull(); + + fireEvent.click(screen.getAllByText('English')[0]); + expect(screen.queryAllByText('English').length).toEqual(2); + expect(screen.queryByText('Français')).not.toBeNull(); + fireEvent.click(screen.getByText('Français')); + + await screen.findAllByText('Livres'); + title = container.querySelector('#react-admin-title') as HTMLElement; + expect(within(title).queryByText('Livres')).not.toBeNull(); }); }); diff --git a/packages/ra-ui-materialui/src/layout/Title.tsx b/packages/ra-ui-materialui/src/layout/Title.tsx index 5bcdd899bc7..caa4673301a 100644 --- a/packages/ra-ui-materialui/src/layout/Title.tsx +++ b/packages/ra-ui-materialui/src/layout/Title.tsx @@ -18,7 +18,10 @@ export const Title = (props: TitleProps) => { // on first mount, we don't have the container yet, so we wait for it useEffect(() => { setContainer(container => { - if (container) return container; + const isInTheDom = + typeof document !== 'undefined' && + document.body.contains(container); + if (container && isInTheDom) return container; return typeof document !== 'undefined' ? document.getElementById('react-admin-title') : null;