Uh oh!
There was an error while loading. Please reload this page.
refactor(clerk-js): Social buttons mobile layout#7169
Uh oh!
There was an error while loading. Please reload this page.
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@clerk/clerk-js': minor | ||
| --- | ||
| Update SocialButtons to show "Continue with" prefix for last auth strategy, and improve mobile layout consistency. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,239 @@ | ||
| // packages/clerk-js/src/ui/elements/__tests__/SocialButtons.test.tsx | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
| import { bindCreateFixtures } from '@/test/utils'; | ||
| import { CardStateProvider } from '@/ui/elements/contexts'; | ||
| import { SocialButtons } from '../SocialButtons'; | ||
| const { createFixtures } = bindCreateFixtures('SignIn'); | ||
| describe('SocialButtons', () => { | ||
| const mockOAuthCallback = vi.fn(); | ||
| const mockWeb3Callback = vi.fn(); | ||
| const mockAlternativePhoneCodeCallback = vi.fn(); | ||
| const defaultProps = { | ||
| oauthCallback: mockOAuthCallback, | ||
| web3Callback: mockWeb3Callback, | ||
| alternativePhoneCodeCallback: mockAlternativePhoneCodeCallback, | ||
| enableOAuthProviders: true, | ||
| enableWeb3Providers: true, | ||
| enableAlternativePhoneCodeProviders: true, | ||
| }; | ||
| describe('Without last authentication strategy', () => { | ||
| it('should show "Continue with" prefix for single strategy', async () => { | ||
| const { wrapper, fixtures } = await createFixtures(f => { | ||
| f.withSocialProvider({ provider: 'google' }); | ||
| }); | ||
| fixtures.clerk.client.lastAuthenticationStrategy = null; | ||
| render( | ||
| <CardStateProvider> | ||
| <SocialButtons | ||
| {...defaultProps} | ||
| showLastAuthenticationStrategy={false} | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| const button = screen.getByRole('button', { name: /google/i }); | ||
| expect(button).toHaveTextContent('Continue with Google'); | ||
| }); | ||
| it('should NOT show "Continue with" prefix for either button when two strategies exist', async () => { | ||
| const { wrapper, fixtures } = await createFixtures(f => { | ||
| f.withSocialProvider({ provider: 'google' }); | ||
| f.withSocialProvider({ provider: 'github' }); | ||
| }); | ||
| fixtures.clerk.client.lastAuthenticationStrategy = null; | ||
| render( | ||
| <CardStateProvider> | ||
| <SocialButtons | ||
| {...defaultProps} | ||
| showLastAuthenticationStrategy={false} | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| const googleButton = screen.getByRole('button', { name: /google/i }); | ||
| const githubButton = screen.getByRole('button', { name: /github/i }); | ||
| expect(googleButton).toHaveTextContent('Google'); | ||
| expect(googleButton).not.toHaveTextContent('Continue with Google'); | ||
| expect(githubButton).toHaveTextContent('GitHub'); | ||
| expect(githubButton).not.toHaveTextContent('Continue with GitHub'); | ||
| }); | ||
| it('should NOT show "Continue with" prefix for any button when 3+ strategies exist', async () => { | ||
| const { wrapper, fixtures } = await createFixtures(f => { | ||
| f.withSocialProvider({ provider: 'google' }); | ||
| f.withSocialProvider({ provider: 'github' }); | ||
| f.withSocialProvider({ provider: 'apple' }); | ||
| }); | ||
| fixtures.clerk.client.lastAuthenticationStrategy = null; | ||
| render( | ||
| <CardStateProvider> | ||
| <SocialButtons | ||
| {...defaultProps} | ||
| showLastAuthenticationStrategy={false} | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| const buttons = screen.getAllByRole('button'); | ||
| buttons.forEach(button => { | ||
| expect(button).not.toHaveTextContent(/Continue with/i); | ||
| }); | ||
| }); | ||
| it('should return null when no strategies are enabled', async () => { | ||
| const { wrapper } = await createFixtures(); | ||
| const { container } = render( | ||
| <CardStateProvider> | ||
| <SocialButtons | ||
| {...defaultProps} | ||
| enableOAuthProviders={false} | ||
| enableWeb3Providers={false} | ||
| enableAlternativePhoneCodeProviders={false} | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| expect(container.firstChild).toBeNull(); | ||
| }); | ||
| }); | ||
| describe('With last authentication strategy', () => { | ||
| it('should show "Continue with" prefix for single strategy', async () => { | ||
| const { wrapper, fixtures } = await createFixtures(f => { | ||
| f.withSocialProvider({ provider: 'google' }); | ||
| }); | ||
| fixtures.clerk.client.lastAuthenticationStrategy = 'oauth_google'; | ||
| render( | ||
| <CardStateProvider> | ||
| <SocialButtons | ||
| {...defaultProps} | ||
| showLastAuthenticationStrategy | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| const button = screen.getByRole('button', { name: /google/i }); | ||
| expect(button).toHaveTextContent('Continue with Google'); | ||
| expect(button).toHaveTextContent('Last used'); | ||
| }); | ||
| it('should show "Continue with" prefix for both buttons when two strategies exist', async () => { | ||
| const { wrapper, fixtures } = await createFixtures(f => { | ||
| f.withSocialProvider({ provider: 'google' }); | ||
| f.withSocialProvider({ provider: 'github' }); | ||
| }); | ||
| fixtures.clerk.client.lastAuthenticationStrategy = 'oauth_google'; | ||
| render( | ||
| <CardStateProvider> | ||
| <SocialButtons | ||
| {...defaultProps} | ||
| showLastAuthenticationStrategy | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| const googleButton = screen.getByRole('button', { name: /google/i }); | ||
| const githubButton = screen.getByRole('button', { name: /github/i }); | ||
| // Both should show "Continue with" when last auth is present | ||
| expect(googleButton).toHaveTextContent('Continue with Google'); | ||
| expect(githubButton).toHaveTextContent('Continue with GitHub'); | ||
| }); | ||
| it('should show "Last used" badge on last auth strategy button', async () => { | ||
| const { wrapper, fixtures } = await createFixtures(f => { | ||
| f.withSocialProvider({ provider: 'google' }); | ||
| f.withSocialProvider({ provider: 'github' }); | ||
| }); | ||
| fixtures.clerk.client.lastAuthenticationStrategy = 'oauth_google'; | ||
| render( | ||
| <CardStateProvider> | ||
| <SocialButtons | ||
| {...defaultProps} | ||
| showLastAuthenticationStrategy | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| const googleButton = screen.getByRole('button', { name: /google/i }); | ||
| expect(googleButton).toHaveTextContent('Last used'); | ||
| const badge = screen.getByText('Last used'); | ||
| expect(badge).toBeInTheDocument(); | ||
| }); | ||
| it('should show "Continue with" prefix when last auth strategy is alone in its row', async () => { | ||
| const { wrapper, fixtures } = await createFixtures(f => { | ||
| f.withSocialProvider({ provider: 'google' }); | ||
| f.withSocialProvider({ provider: 'github' }); | ||
| f.withSocialProvider({ provider: 'apple' }); | ||
| }); | ||
| fixtures.clerk.client.lastAuthenticationStrategy = 'oauth_google'; | ||
| render( | ||
| <CardStateProvider> | ||
| <SocialButtons | ||
| {...defaultProps} | ||
| showLastAuthenticationStrategy | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| // Google (last auth) should be in its own row and show "Continue with" | ||
| const googleButton = screen.getByRole('button', { name: /google/i }); | ||
| expect(googleButton).toHaveTextContent('Continue with Google'); | ||
| }); | ||
| it('should handle SAML strategies converted to OAuth', async () => { | ||
| const { wrapper, fixtures } = await createFixtures(f => { | ||
| f.withSocialProvider({ provider: 'google' }); | ||
| }); | ||
| // SAML strategy should be converted to OAuth | ||
| fixtures.clerk.client.lastAuthenticationStrategy = 'saml_google' as any; | ||
| render( | ||
| <CardStateProvider> | ||
| <SocialButtons | ||
| {...defaultProps} | ||
| showLastAuthenticationStrategy | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| const googleButton = screen.getByRole('button', { name: /google/i }); | ||
| expect(googleButton).toHaveTextContent('Continue with Google'); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.