Chore: add smoke test

packages/tiny-swiper/__test__/common.ts

@@ -0,0 +1,68 @@
+import Swiper, { SwiperPlugin } from '../src/core/index'
+import { UserOptions } from '../src/core/options'
+
+export const defaultStyle = `
+    <style>
+        html,
+        body,
+        .swiper-wrapper {
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .swiper-slide {
+            width: 100%;
+            height: 100%;
+            flex-shrink: 0;
+        }
+        .swiper-container {
+            height: 100%;
+            margin-bottom: 1rem;
+            overflow: hidden;
+        }
+        .swiper-wrapper {
+            display: flex;
+            flex-direction: row;
+        }
+    </style>`
+const defaultTpl = `
+    <!-- Slider main container -->
+    <div class="swiper-container">
+        <!-- Additional required wrapper -->
+        <div class="swiper-wrapper">
+            <!-- Slides -->
+            <div class="a swiper-slide">1</div>
+            <div class="b swiper-slide">2</div>
+            <div class="a swiper-slide">3</div>
+            <div class="b swiper-slide">4</div>
+        </div>
+        <!-- If we need pagination -->
+        <div class="swiper-pagination"></div>
+    </div>
+`
+
+export function testPluginLifcycle (
+    tpl: string,
+    opt: UserOptions,
+    plugin: SwiperPlugin,
+    pluginName: string
+) {
+    document.body.innerHTML = `${tpl}`
+
+    const fn = jest.fn(<SwiperPlugin>((...p) => plugin(...p)))
+    const $el = <HTMLElement>document.body.querySelector('div')
+    const swiperInstance = Swiper($el, {
+        ...opt,
+        plugins: [fn]
+    })
+
+    swiperInstance.slideTo(swiperInstance.state.index + 1)
+    swiperInstance.updateSize()
+    swiperInstance.update()
+    swiperInstance.destroy()
+
+    test(`Plugin ${pluginName} mounted`, () => {
+        expect(fn).toBeCalledTimes(1)
+    })
+}

packages/tiny-swiper/__test__/smoke/instance.spec.ts

@@ -0,0 +1,32 @@
+import { createElementsInstance } from '../utils'
+import Swiper from '../../src/core/index'
+import { LIFE_CYCLES } from '../../src/core/eventHub'
+
+describe('lifecycle', () => {
+    const elementsInstance = createElementsInstance(3, {
+        width: 300,
+        height: 300
+    })
+    const swiperInstance = Swiper(elementsInstance.$el)
+    const events: {
+        [key: string]: Function
+    } = {}
+    const lifecyclesList = Object.values(LIFE_CYCLES)
+
+    lifecyclesList.forEach(eventName => {
+        // const fn = jest.fn(p => console.log(eventName, p))
+        const fn = jest.fn()
+
+        events[eventName] = fn
+        swiperInstance.on(eventName, fn)
+    })
+
+    swiperInstance.slideTo(swiperInstance.state.index + 1)
+    swiperInstance.updateSize()
+    swiperInstance.update()
+    swiperInstance.destroy()
+
+    test(LIFE_CYCLES.BEFORE_SLIDE, () => {
+        expect(events[LIFE_CYCLES.BEFORE_SLIDE]).toBeCalledTimes(3)
+    })
+})

packages/tiny-swiper/__test__/smoke/modules/navigation.spec.ts

@@ -0,0 +1,30 @@
+import {
+    defaultStyle,
+    testPluginLifcycle
+} from '../../common'
+import SwiperPluginNavigation from '../../../src/modules/navigation'
+
+describe('Plugin - Navigation', () => {
+    testPluginLifcycle(
+        `
+        ${defaultStyle}
+        <div class="swiper-container">
+            <div class="swiper-wrapper">
+                <div class="a swiper-slide">1</div>
+                <div class="b swiper-slide">2</div>
+                <div class="a swiper-slide">3</div>
+                <div class="b swiper-slide">4</div>
+            </div>
+            <button class="swiper-plugin-navigation-prevEl">prev</button>
+            <button class="swiper-plugin-navigation-nextEl">next</button>
+        </div>
+        `,
+        {
+            navigation: {
+                nextEl: '.swiper-plugin-navigation-nextEl',
+                prevEl: '.swiper-plugin-navigation-prevEl'
+            }
+        },
+        SwiperPluginNavigation,
+        'SwiperPluginNavigation')
+})

packages/tiny-swiper/__test__/smoke/modules/pagination.spec.ts

@@ -0,0 +1,29 @@
+import {
+    defaultStyle,
+    testPluginLifcycle
+} from '../../common'
+import SwiperPluginPagination from '../../../src/modules/pagination'
+
+describe('Plugin - Pagination', () => {
+    testPluginLifcycle(
+        `
+        ${defaultStyle}
+        <div class="swiper-container">
+            <div class="swiper-wrapper">
+                <!-- Slides -->
+                <div class="a swiper-slide">1</div>
+                <div class="b swiper-slide">2</div>
+                <div class="a swiper-slide">3</div>
+                <div class="b swiper-slide">4</div>
+            </div>
+            <div class="swiper-pagination"></div>
+        </div>
+        `,
+        {
+            pagination: {
+                el: '.swiper-pagination'
+            }
+        },
+        SwiperPluginPagination,
+        'SwiperPluginPagination')
+})

packages/tiny-swiper/__test__/utils.ts

@@ -20,13 +20,21 @@ Object.defineProperties(window.HTMLElement.prototype, {
     }
 })
 
-export function mockElement (width = 100, height = 100) {
-    const body = document.getElementsByTagName('body')[0]
+type mockElementParams = {
+    width?: number
+    height?: number
+    classList?: string[]
+}
+export function mockElement ({
+    width = 100,
+    height = 100,
+    classList = []
+}: mockElementParams) {
     const el = document.createElement('div')
 
-    body.appendChild(el)
     el.style.width = `${width}px`
     el.style.height = `${height}px`
+    el.classList.add(...classList)
 
     return el
 }
@@ -38,14 +46,27 @@ export function createElementsInstance (
         height: 300
     }
 ) {
+    const $body = document.getElementsByTagName('body')[0]
     const $list = new Array(listLength)
         .fill(null)
-        .map(() => mockElement())
+        .map(() => mockElement({
+            ...boundary,
+            classList: [optionFormatter().slideClass]
+        }))
+    const $el = mockElement({
+        ...boundary
+    })
+    const $wrapper = mockElement({
+        classList: [optionFormatter().wrapperClass]
+    })
 
+    $wrapper.append(...$list)
+    $el.appendChild($wrapper)
+    $body.appendChild($el)
 
     return {
-        $el: mockElement(),
-        $wrapper: mockElement(boundary.width, boundary.height),
+        $el,
+        $wrapper,
         $list
     }
 }

packages/tiny-swiper/jest.config.js

@@ -2,7 +2,8 @@ module.exports = {
     preset: 'ts-jest',
     testEnvironment: 'jsdom',
     roots: [
-        './__test__/unit'
+        './__test__/unit',
+        './__test__/smoke'
     ],
     collectCoverage: true,
     coverageDirectory: './coverage'