diff --git a/superset-frontend/src/views/components/Menu.test.tsx b/superset-frontend/src/views/components/Menu.test.tsx index 0c32d24a184ea..b40a5ab075252 100644 --- a/superset-frontend/src/views/components/Menu.test.tsx +++ b/superset-frontend/src/views/components/Menu.test.tsx @@ -252,27 +252,28 @@ beforeEach(() => { useSelectorMock.mockClear(); }); -test('should render', () => { +test('should render', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); const { container } = render(
, { useRedux: true, useQueryParams: true, useRouter: true, }); + expect(await screen.findByText(/sources/i)).toBeInTheDocument(); expect(container).toBeInTheDocument(); }); -test('should render the navigation', () => { +test('should render the navigation', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); render(, { useRedux: true, useQueryParams: true, useRouter: true, }); - expect(screen.getByRole('navigation')).toBeInTheDocument(); + expect(await screen.findByRole('navigation')).toBeInTheDocument(); }); -test('should render the brand', () => { +test('should render the brand', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); const { data: { @@ -284,20 +285,21 @@ test('should render the brand', () => { useQueryParams: true, useRouter: true, }); + expect(await screen.findByAltText(alt)).toBeInTheDocument(); const image = screen.getByAltText(alt); expect(image).toHaveAttribute('src', icon); }); -test('should render the environment tag', () => { +test('should render the environment tag', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); const { data: { environment_tag }, } = mockedProps; - render(, { useRedux: true }); - expect(screen.getByText(environment_tag.text)).toBeInTheDocument(); + render(, { useRedux: true, useQueryParams: true }); + expect(await screen.findByText(environment_tag.text)).toBeInTheDocument(); }); -test('should render all the top navbar menu items', () => { +test('should render all the top navbar menu items', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); const { data: { menu }, @@ -307,6 +309,7 @@ test('should render all the top navbar menu items', () => { useQueryParams: true, useRouter: true, }); + expect(await screen.findByText(menu[0].label)).toBeInTheDocument(); menu.forEach(item => { expect(screen.getByText(item.label)).toBeInTheDocument(); }); @@ -401,23 +404,24 @@ test('should render the Settings dropdown child menu items', async () => { expect(listUsers).toHaveAttribute('href', settings[0].childs[0].url); }); -test('should render the plus menu (+) when user is not anonymous', () => { +test('should render the plus menu (+) when user is not anonymous', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); render(, { useRedux: true, useQueryParams: true, useRouter: true, }); - expect(screen.getByTestId('new-dropdown')).toBeInTheDocument(); + expect(await screen.findByTestId('new-dropdown')).toBeInTheDocument(); }); -test('should NOT render the plus menu (+) when user is anonymous', () => { +test('should NOT render the plus menu (+) when user is anonymous', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); render(, { useRedux: true, useQueryParams: true, useRouter: true, }); + expect(await screen.findByText(/sources/i)).toBeInTheDocument(); expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument(); }); @@ -445,13 +449,14 @@ test('should render the user actions when user is not anonymous', async () => { expect(logout).toHaveAttribute('href', user_logout_url); }); -test('should NOT render the user actions when user is anonymous', () => { +test('should NOT render the user actions when user is anonymous', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); render(, { useRedux: true, useQueryParams: true, useRouter: true, }); + expect(await screen.findByText(/sources/i)).toBeInTheDocument(); expect(screen.queryByText('User')).not.toBeInTheDocument(); }); @@ -532,7 +537,7 @@ test('should render the Bug Report link when available', async () => { expect(bugReport).toHaveAttribute('href', bug_report_url); }); -test('should render the Login link when user is anonymous', () => { +test('should render the Login link when user is anonymous', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); const { data: { @@ -545,37 +550,43 @@ test('should render the Login link when user is anonymous', () => { useQueryParams: true, useRouter: true, }); - const login = screen.getByText('Login'); + const login = await screen.findByText('Login'); expect(login).toHaveAttribute('href', user_login_url); }); -test('should render the Language Picker', () => { +test('should render the Language Picker', async () => { useSelectorMock.mockReturnValue({ roles: user.roles }); render(, { useRedux: true, useQueryParams: true, useRouter: true, }); - expect(screen.getByLabelText('Languages')).toBeInTheDocument(); + expect(await screen.findByLabelText('Languages')).toBeInTheDocument(); }); -test('should hide create button without proper roles', () => { +test('should hide create button without proper roles', async () => { useSelectorMock.mockReturnValue({ roles: [] }); render(, { useRedux: true, useQueryParams: true, useRouter: true, }); + expect(await screen.findByText(/sources/i)).toBeInTheDocument(); expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument(); }); -test('should render without QueryParamProvider', () => { +test('should render without QueryParamProvider', async () => { useSelectorMock.mockReturnValue({ roles: [] }); - render(, { useRedux: true, useRouter: true }); + render(, { + useRedux: true, + useRouter: true, + useQueryParams: true, + }); + expect(await screen.findByText(/sources/i)).toBeInTheDocument(); expect(screen.queryByTestId('new-dropdown')).not.toBeInTheDocument(); }); -test('should render an extension component if one is supplied', () => { +test('should render an extension component if one is supplied', async () => { const extensionsRegistry = getExtensionsRegistry(); extensionsRegistry.set('navbar.right', () => ( @@ -584,9 +595,9 @@ test('should render an extension component if one is supplied', () => { setupExtensions(); - render(, { useRouter: true }); + render(, { useRouter: true, useQueryParams: true }); expect( - screen.getByText('navbar.right extension component'), + await screen.findByText('navbar.right extension component'), ).toBeInTheDocument(); });