4a0bc869dd
### What?
Fixed client config caching to properly update when switching languages
in the admin UI.
### Why?
Currently, switching languages doesn't fully update the UI because
client config stays cached with previous language translations.
### How?
Created a language-aware caching system that stores separate configs for
each language and only uses cached config when it matches the active
language.
Before:
```typescript
let cachedClientConfig: ClientConfig | null = global._payload_clientConfig
if (!cachedClientConfig) {
cachedClientConfig = global._payload_clientConfig = null
}
export const getClientConfig = cache(
(args: { config: SanitizedConfig; i18n: I18nClient; importMap: ImportMap }): ClientConfig => {
if (cachedClientConfig && !global._payload_doNotCacheClientConfig) {
return cachedClientConfig
}
// ... create new config ...
}
);
```
After:
```typescript
let cachedClientConfigs: Record<string, ClientConfig> = global._payload_localizedClientConfigs
if (!cachedClientConfigs) {
cachedClientConfigs = global._payload_localizedClientConfigs = {}
}
export const getClientConfig = cache(
(args: { config: SanitizedConfig; i18n: I18nClient; importMap: ImportMap }): ClientConfig => {
const { config, i18n, importMap } = args
const currentLocale = i18n.language
if (!global._payload_doNotCacheClientConfig && cachedClientConfigs[currentLocale]) {
return cachedClientConfigs[currentLocale]
}
// ... create new config with correct translations ...
}
);
```
Also added handling for cache clearing during HMR to ensure
compatibility with the existing system.
Fixes #11406
---------
Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import type { Page } from '@playwright/test'
|
|
|
|
import { expect, test } from '@playwright/test'
|
|
|
|
import type { Config } from './payload-types.js'
|
|
|
|
const { beforeAll, beforeEach, describe } = test
|
|
|
|
import path from 'path'
|
|
import { fileURLToPath } from 'url'
|
|
|
|
import { ensureCompilationIsDone, initPageConsoleErrorCatch } from '../helpers.js'
|
|
import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
|
|
import { reInitializeDB } from '../helpers/reInitializeDB.js'
|
|
import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
|
|
const filename = fileURLToPath(import.meta.url)
|
|
const dirname = path.dirname(filename)
|
|
|
|
describe('i18n', () => {
|
|
let page: Page
|
|
|
|
let serverURL: string
|
|
|
|
beforeAll(async ({ browser }, testInfo) => {
|
|
const prebuild = false // Boolean(process.env.CI)
|
|
|
|
testInfo.setTimeout(TEST_TIMEOUT_LONG)
|
|
|
|
process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit
|
|
;({ serverURL } = await initPayloadE2ENoConfig<Config>({
|
|
dirname,
|
|
prebuild,
|
|
}))
|
|
|
|
const context = await browser.newContext()
|
|
page = await context.newPage()
|
|
initPageConsoleErrorCatch(page)
|
|
|
|
await ensureCompilationIsDone({ page, serverURL })
|
|
})
|
|
beforeEach(async () => {
|
|
await reInitializeDB({
|
|
serverURL,
|
|
snapshotKey: 'i18nTests',
|
|
})
|
|
|
|
await ensureCompilationIsDone({ page, serverURL })
|
|
})
|
|
|
|
test('ensure i18n labels and useTranslation hooks display correct translation', async () => {
|
|
await page.goto(serverURL + '/admin')
|
|
|
|
await expect(
|
|
page.locator('.componentWithDefaultI18n .componentWithDefaultI18nValidT'),
|
|
).toHaveText('Add Link')
|
|
await expect(
|
|
page.locator('.componentWithDefaultI18n .componentWithDefaultI18nValidI18nT'),
|
|
).toHaveText('Add Link')
|
|
await expect(
|
|
page.locator('.componentWithDefaultI18n .componentWithDefaultI18nInvalidT'),
|
|
).toHaveText('fields:addLink2')
|
|
await expect(
|
|
page.locator('.componentWithDefaultI18n .componentWithDefaultI18nInvalidI18nT'),
|
|
).toHaveText('fields:addLink2')
|
|
|
|
await expect(
|
|
page.locator('.componentWithCustomI18n .componentWithCustomI18nDefaultValidT'),
|
|
).toHaveText('Add Link')
|
|
await expect(
|
|
page.locator('.componentWithCustomI18n .componentWithCustomI18nDefaultValidI18nT'),
|
|
).toHaveText('Add Link')
|
|
await expect(
|
|
page.locator('.componentWithCustomI18n .componentWithCustomI18nDefaultInvalidT'),
|
|
).toHaveText('fields:addLink2')
|
|
await expect(
|
|
page.locator('.componentWithCustomI18n .componentWithCustomI18nDefaultInvalidI18nT'),
|
|
).toHaveText('fields:addLink2')
|
|
await expect(
|
|
page.locator('.componentWithCustomI18n .componentWithCustomI18nCustomValidT'),
|
|
).toHaveText('My custom translation')
|
|
await expect(
|
|
page.locator('.componentWithCustomI18n .componentWithCustomI18nCustomValidI18nT'),
|
|
).toHaveText('My custom translation')
|
|
})
|
|
|
|
test('ensure translations update correctly when switching language', async () => {
|
|
await page.goto(serverURL + '/admin/account')
|
|
|
|
await page.locator('div.rs__control').click()
|
|
await page.locator('div.rs__option').filter({ hasText: 'English' }).click()
|
|
await expect(page.locator('div.payload-settings h3')).toHaveText('Payload Settings')
|
|
|
|
await page.goto(serverURL + '/admin/collections/collection1/create')
|
|
await expect(page.locator('label[for="field-fieldDefaultI18nValid"]')).toHaveText(
|
|
'Add {{label}}',
|
|
)
|
|
|
|
await page.goto(serverURL + '/admin/account')
|
|
await page.locator('div.rs__control').click()
|
|
await page.locator('div.rs__option').filter({ hasText: 'Español' }).click()
|
|
await expect(page.locator('div.payload-settings h3')).toHaveText('Configuración de la carga')
|
|
|
|
await page.goto(serverURL + '/admin/collections/collection1/create')
|
|
await expect(page.locator('label[for="field-fieldDefaultI18nValid"]')).toHaveText(
|
|
'Añadir {{label}}',
|
|
)
|
|
})
|
|
})
|