From 8159c9c939baca22eb8330fd741bc9122e64dd27 Mon Sep 17 00:00:00 2001 From: Baozier Date: Wed, 28 Aug 2024 16:30:22 -0400 Subject: [PATCH] Add more tests for locale support (#131) --- docs/q&a.md | 5 + server/src/routes/__tests__/identity.test.tsx | 240 ++++++------------ 2 files changed, 78 insertions(+), 167 deletions(-) diff --git a/docs/q&a.md b/docs/q&a.md index 16d229b3..6e75e569 100644 --- 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 index b95f7930..f98a9c50 100644 --- 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}*`) + expect(labels[1].innerHTML).toBe(`${localeConfig.authorizePassword.password.fr}*`) + 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,7 +1043,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('code').length).toBe(1) expect(document.getElementsByTagName('form').length).toBe(1) @@ -1073,30 +1050,6 @@ describe( 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 - }, - ) }, )