feat(i18n): add locale to SignUp fixtures, class, and improve testing

Author: guilherme6191

packages/clerk-js/src/core/resources/SignUp.ts

@@ -158,7 +158,10 @@ export class SignUp extends BaseResource implements SignUpResource {
 
     // Inject browser locale if not already provided
     if (!finalParams.locale) {
-      finalParams.locale = getBrowserLocale();
+      const browserLocale = getBrowserLocale();
+      if (browserLocale) {
+        finalParams.locale = browserLocale;
+      }
     }
 
     if (!__BUILD_DISABLE_RHC__ && !this.clientBypass() && !this.shouldBypassCaptchaForAttempt(params)) {
@@ -484,6 +487,7 @@ export class SignUp extends BaseResource implements SignUpResource {
       this.abandonAt = data.abandon_at;
       this.web3wallet = data.web3_wallet;
       this.legalAcceptedAt = data.legal_accepted_at;
+      this.locale = data.locale;
     }
 
     eventBus.emit('resource:update', { resource: this });
@@ -512,6 +516,7 @@ export class SignUp extends BaseResource implements SignUpResource {
       abandon_at: this.abandonAt,
       web3_wallet: this.web3wallet,
       legal_accepted_at: this.legalAcceptedAt,
+      locale: this.locale,
       external_account: this.externalAccount,
       external_account_strategy: this.externalAccount?.strategy,
     };
@@ -627,6 +632,10 @@ class SignUpFuture implements SignUpFutureResource {
     return this.resource.legalAcceptedAt;
   }
 
+  get locale() {
+    return this.resource.locale;
+  }
+
   get unverifiedFields() {
     return this.resource.unverifiedFields;
   }
@@ -685,7 +694,7 @@ class SignUpFuture implements SignUpFutureResource {
   async create(params: SignUpFutureCreateParams): Promise<{ error: unknown }> {
     return runAsyncResourceTask(this.resource, async () => {
       // Inject browser locale if not already provided
-      const locale = params.locale || getBrowserLocale();
+      const locale = params.locale || getBrowserLocale() || undefined;
       await this._create({ ...params, locale });
     });
   }

packages/clerk-js/src/test/core-fixtures.ts

@@ -231,6 +231,8 @@ export const createSignUp = (signUpParams: Partial<SignUpJSON> = {}) => {
     first_name: signUpParams.first_name,
     has_password: signUpParams.has_password,
     last_name: signUpParams.last_name,
+    legal_accepted_at: signUpParams.legal_accepted_at,
+    locale: signUpParams.locale,
     missing_fields: signUpParams.missing_fields,
     object: 'sign_up',
     optional_fields: signUpParams.optional_fields,

packages/clerk-js/src/utils/__tests__/locale.test.ts

@@ -1,41 +1,33 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { getBrowserLocale } from '../locale';
 
 describe('getBrowserLocale()', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
   it('returns the browser locale when available', () => {
-    Object.defineProperty(window.navigator, 'language', {
-      value: 'es-ES',
-      configurable: true,
-    });
+    vi.stubGlobal('navigator', { language: 'es-ES' });
 
     expect(getBrowserLocale()).toBe('es-ES');
   });
 
-  it('returns en-US as default when navigator.language is not available', () => {
-    Object.defineProperty(window.navigator, 'language', {
-      value: undefined,
-      configurable: true,
-    });
+  it('returns null as default when navigator.language is not available', () => {
+    vi.stubGlobal('navigator', { language: undefined });
 
-    expect(getBrowserLocale()).toBe('en-US');
+    expect(getBrowserLocale()).toBeNull();
   });
 
-  it('returns en-US when navigator.language is empty string', () => {
-    Object.defineProperty(window.navigator, 'language', {
-      value: '',
-      configurable: true,
-    });
+  it('returns null as default when navigator.language is empty string', () => {
+    vi.stubGlobal('navigator', { language: '' });
 
-    expect(getBrowserLocale()).toBe('en-US');
+    expect(getBrowserLocale()).toBeNull();
   });
 
-  it('returns en-US when navigator object is not defined', () => {
-    Object.defineProperty(window, 'navigator', {
-      value: undefined,
-      configurable: true,
-    });
+  it('returns null as default when navigator object is not defined', () => {
+    vi.stubGlobal('navigator', undefined);
 
-    expect(getBrowserLocale()).toBe('en-US');
+    expect(getBrowserLocale()).toBeNull();
   });
 });

packages/clerk-js/src/utils/locale.ts

@@ -1,14 +1,14 @@
 import { inBrowser } from '@clerk/shared/browser';
 
-const DEFAULT_LOCALE = 'en-US';
+const DEFAULT_LOCALE = null;
 
 /**
  * Detects the user's preferred locale from the browser.
- * Falls back to 'en-US' if locale cannot be determined.
+ * Falls back to null if locale cannot be determined.
  *
- * @returns The detected locale string in BCP 47 format (e.g., 'en-US', 'es-ES')
+ * @returns The detected locale string in BCP 47 format (e.g., 'en-US', 'es-ES') or null if locale cannot be determined.
  */
-export function getBrowserLocale(): string {
+export function getBrowserLocale(): string | null {
   if (!inBrowser()) {
     return DEFAULT_LOCALE;
   }

packages/types/src/json.ts

@@ -136,6 +136,7 @@ export interface SignUpJSON extends ClerkResourceJSON {
   created_user_id: string | null;
   abandon_at: number | null;
   legal_accepted_at: number | null;
+  locale: string | null;
   verifications: SignUpVerificationsJSON | null;
 }
 

packages/types/src/signUpFuture.ts

@@ -137,6 +137,8 @@ export interface SignUpFutureResource {
 
   readonly legalAcceptedAt: number | null;
 
+  readonly locale: string | null;
+
   create: (params: SignUpFutureCreateParams) => Promise<{ error: unknown }>;
 
   update: (params: SignUpFutureUpdateParams) => Promise<{ error: unknown }>;