add tests, implement myself

berndartmueller · Aug 20, 2020 · d247d58 · d247d58
1 parent 0a9f2bd
commit d247d58
Show file tree

Hide file tree

Showing 29 changed files with 7,430 additions and 2,031 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -16,29 +16,7 @@
     <!-- Slider main container -->
     <div class="virchual-container image-swiper">
       <!-- Additional required wrapper -->
-      <div class="virchual__track">
-        <div class="virchual__list">
-          <!-- Slides -->
-          <div class="virchual-slide" data-key="0"><span>Slide 1</span></div>
-          <div class="virchual-slide" data-key="1"><span>Slide 2</span></div>
-        </div>
-      </div>
-
-      <!-- If we need navigation buttons -->
-      <div class="virchual-button-prev"></div>
-      <div class="virchual-button-next"></div>
-    </div>
-
-    <!-- Slider main container -->
-    <div class="virchual-container image-swiper">
-      <!-- Additional required wrapper -->
-      <div class="virchual__track">
-        <div class="virchual__list">
-          <!-- Slides -->
-          <div class="virchual-slide" data-key="0"><span>Slide 1</span></div>
-          <div class="virchual-slide" data-key="1"><span>Slide 2</span></div>
-        </div>
-      </div>
+      <div class="virchual__frame" style="height: 100%;"></div>
 
       <!-- If we need navigation buttons -->
       <div class="virchual-button-prev"></div>

diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,17 @@
+const path = require('path');
+
+module.exports = {
+  globals: {
+    'ts-jest': {
+      tsConfig: 'tsconfig.test.json',
+    },
+  },
+  moduleNameMapper: {},
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testMatch: [path.join(__dirname, '/test/**/*.spec.{js,ts}'), path.join(__dirname, '/src/**/*.spec.{js,ts}')],
+  moduleFileExtensions: ['ts', 'js', 'json'],
+  testEnvironment: 'node',
+  setupFilesAfterEnv: ['./test/setup.jest.ts'],
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "swiper"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "NODE_ENV=test jest --bail",
     "build": "rollup -c && tsc",
     "build:prod": "NODE_ENV=production rollup -c && tsc",
     "dev": "rollup -cw && tsc",
@@ -47,6 +47,11 @@
     "rollup-plugin-terser": "^7.0.0",
     "rollup-plugin-typescript2": "^0.27.2",
     "rollup-plugin-visualizer": "^4.1.0",
+    "ts-jest": "^26.2.0",
     "typescript": "^3.9.7"
+  },
+  "dependencies": {
+    "@types/jest": "^26.0.10",
+    "jest": "^26.4.1"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -8,7 +8,7 @@ import postcss_copy from 'postcss-copy';
 import visualizer from 'rollup-plugin-visualizer';
 
 export default {
-  input: 'src/virchual.ts', // our source file
+  input: 'src/virchual2.ts', // our source file
   output: [
     {
       file: pkg.main,

diff --git a/src/components/clone/clone.component.ts b/src/components/clone/clone.component.ts
@@ -1,10 +1,10 @@
 import { addClass, append, before, domify, remove } from '../../utils/dom';
 import TrackComponent from '../track/track.component';
 import VirtualComponent from '../virtual/virtual.component';
-import { LOOP } from './../../constants/types';
 import Virchual, { VirchualComponents, VirchualOptions } from './../../virchual';
 import { BaseComponent } from './../base-component';
 import { SlideComponent } from './../virtual/slide.component';
+import { ELEMENT_CLASSES } from '../../constants/classes';
 
 export default class CloneComponent implements BaseComponent {
   /**
@@ -24,18 +24,16 @@ export default class CloneComponent implements BaseComponent {
     this.virtual = components.Virtual as VirtualComponent;
     this.track = components.Track as TrackComponent;
 
-    if (this.instance.is(LOOP)) {
-      this.generateClones();
+    this.generateClones();
 
-      this.instance.on('refresh', () => {
-        this.destroy();
-        this.generateClones();
-      });
+    this.instance.on('refresh', () => {
+      this.destroy();
+      this.generateClones();
+    });
 
-      this.instance.on('move', () => {
-        this.generateClones();
-      });
-    }
+    this.instance.on('moved', () => {
+      this.generateClones();
+    });
   }
 
   /**
@@ -98,6 +96,13 @@ export default class CloneComponent implements BaseComponent {
     const currentIndex = this.instance.index;
     const virtualSlidesLength = this.virtual.getSlides(false).length;
 
+    // no before and after clones needed -> remove
+    if (currentIndex > 0 && currentIndex < virtualSlidesLength) {
+      this.cleanClones();
+
+      return;
+    }
+
     if (currentIndex > 0 && currentIndex >= virtualSlidesLength - 1 && this.lengthAfter === 0) {
       this.virtual.slides.slice(0, count).forEach((slide, index) => {
         const node = domify(`<div class='virchual-slide'>${slide.html}</div>`) as HTMLElement;
@@ -129,6 +134,19 @@ export default class CloneComponent implements BaseComponent {
     }
   }
 
+  /**
+   * Remove and clean unused clones from HTML.
+   */
+  private cleanClones() {
+    console.log('cleaned clones');
+
+    this.clones.forEach(clone => {
+      clone.slide.parentNode.removeChild(clone.slide);
+
+      this.virtual.unregister(clone.index);
+    });
+  }
+
   private getCloneCount(): number {
     return this.options.cloneCount;
   }
@@ -143,7 +161,7 @@ export default class CloneComponent implements BaseComponent {
   private cloneDeeply(element: HTMLElement): HTMLElement {
     const clone = element.cloneNode(true) as HTMLElement;
 
-    addClass(clone, this.instance.classes.clone);
+    addClass(clone, ELEMENT_CLASSES.clone);
 
     // ID should not be duplicated.
     clone.removeAttribute('id');

diff --git a/src/components/controller/controller.component.ts b/src/components/controller/controller.component.ts
@@ -22,121 +22,25 @@ export default class ControllerComponent implements BaseComponent {
   }
 
   /**
-   * Make track run by the given control.
-   * - "+{i}" : Increment the slide index by i.
-   * - "-{i}" : Decrement the slide index by i.
-   * - "{i}"  : Go to the slide whose index is i.
-   * - ">"    : Go to next page.
-   * - "<"    : Go to prev page.
-   * - ">{i}" : Go to page i.
+   * Go to next slide.
    *
-   * @param control  - A control pattern.
    * @param silently - Go to the destination without event emission.
    */
-  go(control: string | number, silently: boolean = false) {
-    const destIndex = this.trim(this.parse(control));
+  next(silently: boolean = false) {
+    const nextIndex = this.instance.index + 1;
 
-    this.track.go(destIndex, this.rewind(destIndex), silently);
+    this.track.go(nextIndex, this.rewind(nextIndex), silently);
   }
 
   /**
-   * Parse the given control and return the destination index for the track.
+   * Go to previous slide.
    *
-   * @param control - A control target pattern.
-   *
-   * @return A parsed target.
-   */
-  parse(control: string | number): number {
-    let index = this.instance.index;
-
-    const matches = String(control).match(/([+\-<>])(\d+)?/);
-    const indicator = matches ? matches[1] : '';
-    const number = matches ? parseInt(matches[2]) : 0;
-
-    switch (indicator) {
-      case '+':
-        index += number || 1;
-        break;
-
-      case '-':
-        index -= number || 1;
-        break;
-
-      case '>':
-        index = this.toIndex(number > -1 ? number : this.toPage(index) + 1);
-        break;
-
-      case '<':
-        index = this.toIndex(number > -1 ? number : this.toPage(index) - 1);
-        break;
-
-      default:
-        index = parseInt(`${control}`);
-    }
-
-    return index;
-  }
-
-  /**
-   * Compute index from the given page number.
-   *
-   * @param page - Page number.
-   *
-   * @return A computed page number.
-   */
-  toIndex(page: number): number {
-    if (this.hasFocus()) {
-      return page;
-    }
-
-    const length = this.instance.length;
-
-    let index = page;
-    index = index - (this.pageLength - length) * Math.floor(index / length);
-
-    // Adjustment for the last page.
-    if (length - 1 <= index && index < length) {
-      index = length - 1;
-    }
-
-    return index;
-  }
-
-  /**
-   * Compute page number from the given slide index.
-   *
-   * @param index - Slide index.
-   *
-   * @return A computed page number.
-   */
-  toPage(index: number): number {
-    if (this.hasFocus()) {
-      return index;
-    }
-
-    const length = this.instance.length;
-
-    if (length - 1 <= index && index < length) {
-      return length - 1;
-    }
-
-    return index;
-  }
-
-  /**
-   * Trim the given index according to the current mode.
-   * Index being returned could be less than 0 or greater than the length in Loop mode.
-   *
-   * @param index - An index being trimmed.
-   *
-   * @return A trimmed index.
+   * @param silently - Go to the destination without event emission.
    */
-  trim(index: number): number {
-    if (!this.isLoop) {
-      index = this.options.rewind ? this.rewind(index) : between(index, 0, this.edgeIndex);
-    }
+  previous(silently: boolean = false) {
+    const nextIndex = this.instance.index - 1;
 
-    return index;
+    this.track.go(nextIndex, this.rewind(nextIndex), silently);
   }
 
   /**
@@ -149,44 +53,15 @@ export default class ControllerComponent implements BaseComponent {
   rewind(index: number): number {
     const edge = this.edgeIndex;
 
-    if (this.isLoop) {
-      while (index > edge) {
-        index -= edge + 1;
-      }
-
-      while (index < 0) {
-        index += edge + 1;
-      }
-    } else {
-      if (index > edge) {
-        index = 0;
-      } else if (index < 0) {
-        index = edge;
-      }
+    if (index > edge) {
+      index = 0;
+    } else if (index < 0) {
+      index = edge;
     }
 
     return index;
   }
 
-  /**
-   * Check if the direction is "rtl" or not.
-   *
-   * @return True if "rtl" or false if not.
-   */
-  isRtl(): boolean {
-    return this.options.direction === 'rtl';
-  }
-
-  /**
-   * Return the page length.
-   *
-   * @return Max page number.
-   */
-  get pageLength(): number {
-    const length = this.instance.length;
-    return this.hasFocus() ? length : Math.ceil(length);
-  }
-
   /**
    * Return the edge index.
    *
@@ -206,36 +81,6 @@ export default class ControllerComponent implements BaseComponent {
     return length - 1;
   }
 
-  /**
-   * Return the index of the previous slide.
-   *
-   * @return The index of the previous slide if available. -1 otherwise.
-   */
-  get prevIndex(): number {
-    let prev = this.instance.index - 1;
-
-    if (this.isLoop || this.options.rewind) {
-      prev = this.rewind(prev);
-    }
-
-    return prev > -1 ? prev : -1;
-  }
-
-  /**
-   * Return the index of the next slide.
-   *
-   * @return The index of the next slide if available. -1 otherwise.
-   */
-  get nextIndex(): number {
-    let next = this.instance.index + 1;
-
-    if (this.isLoop || this.options.rewind) {
-      next = this.rewind(next);
-    }
-
-    return (this.instance.index < next && next <= this.edgeIndex) || next === 0 ? next : -1;
-  }
-
   /**
    * Listen some events.
    */