[FEATURE] Récupérer les meta descriptions depuis prismic.

nuxt.config.js

@@ -30,7 +30,8 @@ export default {
       {
         hid: 'description',
         name: 'description',
-        content: process.env.npm_package_description || '',
+        content:
+          'Pix est le service public en ligne pour évaluer, développer et certifier ses compétences numériques tout au long de la vie.',
       },
     ],
     link: [

services/document-fetcher.js

@@ -60,6 +60,7 @@ export function documentFetcher(
     getPageByUid: async (uid) => {
       const simplePage = await getSimplePageByUid(uid)
       const slicePage = await getSlicesPageByUid(uid)
+
       const formPage = await getFormPageByUid(uid)
       return simplePage || slicePage || formPage
     },

services/meta-builder.js

@@ -1,8 +1,11 @@
+export const fallbackDescription =
+  'Pix est le service public en ligne pour évaluer, développer et certifier ses compétences numériques tout au long de la vie.'
+
 export default function getMeta(meta, currentPagePath, prismic) {
   function getTwitterCard() {
     const twitterMeta = meta.find((meta) => meta.slice_type === 'twitter_card')
     if (!twitterMeta) {
-      return {}
+      return []
     }
     return [
       { hid: 'twitter:card', name: 'twitter:card', content: 'summary' },
@@ -24,10 +27,11 @@ export default function getMeta(meta, currentPagePath, prismic) {
       },
     ]
   }
+
   function getOgCard() {
     const ogMeta = meta.find((meta) => meta.slice_type === 'general_card')
     if (!ogMeta) {
-      return {}
+      return []
     }
     return [
       {
@@ -38,7 +42,8 @@ export default function getMeta(meta, currentPagePath, prismic) {
       {
         hid: 'og:description',
         property: 'og:description',
-        content: prismic.asText(ogMeta.primary.description),
+        content:
+          prismic.asText(ogMeta.primary.description) || fallbackDescription,
       },
       { hid: 'og:type', property: 'og:type', content: 'article' },
       {
@@ -55,14 +60,28 @@ export default function getMeta(meta, currentPagePath, prismic) {
     ]
   }
 
+  function getGeneralMeta() {
+    const generalCard = meta.find((meta) => meta.slice_type === 'general_card')
+    if (!generalCard) {
+      return []
+    }
+    return [
+      {
+        hid: 'description',
+        name: 'description',
+        content:
+          prismic.asText(generalCard.primary.description) ||
+          fallbackDescription,
+      },
+    ]
+  }
+
   if (!meta) {
     return []
   }
   const twitterCard = getTwitterCard()
   const ogCard = getOgCard()
+  const generalMeta = getGeneralMeta()
 
-  if (twitterCard.length && ogCard.length) {
-    return [...twitterCard, ...ogCard]
-  }
-  return []
+  return [...twitterCard, ...ogCard, ...generalMeta]
 }

tests/pages/pix-site/index.test.js

@@ -1,21 +1,35 @@
-import { getInitialised } from './utils'
+import VueMeta from 'vue-meta'
+import { getInitialised, createLocalVue } from './utils'
 import { documentFetcher } from '~/services/document-fetcher'
+import getMeta, { fallbackDescription } from '~/services/meta-builder'
+
+const localVue = createLocalVue()
+localVue.prototype.$getMeta = getMeta
+
+localVue.use(VueMeta, { keyName: 'head' })
 
 jest.mock('~/services/document-fetcher')
 
 describe('Index Page', () => {
   let wrapper
+  const PRISMIC_META = 'meta info'
+  const PRISMIC_TITLE = 'title'
 
   beforeEach(async () => {
     documentFetcher.mockReturnValue({
       getPageByUid: () =>
         Promise.resolve({
           data: {
             id: '',
-            meta: '',
+            meta: [
+              {
+                slice_type: 'general_card',
+                primary: { description: '', image: {} },
+              },
+            ],
             type: 'slice_page',
             body: [{}, {}, {}, {}, {}, {}, {}, {}],
-            title: [{}],
+            title: [{ text: PRISMIC_TITLE }],
           },
         }),
       findNewsItems: () =>
@@ -27,13 +41,55 @@ describe('Index Page', () => {
           },
         }),
     })
-    wrapper = await getInitialised('index')
+    wrapper = await getInitialised('index', {
+      localVue,
+      computed: {
+        $prismic() {
+          return { asText: () => PRISMIC_META }
+        },
+      },
+    })
   })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
   test('mounts properly', () => {
     expect(wrapper.vm).toBeTruthy()
   })
 
   test('renders properly', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  test('gets the correct title', () => {
+    expect(wrapper.vm.$metaInfo.title).toBe(`${PRISMIC_TITLE} | Pix`)
+    expect(wrapper.vm.$data.title).toBe(PRISMIC_TITLE)
+  })
+
+  test('gets the correct meta description from Prismic', () => {
+    expect(findMetaContent('og:description')).toBe(PRISMIC_META)
+    expect(findMetaContent('description')).toBe(PRISMIC_META)
+  })
+
+  test('uses the fallback meta description when not filled in Prismic', async () => {
+    wrapper = await getInitialised('index', {
+      localVue,
+      computed: {
+        $prismic() {
+          return { asText: () => '' }
+        },
+      },
+    })
+
+    expect(findMetaContent('og:description')).toBe(fallbackDescription)
+    expect(findMetaContent('description')).toBe(fallbackDescription)
+  })
+
+  function findMetaContent(hid) {
+    const meta = wrapper.vm.$metaInfo.meta.find((m) => m.hid === hid)
+    expect(meta).toBeTruthy()
+    return wrapper.vm.$metaInfo.meta.find((m) => m.hid === hid).content
+  }
 })

tests/pages/pix-site/utils.js

@@ -1,4 +1,7 @@
-import { shallowMount } from '@vue/test-utils'
+import {
+  shallowMount,
+  createLocalVue as createLocalVueTest,
+} from '@vue/test-utils'
 
 /**
  * This is needed to manage the asyncData() from vuepages
@@ -39,3 +42,7 @@ export function emptyPrismicDocument() {
     items: [{}],
   }
 }
+
+export function createLocalVue() {
+  return createLocalVueTest()
+}