From 716cc06a894b04db8e307c9d17fb3141f3e1d2e5 Mon Sep 17 00:00:00 2001
From: Luiz Filipe Machado Barni <machado@odahcam.com>
Date: Fri, 31 Aug 2018 11:08:13 -0300
Subject: [PATCH] addd module instalarion test

---
 types/swiper/swiper-tests.ts | 119 +++++++++++++++++++++--------------
 1 file changed, 73 insertions(+), 46 deletions(-)

diff --git a/types/swiper/swiper-tests.ts b/types/swiper/swiper-tests.ts
index 1de04e7b2e..a41b093001 100644
--- a/types/swiper/swiper-tests.ts
+++ b/types/swiper/swiper-tests.ts
@@ -3,54 +3,62 @@
  * for more details, please see http://idangero.us/swiper/demos/
  * @author Eugene Matseruk
  */
-import { Swiper } from 'swiper';
+import { Swiper, Navigation, History } from 'swiper';
+
+const containerSelector = '.swiper-container';
 
 /**
  *  010-default
  */
 function defaultDemo() {
-    const swiper = new Swiper('.swiper-container');
+    const swiper = new Swiper(containerSelector);
 }
 /**
  * 020-navigation
  */
 function navigation() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
         },
     });
+
+    swiper.navigation.update();
 }
 
 /**
  * 030-pagination
  */
 function pagination() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         pagination: {
             el: '.swiper-pagination',
         },
     });
+
+    swiper.pagination.update();
 }
 
 /**
  * 040-pagination-dynamic
  */
 function paginationDynamic() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         pagination: {
             el: '.swiper-pagination',
             dynamicBullets: true,
         },
     });
+
+    swiper.pagination.update();
 }
 
 /**
  * 050-progress-pagination
  */
 function paginationProgress() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         pagination: {
             el: '.swiper-pagination',
             type: 'progressbar',
@@ -60,13 +68,16 @@ function paginationProgress() {
             prevEl: '.swiper-button-prev',
         },
     });
+
+    swiper.pagination.update();
+    swiper.navigation.update();
 }
 
 /**
  * 060-pagination-fraction
  */
 function paginationFraction() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         pagination: {
             el: '.swiper-pagination',
             type: 'fraction',
@@ -76,13 +87,16 @@ function paginationFraction() {
             prevEl: '.swiper-button-prev',
         },
     });
+
+    swiper.pagination.update();
+    swiper.navigation.update();
 }
 
 /**
  * 070-pagination-custom
  */
 function paginationCustom() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         pagination: {
             el: '.swiper-pagination',
             clickable: true,
@@ -91,25 +105,29 @@ function paginationCustom() {
             },
         },
     });
+
+    swiper.pagination.render();
 }
 
 /**
  * 080-scrollbar
  */
 function scrollbar() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         scrollbar: {
             el: '.swiper-scrollbar',
             hide: true,
         },
     });
+
+    swiper.scrollbar.updateSize();
 }
 
 /**
  * Vertical Slider
  */
 function verticalSlider() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         direction: 'vertical',
         pagination: {
             el: '.swiper-pagination',
@@ -122,7 +140,7 @@ function verticalSlider() {
  * Space Between Slides
  */
 function spaceBetween() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         spaceBetween: 30,
         pagination: {
             el: '.swiper-pagination',
@@ -135,7 +153,7 @@ function spaceBetween() {
  * Multiple Slides Per View
  */
 function multipleSlidesPerView() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 3,
         spaceBetween: 30,
         pagination: {
@@ -149,7 +167,7 @@ function multipleSlidesPerView() {
  * Auto Slides Per View / Carousel Mode
  */
 function autoSlidesPerViewAndCarouserMode() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 'auto',
         spaceBetween: 30,
         pagination: {
@@ -163,7 +181,7 @@ function autoSlidesPerViewAndCarouserMode() {
  * Centered Slides
  */
 function centeredSlides() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 4,
         spaceBetween: 30,
         centeredSlides: true,
@@ -178,7 +196,7 @@ function centeredSlides() {
  * Centered Slides + Auto Slides Per View
  */
 function centeredSlidesAndAutoSlidesPerView() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 'auto',
         centeredSlides: true,
         spaceBetween: 30,
@@ -193,7 +211,7 @@ function centeredSlidesAndAutoSlidesPerView() {
  * Free Mode / No Fixed Positions
  */
 function freeModeAndNoFixedPositions() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 3,
         spaceBetween: 30,
         freeMode: true,
@@ -208,7 +226,7 @@ function freeModeAndNoFixedPositions() {
  * Scroll Container
  */
 function scrollContainer() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         direction: 'vertical',
         slidesPerView: 'auto',
         freeMode: true,
@@ -223,7 +241,7 @@ function scrollContainer() {
  * Multi Row Slides Layout
  */
 function multiRowSlides() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 3,
         slidesPerColumn: 2,
         spaceBetween: 30,
@@ -258,7 +276,7 @@ function nestedSwipers() {
  * Grab Cursor
  */
 function grabCursor() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 4,
         centeredSlides: true,
         spaceBetween: 30,
@@ -274,7 +292,7 @@ function grabCursor() {
  * Loop Mode / Infinite Loop
  */
 function loopMode() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 1,
         spaceBetween: 30,
         loop: true,
@@ -293,7 +311,7 @@ function loopMode() {
  * Loop Mode with Multiple Slides Per Group
  */
 function loopModeWithMultipleSlides() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 3,
         spaceBetween: 30,
         slidesPerGroup: 3,
@@ -314,7 +332,7 @@ function loopModeWithMultipleSlides() {
  * Fade Effect
  */
 function fadeEffect() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         spaceBetween: 30,
         effect: 'fade',
         pagination: {
@@ -332,7 +350,7 @@ function fadeEffect() {
  * 3D Cube Effect
  */
 function cube3dEffect() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         effect: 'cube',
         grabCursor: true,
         cubeEffect: {
@@ -351,7 +369,7 @@ function cube3dEffect() {
  * 3D Coverflow Effect
  */
 function coverflow3dEffect() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         effect: 'coverflow',
         grabCursor: true,
         centeredSlides: true,
@@ -373,7 +391,7 @@ function coverflow3dEffect() {
  * 3D Flip Effect
  */
 function flip3dEffect() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         effect: 'flip',
         grabCursor: true,
         pagination: {
@@ -390,7 +408,7 @@ function flip3dEffect() {
  * Keyboard Control (Open in new window)
  */
 function keyboardControl() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 1,
         spaceBetween: 30,
         keyboard: {
@@ -411,7 +429,7 @@ function keyboardControl() {
  * Mousewheel Control
  */
 function mouseWheelControl() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         direction: 'vertical',
         slidesPerView: 1,
         spaceBetween: 30,
@@ -427,7 +445,7 @@ function mouseWheelControl() {
  * Autoplay
  */
 function autoplay() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         spaceBetween: 30,
         centeredSlides: true,
         autoplay: {
@@ -451,7 +469,7 @@ function autoplay() {
 function dynamicSlides() {
     let appendNumber = 4;
     let prependNumber = 1;
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 3,
         centeredSlides: true,
         spaceBetween: 30,
@@ -464,22 +482,22 @@ function dynamicSlides() {
             prevEl: '.swiper-button-prev',
         },
     });
-    document.querySelector('.prepend-2-slides').addEventListener('click', (e) => {
+    document.querySelector('.prepend-2-slides').addEventListener('click', e => {
         e.preventDefault();
         swiper.prependSlide([
             `<div class="swiper-slide">Slide ${--prependNumber}</div>`,
             `<div class="swiper-slide">Slide ${--prependNumber}</div>`,
         ]);
     });
-    document.querySelector('.prepend-slide').addEventListener('click', (e) => {
+    document.querySelector('.prepend-slide').addEventListener('click', e => {
         e.preventDefault();
         swiper.prependSlide(`<div class="swiper-slide">Slide ${--prependNumber}</div>`);
     });
-    document.querySelector('.append-slide').addEventListener('click', (e) => {
+    document.querySelector('.append-slide').addEventListener('click', e => {
         e.preventDefault();
         swiper.appendSlide(`<div class="swiper-slide">Slide ${--appendNumber}</div>`);
     });
-    document.querySelector('.append-2-slides').addEventListener('click', (e) => {
+    document.querySelector('.append-2-slides').addEventListener('click', e => {
         e.preventDefault();
         swiper.appendSlide([
             `<div class="swiper-slide">Slide ${--appendNumber}</div>`,
@@ -514,7 +532,7 @@ function thumbsGalleryWithTwoWayControl() {
  * Hash Navigation (Open in new window)
  */
 function hashNavigation() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         spaceBetween: 30,
         hashNavigation: {
             watchState: true,
@@ -534,7 +552,7 @@ function hashNavigation() {
  * History API (Open in new window)
  */
 function historyApi() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         spaceBetween: 50,
         slidesPerView: 1,
         navigation: {
@@ -554,7 +572,7 @@ function historyApi() {
  * RTL Layout
  */
 function rtlLayout() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         pagination: {
             el: '.swiper-pagination',
             clickable: true,
@@ -570,7 +588,7 @@ function rtlLayout() {
  * Parallax
  */
 function parallax() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         speed: 600,
         parallax: true,
         pagination: {
@@ -588,7 +606,7 @@ function parallax() {
  * Lazy Loading Images
  */
 function lazyLoadingImages() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         // Enable lazy loading
         lazy: true,
         pagination: {
@@ -606,7 +624,7 @@ function lazyLoadingImages() {
  * Responsive Breakpoints
  */
 function responsiveBreakpoints() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 5,
         spaceBetween: 50,
         // init: false,
@@ -639,7 +657,7 @@ function responsiveBreakpoints() {
  * Auto Height
  */
 function autoHeight() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         autoHeight: true, // enable auto height
         spaceBetween: 20,
         pagination: {
@@ -657,7 +675,7 @@ function autoHeight() {
  * Zoom
  */
 function zoom() {
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         zoom: true,
         pagination: {
             el: '.swiper-pagination',
@@ -686,7 +704,7 @@ function virtualSlides() {
         slides.push('Slide ' + (i + 1));
     }
 
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 3,
         centeredSlides: true,
         spaceBetween: 30,
@@ -702,15 +720,15 @@ function virtualSlides() {
             slides
         },
     });
-    document.querySelector('.slide-1').addEventListener('click', (e) => {
+    document.querySelector('.slide-1').addEventListener('click', e => {
         e.preventDefault();
         swiper.slideTo(0, 0);
     });
-    document.querySelector('.slide-250').addEventListener('click', (e) => {
+    document.querySelector('.slide-250').addEventListener('click', e => {
         e.preventDefault();
         swiper.slideTo(249, 0);
     });
-    document.querySelector('.slide-500').addEventListener('click', (e) => {
+    document.querySelector('.slide-500').addEventListener('click', e => {
         e.preventDefault();
         swiper.slideTo(499, 0);
     });
@@ -721,7 +739,7 @@ function virtualSlides() {
  */
 function slideableNavigation() {
     const menuButton = document.querySelector('.menu-button');
-    const swiper = new Swiper('.swiper-container', {
+    const swiper = new Swiper(containerSelector, {
         slidesPerView: 'auto',
         initialSlide: 1,
         resistanceRatio: 0,
@@ -748,3 +766,12 @@ function slideableNavigation() {
         }
     });
 }
+
+/**
+ * Swiper module instalation.
+ */
+function staticUseModules() {
+    Swiper.use([Navigation, History]);
+
+    const swiper = new Swiper(containerSelector);
+}