diff --git a/.changeset/fix-auth-button-mode.md b/.changeset/fix-auth-button-mode.md new file mode 100644 index 00000000..08ab662d --- /dev/null +++ b/.changeset/fix-auth-button-mode.md @@ -0,0 +1,5 @@ +--- +'@youversion/platform-react-ui': patch +--- + +Make `YouVersionAuthButton` honor explicit and default sign-in modes for authenticated users. diff --git a/packages/ui/src/components/YouVersionAuthButton.test.tsx b/packages/ui/src/components/YouVersionAuthButton.test.tsx new file mode 100644 index 00000000..b5bb2300 --- /dev/null +++ b/packages/ui/src/components/YouVersionAuthButton.test.tsx @@ -0,0 +1,53 @@ +/** + * @vitest-environment jsdom + */ +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { YouVersionAPIUsers, YouVersionPlatformConfiguration } from '@youversion/platform-core'; +import { YouVersionProvider } from '@youversion/platform-react-hooks'; +import { describe, expect, it, vi } from 'vitest'; +import { YouVersionAuthButton } from './YouVersionAuthButton'; + +describe('YouVersionAuthButton', () => { + it('uses mode, rather than authentication state alone, to choose the auth action', async () => { + const signIn = vi.spyOn(YouVersionAPIUsers, 'signIn').mockResolvedValue(undefined); + const clearAuthTokens = vi + .spyOn(YouVersionPlatformConfiguration, 'clearAuthTokens') + .mockImplementation(() => undefined); + + const renderButton = (mode?: 'signIn' | 'signOut' | 'auto') => ( + + + + ); + + const { rerender } = render(renderButton('signIn')); + const explicitSignInButton = await screen.findByRole('button', { name: /sign in/i }); + await waitFor(() => expect(explicitSignInButton).toBeEnabled()); + fireEvent.click(explicitSignInButton); + + await waitFor(() => expect(signIn).toHaveBeenCalledTimes(1)); + expect(clearAuthTokens).not.toHaveBeenCalled(); + + rerender(renderButton()); + const defaultButton = await screen.findByRole('button', { name: /sign in/i }); + fireEvent.click(defaultButton); + + await waitFor(() => expect(signIn).toHaveBeenCalledTimes(2)); + expect(clearAuthTokens).not.toHaveBeenCalled(); + + rerender(renderButton('auto')); + const autoButton = await screen.findByRole('button', { name: /sign out/i }); + fireEvent.click(autoButton); + + expect(clearAuthTokens).toHaveBeenCalledTimes(1); + expect(signIn).toHaveBeenCalledTimes(2); + + signIn.mockRestore(); + clearAuthTokens.mockRestore(); + }); +}); diff --git a/packages/ui/src/components/YouVersionAuthButton.tsx b/packages/ui/src/components/YouVersionAuthButton.tsx index 8c85e921..3000ca18 100644 --- a/packages/ui/src/components/YouVersionAuthButton.tsx +++ b/packages/ui/src/components/YouVersionAuthButton.tsx @@ -135,6 +135,7 @@ export const YouVersionAuthButton = React.forwardRef): Promise => { e.preventDefault(); @@ -144,7 +145,7 @@ export const YouVersionAuthButton = React.forwardRef { if (text) return text; - const isSignOut = mode === 'signOut' || (mode === 'auto' && auth.isAuthenticated); - if (size === 'short') { return isSignOut ? t('signOut') : t('signIn'); } @@ -187,7 +186,7 @@ export const YouVersionAuthButton = React.forwardRef ); - }, [mode, auth.isAuthenticated, size, text, t]); + }, [isSignOut, size, text, t]); const loadingSpinner = (