feat: expose generated sanity config within nuxt config for later use

* + refactor tests

example/nuxt.config.js

@@ -9,25 +9,27 @@ const config = {
     '../src/index.ts',
   ],
   sanity: {
-    projectId: process.env.NODE_ENV === 'development' ? 'j1o4tmjp' : undefined,
+    ...(process.env.NODE_ENV === 'development'
+      ? { projectId: 'j1o4tmjp' }
+      : {}),
     dataset: 'production',
     additionalClients: {
       another: {},
     },
   },
   build: {
-    extend (config) {
+    extend(config) {
       config.resolve.alias['@nuxtjs/sanity/dist/sanity-content'] = resolve(
         __dirname,
-        '../src/components/sanity-content',
+        '../src/components/sanity-content'
       )
       config.resolve.alias['@nuxtjs/sanity/dist/sanity-image'] = resolve(
         __dirname,
-        '../src/components/sanity-image',
+        '../src/components/sanity-image'
       )
       config.resolve.alias['@nuxtjs/sanity'] = resolve(
         __dirname,
-        '../src/index.ts',
+        '../src/index.ts'
       )
     },
   },

example/pages/movie/_slug.vue

@@ -19,7 +19,7 @@
           {{ characterName }}
         </li>
       </ul>
-      <LocalSanityImage asset-id="test-id" />
+      <LocalSanityImage class="w-6 h-12" project-id="j1o4tmjp" asset-id="image-e22a88d23751a84df81f03ef287ae85fc992fe12-780x1170-jpg" />
       <SanityContent :blocks="details.overview" />
     </template>
     <template v-else>

example/sanity.json

@@ -0,0 +1,6 @@
+{
+  "api": {
+    "projectId": "default",
+    "dataset": "production"
+  }
+}

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  setupFiles: ['<rootDir>/test/setup.ts'],
   transform: {
     '\\.(js|ts)$': [
       'babel-jest',

src/index.ts

@@ -91,6 +91,8 @@ const nuxtModule: Module<SanityModuleOptions> = function (moduleOptions) {
     return
   }
 
+  this.options[CONFIG_KEY] = options
+
   let useOfficialClient = !options.minimal
   try {
     if (useOfficialClient) {

test/e2e/minimal.test.ts → test/e2e/client.test.ts

@@ -1,4 +1,4 @@
-import { setupTest, createPage } from '@nuxt/test-utils'
+import { setupTest, get } from '@nuxt/test-utils'
 
 describe('module with minimal options', () => {
   const mockSanityClient = jest.fn()
@@ -13,8 +13,8 @@ describe('module with minimal options', () => {
 
   setupTest({
     testDir: __dirname,
-    browser: true,
     fixture: '../../example',
+    server: true,
     config: {
       sanity: {
         projectId: 'sample-project',
@@ -24,9 +24,8 @@ describe('module with minimal options', () => {
     },
   })
 
-  test('Minimal client is used', async () => {
-    const page = await createPage('/')
-    await page.innerHTML('body')
+  it('should use minimal client', async () => {
+    await get('/')
     expect(mockSanityClient).toHaveBeenCalledTimes(0)
   }, 50000)
 })

test/e2e/module.test.ts

@@ -1,4 +1,4 @@
-import { setupTest, expectModuleToBeCalledWith } from '@nuxt/test-utils'
+import { setupTest, expectModuleToBeCalledWith, getNuxt } from '@nuxt/test-utils'
 
 const projectId = 'j1o4tmjp'
 const dataset = 'production'
@@ -13,7 +13,7 @@ describe('module with default options', () => {
       },
     },
   })
-  test('should inject core plugin with correct options', () => {
+  it('should inject core plugin with correct defaults', () => {
     expectModuleToBeCalledWith('addPlugin', {
       src: expect.stringContaining('plugin.js'),
       fileName: 'sanity/plugin.js',
@@ -35,3 +35,39 @@ describe('module with default options', () => {
     })
   }, 50000)
 })
+
+describe('module with sanity.json', () => {
+  setupTest({
+    testDir: __dirname,
+    fixture: '../../example',
+  })
+  test('should read defaults from JSON', () => {
+    const { options } = getNuxt()
+    expect(options.sanity.projectId).toEqual('default')
+  }, 50000)
+})
+
+describe('module without a project id', () => {
+  const mockWarn = jest.fn()
+
+  jest.mock('consola', () => ({
+    info: () => {},
+    warn: mockWarn,
+  }))
+
+  setupTest({
+    testDir: __dirname,
+    fixture: '../../example',
+    config: {
+      sanity: {
+        projectId: '',
+      },
+    },
+  })
+
+  it('should fail gracefully', () => {
+    expect(mockWarn).toBeCalledWith(
+      expect.stringContaining('Make sure you specify'),
+    )
+  }, 50000)
+})

test/e2e/browser.test.ts → test/e2e/ssr.test.ts

@@ -1,51 +1,53 @@
-import { setupTest, createPage } from '@nuxt/test-utils'
+import { setupTest, get } from '@nuxt/test-utils'
 
 const configs = {
-  base: {
+  'default options': {
     sanity: {
       projectId: 'j1o4tmjp',
     },
   },
-  autoregistration: {
+  'components support': {
     components: true,
     sanity: {
       projectId: 'j1o4tmjp',
     },
   },
+  'minimal client': {
+    sanity: {
+      projectId: 'j1o4tmjp',
+      minimal: true,
+    },
+  },
 }
 
 Object.entries(configs).forEach(([type, config]) =>
-  describe(`module with ${type} options`, () => {
+  describe(`module with ${type}`, () => {
     setupTest({
       testDir: __dirname,
-      browser: true,
+      server: true,
       fixture: '../../example',
       config,
     })
 
     test('Sanity image builder works', async () => {
-      const page = await createPage('/')
-      const html = await page.innerHTML('body')
+      const { body: html } = await get('/')
       expect(html).toContain(
         'https://cdn.sanity.io/images/j1o4tmjp/production/7aa06723bb01a7a79055b6d6f5be80329a0e5b58-780x1170.jpg?auto=format&w=128',
       )
     }, 50000)
 
     test('Sanity config is exposed', async () => {
-      const page = await createPage('/')
-      const html = await page.innerHTML('body')
+      const { body: html } = await get('/')
       expect(html).toContain('Project ID: j1o4tmjp')
     }, 50000)
 
     test('CMS items are fetched', async () => {
-      const page = await createPage('/')
-      const html = await page.innerHTML('body')
+      const { body: html } = await get('/')
       expect(html).toContain('Guardians of the Galaxy')
     }, 50000)
 
     test('Can view single film page', async () => {
-      const page = await createPage('/movie/alien')
-      const html = await page.innerHTML('body')
+      const { body: html } = await get('/movie/alien')
       expect(html).toContain('Arthur Dallas')
     }, 50000)
   }),

test/setup.ts

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+
+Vue.config.devtools = false
+Vue.config.productionTip = false