test: LDP-2498: Add tests for @nuxtjs/i18n integration

package.json

@@ -36,6 +36,7 @@
     "@nuxt/schema": "^3.11.2",
     "@nuxt/test-utils": "^3.12.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@nuxtjs/i18n": "^8.3.0",
     "eslint": "^8.57.0",
     "nuxt": "^3.11.2",
     "vitest": "^1.5.0"

playground/components/LanguageSwitcher.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="language-switcher">
+    <div v-for="availableLocale in availableLocales" :key="availableLocale">
+      <a
+        v-if="alternateLinkPath(availableLocale)"
+        :href="alternateLinkPath(availableLocale)"
+        :class="{ 'active-locale': availableLocale === locale }"
+        @click="setLocale(availableLocale)"
+      >
+        {{ availableLocale }}
+      </a>
+      <div
+        v-else
+      >
+        {{ availableLocale }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { locale, locales, setLocale } = useI18n()
+const { getPage } = useDrupalCe()
+
+const availableLocales = computed(() => {
+  return locales.value.filter(i => i.code !== locale.value)
+})
+
+// Get the path of the translated page from the 'alternate' link in the metatags.
+const alternateLinkPath = (langCode) => {
+  const alternateLink = getPage().value.metatags.link.find(link => link.rel === 'alternate' && link.hreflang === langCode)
+  if (!alternateLink) {
+    return
+  }
+  const alternateLinkURL = new URL(alternateLink.href)
+  return alternateLinkURL.pathname
+}
+
+</script>
+
+<style lang="css" scoped>
+.language-switcher {
+  display: inline-flex;
+  background-color: #f8f8f8;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  margin-left: 1rem;
+  list-style: none;
+}
+
+a {
+  font-size: 1rem;
+  padding: 0.5rem;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #222;
+}
+
+.active-locale {
+  border-bottom: 2px solid black;
+}
+</style>

playground/components/MainNavigation.vue

@@ -28,7 +28,7 @@ const mainMenu = await fetchMenu('main')
 
 <style lang="css" scoped>
 .main-menu {
-  display: flex;
+  display: inline-flex;
   list-style: none;
 }
 

playground/layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <LanguageSwitcher v-if="$i18n" />
     <MainNavigation />
     <Messages />
     <div id="main">

playground/server/api/de/api/menu_items/main.ts

@@ -0,0 +1 @@
+export default defineEventHandler(() => [{ key: '06c57f70-be51-4fa4-a944-a71704a616df', title: 'Eine andere Seite', description: null, uri: 'de\/node\/3', alias: 'de\/node\/3', external: false, absolute: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu84.gitpod.io\/de\/node\/3', relative: '\/de\/\/node\/3', existing: true, weight: '0', expanded: false, enabled: true, uuid: 'b49a069f-1d05-4a54-a201-c7d06605f7c5', options: [] }, { key: '819c0178-ee38-4778-b489-2eedc4c20249', title: 'Test page DE', description: null, uri: 'de\/node\/1', alias: 'de\/node\/1', external: false, absolute: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu84.gitpod.io\/de\/node\/1', relative: '\/de\/node\/1', existing: true, weight: '0', expanded: false, enabled: true, uuid: '98f6edd6-42d1-44ac-a154-3e23895dcfc9', options: [] }])

playground/server/api/de/error404.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler((event) => {
+  event.node.res.statusCode = 404
+  event.node.res.end()
+})

playground/server/api/de/error500.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler((event) => {
+  event.node.res.statusCode = 500
+  event.node.res.end()
+})

playground/server/api/de/index.ts

@@ -0,0 +1,2 @@
+export default defineEventHandler(() => ({ title: 'Willkommen', messages: [], breadcrumbs: [], metatags: { meta: [{ name: 'title', content: 'Willkommen | lupus decoupled' }], link: [{ rel: 'canonical', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/de' }, { rel: 'shortlink', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/' }, { rel: 'alternate', hreflang: 'de', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/de' }, { rel: 'alternate', hreflang: 'en', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/' }] }, content_format: 'json', content: { element: 'drupal-markup', content: 'Willkommen auf Ihrer Drupal-Website mit benutzerdefinierten Elementen!' }, page_layout: 'default', local_tasks: []
+}))

playground/server/api/de/node/1.ts

@@ -0,0 +1,2 @@
+export default defineEventHandler(() => ({ title: 'DE Test page', messages: [], breadcrumbs: [], metatags: { meta: [{ name: 'title', content: 'DE Test page | lupus decoupled' }, { name: 'description', content: 'DE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id neque aliquam vestibulum morbi blandit cursus risus. Cursus sit amet dictum sit amet. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Quis hendrerit dolor magna eget est lorem ipsum dolor. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Tellus in hac habitasse platea. Mattis enim ut tellus elementum sagittis. Sit amet nisl suscipit adipiscing. Donec enim diam vulputate ut pharetra sit amet.' }], link: [{ rel: 'canonical', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/de\/node\/1' }, { rel: 'alternate', hreflang: 'de', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/de\/node\/1' }, { rel: 'alternate', hreflang: 'en', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/node\/1' }] }, content_format: 'json', content: { element: 'node', type: 'page', title: 'Test page DE', created: '1674823460', body: ['\u003Cp\u003EDE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id neque aliquam vestibulum morbi blandit cursus risus. Cursus sit amet dictum sit amet. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Quis hendrerit dolor magna eget est lorem ipsum dolor. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Tellus in hac habitasse platea. Mattis enim ut tellus elementum sagittis. Sit amet nisl suscipit adipiscing. Donec enim diam vulputate ut pharetra sit amet. Aliquet nibh praesent tristique magna sit amet. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Nibh nisl condimentum id venenatis a condimentum vitae. A scelerisque purus semper eget duis at tellus. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Consectetur adipiscing elit duis tristique sollicitudin nibh. Massa massa ultricies mi quis hendrerit dolor magna eget est. Dolor magna eget est lorem. Senectus et netus et malesuada. Enim lobortis scelerisque fermentum dui faucibus in ornare quam.\u003C\/p\u003E'], uid: { element: 'field-entity-reference', targetId: '1', entity: { element: 'a', href: '\/user\/1', type: 'user', content: 'admin' } } }, page_layout: 'default', local_tasks: { primary: [{ url: '\/node\/1', label: 'View', active: true }, { url: '\/node\/1\/edit', label: 'Edit', active: false }, { url: '\/node\/1\/delete', label: 'Delete', active: false }, { url: '\/node\/1\/revisions', label: 'Revisions', active: false }], secondary: [] }
+}))

playground/server/api/de/node/3.ts

@@ -0,0 +1,2 @@
+export default defineEventHandler(() => ({ title: 'Eine andere Seite', messages: [], breadcrumbs: [], metatags: { meta: [{ name: 'title', content: 'Another page | lupus decoupled' }, { name: 'description', content: 'DE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu dictum varius duis at consectetur. Aliquam purus sit amet luctus. Varius morbi enim nunc faucibus a pellentesque sit. Vel facilisis volutpat est velit egestas dui id ornare arcu. Ut pharetra sit amet aliquam id diam maecenas. Quis commodo odio aenean sed adipiscing diam donec. Velit scelerisque in dictum non consectetur. Ultrices eros in cursus turpis massa. Amet volutpat consequat mauris nunc congue nisi vitae.' }], link: [{ rel: 'canonical', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu84.gitpod.io\/de\/node\/3' }, { rel: 'alternate', hreflang: 'de', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu84.gitpod.io\/de\/node\/3' }, { rel: 'alternate', hreflang: 'en', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu84.gitpod.io\/node\/3' }] }, content_format: 'json', content: { element: 'node', type: 'page', uid: '1', title: 'Eine andere Seite', created: '1674823558', body: ['\u003Cp\u003EDE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu dictum varius duis at consectetur. Aliquam purus sit amet luctus. Varius morbi enim nunc faucibus a pellentesque sit. Vel facilisis volutpat est velit egestas dui id ornare arcu. Ut pharetra sit amet aliquam id diam maecenas. Quis commodo odio aenean sed adipiscing diam donec. Velit scelerisque in dictum non consectetur. Ultrices eros in cursus turpis massa. Amet volutpat consequat mauris nunc congue nisi vitae. Turpis nunc eget lorem dolor sed viverra ipsum nunc aliquet. Tempus egestas sed sed risus pretium quam. Odio eu feugiat pretium nibh ipsum. Posuere sollicitudin aliquam ultrices sagittis orci. Convallis posuere morbi leo urna molestie. Porttitor rhoncus dolor purus non enim praesent. Mi tempus imperdiet nulla malesuada.\u003C\/p\u003E'] }, page_layout: 'clear', local_tasks: []
+}))

playground/server/api/de/node/404.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler((event) => {
+  event.node.res.statusCode = 404
+  return { title: 'Seite nicht gefunden', messages: [], breadcrumbs: [], metatags: { meta: [{ name: 'title', content: 'Seite nicht gefunden | lupus decoupled' }], link: [{ rel: 'canonical', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/de\/' }, { rel: 'shortlink', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/de\/' }] }, content_format: 'json', content: { element: 'drupal-markup', content: 'Die angeforderte Seite konnte nicht gefunden werden.' }, page_layout: 'default', local_tasks: [] }
+})

playground/server/api/de/redirect.ts

@@ -0,0 +1,10 @@
+export default defineEventHandler(() => {
+  return {
+    redirect: {
+      external: false,
+      statusCode: 302,
+      url: '/de/node/1'
+    },
+    messages: []
+  }
+})

playground/server/api/index.ts

@@ -1 +1,2 @@
-export default defineEventHandler(() => ({ title: 'Welcome', messages: [], breadcrumbs: [], metatags: { meta: [{ name: 'title', content: 'Welcome | lupus decoupled' }], link: [{ rel: 'canonical', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/' }, { rel: 'shortlink', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/' }] }, content_format: 'json', content: { element: 'drupal-markup', content: 'Welcome to your custom-elements enabled Drupal site!' }, page_layout: 'default', local_tasks: [] }))
+export default defineEventHandler(() => ({ title: 'Welcome', messages: [], breadcrumbs: [], metatags: { meta: [{ name: 'title', content: 'Welcome | lupus decoupled' }], link: [{ rel: 'canonical', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/' }, { rel: 'shortlink', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/' }, { rel: 'alternate', hreflang: 'de', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/de' }, { rel: 'alternate', hreflang: 'en', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/' } ] }, content_format: 'json', content: { element: 'drupal-markup', content: 'Welcome to your custom-elements enabled Drupal site!' }, page_layout: 'default', local_tasks: []
+}))

playground/server/api/node/1.ts

@@ -1 +1,2 @@
-export default defineEventHandler(() => ({ title: 'Test page', messages: [], breadcrumbs: [], metatags: { meta: [{ name: 'title', content: 'Test page | lupus decoupled' }, { name: 'description', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id neque aliquam vestibulum morbi blandit cursus risus. Cursus sit amet dictum sit amet. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Quis hendrerit dolor magna eget est lorem ipsum dolor. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Tellus in hac habitasse platea. Mattis enim ut tellus elementum sagittis. Sit amet nisl suscipit adipiscing. Donec enim diam vulputate ut pharetra sit amet.' }], link: [{ rel: 'canonical', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/node\/1' }] }, content_format: 'json', content: { element: 'node', type: 'page', title: 'Test page', created: '1674823460', body: ['\u003Cp\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id neque aliquam vestibulum morbi blandit cursus risus. Cursus sit amet dictum sit amet. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Quis hendrerit dolor magna eget est lorem ipsum dolor. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Tellus in hac habitasse platea. Mattis enim ut tellus elementum sagittis. Sit amet nisl suscipit adipiscing. Donec enim diam vulputate ut pharetra sit amet. Aliquet nibh praesent tristique magna sit amet. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Nibh nisl condimentum id venenatis a condimentum vitae. A scelerisque purus semper eget duis at tellus. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Consectetur adipiscing elit duis tristique sollicitudin nibh. Massa massa ultricies mi quis hendrerit dolor magna eget est. Dolor magna eget est lorem. Senectus et netus et malesuada. Enim lobortis scelerisque fermentum dui faucibus in ornare quam.\u003C\/p\u003E'], uid: { element: 'field-entity-reference', targetId: '1', entity: { element: 'a', href: '\/user\/1', type: 'user', content: 'admin' } } }, page_layout: 'default', local_tasks: { primary: [{ url: '\/node\/1', label: 'View', active: true }, { url: '\/node\/1\/edit', label: 'Edit', active: false }, { url: '\/node\/1\/delete', label: 'Delete', active: false }, { url: '\/node\/1\/revisions', label: 'Revisions', active: false }], secondary: [] } }))
+export default defineEventHandler(() => ({ title: 'Test page', messages: [], breadcrumbs: [], metatags: { meta: [{ name: 'title', content: 'Test page | lupus decoupled' }, { name: 'description', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id neque aliquam vestibulum morbi blandit cursus risus. Cursus sit amet dictum sit amet. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Quis hendrerit dolor magna eget est lorem ipsum dolor. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Tellus in hac habitasse platea. Mattis enim ut tellus elementum sagittis. Sit amet nisl suscipit adipiscing. Donec enim diam vulputate ut pharetra sit amet.' }], link: [{ rel: 'canonical', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/node\/1' }, { rel: 'alternate', hreflang: 'de', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/de\/node\/1' }, { rel: 'alternate', hreflang: 'en', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu86.gitpod.io\/node\/1' } ] }, content_format: 'json', content: { element: 'node', type: 'page', title: 'Test page', created: '1674823460', body: ['\u003Cp\u003ELorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id neque aliquam vestibulum morbi blandit cursus risus. Cursus sit amet dictum sit amet. In pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Quis hendrerit dolor magna eget est lorem ipsum dolor. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Tellus in hac habitasse platea. Mattis enim ut tellus elementum sagittis. Sit amet nisl suscipit adipiscing. Donec enim diam vulputate ut pharetra sit amet. Aliquet nibh praesent tristique magna sit amet. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Nibh nisl condimentum id venenatis a condimentum vitae. A scelerisque purus semper eget duis at tellus. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Consectetur adipiscing elit duis tristique sollicitudin nibh. Massa massa ultricies mi quis hendrerit dolor magna eget est. Dolor magna eget est lorem. Senectus et netus et malesuada. Enim lobortis scelerisque fermentum dui faucibus in ornare quam.\u003C\/p\u003E'], uid: { element: 'field-entity-reference', targetId: '1', entity: { element: 'a', href: '\/user\/1', type: 'user', content: 'admin' } } }, page_layout: 'default', local_tasks: { primary: [{ url: '\/node\/1', label: 'View', active: true }, { url: '\/node\/1\/edit', label: 'Edit', active: false }, { url: '\/node\/1\/delete', label: 'Delete', active: false }, { url: '\/node\/1\/revisions', label: 'Revisions', active: false }], secondary: [] }
+}))