test: merge language switching tests with basic usage (nuxt-modules#2850

)

specs/basic_usage.spec.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest'
+import { describe, test, expect, beforeEach } from 'vitest'
 import { fileURLToPath } from 'node:url'
 import { $fetch, setup } from './utils'
 import {
@@ -11,6 +11,7 @@ import {
   gotoPath,
   renderPage,
   startServerWithRuntimeConfig,
+  waitForTransition,
   waitForURL
 } from './helper'
 
@@ -24,7 +25,9 @@ describe('basic usage', async () => {
       runtimeConfig: {
         public: {
           i18n: {
-            baseUrl: ''
+            baseUrl: '',
+            skipSettingLocaleOnNavigate: undefined,
+            detectBrowserLanguage: undefined
           }
         }
       }
@@ -65,8 +68,7 @@ describe('basic usage', async () => {
     expect(await page.locator('#switch-locale-path-usages .switch-to-fr a').getAttribute('href')).toEqual('/fr')
 
     // URL path with Route object with `useLocaleRoute`
-    const button = await page.locator('#locale-route-usages button')
-    await button.click()
+    await page.locator('#locale-route-usages button').click()
     // await page.waitForURL('**/user/profile?foo=1')
     expect(await getText(page, '#profile-page')).toEqual('This is profile page')
     expect(await page.url()).include('/user/profile?foo=1')
@@ -412,4 +414,120 @@ describe('basic usage', async () => {
     const product2dom = getDom(product2Html)
     expect(product2dom.querySelector('#i18n-alt-en').href).toEqual('/products/red-mug')
   })
+
+  describe('language switching', async () => {
+    beforeEach(async () => {
+      await startServerWithRuntimeConfig({
+        public: {
+          i18n: {
+            skipSettingLocaleOnNavigate: true,
+            detectBrowserLanguage: false
+          }
+        }
+      })
+    })
+
+    test('language switching', async () => {
+      const { page } = await renderPage('/')
+
+      await page.locator('#nuxt-locale-link-fr').click()
+      await waitForTransition(page)
+      await waitForURL(page, '/fr')
+
+      // `fr` rendering
+      expect(await getText(page, '#home-header')).toMatch('Bonjour-le-monde!')
+      expect(await getText(page, '#link-about')).toMatch('À propos')
+
+      // lang switcher rendering
+      expect(await getText(page, '#nuxt-locale-link-en')).toMatch('English')
+      expect(await getText(page, '#set-locale-link-en')).toMatch('English')
+
+      await page.locator('#set-locale-link-en').click()
+      await waitForTransition(page)
+      await waitForURL(page, '/')
+
+      // page path
+      expect(await getData(page, '#home-use-async-data')).toMatchObject({
+        aboutPath: '/about',
+        aboutTranslation: 'About us'
+      })
+      expect(await page.getAttribute('#nuxt-locale-link-fr', 'href')).toEqual('/fr')
+
+      // current locale
+      expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('en')
+    })
+
+    test('retains query parameters', async () => {
+      const { page } = await renderPage('/?foo=123')
+      expect(page.url()).include('/?foo=123')
+
+      await page.locator('#nuxt-locale-link-fr').click()
+      await waitForTransition(page)
+      await waitForURL(page, '/fr?foo=123')
+      expect(page.url()).include('/fr?foo=123')
+    })
+
+    test('dynamic route parameters - basic', async () => {
+      const { page } = await renderPage('/')
+
+      // go to dynamic route page
+      await page.locator('#link-post').click()
+      await waitForTransition(page)
+      await waitForURL(page, '/post/id')
+
+      await page.locator('#nuxt-locale-link-fr').click()
+      await waitForTransition(page)
+      await waitForURL(page, '/fr/post/mon-article')
+      expect(await getText(page, '#post-id')).toMatch('mon-article')
+      expect(await page.url()).include('mon-article')
+    })
+
+    test('dynamic route parameters - catch all', async () => {
+      const { page } = await renderPage('/foo/bar')
+
+      await page.locator('#nuxt-locale-link-fr').click()
+      await waitForTransition(page)
+      await waitForURL(page, '/fr/mon-article/xyz')
+      expect(await getText(page, '#catch-all-id')).toMatch('mon-article/xyz')
+      expect(await page.url()).include('mon-article/xyz')
+    })
+
+    test('wait for page transition', async () => {
+      const { page } = await renderPage('/')
+
+      expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('en')
+
+      // click `fr` lang switching
+      await page.locator('#nuxt-locale-link-fr').click()
+      await waitForTransition(page)
+      await waitForURL(page, '/fr')
+      expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('fr')
+
+      // click `en` lang switching
+      await page.locator('#nuxt-locale-link-en').click()
+      await waitForTransition(page)
+      await waitForURL(page, '/')
+      expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('en')
+    })
+
+    test('i18n custom block', async () => {
+      const { page } = await renderPage('/')
+
+      // click `fr` lang switch with `<NuxtLink>`
+      await page.locator('#nuxt-locale-link-fr').click()
+      await waitForTransition(page)
+
+      // go to category page
+      await page.locator('#link-greetings').click()
+      await waitForTransition(page)
+
+      expect(await getText(page, '#per-component-hello')).toMatch('Bonjour!')
+
+      // click `en` lang switch with `<NuxtLink>`
+      await page.locator('#nuxt-locale-link-en').click()
+      await waitForTransition(page)
+
+      expect(await getText(page, '#per-component-hello')).toMatch('Hello!')
+    })
+  })
 })

specs/fixtures/basic_usage/app.vue

@@ -1,9 +1,35 @@
 <script setup lang="ts">
-const head = useLocaleHead({ addSeoAttributes: true })
+import { useI18n } from '#i18n'
+import { useRuntimeConfig } from 'nuxt/app'
+
+const { finalizePendingLocaleChange } = useI18n()
+
+const skipSettingLocale = useRuntimeConfig().public.i18n.skipSettingLocaleOnNavigate
+const pageTransition = {
+  name: 'my',
+  mode: 'out-in',
+  onBeforeEnter: async () => {
+    await finalizePendingLocaleChange()
+  }
+}
 </script>
 
 <template>
   <NuxtLayout>
-    <NuxtPage />
+    <NuxtPage id="nuxt-page" :transition="skipSettingLocale ? pageTransition : undefined" />
   </NuxtLayout>
 </template>
+
+<style>
+section {
+  margin: 1rem 0;
+}
+.my-enter-active,
+.my-leave-active {
+  transition: opacity 0.3s;
+}
+.my-enter,
+.my-leave-active {
+  opacity: 0;
+}
+</style>

specs/fixtures/switcher/app/router.options.ts → specs/fixtures/basic_usage/app/router.options.ts

@@ -5,9 +5,11 @@ import type { RouterConfig } from '@nuxt/schema'
 export default <RouterConfig>{
   async scrollBehavior(to, from, savedPosition) {
     const nuxtApp = useNuxtApp()
-    if (nuxtApp.$18n && to.name !== from.name) {
+
+    if (nuxtApp.$config.public.i18n.skipSettingLocaleOnNavigate && nuxtApp.$18n && to.name !== from.name) {
       await nuxtApp.$i18n.waitForPendingLocaleChange()
     }
+
     return savedPosition || { top: 0 }
   }
 }

specs/fixtures/basic_usage/pages/index.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
-import { useLocaleHead } from '#i18n'
-import { navigateTo, useHead } from '#imports'
+import { useI18n, useLocaleHead, useLocalePath, useLocaleRoute, useSwitchLocalePath } from '#i18n'
+import {
+  computed,
+  navigateTo,
+  ref,
+  useAppConfig,
+  useAsyncData,
+  useHead,
+  useNuxtApp,
+  useRoute,
+  useRuntimeConfig,
+  watch
+} from '#imports'
 import LangSwitcher from '../components/LangSwitcher.vue'
 import LocalScope from '../components/LocalScope.vue'
 
-const { t, locale, locales, localeProperties } = useI18n()
+const { t, locale, locales, localeProperties, finalizePendingLocaleChange } = useI18n()
 const localePath = useLocalePath()
 const switchLocalePath = useSwitchLocalePath()
 const localeRoute = useLocaleRoute()
@@ -32,6 +43,19 @@ const { data, refresh } = useAsyncData('home', () =>
   })
 )
 
+watch(locale, () => {
+  refresh()
+})
+const route = useRoute()
+route.meta.pageTransition = {
+  name: 'my',
+  mode: 'out-in',
+  onBeforeEnter: async () => {
+    if (useRuntimeConfig().public.i18n.skipSettingLocaleOnNavigate) {
+      await finalizePendingLocaleChange()
+    }
+  }
+}
 // @ts-ignore
 definePageMeta({
   title: 'home'
@@ -99,6 +123,12 @@ useHead({
         <li class="path-about">
           <NuxtLink id="link-about" :to="localePath('/about')">{{ $t('about') }}</NuxtLink>
         </li>
+        <li>
+          <NuxtLink id="link-post" :to="localePath({ name: 'post-id', params: { id: 'id' } })">Post</NuxtLink>
+        </li>
+        <li>
+          <NuxtLink id="link-greetings" :to="localePath('greetings')">Greetings</NuxtLink>
+        </li>
         <li class="path-hash">
           <NuxtLink id="link-about-hash" :to="localePath('/about#my-hash')">{{ $t('about') }}</NuxtLink>
         </li>

specs/fixtures/basic_usage/pages/user/profile.vue

@@ -1,3 +1,5 @@
 <template>
-  <p id="profile-page">This is profile page</p>
+  <div>
+    <p id="profile-page">This is profile page</p>
+  </div>
 </template>