From 424eaa9e8098cef762b1a2a7565d37944bb25306 Mon Sep 17 00:00:00 2001 From: Patryk Niedźwiedziński Date: Mon, 21 Oct 2019 18:25:12 +0200 Subject: Add storybook --- .babelrc | 3 +- .storybook/addons.js | 2 + .storybook/config.js | 10 + assets/css/main.css | 15 + components/ChroniclePost.vue | 60 - components/PostLink.stories.js | 27 + components/PostLink.vue | 65 + components/PurePostList.stories.js | 16 + components/PurePostList.vue | 38 + layouts/default.vue | 16 - nuxt.config.js | 2 +- package-lock.json | 9915 ++++++++++++++------ package.json | 14 +- pages/kronika/index.vue | 8 - tests/components/FacebookFeed.test.js | 11 - tests/components/FacebookFindUsButton.test.js | 11 - tests/components/Footer.test.js | 20 - tests/components/JoinUs.test.js | 11 - tests/components/NavBar.test.js | 27 - tests/components/NavLink.test.js | 23 - .../__snapshots__/FacebookFeed.test.js.snap | 13 - .../FacebookFindUsButton.test.js.snap | 19 - tests/components/__snapshots__/Footer.test.js.snap | 66 - tests/components/__snapshots__/JoinUs.test.js.snap | 31 - tests/components/__snapshots__/NavBar.test.js.snap | 40 - .../components/__snapshots__/NavLink.test.js.snap | 14 - tests/pages/404.test.js | 11 - tests/pages/__snapshots__/404.test.js.snap | 13 - tests/pages/__snapshots__/download.test.js.snap | 25 - tests/pages/__snapshots__/index.test.js.snap | 9 - tests/pages/__snapshots__/kontakt.test.js.snap | 31 - tests/pages/__snapshots__/o-nas.test.js.snap | 7 - tests/pages/download.test.js | 11 - tests/pages/index.test.js | 11 - tests/pages/kontakt.test.js | 11 - tests/pages/o-nas.test.js | 11 - tests/unit/__snapshots__/storybook.test.js.snap | 27 + tests/unit/storybook.test.js | 5 + 38 files changed, 7477 insertions(+), 3172 deletions(-) create mode 100644 .storybook/addons.js create mode 100644 .storybook/config.js create mode 100644 assets/css/main.css delete mode 100644 components/ChroniclePost.vue create mode 100644 components/PostLink.stories.js create mode 100644 components/PostLink.vue create mode 100644 components/PurePostList.stories.js create mode 100644 components/PurePostList.vue delete mode 100644 tests/components/FacebookFeed.test.js delete mode 100644 tests/components/FacebookFindUsButton.test.js delete mode 100644 tests/components/Footer.test.js delete mode 100644 tests/components/JoinUs.test.js delete mode 100644 tests/components/NavBar.test.js delete mode 100644 tests/components/NavLink.test.js delete mode 100644 tests/components/__snapshots__/FacebookFeed.test.js.snap delete mode 100644 tests/components/__snapshots__/FacebookFindUsButton.test.js.snap delete mode 100644 tests/components/__snapshots__/Footer.test.js.snap delete mode 100644 tests/components/__snapshots__/JoinUs.test.js.snap delete mode 100644 tests/components/__snapshots__/NavBar.test.js.snap delete mode 100644 tests/components/__snapshots__/NavLink.test.js.snap delete mode 100644 tests/pages/404.test.js delete mode 100644 tests/pages/__snapshots__/404.test.js.snap delete mode 100644 tests/pages/__snapshots__/download.test.js.snap delete mode 100644 tests/pages/__snapshots__/index.test.js.snap delete mode 100644 tests/pages/__snapshots__/kontakt.test.js.snap delete mode 100644 tests/pages/__snapshots__/o-nas.test.js.snap delete mode 100644 tests/pages/download.test.js delete mode 100644 tests/pages/index.test.js delete mode 100644 tests/pages/kontakt.test.js delete mode 100644 tests/pages/o-nas.test.js create mode 100644 tests/unit/__snapshots__/storybook.test.js.snap create mode 100644 tests/unit/storybook.test.js diff --git a/.babelrc b/.babelrc index 84c2e57..036ef6b 100644 --- a/.babelrc +++ b/.babelrc @@ -10,7 +10,8 @@ } } ] - ] + ], + "plugins": ["babel-plugin-require-context-hook"] } } } diff --git a/.storybook/addons.js b/.storybook/addons.js new file mode 100644 index 0000000..6aed412 --- /dev/null +++ b/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/.storybook/config.js b/.storybook/config.js new file mode 100644 index 0000000..7126515 --- /dev/null +++ b/.storybook/config.js @@ -0,0 +1,10 @@ +import { configure } from '@storybook/vue' + +import '../assets/css/main.css' + +const req = require.context('../components', true, /\.stories.js$/) +function loadStories() { + req.keys().forEach(filename => req(filename)) +} + +configure(loadStories, module) diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..21bcffb --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,15 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap'); + +html, +body { + padding: 0; + margin: 0; +} + +* { + box-sizing: border-box; + font-family: 'Roboto Slab', serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #181818; +} diff --git a/components/ChroniclePost.vue b/components/ChroniclePost.vue deleted file mode 100644 index 7b2c527..0000000 --- a/components/ChroniclePost.vue +++ /dev/null @@ -1,60 +0,0 @@ - - - - - \ No newline at end of file diff --git a/components/PostLink.stories.js b/components/PostLink.stories.js new file mode 100644 index 0000000..71d04ed --- /dev/null +++ b/components/PostLink.stories.js @@ -0,0 +1,27 @@ +import { storiesOf } from '@storybook/vue' + +import PostLink from './PostLink' + +export const postLink = { + title: 'Test PostLink', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.', + route: '/kronika/2019/20/11/test' +} + +const center = () => { + return { + template: + '
' + } +} + +storiesOf('PostLink', module) + .addDecorator(center) + .add('default', () => { + return { + components: { PostLink }, + template: ``, + data: () => postLink + } + }) diff --git a/components/PostLink.vue b/components/PostLink.vue new file mode 100644 index 0000000..b0aeb5a --- /dev/null +++ b/components/PostLink.vue @@ -0,0 +1,65 @@ + + + + + \ No newline at end of file diff --git a/components/PurePostList.stories.js b/components/PurePostList.stories.js new file mode 100644 index 0000000..134cd68 --- /dev/null +++ b/components/PurePostList.stories.js @@ -0,0 +1,16 @@ +import { storiesOf } from '@storybook/vue' + +import { postLink } from './PostLink.stories' + +import PurePostList from './PurePostList' + +export const posts = Array(5).fill(postLink) +console.log(posts) + +storiesOf('PurePostList', module).add('default', () => { + return { + components: { PurePostList }, + template: ``, + data: () => ({ posts }) + } +}) diff --git a/components/PurePostList.vue b/components/PurePostList.vue new file mode 100644 index 0000000..a93360d --- /dev/null +++ b/components/PurePostList.vue @@ -0,0 +1,38 @@ + + + + + \ No newline at end of file diff --git a/layouts/default.vue b/layouts/default.vue index 0e5ca9c..ff95023 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -27,23 +27,7 @@ export default { \ No newline at end of file diff --git a/tests/components/FacebookFeed.test.js b/tests/components/FacebookFeed.test.js deleted file mode 100644 index 7abedf6..0000000 --- a/tests/components/FacebookFeed.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import FacebookFeed from '../../components/FacebookFeed' - -describe('FacebookFeed', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(FacebookFeed) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/components/FacebookFindUsButton.test.js b/tests/components/FacebookFindUsButton.test.js deleted file mode 100644 index d74e16f..0000000 --- a/tests/components/FacebookFindUsButton.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import FacebookFindUsButton from '../../components/FacebookFindUsButton' - -describe('FacebookFindUsButton', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(FacebookFindUsButton) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/components/Footer.test.js b/tests/components/Footer.test.js deleted file mode 100644 index e284b5a..0000000 --- a/tests/components/Footer.test.js +++ /dev/null @@ -1,20 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import Footer from '../../components/Footer' - -describe('Footer', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(Footer) - - wrapper.setProps({ - routes: [ - { - path: '/', - name: 'Home' - } - ] - }) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/components/JoinUs.test.js b/tests/components/JoinUs.test.js deleted file mode 100644 index c831459..0000000 --- a/tests/components/JoinUs.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import JoinUs from '../../components/JoinUs' - -describe('JoinUs', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(JoinUs) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/components/NavBar.test.js b/tests/components/NavBar.test.js deleted file mode 100644 index be61915..0000000 --- a/tests/components/NavBar.test.js +++ /dev/null @@ -1,27 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import NavBar from '../../components/NavBar' - -describe('NavBar', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(NavBar) - - wrapper.setProps({ - title: 'Title', - routes: [ - { - path: '/', - name: 'Home' - } - ] - }) - - it('check title', () => { - expect(wrapper.html()).toContain( - 'Title' - ) - }) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/components/NavLink.test.js b/tests/components/NavLink.test.js deleted file mode 100644 index d35e6db..0000000 --- a/tests/components/NavLink.test.js +++ /dev/null @@ -1,23 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import NavLink from '../../components/NavLink' - -describe('NavLink', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(NavLink) - - wrapper.setProps({ link: '/link', name: 'Link' }) - - it('renders the correct markup', () => { - expect(wrapper.html()).toContain( - `
  • Link
    • ` - ) - }) - - it('check text', () => { - expect(wrapper.text()).toBe('Link') - }) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/components/__snapshots__/FacebookFeed.test.js.snap b/tests/components/__snapshots__/FacebookFeed.test.js.snap deleted file mode 100644 index 6819e12..0000000 --- a/tests/components/__snapshots__/FacebookFeed.test.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FacebookFeed match snapshot 1`] = ` -
    -

    - Zobacz co się dzieje! -

    - - -
    -`; diff --git a/tests/components/__snapshots__/FacebookFindUsButton.test.js.snap b/tests/components/__snapshots__/FacebookFindUsButton.test.js.snap deleted file mode 100644 index 98783c4..0000000 --- a/tests/components/__snapshots__/FacebookFindUsButton.test.js.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FacebookFindUsButton match snapshot 1`] = ` - -
    - Find us on Facebook -
    -     -`; diff --git a/tests/components/__snapshots__/Footer.test.js.snap b/tests/components/__snapshots__/Footer.test.js.snap deleted file mode 100644 index 577f85e..0000000 --- a/tests/components/__snapshots__/Footer.test.js.snap +++ /dev/null @@ -1,66 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Footer match snapshot 1`] = ` -
    -
    -
    - - Home - -
    - -
    -
    - -
    - -
    -

    - 19 Poznańska Drużyna Harcerzy Puszcza -

    - - -
    -
    -`; diff --git a/tests/components/__snapshots__/JoinUs.test.js.snap b/tests/components/__snapshots__/JoinUs.test.js.snap deleted file mode 100644 index 832268c..0000000 --- a/tests/components/__snapshots__/JoinUs.test.js.snap +++ /dev/null @@ -1,31 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`JoinUs match snapshot 1`] = ` -
    -
    -
    -
    - Rozpocznij swoją harcerską przygodę! -
    -
    - -
    - - Dołącz do nas! - -
    -
    -
    -`; diff --git a/tests/components/__snapshots__/NavBar.test.js.snap b/tests/components/__snapshots__/NavBar.test.js.snap deleted file mode 100644 index 89ef8e5..0000000 --- a/tests/components/__snapshots__/NavBar.test.js.snap +++ /dev/null @@ -1,40 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`NavBar match snapshot 1`] = ` - -`; diff --git a/tests/components/__snapshots__/NavLink.test.js.snap b/tests/components/__snapshots__/NavLink.test.js.snap deleted file mode 100644 index 122e5c8..0000000 --- a/tests/components/__snapshots__/NavLink.test.js.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`NavLink match snapshot 1`] = ` -
  • - - Link - -
    • -`; diff --git a/tests/pages/404.test.js b/tests/pages/404.test.js deleted file mode 100644 index 76322da..0000000 --- a/tests/pages/404.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import page404 from '../../pages/404' - -describe('404', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(page404) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/pages/__snapshots__/404.test.js.snap b/tests/pages/__snapshots__/404.test.js.snap deleted file mode 100644 index 44419f9..0000000 --- a/tests/pages/__snapshots__/404.test.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`404 match snapshot 1`] = ` -
    -

    - 404 -

    - -

    - Nie znaleziono strony -

    -
    -`; diff --git a/tests/pages/__snapshots__/download.test.js.snap b/tests/pages/__snapshots__/download.test.js.snap deleted file mode 100644 index 05d1361..0000000 --- a/tests/pages/__snapshots__/download.test.js.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`download match snapshot 1`] = ` -
    -

    - Do pobrania -

    - - - Karta próby na sprawność - - - - Próba Harcerza - -
    -`; diff --git a/tests/pages/__snapshots__/index.test.js.snap b/tests/pages/__snapshots__/index.test.js.snap deleted file mode 100644 index af3d906..0000000 --- a/tests/pages/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`index match snapshot 1`] = ` -
    - - - -
    -`; diff --git a/tests/pages/__snapshots__/kontakt.test.js.snap b/tests/pages/__snapshots__/kontakt.test.js.snap deleted file mode 100644 index 22be789..0000000 --- a/tests/pages/__snapshots__/kontakt.test.js.snap +++ /dev/null @@ -1,31 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`kontakt match snapshot 1`] = ` -
    -

    - Kontakt z drużynowym -

    - -

    - - tel: - - - +48695516492 - -

    - -

    - - email: - - - patryk.niedzwiedzinski@zhr.pl - -

    -
    -`; diff --git a/tests/pages/__snapshots__/o-nas.test.js.snap b/tests/pages/__snapshots__/o-nas.test.js.snap deleted file mode 100644 index fbdc54c..0000000 --- a/tests/pages/__snapshots__/o-nas.test.js.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Onas match snapshot 1`] = ` -

    - O nas -

    -`; diff --git a/tests/pages/download.test.js b/tests/pages/download.test.js deleted file mode 100644 index 78f16d9..0000000 --- a/tests/pages/download.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import download from '../../pages/download' - -describe('download', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(download) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/pages/index.test.js b/tests/pages/index.test.js deleted file mode 100644 index 1e262b3..0000000 --- a/tests/pages/index.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import index from '../../pages/index' - -describe('index', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(index) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/pages/kontakt.test.js b/tests/pages/kontakt.test.js deleted file mode 100644 index d99e120..0000000 --- a/tests/pages/kontakt.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import kontakt from '../../pages/kontakt' - -describe('kontakt', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(kontakt) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/pages/o-nas.test.js b/tests/pages/o-nas.test.js deleted file mode 100644 index 8b87253..0000000 --- a/tests/pages/o-nas.test.js +++ /dev/null @@ -1,11 +0,0 @@ -import { shallowMount } from '@vue/test-utils' -import Onas from '../../pages/o-nas' - -describe('Onas', () => { - // Now mount the component and you have the wrapper - const wrapper = shallowMount(Onas) - - it('match snapshot', () => { - expect(wrapper.element).toMatchSnapshot() - }) -}) diff --git a/tests/unit/__snapshots__/storybook.test.js.snap b/tests/unit/__snapshots__/storybook.test.js.snap new file mode 100644 index 0000000..606044b --- /dev/null +++ b/tests/unit/__snapshots__/storybook.test.js.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots ChroniclePost default 1`] = ` +
    + +
    +

    + Test ChroniclePost +

    + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.... +

    +
    +     +
    +`; diff --git a/tests/unit/storybook.test.js b/tests/unit/storybook.test.js new file mode 100644 index 0000000..ed81be4 --- /dev/null +++ b/tests/unit/storybook.test.js @@ -0,0 +1,5 @@ +import registerRequireContextHook from 'babel-plugin-require-context-hook/register' +import initStoryshots from '@storybook/addon-storyshots' + +registerRequireContextHook() +initStoryshots() -- cgit 1.4.1