Add description meta

services/meta-builder.js

@@ -56,11 +56,26 @@ 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),
+      },
+    ]
+  }
+
   if (!meta) {
     return []
   }
   const twitterCard = getTwitterCard()
   const ogCard = getOgCard()
+  const generalMeta = getGeneralMeta()
 
-  return [...twitterCard, ...ogCard]
+  return [...twitterCard, ...ogCard, ...generalMeta]
 }

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

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Index Page get the corrects meta 1`] = `
+VueWrapper {
+  "_emitted": Object {},
+  "_emittedByOrder": Array [],
+  "isFunctionalComponent": undefined,
+}
+`;
+
 exports[`Index Page renders properly 1`] = `
 "<div class=\\"index\\">
   <slice-zone-stub slices=\\"[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]\\"></slice-zone-stub>

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 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,41 @@ 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('get correct title info', () => {
+    expect(wrapper.vm.$metaInfo.title).toBe(`${PRISMIC_TITLE} | Pix`)
+    expect(wrapper.vm.$data.title).toBe(PRISMIC_TITLE)
+  })
+
+  test('get the corrects meta', () => {
+    expect(findMetaContent('og:description')).toBe(PRISMIC_META)
+    expect(findMetaContent('description')).toBe(PRISMIC_META)
+  })
+
+  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()
+}