E2E Example

[rperon]

Test Plan

Checklist

• Tests updated
• Docs updated

Screenshots

[fredericrous]

I noticed this slows the test a bit epicweb-dev/epic-stack#645 just enough to be significant on my 2019 16" mac with 8% disk space left

I am 90% sure we will have faster tests by initializing i18next in a global setup file https://playwright.dev/docs/test-global-setup-teardown#option-2-configure-globalsetup-and-globalteardown
and then calling createInstance on this i18n instance and passing the options to createInstance like so i18next.createInstance(options || undefined)

Indeed the benefit will be that we won't need to await the return of init function anymore in each test

[fredericrous]

actually, I tried global setup and project setup and that's the wrong approach. we could put the init before the await use, between line 102 and 103. It would be cleaner I think

  i18next: async ({}, use) => {
    const i18nextInstance = i18next;
    await i18nextInstance.use(initReactI18next).init({ ns: ['en'], ...i18nOptions })
    await use((options) => {
      return i18nextInstance.createInstance(options || undefined)
    })
  },
})

but that does not change the fact i18n will be initialized each time. Documentation says a fixture can be defined with a scope like so { scope: 'worker' } and that should be run once per browser session.. but I can't make it work

[fredericrous]

I ended up using the following which is performant

import commonENJson from '#app/translation/en.json' assert { type: 'json' }

export const test = base.extend<{
  ...
  t(key: string): string
}>({
  ...
  t: async ({}, use) => {
    await use((key: string) => {
      // @ts-expect-error -- let's allow dynamic keys
      return commonENJson?.[key]
    })
  },

[rperon]

I did the change where I put the i18next.createInstance() outside of the use function.
But with what you are proposing, are you able to test specific locale ?

[fredericrous]

I just put that function as an example. it only supports english. I personally do not care nor will spend testing time on my translations. waste of money and time at this point for my project

but you could of course change the signature of function t to for example update the lang when you call it the first time like t('en')('my.key)

import commonENJson from '#app/translation/en.json' assert { type: 'json' }
import commonFRJson from '#app/translation/fr.json' assert { type: 'json' }

const langs = {
  en: commonENJson,
  fr: commonFRJson
}

export const test = base.extend<{
  ...
  t(key: string): string
}>({
  ...
  t: async ({}, use) => {
    await use((lang: string) => (key: string) => {
      // @ts-expect-error -- let's allow dynamic keys
      return langs[lang]?.[key]
    })
  },

and you would use it like

test('description', async ({
  ...
  t,
}) => {
  await page
    .getByRole('button', {
      name: new RegExp(`${t('en')('auth.login.button.login')}$`, 'i'),
    })
    .click()

or if all your translations are in the same lang:

test('description', async ({
  ...
  t: tFunc,
}) => {
  const t = tFunc('en')
  await page
    .getByRole('button', {
      name: new RegExp(`${t('auth.login.button.login')}$`, 'i'),
    })
    .click()

[fredericrous]

remove this comment line 22