Vue.js Development with Storybook and Applitools

How Applitools Works With Storybook

image4

Automated Root Cause Analysis

Step By Step Guide

git clone git@github.com:bootstrap-vue/bootstrap-vue.git
yarn
yarn add @storybook/vue -D
yarn add vue-loader babel-loader babel-preset-vue -D
yarn add css-loader style-loader -D
{

"scripts": {

"storybook": "start-storybook"

}

}
import { configure } from '@storybook/vue';

function loadStories() {

const req = require.context('../stories', true, /\.stories\.js$/);

req.keys().forEach(filename => req(filename));

}

configure(loadStories, module);
@import ‘../node_modules/bootstrap/scss/bootstrap.scss’

@import ‘../src/index.scss’
import { configure } from '@storybook/vue';

import ‘!style-loader!css-loader!sass-loader!./scss-loader.scss’

function loadStories() {

const req = require.context('../stories', true, /\.stories\.js$/);

req.keys().forEach(filename => req(filename));

}
import { storiesOf } from '@storybook/vue'

const navbarStories = storiesOf('BNavBar', module)

navbarStories.add('Full Navbar', () => ({

template: `<div>

<b-navbar toggleable="lg" type="dark" variant="info">

<b-navbar-brand href="#">NavBar</b-navbar-brand>

<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

<b-collapse id="nav-collapse" is-nav>

<b-navbar-nav>

<b-nav-item href="#"><span>Link</span></b-nav-item>

<b-nav-item href="#" disabled>Disabled</b-nav-item>

</b-navbar-nav>

<b-navbar-nav class="ml-auto">

<b-nav-form>

<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>

<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>

</b-nav-form>

<b-nav-item-dropdown text="Lang" right>

<b-dropdown-item href="#">EN</b-dropdown-item>

<b-dropdown-item href="#">ES</b-dropdown-item>

<b-dropdown-item href="#">RU</b-dropdown-item>

<b-dropdown-item href="#">FA</b-dropdown-item>

</b-nav-item-dropdown>

<b-nav-item-dropdown right>

<template slot="button-content"><em>User</em></template>

<b-dropdown-item href="#">Profile</b-dropdown-item>

<b-dropdown-item href="#">Sign Out</b-dropdown-item>

</b-nav-item-dropdown>

</b-navbar-nav>

</b-collapse>

</b-navbar>

</div>`

}))
import { configure } from '@storybook/vue'

import Vue from 'vue'

import '!style-loader!css-loader!sass-loader!./scss-loader.scss'

import {

BNavbar,

BNavbarNav,

BNavbarBrand,

BNavbarToggle,

BButton,

BCollapse,

BNavItem,

BFormInput,

BNavForm,

BNavItemDropdown,

BDropdownItem

} from '../src'

Vue.component('b-navbar', BNavbar)

Vue.component('b-navbar-nav', BNavbarNav)

Vue.component('b-navbar-brand', BNavbarBrand)

Vue.component('b-navbar-toggle', BNavbarToggle)

Vue.component('b-button', BButton)

Vue.component('b-collapse', BCollapse)

Vue.component('b-nav-item', BNavItem)

Vue.component('b-form-input', BFormInput)

Vue.component('b-nav-form', BNavForm)

Vue.component('b-nav-item-dropdown', BNavItemDropdown)

Vue.component('b-dropdown-item', BDropdownItem)

function loadStories() {

const req = require.context('../stories', true, /\.stories\.js$/)

req.keys().forEach(filename => req(filename))

}

configure(loadStories, module)
yarn storybook
image12
yarn add @applitools/eyes-storybook -D
export APPLITOOLS_API_KEY=<your_key>
set APPLITOOLS_API_KEY=<your_key>
npx eyes-storybook
image11
image10
@import "../node_modules/bootstrap/scss/bootstrap.scss";

@import "../src/index.scss";

a {

background-color: yellow;

}
image3
image13
image8
image2
image1
image9
<b-form-input size="lg" class="mr-sm-2" placeholder="Search"></b-form-input>
image7
image5
<b-button size="sm" class="my-2 my-sm-0" type="submit"><p>Search</p></b-button>
image6

In Conclusion

  • Textual changes
  • CSS Property changes
  • Attributes changes
  • Bounding Box changes
  • Tag changes (for example, when you replace a button with a hyperlink)

Video Demonstration

More about Applitools

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store