diff --git a/services/meta-builder.js b/services/meta-builder.js index e97b709a2..a111de2cd 100644 --- a/services/meta-builder.js +++ b/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] } diff --git a/tests/pages/pix-site/__snapshots__/index.test.js.snap b/tests/pages/pix-site/__snapshots__/index.test.js.snap index 38c3cdebc..daffa368c 100644 --- a/tests/pages/pix-site/__snapshots__/index.test.js.snap +++ b/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`] = ` "
diff --git a/tests/pages/pix-site/index.test.js b/tests/pages/pix-site/index.test.js index 7ced41678..eccf62605 100644 --- a/tests/pages/pix-site/index.test.js +++ b/tests/pages/pix-site/index.test.js @@ -1,10 +1,19 @@ -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({ @@ -12,10 +21,15 @@ describe('Index Page', () => { Promise.resolve({ data: { id: '', - meta: '', + meta: [ + { + slice_type: 'general_card', + primary: { description: '', image: {} }, + }, + ], type: 'slice_page', body: [{}, {}, {}, {}, {}, {}, {}, {}], - title: [{}], + title: [{ text: PRISMIC_TITLE }], }, }), findNewsItems: () => @@ -27,8 +41,20 @@ 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() }) @@ -36,4 +62,20 @@ describe('Index Page', () => { 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 + } }) diff --git a/tests/pages/pix-site/utils.js b/tests/pages/pix-site/utils.js index 8352d70dd..41abec797 100644 --- a/tests/pages/pix-site/utils.js +++ b/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() +}