text: import { createLocalVue } from '@vue/test-utils'
  import VueMeta from 'vue-meta'
  import Index from '@/pages/areas/_areaId/index.vue'
  import { createPageWrapper } from '~/test/pages/pageUtils'
  import { createArea } from '~/test/testDataUtils'
  
  const localVue = createLocalVue()
  localVue.use(VueMeta, { keyName: 'head' })
  
  describe('Index', () => {
    const route = {
      params: {
        areaId: 'test-area-id-1',
      },
    }
    let area
    let wrapper
    async function createWrapper() {
      wrapper = await createPageWrapper(Index, {
        route,
        serviceRequests: {
          '/v1/areas/test-area-id-1?fields=area(id,name,description,notes,links,teams)':
            {
              responseBody: { area },
            },
        },
      })
    }
  
    afterEach(() => {
      wrapper.destroy()
      wrapper = null
    })
  
    describe('when Get Area service endpoint returns an area', () => {
      beforeEach(() => {
        area = createArea({ areaNumber: 1, hasMainDetails: true })
      })
  
      test('has the right page title', async () => {
        await createWrapper()
        expect(wrapper.vm.$metaInfo.title).toBe(
          'Kronicle - Test Area Name 1 Area'
        )
      })
  
      test('renders the page', async () => {
        await createWrapper()
        expect(wrapper.element).toMatchSnapshot()
      })
    })
  })
  