abhiaiyer91 / apollo-storybook-decorator

Wrap your storybook environment with Apollo Client, provide mocks for isolated UI testing with GraphQL
332 stars 34 forks source link

Story-specific mocks do not seem to be working with Vue stories #131

Closed zadigus closed 4 years ago

zadigus commented 4 years ago

I have tried to use the decorator for my vue app in two ways. The first way works, where I use the following .storybook/config.js:

import apolloStorybookDecorator from "apollo-storybook-vue"
import { configure, addDecorator } from '@storybook/vue'
import Vue from 'vue'

import typeDefs from './schema/typeDefinitions'
import mocks from './schema/mocks'

addDecorator(
  apolloStorybookDecorator({
    typeDefs,
    mocks,
    Vue,
  })
)

configure([
  require.context('../components', true, /\.stories\.js$/),
  require.context('../layouts', true, /\.stories\.js$/),
  require.context('../pages', true, /\.stories\.js$/)
 ], module)

The second way did not work, where I got rid of everything related to apollo-storybook-vue from the config.js and put it in the story instead, like this:

import apolloStorybookDecorator from 'apollo-storybook-vue'
import { storiesOf, addDecorator } from '@storybook/vue'
import Map from './Map'
import Vue from 'vue'
import typeDefs from './schema/typeDefinitions'
import multipleShopsMock from './schema/multiple-shops'

const components = {
  'shops-map': Map
}

storiesOf('Map', module)
  .addDecorator(
    apolloStorybookDecorator({
      typeDefs,
      multipleShopsMock,
      Vue
    })
  )
  .add('map with one single marker', () => {
    return {
      components,
      template: '<shops-map/>'
    }
  })

The mock file exists, the storybook loads nicely, with my map, but without data, i.e. as if the apolloProvider was there (otherwise I would get an error that my data are not defined) but my data are just not taken into account somehow. I am using the very same mock file in both cases.

What am I missing here?

zadigus commented 4 years ago

I apologize for that stupid question. The mistake is easy to find:

addDecorator(
    apolloStorybookDecorator({
      typeDefs,
      multipleShopsMock,
      Vue
    })
  )

needs to be

addDecorator(
    apolloStorybookDecorator({
      typeDefs,
      mocks: multipleShopsMock,
      Vue
    })
  )