Merge pull request #73 from kahirokunn/feature/storybook-page-more

storybookに全ページマウントする

config/storybook/config.js

@@ -22,15 +22,23 @@ import {
   createStore,
   ClassBasedStoreOption
 } from '@/store/root'
+import {
+  userLogin,
+} from '@/store/middleware/auth/action'
+import {
+  createVueProvider
+} from '@/provider/createVueProvider'
 
 addDecorator(() => {
   const container = new Container()
   resolveStubProviders(container)
   storeModuleProvider(container)
   const store = createStore(container.get(ClassBasedStoreOption))
+  store.dispatch(userLogin())
 
   return {
     template: "<v-app><story/></v-app>",
+    provide: createVueProvider(container),
     store,
     router: new Router()
   }

src/layouts/loggedInLayout.vue

@@ -1,6 +1,5 @@
 <template>
   <v-app key="loggedInLayout" id="scroll-target" dark>
-
     <template v-if="isLoggedIn">
       <Navigation />
       <LoggedInHeader />
@@ -11,7 +10,6 @@
         <slot />
       </v-content>
     </template>
-
   </v-app>
 </template>
 

src/stories/index.stories.js

@@ -6,45 +6,18 @@ import {
   action
 } from '@storybook/addon-actions'
 import MyButton from '../components/MyButton.vue'
-import LoginPage from '@/pages/user/login.vue'
 
-
-storiesOf('Button', module)
-  .add('with text', () => ({
-    components: {
-      MyButton
-    },
-    template: '<my-button @click="action">Hello Button</my-button>',
-    methods: {
-      action: action('clicked')
-    }
-  }))
-  .add('with text2', () => ({
-    components: {
-      MyButton
-    },
-    template: '<my-button @click="action">Hello Button 2</my-button>',
-    methods: {
-      action: action('clicked')
-    }
-  }))
-  .add('with some emoji', () => ({
-    components: {
-      MyButton
-    },
-    template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
-    methods: {
-      action: action('clicked')
-    }
-  }))
-
-storiesOf('Page', module)
-  .add('LoginPage', () => ({
+// page一覧をauto loadする
+const pageStory = storiesOf('Pages', module)
+const req = require.context('../pages', true, /.vue$/)
+req.keys().forEach(vueFileName => {
+  const tmp = vueFileName.split('/')
+  const componentNameBase = tmp[tmp.length - 1]
+  const componentName = componentNameBase.slice(0, componentNameBase.length - '.vue'.length)
+  pageStory.add(vueFileName, () => ({
     components: {
-      LoginPage,
-    },
-    template: '<LoginPage/>',
-    methods: {
-      action: action('clicked')
+      [componentName]: req(vueFileName).default
     },
+    template: `<${componentName}/>`
   }))
+})

src/testConfiguration.ts

@@ -1,6 +1,8 @@
 // tslint:disable-next-line ordered-imports
+import { Upload } from 'element-ui'
 import 'reflect-metadata'
 import Vue from 'vue'
+import ProxyComponent from 'vue-proxy-component'
 import Router from 'vue-router'
 import Vuetify from 'vuetify'
 import Vuex from 'vuex'
@@ -19,3 +21,5 @@ Vue.use(Vuetify, {
     success: '#4caf50',
   },
 })
+Vue.use(ProxyComponent)
+Vue.use(Upload)