Add more tests for locale support (#131)

ValueMelody · Aug 28, 2024 · 8159c9c · 8159c9c
1 parent 7c6ac08
commit 8159c9c
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 167 deletions.
diff --git a/docs/q&a.md b/docs/q&a.md
@@ -69,3 +69,8 @@ export const verifyAccessToken = async () => {
   return true
 }
 ```
+
+## How to support a new locale
+English (EN) and French (FR) are supported by default in this project. To add support for additional locales, follow these steps:
+- Update the server/src/configs/locale.ts file, ensuring that translations for your new locale are provided.
+- Update the SUPPORTED_LOCALES environment variable to include your new locale in the array.
diff --git a/server/src/routes/__tests__/identity.test.tsx b/server/src/routes/__tests__/identity.test.tsx
@@ -136,10 +136,10 @@ const prepareFollowUpBody = async () => {
 }
 
 describe(
-  'get /authorize-password',
+  'locales',
   () => {
     test(
-      'should show sign in page',
+      'should render locale selector',
       async () => {
         const appRecord = getApp(db)
         const res = await getSignInRequest(
@@ -150,16 +150,31 @@ describe(
         const html = await res.text()
         const dom = new JSDOM(html)
         const document = dom.window.document
-        expect(document.getElementsByName('email').length).toBe(1)
-        expect(document.getElementsByName('password').length).toBe(1)
-        expect(document.getElementById('submit-button')).toBeTruthy()
-        expect(document.getElementsByTagName('form').length).toBe(1)
         expect(document.getElementsByTagName('select').length).toBe(1)
-        const links = document.getElementsByTagName('a')
-        expect(links.length).toBe(3)
-        expect(links[0].innerHTML).toBe(localeConfig.authorizePassword.signUp.en)
-        expect(links[1].innerHTML).toBe(localeConfig.authorizePassword.passwordReset.en)
-        expect(links[2].innerHTML).toBe(localeConfig.common.poweredByAuth.en)
+        const options = document.getElementsByTagName('option')
+        expect(options.length).toBe(2)
+        expect(options[0].innerHTML).toBe('EN')
+        expect(options[1].innerHTML).toBe('FR')
+      },
+    )
+
+    test(
+      'could render french',
+      async () => {
+        global.process.env.SUPPORTED_LOCALES = ['fr'] as unknown as string
+        const appRecord = getApp(db)
+        const res = await getSignInRequest(
+          db,
+          `${BaseRoute}/authorize-password`,
+          appRecord,
+        )
+        const html = await res.text()
+        const dom = new JSDOM(html)
+        const document = dom.window.document
+        const labels = document.getElementsByTagName('label')
+        expect(labels[0].innerHTML).toBe(`${localeConfig.authorizePassword.email.fr}<span class="text-red ml-2">*</span>`)
+        expect(labels[1].innerHTML).toBe(`${localeConfig.authorizePassword.password.fr}<span class="text-red ml-2">*</span>`)
+        global.process.env.SUPPORTED_LOCALES = ['fr'] as unknown as string
       },
     )
 
@@ -181,6 +196,53 @@ describe(
       },
     )
 
+    test(
+      'should disable locale selector when there only 1 locale',
+      async () => {
+        global.process.env.SUPPORTED_LOCALES = ['en'] as unknown as string
+        const appRecord = getApp(db)
+        const res = await getSignInRequest(
+          db,
+          `${BaseRoute}/authorize-password`,
+          appRecord,
+        )
+        const html = await res.text()
+        const dom = new JSDOM(html)
+        const document = dom.window.document
+        expect(document.getElementsByTagName('select').length).toBe(0)
+        global.process.env.SUPPORTED_LOCALES = ['en', 'fr'] as unknown as string
+      },
+    )
+  },
+)
+
+describe(
+  'get /authorize-password',
+  () => {
+    test(
+      'should show sign in page',
+      async () => {
+        const appRecord = getApp(db)
+        const res = await getSignInRequest(
+          db,
+          `${BaseRoute}/authorize-password`,
+          appRecord,
+        )
+        const html = await res.text()
+        const dom = new JSDOM(html)
+        const document = dom.window.document
+        expect(document.getElementsByName('email').length).toBe(1)
+        expect(document.getElementsByName('password').length).toBe(1)
+        expect(document.getElementById('submit-button')).toBeTruthy()
+        expect(document.getElementsByTagName('form').length).toBe(1)
+        const links = document.getElementsByTagName('a')
+        expect(links.length).toBe(3)
+        expect(links[0].innerHTML).toBe(localeConfig.authorizePassword.signUp.en)
+        expect(links[1].innerHTML).toBe(localeConfig.authorizePassword.passwordReset.en)
+        expect(links[2].innerHTML).toBe(localeConfig.common.poweredByAuth.en)
+      },
+    )
+
     test(
       'could disable sign up',
       async () => {
@@ -346,7 +408,6 @@ describe(
         const html = await res.text()
         const dom = new JSDOM(html)
         const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(1)
         expect(document.getElementsByName('email').length).toBe(1)
         expect(document.getElementsByName('password').length).toBe(1)
         expect(document.getElementsByName('confirmPassword').length).toBe(1)
@@ -356,27 +417,6 @@ describe(
       },
     )
 
-    test(
-      'should disable locale selector',
-      async () => {
-        global.process.env.ENABLE_LOCALE_SELECTOR = false as unknown as string
-        const appRecord = getApp(db)
-        const params = getAuthorizeParams(appRecord)
-
-        const res = await app.request(
-          `${BaseRoute}/authorize-account${params}`,
-          {},
-          mock(db),
-        )
-
-        const html = await res.text()
-        const dom = new JSDOM(html)
-        const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(0)
-        global.process.env.ENABLE_LOCALE_SELECTOR = true as unknown as string
-      },
-    )
-
     test(
       'could suppress names',
       async () => {
@@ -764,36 +804,11 @@ describe(
         const html = await res.text()
         const dom = new JSDOM(html)
         const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(1)
         expect(document.getElementsByTagName('button').length).toBe(2)
         expect(document.getElementsByTagName('button')[0].innerHTML).toBe(localeConfig.authorizeMfaEnroll.email.en)
         expect(document.getElementsByTagName('button')[1].innerHTML).toBe(localeConfig.authorizeMfaEnroll.otp.en)
       },
     )
-
-    test(
-      'could disable locale selector',
-      async () => {
-        global.process.env.ENABLE_LOCALE_SELECTOR = false as unknown as string
-        insertUsers(
-          db,
-          false,
-        )
-        const params = await prepareFollowUpParams()
-
-        const res = await app.request(
-          `${BaseRoute}/authorize-mfa-enroll${params}`,
-          {},
-          mock(db),
-        )
-
-        const html = await res.text()
-        const dom = new JSDOM(html)
-        const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(0)
-        global.process.env.ENABLE_LOCALE_SELECTOR = true as unknown as string
-      },
-    )
   },
 )
 
@@ -903,28 +918,10 @@ describe(
         const html = await res.text()
         const dom = new JSDOM(html)
         const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(1)
         expect(document.getElementsByName('otp').length).toBe(1)
         expect(document.getElementsByTagName('form').length).toBe(1)
       },
     )
-
-    test(
-      'could suppress locale selector',
-      async () => {
-        global.process.env.ENABLE_LOCALE_SELECTOR = false as unknown as string
-        insertUsers(
-          db,
-          false,
-        )
-        const res = await testGetOtpMfa('/authorize-otp-setup')
-        const html = await res.text()
-        const dom = new JSDOM(html)
-        const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(0)
-        global.process.env.ENABLE_LOCALE_SELECTOR = true as unknown as string
-      },
-    )
   },
 )
 
@@ -943,7 +940,6 @@ describe(
         const html = await res.text()
         const dom = new JSDOM(html)
         const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(1)
         expect(document.getElementsByName('otp').length).toBe(1)
         expect(document.getElementsByTagName('form').length).toBe(1)
         const buttons = document.getElementsByTagName('button')
@@ -953,24 +949,6 @@ describe(
       },
     )
 
-    test(
-      'could disable locale selector',
-      async () => {
-        global.process.env.ENABLE_LOCALE_SELECTOR = false as unknown as string
-        insertUsers(
-          db,
-          false,
-        )
-        db.prepare('update user set mfaTypes = ?').run('otp')
-        const res = await testGetOtpMfa('/authorize-otp-mfa')
-        const html = await res.text()
-        const dom = new JSDOM(html)
-        const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(0)
-        global.process.env.ENABLE_LOCALE_SELECTOR = true as unknown as string
-      },
-    )
-
     test(
       'could disable fallback to email mfa',
       async () => {
@@ -1065,38 +1043,13 @@ describe(
         const html = await res.text()
         const dom = new JSDOM(html)
         const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(1)
         expect(document.getElementsByName('code').length).toBe(1)
         expect(document.getElementsByTagName('form').length).toBe(1)
 
         const code = getCodeFromParams(params)
         expect(kv[`${adapterConfig.BaseKVKey.EmailMfaCode}-${code}`].length).toBe(8)
       },
     )
-
-    test(
-      'could disable locale selector',
-      async () => {
-        global.process.env.ENABLE_LOCALE_SELECTOR = false as unknown as string
-        insertUsers(
-          db,
-          false,
-        )
-        db.prepare('update user set mfaTypes = ? where id = 1').run('email')
-        const params = await prepareFollowUpParams()
-
-        const res = await app.request(
-          `${BaseRoute}/authorize-email-mfa${params}`,
-          {},
-          mock(db),
-        )
-        const html = await res.text()
-        const dom = new JSDOM(html)
-        const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(0)
-        global.process.env.ENABLE_LOCALE_SELECTOR = true as unknown as string
-      },
-    )
   },
 )
 
@@ -1259,36 +1212,11 @@ describe(
         const html = await res.text()
         const dom = new JSDOM(html)
         const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(1)
         expect(document.getElementsByTagName('button').length).toBe(2)
         expect(document.getElementsByTagName('button')[0].innerHTML).toBe(localeConfig.authorizeConsent.decline.en)
         expect(document.getElementsByTagName('button')[1].innerHTML).toBe(localeConfig.authorizeConsent.accept.en)
       },
     )
-
-    test(
-      'could disable locale selector',
-      async () => {
-        global.process.env.ENABLE_LOCALE_SELECTOR = false as unknown as string
-        insertUsers(
-          db,
-          false,
-        )
-        const params = await prepareFollowUpParams()
-
-        const res = await app.request(
-          `${BaseRoute}/authorize-consent${params}`,
-          {},
-          mock(db),
-        )
-
-        const html = await res.text()
-        const dom = new JSDOM(html)
-        const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(0)
-        global.process.env.ENABLE_LOCALE_SELECTOR = true as unknown as string
-      },
-    )
   },
 )
 
@@ -1368,32 +1296,10 @@ describe(
         const html = await res.text()
         const dom = new JSDOM(html)
         const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(1)
         expect(document.getElementsByName('code').length).toBe(1)
         expect(document.getElementsByTagName('form').length).toBe(1)
       },
     )
-
-    test(
-      'could disable locale selector',
-      async () => {
-        global.process.env.ENABLE_LOCALE_SELECTOR = false as unknown as string
-        await prepareUserAccount()
-
-        const currentUser = db.prepare('select * from user where id = 1').get() as userModel.Raw
-        const res = await app.request(
-          `${BaseRoute}/verify-email?id=${currentUser.authId}&locale=en`,
-          {},
-          mock(db),
-        )
-
-        const html = await res.text()
-        const dom = new JSDOM(html)
-        const document = dom.window.document
-        expect(document.getElementsByTagName('select').length).toBe(0)
-        global.process.env.ENABLE_LOCALE_SELECTOR = true as unknown as string
-      },
-    )
   },
 )