fix: match full browser locale case-insensitively (same as short) (#655)

Related to PR #651 and new browser language detection logic that
takes into account full (like en-GB) language codes.

Co-authored-by: mcdmaster <mcdmaster@users.noreply.github.com>

src/templates/utils-common.js

@@ -24,8 +24,9 @@ export const matchBrowserLocale = (appLocales, browserLocales) => {
 
   // First pass: match exact locale.
   for (const [index, browserCode] of browserLocales.entries()) {
-    if (appLocales.includes(browserCode)) {
-      matchedLocales.push({ code: browserCode, score: 1 - index / browserLocales.length })
+    const matchedCode = appLocales.find(appCode => appCode.toLowerCase() === browserCode.toLowerCase())
+    if (matchedCode) {
+      matchedLocales.push({ code: matchedCode, score: 1 - index / browserLocales.length })
       break
     }
   }

test/unit.test.js

@@ -1,4 +1,5 @@
 import path from 'path'
+import { matchBrowserLocale, parseAcceptLanguage } from '../src/templates/utils-common'
 
 describe('parsePages', () => {
   test('parses in-component options', async () => {
@@ -22,27 +23,21 @@ describe('parsePages', () => {
 })
 
 describe('parseAcceptLanguage', () => {
-  test('parses browser accept-language', async () => {
-    const { parseAcceptLanguage } = await import('../src/templates/utils-common')
-
+  test('parses browser accept-language', () => {
     expect(parseAcceptLanguage('en-US,en;q=0.9,nb;q=0.8,no;q=0.7')).toStrictEqual(['en-US', 'en', 'nb', 'no'])
   })
 })
 
 describe('matchBrowserLocale', () => {
-  test('matches highest-ranked full locale', async () => {
-    const { matchBrowserLocale } = await import('../src/templates/utils-common')
-
+  test('matches highest-ranked full locale', () => {
     // Both locales match first browser locale - full locale should win.
     const appLocales = ['en', 'en-US']
     const browserLocales = ['en-US', 'en']
 
     expect(matchBrowserLocale(appLocales, browserLocales)).toBe('en-US')
   })
 
-  test('matches highest-ranked short locale', async () => {
-    const { matchBrowserLocale } = await import('../src/templates/utils-common')
-
+  test('matches highest-ranked short locale', () => {
     // Both locales match first browser locale - short locale should win.
     // This is because browser locale order defines scoring so we prefer higher-scored over exact.
     const appLocales = ['en', 'en-US']
@@ -51,48 +46,52 @@ describe('matchBrowserLocale', () => {
     expect(matchBrowserLocale(appLocales, browserLocales)).toBe('en')
   })
 
-  test('matches highest-ranked short locale (only short defined)', async () => {
-    const { matchBrowserLocale } = await import('../src/templates/utils-common')
-
+  test('matches highest-ranked short locale (only short defined)', () => {
     const appLocales = ['en']
     const browserLocales = ['en-US', 'en']
 
     expect(matchBrowserLocale(appLocales, browserLocales)).toBe('en')
   })
 
-  test('matches highest-ranked short locale', async () => {
-    const { matchBrowserLocale } = await import('../src/templates/utils-common')
-
+  test('matches highest-ranked short locale', () => {
     const appLocales = ['en', 'fr']
     const browserLocales = ['en-US', 'en-GB']
 
     expect(matchBrowserLocale(appLocales, browserLocales)).toBe('en')
   })
 
-  test('does not match any locale', async () => {
-    const { matchBrowserLocale } = await import('../src/templates/utils-common')
-
+  test('does not match any locale', () => {
     const appLocales = ['pl', 'fr']
     const browserLocales = ['en-US', 'en']
 
     expect(matchBrowserLocale(appLocales, browserLocales)).toBe(null)
   })
 
-  test('matches full locale with mixed short and full, full having highest rank', async () => {
-    const { matchBrowserLocale } = await import('../src/templates/utils-common')
-
+  test('matches full locale with mixed short and full, full having highest rank', () => {
     const appLocales = ['en-US', 'en-GB', 'en']
     const browserLocales = ['en-GB', 'en-US', 'en']
 
     expect(matchBrowserLocale(appLocales, browserLocales)).toBe('en-GB')
   })
 
-  test('matches short locale with mixed short and full, short having highest rank', async () => {
-    const { matchBrowserLocale } = await import('../src/templates/utils-common')
-
+  test('matches short locale with mixed short and full, short having highest rank', () => {
     const appLocales = ['en-US', 'en-GB', 'en']
     const browserLocales = ['en', 'en-GB', 'en-US']
 
     expect(matchBrowserLocale(appLocales, browserLocales)).toBe('en')
   })
+
+  test('matches short locale case-insensitively', () => {
+    const appLocales = ['EN', 'en-GB']
+    const browserLocales = ['en', 'en-GB', 'en-US']
+
+    expect(matchBrowserLocale(appLocales, browserLocales)).toBe('EN')
+  })
+
+  test('matches long locale case-insensitively', () => {
+    const appLocales = ['en-gb', 'en-US']
+    const browserLocales = ['en-GB', 'en-US']
+
+    expect(matchBrowserLocale(appLocales, browserLocales)).toBe('en-gb')
+  })
 })