overleaf/services/web/test/frontend/infrastructure/i18n.spec.tsx
Tim Down e60885aa88 Merge pull request #19347 from overleaf/td-bs5-cypress-css
Move CSS loading in Cypress to individual test spec files

GitOrigin-RevId: 92bb5167cfa81b0bd54acc724efb23b397421ccb
2024-07-25 08:05:16 +00:00

148 lines
4.3 KiB
TypeScript

import '../helpers/bootstrap-3'
import { Trans, useTranslation } from 'react-i18next'
describe('i18n', function () {
describe('t', function () {
it('translates a plain string', function () {
const Test = () => {
const { t } = useTranslation()
return <div>{t('accept')}</div>
}
cy.mount(<Test />)
cy.findByText('Accept')
})
it('uses defaultValues', function () {
const Test = () => {
const { t } = useTranslation()
return <div>{t('welcome_to_sl')}</div>
}
cy.mount(<Test />)
cy.findByText('Welcome to Overleaf')
})
it('uses values', function () {
const Test = () => {
const { t } = useTranslation()
return <div>{t('sort_by_x', { x: 'name' })}</div>
}
cy.mount(<Test />)
cy.findByText('Sort by name')
})
})
describe('Trans', function () {
it('uses values', function () {
const Test = () => {
return (
<div>
<Trans
i18nKey="sort_by_x"
values={{ x: 'name' }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
</div>
)
}
cy.mount(<Test />)
cy.findByText('Sort by name')
})
it('uses an object of components', function () {
const Test = () => {
return (
<div data-testid="container">
<Trans
i18nKey="in_order_to_match_institutional_metadata_associated"
components={{ b: <b /> }}
values={{ email: 'test@example.com' }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
</div>
)
}
cy.mount(<Test />)
cy.findByTestId('container')
.should(
'have.text',
'In order to match your institutional metadata, your account is associated with the email test@example.com.'
)
.find('b')
.should('have.length', 1)
.should('have.text', 'test@example.com')
})
it('uses an array of components', function () {
const Test = () => {
return (
<div data-testid="container">
<Trans
i18nKey="are_you_still_at"
components={[<b />]} // eslint-disable-line react/jsx-key
values={{ institutionName: 'Test' }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
</div>
)
}
cy.mount(<Test />)
cy.findByTestId('container')
.should('have.text', 'Are you still at Test?')
.find('b')
.should('have.length', 1)
.should('have.text', 'Test')
})
it('escapes special characters', function () {
const Test = () => {
return (
<div data-testid="container">
<Trans
i18nKey="are_you_still_at"
components={[<b />]} // eslint-disable-line react/jsx-key
values={{ institutionName: "T&e's<code>t</code>ing" }}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
</div>
)
}
cy.mount(<Test />)
cy.findByTestId('container')
.should('have.text', "Are you still at T&e's<code>t</code>ing?")
.find('b')
.should('have.length', 1)
.should('have.text', "T&e's<code>t</code>ing")
})
it('does not convert markup in values to components', function () {
const Test = () => {
return (
<div data-testid="container">
<Trans
i18nKey="are_you_still_at"
components={[<b />]} // eslint-disable-line react/jsx-key
values={{
institutionName: "<i>T</i>&<b>e</b>'s<code>t</code>ing",
}}
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
</div>
)
}
cy.mount(<Test />)
cy.findByTestId('container')
.should(
'have.text',
"Are you still at <i>T</i>&<b>e</b>'s<code>t</code>ing?"
)
.find('b')
.should('have.length', 1)
.should('have.text', "<i>T</i>&<b>e</b>'s<code>t</code>ing")
})
})
})