From 48943d0ec855d170edf573663d888f4d2f524f73 Mon Sep 17 00:00:00 2001 From: roschaefer Date: Tue, 15 Oct 2019 16:16:40 +0200 Subject: [PATCH] fix: inject $toast into storybook components --- .../components/LoginForm/LoginForm.story.js | 55 ++++++++++++++++--- webapp/storybook/helpers.js | 10 +--- 2 files changed, 49 insertions(+), 16 deletions(-) diff --git a/webapp/components/LoginForm/LoginForm.story.js b/webapp/components/LoginForm/LoginForm.story.js index ae422876a..d04481496 100644 --- a/webapp/components/LoginForm/LoginForm.story.js +++ b/webapp/components/LoginForm/LoginForm.story.js @@ -1,18 +1,57 @@ import { storiesOf } from '@storybook/vue' import { withA11y } from '@storybook/addon-a11y' -import helpers from '~/storybook/helpers' +import { action } from '@storybook/addon-actions' import Vue from 'vue' - +import Vuex from 'vuex' +import helpers from '~/storybook/helpers' import LoginForm from './LoginForm.vue' helpers.init() +const createStore = ({ loginSuccess }) => { + return new Vuex.Store({ + modules: { + auth: { + namespaced: true, + actions: { + async login({ commit, dispatch }, args) { + action('Vuex action `auth/login`')(args) + if (loginSuccess) { + return loginSuccess + } else { + throw new Error('Login unsuccessful') + } + }, + }, + }, + }, + }) +} + storiesOf('LoginForm', module) .addDecorator(withA11y) .addDecorator(helpers.layout) - .add('LoginForm', () => ({ - components: { LoginForm }, - data: () => ({}), - store: helpers.store, - template: ``, - })) + .add('successful login', () => { + return { + components: { LoginForm }, + store: createStore({ loginSuccess: true }), + methods: { + handleSuccess() { + action('Login successful!')() + }, + }, + template: ``, + } + }) + .add('unsuccessful login', () => { + return { + components: { LoginForm }, + store: createStore({ loginSuccess: false }), + methods: { + handleSuccess() { + action('Login successful!')() + }, + }, + template: ``, + } + }) diff --git a/webapp/storybook/helpers.js b/webapp/storybook/helpers.js index 790a10f78..8793da1e4 100644 --- a/webapp/storybook/helpers.js +++ b/webapp/storybook/helpers.js @@ -3,6 +3,7 @@ import Vuex from 'vuex' import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js' import Styleguide from '@human-connection/styleguide' import Filters from '~/plugins/vue-filters' +import IziToast from '~/plugins/izi-toast' import layout from './layout.vue' import '~/plugins/v-tooltip' @@ -12,6 +13,7 @@ const helpers = { Vue.use(Vuex) Vue.use(Styleguide) Vue.use(Filters) + Vue.use(IziToast) Vue.use(vuexI18n.plugin, helpers.store) Vue.i18n.add('en', require('~/locales/en.json')) @@ -35,14 +37,6 @@ const helpers = { }, }, }, - editor: { - namespaced: true, - getters: { - placeholder(state) { - return 'Leave your inspirational thoughts ...' - }, - }, - }, }, }), layout(storyFn) {