diff --git a/.storybook/config.js b/.storybook/config.js
deleted file mode 100644
index 6a25335..0000000
--- a/.storybook/config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { configure, setAddon } from '@storybook/vue'
-import Vue from 'vue'
-
-function loadStories() {
-  require('../stories/stories.js')
-}
-
-configure(loadStories, module)
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 0000000..77dbd47
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,4 @@
+module.exports = {
+    stories: ['../stories/stories.js'],
+    logLevel: 'debug',
+}
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 44bfe9d..dc29f4f 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -1,36 +1,36 @@
 const path = require('path');
 
-module.exports = async ({ config }) => {
-  // Overwrite the default storybook webpack config for same tests loaders are applied serially
-  config.module.rules = [
-    {
-      test: /\.vue$/,
-      loader: 'vue-loader'
-    },
-    {
-      test: /\.js$/,
-      loader: 'babel-loader',
-      exclude: /node_modules/
-    },
-    {
-      test: /\.(scss|css)$/,
-      use: ['vue-style-loader', 'css-loader', {
-        loader: 'sass-loader',
-        options: {
-          data: '$sass-env: development;'
+module.exports = async ({config}) => {
+    // Overwrite the default storybook webpack config for same tests loaders are applied serially
+    config.module.rules = [
+        {
+            test: /\.vue$/,
+            loader: 'vue-loader'
+        },
+        {
+            test: /\.js$/,
+            loader: 'babel-loader',
+            exclude: /node_modules/
+        },
+        {
+            test: /\.(scss|css)$/,
+            use: ['style-loader', 'css-loader', {
+                loader: 'sass-loader',
+                options: {
+                    additionalData: '$sass-env: development;'
+                }
+            }],
+            include: path.resolve(__dirname, '../')
+        },
+        {
+            test: /\.pug$/,
+            loader: 'pug-plain-loader'
+        },
+        {
+            test: /\.(png|jpg|gif)$/,
+            use: ['file-loader']
         }
-      }],
-      include: path.resolve(__dirname, '../')
-    },
-    {
-      test: /\.pug$/,
-      loader: 'pug-plain-loader'
-    },
-    {
-      test: /\.(png|jpg|gif)$/,
-      use: ['file-loader']
-    }
-  ];
+    ];
 
-  return config;
-}
\ No newline at end of file
+    return config;
+}
diff --git a/babel.config.js b/babel.config.js
index fa4dd17..4d3dc61 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,8 +2,11 @@ module.exports = function (api) {
   if (api.env('test')) {
     return {
       presets: [
-        ['@babel/preset-env', {targets: {node: 'current'}}]
-      ]
+        [
+          '@babel/preset-env',
+        ],
+      ],
+      plugins: ['@babel/plugin-transform-runtime'],
     }
   }
 
diff --git a/build/rollup.config.js b/build/rollup.config.js
index a898374..b330765 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -15,7 +15,7 @@ module.exports = {
   input: 'src/main.js',
   output: [
     { file: 'dist/eagle.cjs.js', format: 'cjs', banner, exports: 'named' },
-		{ file: 'dist/eagle.es.js', format: 'es', banner }
+    { file: 'dist/eagle.es.js', format: 'es', banner }
   ],
   external: [
     'vue',
diff --git a/jest.config.js b/jest.config.js
index 68e4fc8..c642d09 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,11 +4,14 @@ module.exports = {
     '@/([^\\.]*)$': '<rootDir>/src/$1'
   },
   moduleFileExtensions: [
-    'js',
-    'vue'
+    "js",
+    // tell Jest to handle `*.vue` files
+    "vue"
   ],
   transform: {
-    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
-    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
-  }
+    // process `*.js` files with `babel-jest`
+    ".*\\.(js)$": "babel-jest",
+    // process `*.vue` files with `vue-jest`
+    ".*\\.(vue)$": "vue-jest"
+  },
 }
diff --git a/package.json b/package.json
index 31a3823..c6ad731 100644
--- a/package.json
+++ b/package.json
@@ -26,44 +26,44 @@
     "storybook": "start-storybook -p 9001 -c .storybook",
     "format": "prettier --write src/themes/**/*.scss src/themes/*.scss",
     "lint": "eslint --ext vue,js --format node_modules/eslint-friendly-formatter src test",
-    "test": "jest --bail",
+    "test": "jest",
     "test:watch": "jest --watch"
   },
   "dependencies": {
     "lodash.throttle": "^4.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
+    "@babel/core": "^7.12.3",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
-    "@storybook/vue": "^5.1.1",
-    "@vue/test-utils": "^1.0.0-beta.29",
-    "animate.css": "^3.7.0",
-    "babel-eslint": "^7.1.1",
-    "babel-jest": "^24.8.0",
-    "babel-loader": "^8.0.6",
+    "@storybook/vue": "^6.0.27",
+    "@vue/test-utils": "^1.1.0",
+    "animate.css": "^4.1.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.1",
+    "babel-loader": "^8.1.0",
     "babel-preset-vue": "^2.0.2",
-    "css-loader": "^1.0.0",
-    "eslint": "^3.14.1",
-    "eslint-config-standard": "^6.2.1",
-    "eslint-friendly-formatter": "^2.0.7",
-    "eslint-plugin-html": "^2.0.3",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^2.0.1",
-    "file-loader": "^2.0.0",
-    "jest": "^24.8.0",
+    "css-loader": "^5.0.0",
+    "eslint": "^7.11.0",
+    "eslint-config-standard": "^15.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-plugin-html": "^6.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.2",
+    "file-loader": "^6.1.1",
+    "jest": "^26.6.1",
     "node-sass": "^4.12.0",
-    "prettier": "^1.15.1",
-    "pug": "^2.0.3",
+    "prettier": "^2.1.2",
+    "pug": "^3.0.0",
     "pug-plain-loader": "^1.0.0",
-    "rollup": "^1.14.3",
+    "rollup": "^2.32.1",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-vue": "^5.0.0",
-    "sass-loader": "^7.1.0",
-    "shelljs": "^0.7.6",
+    "sass-loader": "^10.0.4",
+    "shelljs": "^0.8.4",
     "vue": "^2.6.10",
-    "vue-jest": "^4.0.0-beta.2",
+    "vue-jest": "^3.0.7",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.10"
   },
diff --git a/src/components/AnimatedTransition.vue b/src/components/AnimatedTransition.vue
index 4ddb4f7..66d9d74 100644
--- a/src/components/AnimatedTransition.vue
+++ b/src/components/AnimatedTransition.vue
@@ -1,6 +1,6 @@
 <template lang='pug'>
-transition(:enter-active-class="enter ? 'animated ' + enter : ''",
-           :leave-active-class="leave ? 'animated ' + leave : ''")
+transition(:enter-active-class="enter ? 'animate animate__animated ' + enter : ''",
+           :leave-active-class="leave ? 'animate animate__animated ' + leave : ''")
   slot
 </template>
 <script>
diff --git a/src/components/Slideshow.vue b/src/components/Slideshow.vue
index 3978d6e..4e8eab6 100644
--- a/src/components/Slideshow.vue
+++ b/src/components/Slideshow.vue
@@ -165,7 +165,7 @@ export default {
           width = document.documentElement.clientWidth
           height = document.documentElement.clientHeight
         }
-        self.$el.style.fontSize = (0.04 * Math.min(height, width)) + 'px'
+        self.$el.style.fontSize = Math.min(height, width) > 0 ? (0.04 * Math.min(height, width)) + 'px' : (0.04 * Math.max(height, width)) + 'px';
       }, 16)()
     },
     handleClick: function (evt) {
diff --git a/src/themes/_functions.scss b/src/themes/_functions.scss
index a2412ff..2b39119 100644
--- a/src/themes/_functions.scss
+++ b/src/themes/_functions.scss
@@ -2,8 +2,8 @@ $sass-env: production !default;
 
 @function assetUrl($path) {
   @if ($sass-env == "development") {
-    @return url("../assets/"+$path);
+    @return url("../assets/" + $path);
   }
 
-  @return url("~eagle.js/dist/themes/assets/"+$path);
+  @return url("~eagle.js/dist/themes/assets/" + $path);
 }
diff --git a/stories/stories.js b/stories/stories.js
index 3c6e46d..b173d4d 100644
--- a/stories/stories.js
+++ b/stories/stories.js
@@ -29,7 +29,7 @@ Vue.component('NestedSlideshow', {
   <div class='eg-theme-agrume'>
     <div class='eg-slideshow'>
       <slide>
-        This is a nested slideshow with only one slide.
+        <h1>This is a nested slideshow with only one slide.</h1>
         <slot />
       </slide>
     </div>
@@ -60,13 +60,13 @@ storiesOf('Slideshow', module)
   )
   .add('multiple slides with enter/exit animation', () =>
     render(`
-    <slide enter='bounceInLeft' leave='bounceOutLeft'>
+    <slide enter='animate__bounceInLeft' leave='animate__bounceOutLeft'>
       <h1>Eagle.js</h1>
     </slide>
-    <slide enter='fadeIn' leave='fadeOut'>
+    <slide enter='animate__fadeIn' leave='fanimate__adeOut'>
       <h1>Eagle.js is easy to use</h1>
     </slide>
-    <slide enter='zoomIn' leave='zoomOut'>
+    <slide enter='animate__zoomIn' leave='animate__zoomOut'>
       <h1>Eagle.js offers max hackbility</h1>
     </slide>
     `)
@@ -75,13 +75,14 @@ storiesOf('Slideshow', module)
     render(`
     <slide :steps='4'>
       <h4>
-        <eg-transition enter='bounceInLeft' leave='bounceOutLeft'>
+        <p v-if="step == 1">Eagle.js</p>
+        <eg-transition enter='animate__bounceInLeft' leave='animate__bounceOutLeft'>
           <p v-if='step >= 2'><b>Vue.js</b> is one of the coolest frontend frameworks out there</p>
         </eg-transition>
-        <eg-transition enter='bounceInRight' leave='bounceOutRight'>
+        <eg-transition enter='animate__bounceInRight' leave='animate__bounceOutRight'>
           <p v-if='step >= 3'><b>Vue.js</b> supports components and transitions out of the box</p>
         </eg-transition>
-        <eg-transition enter='bounceInLeft' leave='bounceOutLeft'>
+        <eg-transition enter='animate__bounceInLeft' leave='animate__bounceOutLeft'>
           <p v-if='step >= 4'><b>Eagle.js</b> adds navigation logics, scalable components, etc.</p>
         </eg-transition>
       </h4>
diff --git a/test/unit/Slideshow.spec.js b/test/unit/Slideshow.spec.js
index 8406d5f..50f8227 100644
--- a/test/unit/Slideshow.spec.js
+++ b/test/unit/Slideshow.spec.js
@@ -1,278 +1,315 @@
 import Vue from 'vue'
-import { mount } from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
 import Slideshow from '../fixtures/simpleSlideshow.vue'
 import ComplexSlideshow from '../fixtures/complexSlideshow.vue'
+import {jest} from "@jest/globals";
 
-let wrapper, vm
+let elem
 
 beforeEach(() => {
-  wrapper = mount(Slideshow, {
-    attachToDocument: true
-  })
-  vm = wrapper.vm
+    document.body.innerHTML = '';
+    elem = document.createElement('div')
+    elem.id = 'elem'
+    if (document.body) {
+        document.body.appendChild(elem)
+    }
 })
 
 afterEach(() => {
-  jest.restoreAllMocks()
+    jest.restoreAllMocks()
 })
 
 describe('Slideshow properties', () => {
-  it('default value matches', () => {
-    wrapper = mount(Slideshow)
-    expect(wrapper.props().firstSlide).toBe(1)
-    expect(wrapper.props().startStep).toBe(1)
-    expect(wrapper.props().lastSlide).toBe(null)
-    expect(wrapper.props().embedded).toBe(false)
-    expect(wrapper.props().inserted).toBe(false)
-    expect(wrapper.props().keyboardNavigation).toBe(true)
-    expect(wrapper.props().mouseNavigation).toBe(true)
-    expect(wrapper.props().firstSlide).toBe(1)
-    expect(wrapper.props().skip).toBe(false)
-    expect(wrapper.props().backBySlide).toBe(false)
-    expect(wrapper.props().repeat).toBe(false)
-  })
-
-  it('user set props matches', () => {
-    wrapper = mount(Slideshow, {
-      attachToDocument: true,
-      propsData: {
-        firstSlide: 2,
-        startStep: 2,
-        lastSlide: 3,
-        embedded: true,
-        inserted: true,
-        keyboardNavigation: false,
-        mouseNavigation: false,
-        skip: true,
-        backBySlide: true,
-        repeat: true
-      }
+    it('default value matches', () => {
+        const wrapper = mount(Slideshow)
+        expect(wrapper.props().firstSlide).toBe(1)
+        expect(wrapper.props().startStep).toBe(1)
+        expect(wrapper.props().lastSlide).toBe(null)
+        expect(wrapper.props().embedded).toBe(false)
+        expect(wrapper.props().inserted).toBe(false)
+        expect(wrapper.props().keyboardNavigation).toBe(true)
+        expect(wrapper.props().mouseNavigation).toBe(true)
+        expect(wrapper.props().firstSlide).toBe(1)
+        expect(wrapper.props().skip).toBe(false)
+        expect(wrapper.props().backBySlide).toBe(false)
+        expect(wrapper.props().repeat).toBe(false)
     })
-    expect(wrapper.props().firstSlide).toBe(2)
-    expect(wrapper.props().startStep).toBe(2)
-    expect(wrapper.props().lastSlide).toBe(3)
-    expect(wrapper.props().embedded).toBe(true)
-    expect(wrapper.props().inserted).toBe(true)
-    expect(wrapper.props().keyboardNavigation).toBe(false)
-    expect(wrapper.props().mouseNavigation).toBe(false)
-    expect(wrapper.props().skip).toBe(true)
-    expect(wrapper.props().backBySlide).toBe(true)
-    expect(wrapper.props().repeat).toBe(true)
-  })
-
-  it('props work in slideshow initialization', () => {
-    wrapper = mount(Slideshow, {
-      attachToDocument: true,
-      propsData: {
-        firstSlide: 2,
-        startStep: 2,
-        lastSlide: 3,
-        embedded: true,
-        inserted: true,
-        keyboardNavigation: false,
-        mouseNavigation: false,
-        skip: true,
-        backBySlide: true
-      }
+
+    it('user set props matches', () => {
+        const wrapper = mount(Slideshow, {
+            attachTo: document.getElementById('elem'),
+            propsData: {
+                firstSlide: 2,
+                startStep: 2,
+                lastSlide: 3,
+                embedded: true,
+                inserted: true,
+                keyboardNavigation: false,
+                mouseNavigation: false,
+                skip: true,
+                backBySlide: true,
+                repeat: true
+            }
+        })
+        expect(wrapper.props().firstSlide).toBe(2)
+        expect(wrapper.props().startStep).toBe(2)
+        expect(wrapper.props().lastSlide).toBe(3)
+        expect(wrapper.props().embedded).toBe(true)
+        expect(wrapper.props().inserted).toBe(true)
+        expect(wrapper.props().keyboardNavigation).toBe(false)
+        expect(wrapper.props().mouseNavigation).toBe(false)
+        expect(wrapper.props().skip).toBe(true)
+        expect(wrapper.props().backBySlide).toBe(true)
+        expect(wrapper.props().repeat).toBe(true)
+    })
+
+    it('props work in slideshow initialization', () => {
+        const wrapper = mount(Slideshow, {
+            attachTo: document.getElementById('elem'),
+            propsData: {
+                firstSlide: 2,
+                startStep: 2,
+                lastSlide: 3,
+                embedded: true,
+                inserted: true,
+                keyboardNavigation: false,
+                mouseNavigation: false,
+                skip: true,
+                backBySlide: true
+            }
+        })
+        const vm = wrapper.vm
+        expect(vm.step).toBe(2)
+        expect(vm.slides.length).toBe(2)
     })
-    vm = wrapper.vm
-    expect(vm.step).toBe(2)
-    expect(vm.slides.length).toBe(2)
-  })
 })
 
 describe('Slideshow initilization', () => {
-  it('has correct slides count', () => {
-    expect(vm.slides.length).toBe(4)
-  })
+    const wrapper = mount(Slideshow, {
+        attachTo: document.getElementById('elem'),
+    })
+    const initTest = wrapper.vm
 
-  it('has set current slide', () => {
-    expect(vm.currentSlideIndex).toBe(1)
-  })
+    it('has correct slides count', () => {
+        expect(initTest.slides.length).toBe(4)
+    })
 
-  it('has the correct active slide', () => {
-    expect(vm.slides[0].active).toBeTruthy()
-  })
+    it('has set current slide', () => {
+        expect(initTest.currentSlideIndex).toBe(1)
+    })
+
+    it('has the correct active slide', () => {
+        expect(initTest.slides[0].active).toBeTruthy()
+    })
 })
 
 describe('Slideshow lifecycle hooks', () => {
-  it('should register default events when created', () => {
-    jest.spyOn(window, 'addEventListener')
-    wrapper = mount(Slideshow, {
-      attachToDocument: true
+    it('should register default events when created', () => {
+        jest.spyOn(window, 'addEventListener')
+        mount(Slideshow, {
+            attachTo: document.getElementById('elem')
+        })
+
+        expect(window.addEventListener).toHaveBeenCalled()
+        expect(window.addEventListener.mock.calls[0][0]).toEqual('keydown')
+        expect(window.addEventListener.mock.calls[0][1].name).toEqual('bound handleKeydown')
+        expect(window.addEventListener.mock.calls[1][0]).toEqual('click')
+        expect(window.addEventListener.mock.calls[1][1].name).toEqual('bound handleClick')
+        expect(window.addEventListener.mock.calls[2][0]).toEqual('wheel')
+        expect(window.addEventListener.mock.calls[2][1].name).toEqual('bound debounced')
+        expect(window.addEventListener.mock.calls[3][0]).toEqual('resize')
+        expect(window.addEventListener.mock.calls[3][1].name).toEqual('bound handleResize')
     })
 
-    expect(window.addEventListener).toHaveBeenCalled()
-    expect(window.addEventListener.mock.calls[0][0]).toEqual('keydown')
-    expect(window.addEventListener.mock.calls[0][1].name).toEqual('bound handleKeydown')
-    expect(window.addEventListener.mock.calls[1][0]).toEqual('click')
-    expect(window.addEventListener.mock.calls[1][1].name).toEqual('bound handleClick')
-    expect(window.addEventListener.mock.calls[2][0]).toEqual('wheel')
-    expect(window.addEventListener.mock.calls[2][1].name).toEqual('bound debounced')
-    expect(window.addEventListener.mock.calls[3][0]).toEqual('resize')
-    expect(window.addEventListener.mock.calls[3][1].name).toEqual('bound handleResize')
-  })
-
-  it('should unregister events when destroyed', () => {
-    jest.spyOn(window, 'removeEventListener')
-    wrapper = mount(Slideshow, {
-      attachToDocument: true
-    }).destroy()
-
-    expect(window.removeEventListener).toHaveBeenCalled()
-    expect(window.removeEventListener.mock.calls[0][0]).toEqual('keydown')
-    expect(window.removeEventListener.mock.calls[1][0]).toEqual('click')
-    expect(window.removeEventListener.mock.calls[2][0]).toEqual('touchstart')
-    expect(window.removeEventListener.mock.calls[3][0]).toEqual('wheel')
-  })
+    it('should unregister events when destroyed', () => {
+        jest.spyOn(window, 'removeEventListener')
+        mount(Slideshow, {
+            attachTo: document.getElementById('elem')
+        }).destroy()
+
+        expect(window.removeEventListener).toHaveBeenCalled()
+        expect(window.removeEventListener.mock.calls[0][0]).toEqual('keydown')
+        expect(window.removeEventListener.mock.calls[1][0]).toEqual('click')
+        expect(window.removeEventListener.mock.calls[2][0]).toEqual('touchstart')
+        expect(window.removeEventListener.mock.calls[3][0]).toEqual('wheel')
+    })
 })
 
 describe('Slideshow pre/next', () => {
-  it('Slideshow goes to next slide when current slide\'s step run out', async () => {
-    vm.nextStep()
-    await Vue.nextTick()
-
-    expect(vm.slides[0].active).toBeFalsy()
-    expect(vm.slides[1].active).toBeTruthy()
-  })
-
-  it('Slideshow goes to prev slide when current slide\'s step run out', async () => {
-    vm.currentSlideIndex = 2
-    vm.previousStep()
-    await Vue.nextTick()
-
-    expect(vm.slides[1].active).toBeFalsy()
-    expect(vm.slides[0].active).toBeTruthy()
-  })
-
-  it('Slideshow sets correct step within current slide', async () => {
-    vm.currentSlideIndex = 3
-    vm.nextStep()
-    await Vue.nextTick()
-
-    expect(vm.slides[2].active).toBeTruthy()
-    expect(vm.step).toBe(2)
-  })
-})
+    const wrapper = mount(Slideshow, {
+        attachTo: document.getElementById('elem'),
+    })
+    const prevnext = wrapper.vm
 
-describe('Slideshow events', () => {
-  it('left arrow would perform prev', () => {
-    jest.spyOn(vm, 'previousStep')
-    wrapper.trigger('keydown', {
-      key: 'ArrowLeft'
+    it('Slideshow goes to next slide when current slide\'s step run out', async () => {
+        prevnext.nextStep()
+        await Vue.nextTick()
+
+        expect(prevnext.slides[0].active).toBeFalsy()
+        expect(prevnext.slides[1].active).toBeTruthy()
     })
-    expect(vm.previousStep).toHaveBeenCalled()
-  })
 
-  it('right arrow would perform next', () => {
-    const spy = jest.spyOn(vm, 'nextStep')
-    wrapper.trigger('keydown', {
-      key: 'ArrowRight'
+    it('Slideshow goes to prev slide when current slide\'s step run out', async () => {
+        prevnext.currentSlideIndex = 2
+        prevnext.previousStep()
+        await Vue.nextTick()
+
+        expect(prevnext.slides[1].active).toBeFalsy()
+        expect(prevnext.slides[0].active).toBeTruthy()
     })
-    expect(spy).toHaveBeenCalled()
-  })
 
-  it('wheel event is throttled', done => {
-    const spy = jest.spyOn(vm, 'nextStep')
-    wrapper.trigger('wheel', {
-      deltaY: 100
+    it('Slideshow sets correct step within current slide', async () => {
+        prevnext.currentSlideIndex = 3
+        prevnext.nextStep()
+        await Vue.nextTick()
+
+        expect(prevnext.slides[2].active).toBeTruthy()
+        expect(prevnext.step).toBe(2)
     })
-    wrapper.trigger('wheel', {
-      deltaY: 100
+})
+
+describe('Slideshow events', () => {
+
+
+    it('left arrow would perform prev', () => {
+        const wrapper = mount(Slideshow, {
+            attachTo: document.getElementById('elem'),
+        })
+
+        const spy = jest.spyOn(wrapper.vm, 'previousStep')
+        wrapper.trigger('keydown', {
+            key: 'ArrowLeft'
+        })
+        expect(spy).toHaveBeenCalled()
     })
 
-    setTimeout(() => {
-      expect(spy).toHaveBeenCalledTimes(1)
-      spy.mockRestore()
-      done()
-    }, 1000)
-  })
+    it('right arrow would perform next', async () => {
+        const wrapper = mount(Slideshow, {
+            attachTo: document.getElementById('elem'),
+        })
+
+        const spy = jest.spyOn(wrapper.vm, 'nextStep')
+        wrapper.trigger('keydown', {
+            key: 'ArrowRight'
+        })
+        expect(spy).toHaveBeenCalled()
+    })
+
+    it('wheel event is throttled', done => {
+        const wrapper = mount(Slideshow, {
+            attachTo: document.getElementById('elem'),
+        })
+
+        const spy = jest.spyOn(wrapper.vm, 'nextStep')
+        wrapper.trigger('wheel', {
+            deltaY: 100
+        })
+        wrapper.trigger('wheel', {
+            deltaY: 100
+        })
+
+        setTimeout(() => {
+            expect(spy).toHaveBeenCalledTimes(1)
+            spy.mockRestore()
+            done()
+        }, 1000)
+    })
 })
 
 describe('Slideshow back mode', () => {
-  it('go back by slide would result to previous slide first step', async () => {
-    wrapper = mount(ComplexSlideshow, {
-      attachToDocument: true,
-      propsData: {
-        backBySlide: true
-      }
+    it('go back by slide would result to previous slide first step', async () => {
+        const wrapper = mount(ComplexSlideshow, {
+            attachTo: document.getElementById('elem'),
+            propsData: {
+                backBySlide: true
+            }
+        })
+        const vm = wrapper.vm
+        vm.currentSlideIndex = 3
+        vm.previousStep()
+        await Vue.nextTick()
+
+        expect(vm.slides[1].active).toBeTruthy()
+        expect(vm.step).toBe(1)
+    })
+
+    it('go back by step would result to previous slide last step', async () => {
+        const wrapper = mount(ComplexSlideshow)
+        const vm = wrapper.vm
+        vm.currentSlideIndex = 3
+        // need to wait watcher funciton finishes for currentSlideIndex
+        await Vue.nextTick()
+        vm.previousStep()
+
+        await Vue.nextTick()
+
+        expect(vm.slides[1].active).toBeTruthy()
+        expect(vm.step).toBe(5)
     })
-    vm = wrapper.vm
-    vm.currentSlideIndex = 3
-    vm.previousStep()
-    await Vue.nextTick()
-
-    expect(vm.slides[1].active).toBeTruthy()
-    expect(vm.step).toBe(1)
-  })
-
-  it('go back by step would result to previous slide last step', async () => {
-    wrapper = mount(ComplexSlideshow)
-    vm = wrapper.vm
-    vm.currentSlideIndex = 3
-    // need to wait watcher funciton finishes for currentSlideIndex
-    await Vue.nextTick()
-    vm.previousStep()
-
-    await Vue.nextTick()
-
-    expect(vm.slides[1].active).toBeTruthy()
-    expect(vm.step).toBe(5)
-  })
 })
 
 describe('Slideshow features', () => {
-  it('repeat will navigate back to slide 1 when slideshow ends ', async () => {
-    wrapper = mount(Slideshow, {
-      attachToDocument: true,
-      propsData: {
-        firstSlide: 4,
-        startStep: 4,
-        repeat: true
-      }
+    it('repeat will navigate back to slide 1 when slideshow ends ', async () => {
+        const wrapper = mount(Slideshow, {
+            attachTo: document.getElementById('elem'),
+            propsData: {
+                firstSlide: 4,
+                startStep: 4,
+                repeat: true
+            }
+        })
+        const vm = wrapper.vm
+        vm.nextStep()
+        await Vue.nextTick()
+
+        expect(vm.slides[0].active).toBeTruthy()
+    })
+
+    it('changes direction', () => {
+        const wrapper = mount(Slideshow, {
+            attachTo: document.getElementById('elem'),
+            propsData: {
+                firstSlide: 4,
+                startStep: 4,
+                repeat: true
+            }
+        })
+        const vm = wrapper.vm
+
+        const spy = jest.spyOn(vm, 'changeDirection')
+
+        vm.previousStep()
+        expect(spy).toHaveBeenCalledWith('prev')
+        spy.mockClear()
+        vm.nextStep()
+        expect(spy).toHaveBeenCalledWith('next')
+        spy.mockClear()
+        vm.previousSlide()
+        expect(spy).toHaveBeenCalledWith('prev')
+        spy.mockClear()
+        vm.nextSlide()
+        expect(spy).toHaveBeenCalledWith('next')
+        spy.mockClear()
     })
-    vm = wrapper.vm
-    vm.nextStep()
-    await Vue.nextTick()
-
-    expect(vm.slides[0].active).toBeTruthy()
-  })
-
-  it('changes direction', () => {
-    const spy = jest.spyOn(vm, 'changeDirection')
-
-    vm.previousStep()
-    expect(spy).toHaveBeenCalledWith('prev')
-    spy.mockClear()
-    vm.nextStep()
-    expect(spy).toHaveBeenCalledWith('next')
-    spy.mockClear()
-    vm.previousSlide()
-    expect(spy).toHaveBeenCalledWith('prev')
-    spy.mockClear()
-    vm.nextSlide()
-    expect(spy).toHaveBeenCalledWith('next')
-    spy.mockClear()
-  })
 })
 
 describe('Slideshow on mobile', () => {
-  it('should register default events when created', () => {
-    Object.defineProperty(window, 'ontouchstart', {
-      value: {}
+    it('should register default events when created', () => {
+        Object.defineProperty(window, 'ontouchstart', {
+            value: {}
+        })
+        jest.spyOn(window, 'addEventListener')
+        mount(Slideshow, {
+            attachTo: document.getElementById('elem')
+        })
+
+        expect(window.addEventListener).toHaveBeenCalled()
+        expect(window.addEventListener.mock.calls[0][0]).toEqual('keydown')
+        expect(window.addEventListener.mock.calls[0][1].name).toEqual('bound handleKeydown')
+        expect(window.addEventListener.mock.calls[1][0]).toEqual('touchstart')
+        expect(window.addEventListener.mock.calls[1][1].name).toEqual('bound handleClick')
+        expect(window.addEventListener.mock.calls[2][0]).toEqual('resize')
+        expect(window.addEventListener.mock.calls[2][1].name).toEqual('bound handleResize')
     })
-    jest.spyOn(window, 'addEventListener')
-    wrapper = mount(Slideshow, {
-      attachToDocument: true
-    })
-
-    expect(window.addEventListener).toHaveBeenCalled()
-    expect(window.addEventListener.mock.calls[0][0]).toEqual('keydown')
-    expect(window.addEventListener.mock.calls[0][1].name).toEqual('bound handleKeydown')
-    expect(window.addEventListener.mock.calls[1][0]).toEqual('touchstart')
-    expect(window.addEventListener.mock.calls[1][1].name).toEqual('bound handleClick')
-    expect(window.addEventListener.mock.calls[2][0]).toEqual('resize')
-    expect(window.addEventListener.mock.calls[2][1].name).toEqual('bound handleResize')
-  })
 })