Add unit and integration tests

packages/ra-ui-materialui/src/auth/Logout.spec.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { AdminContext } from '../AdminContext';
+import { Logout } from './Logout';
+import { UserAuthenticated, UserUnauthenticated } from './Logout.stories';
+
+export default { title: 'ra-ui-materialui/input/AutocompleteArrayInput' };
+
+const MinimalAdmin = authProvider => {
+    return (
+        <AdminContext authProvider={authProvider}>
+            <Logout />
+        </AdminContext>
+    );
+};
+
+it('should display logout button if the auth succeeds', async () => {
+    render(<UserAuthenticated />);
+
+    await waitFor(() => {
+        const logoutButton = screen.queryByText(
+            'ra.auth.logout'
+        ) as HTMLInputElement;
+        expect(logoutButton).not.toBeNull();
+    });
+});
+
+it('should not display logout button if the auth fails', async () => {
+    render(<UserUnauthenticated />);
+
+    await waitFor(() => {
+        const logoutButton = screen.queryByText(
+            'ra.auth.logout'
+        ) as HTMLInputElement;
+        expect(logoutButton).toBeNull();
+    });
+});

packages/ra-ui-materialui/src/auth/Logout.stories.tsx

@@ -0,0 +1,29 @@
+import { Typography } from '@mui/material';
+import * as React from 'react';
+import { AdminContext } from '../AdminContext';
+import { Logout } from './Logout';
+
+export default { title: 'ra-ui-materialui/auth/Logout' };
+
+const MinimalAdmin = (props: { authenticated: boolean }) => {
+    const authProvider = {
+        login: () => Promise.resolve(),
+        logout: () => Promise.resolve(),
+        checkAuth: () =>
+            props.authenticated ? Promise.resolve() : Promise.reject(),
+        checkError: () => Promise.resolve(),
+        getPermissions: () => Promise.resolve(),
+    };
+    return (
+        <AdminContext authProvider={authProvider}>
+            <Typography variant="h6">
+                Should {props.authenticated ? '' : 'not '}display logout button
+            </Typography>
+            <Logout />
+        </AdminContext>
+    );
+};
+
+export const UserAuthenticated = () => <MinimalAdmin authenticated={true} />;
+
+export const UserUnauthenticated = () => <MinimalAdmin authenticated={false} />;

packages/ra-ui-materialui/src/auth/Logout.tsx

@@ -24,6 +24,7 @@ export const Logout: FunctionComponent<
 > = React.forwardRef(function Logout(props, ref) {
     const { className, redirectTo, icon, ...rest } = props;
 
+    const { authenticated } = useAuthState();
     const isXSmall = useMediaQuery((theme: Theme) =>
         theme.breakpoints.down('sm')
     );
@@ -34,7 +35,6 @@ export const Logout: FunctionComponent<
         redirectTo,
         logout,
     ]);
-    const { authenticated } = useAuthState();
 
     if (!authenticated) return null;