♻️📝 documenting + rationalizing tests

packages/alice/__tests__/index.test.ts

@@ -1,53 +1,51 @@
 import { Alice } from '../src/index';
 
+const alice = new Alice();
+
 beforeEach(() => {
-  jest.resetModules();
+  // Init before each test
+  alice.initialize();
+});
+
+afterEach(() => {
+  // Resetting Alice instance values before next test.
+  global.scrollY = 0;
+  global.dispatchEvent(new Event('scroll'));
+  alice.destroy();
 });
 
 describe('Success cases', () => {
   test('It should return a scrollTop value different from 0', async () => {
     // Change the scroll value to 1000px.
     global.scrollY = 1000;
 
-    const alice = new Alice();
-    alice.initialize();
-
     // Trigger the window scroll event.
     global.dispatchEvent(new Event('scroll'));
     global.dispatchEvent(new Event('scroll'));
 
     expect(alice.scroll.data.scrollTop).toStrictEqual(1000);
-
-    alice.destroy();
   });
 
-  // test('It should not take the first scroll event into consideration', async () => {
-  //   // Change the scroll value to 1000px.
-  //   global.scrollY = 1000;
-
-  //   const alice = new Alice2();
-  //   alice.initialize();
-
-  //   // Triggering the window's first scroll event only.
-  //   global.dispatchEvent(new Event('scroll'));
+  test('It should not take the first scroll event into consideration', async () => {
+    // Change the scroll value to 1000px.
+    global.scrollY = 1000;
 
-  //   expect(alice.scroll.data.scrollTop).toStrictEqual(0);
+    // Triggering the window's first scroll event only.
+    global.dispatchEvent(new Event('scroll'));
 
-  //   alice.destroy();
-  // });
+    expect(alice.scroll.data.scrollTop).toStrictEqual(0);
+  });
 
-  // test('It should not take the scroll event into consideration', async () => {
-  //   // Change the scroll value to 1000px.
-  //   global.scrollY = 1000;
+  test('It should not take the scroll event into consideration', async () => {
+    // Change the scroll value to 1000px.
+    global.scrollY = 1000;
 
-  //   const alice = new Alice3();
-  //   alice.initialize();
-  //   alice.destroy();
+    alice.destroy();
 
-  //   // Trigger the window scroll event.
-  //   global.dispatchEvent(new Event('scroll'));
-  //   global.dispatchEvent(new Event('scroll'));
+    // Trigger the window scroll event.
+    global.dispatchEvent(new Event('scroll'));
+    global.dispatchEvent(new Event('scroll'));
 
-  //   expect(alice.scroll.data.scrollTop).toStrictEqual(0);
-  // });
+    expect(alice.scroll.data.scrollTop).toStrictEqual(0);
+  });
 });

packages/alice/src/detect.ts

@@ -9,21 +9,50 @@ import { Tween } from './tween';
 import { isInView, getBoundings } from './utils/view';
 
 export class Detect extends Tween {
+  /**
+   * @description Boolean ensuring that we can't initialize multiple detection plugins.
+   * @static
+   * @memberof Detect
+   */
+
   static isInitialized = false;
 
+  /**
+   * @description Object allowing to watch view data.
+   * @static
+   * @type {Eva}
+   * @memberof Detect
+   */
+
   static _eva: Eva;
 
+  /**
+   * @description List of detect tween objects.
+   * @private
+   * @type {TweenObject[]}
+   * @memberof Detect
+   */
+
   private _detectTweensList: TweenObject[] = [];
 
   /**
    * Creates an instance of Detect.
    * @author Alphability <[email protected]>
    * @memberof Detect
    */
+
   constructor() {
     super();
   }
 
+  /**
+   * @description Computing tween in view position.
+   * @author Alphability <[email protected]>
+   * @private
+   * @param {TweenObject} tween
+   * @memberof Detect
+   */
+
   private async _computeDetection(tween: TweenObject) {
     // NOTE: Early returns with if statements without curly brackets allow the browser to parse js. Thus, getBoudingClientRect was calling a style recalculation even if it as not used.
 
@@ -53,6 +82,13 @@ export class Detect extends Tween {
     );
   }
 
+  /**
+   * @description Loop through tweens to compute them.
+   * @author Alphability <[email protected]>
+   * @private
+   * @memberof Detect
+   */
+
   private _handleTweenList() {
     this._detectTweensList.forEach((tween) => {
       if (!tween.options.once || !tween.state.isInView) {
@@ -62,10 +98,11 @@ export class Detect extends Tween {
   }
 
   /**
-   * @description Initializing the viewport reactive data abilities when the window object is defined.
+   * @description Initializing the detection abilities when the window object is defined.
    * @author Alphability <[email protected]>
    * @memberof Detect
    */
+
   public initialize(): void {
     // No multiple init
     if (Detect.isInitialized) {
@@ -98,16 +135,26 @@ export class Detect extends Tween {
   }
 
   /**
-   * @description Destroying the reactive data object and listeners.
+   * @description Destroying the tweens.
    * @author Alphability <[email protected]>
    * @memberof Detect
    */
+
   public destroy(): void {
     const ids = Object.keys(Detect._list);
     this.remove(ids);
     Detect.isInitialized = false;
   }
 
+  /**
+   * @description Adding new tweens to the detection list.
+   * @author Alphability <[email protected]>
+   * @param {(any | any[])} elements
+   * @param {InputTweenOptions} options
+   * @returns {(string | string[])}
+   * @memberof Detect
+   */
+
   public add(
     elements: any | any[],
     options: InputTweenOptions
@@ -125,6 +172,14 @@ export class Detect extends Tween {
     return ids;
   }
 
+  /**
+   * @description Removing tweens by id.
+   * @author Alphability <[email protected]>
+   * @param {string[]} ids
+   * @returns {Tween}
+   * @memberof Detect
+   */
+
   public remove(ids: string[]): Tween {
     this._detectTweensList = [];
     return super.remove(ids);

packages/alice/src/index.ts

@@ -11,6 +11,7 @@ export class Alice {
    * @static
    * @memberof Alice
    */
+
   static _scrollEndDelay = 100;
 
   /**
@@ -49,23 +50,45 @@ export class Alice {
 
   static _speed: Speed = new Speed();
 
+  /**
+   * @description Boolean ensuring that we can't initialize multiple scroll listeners.
+   * @private
+   * @memberof Alice
+   */
+
   private _isInitialized = false;
 
-  private _optionsPluginsList: string[] = [];
+  /**
+   * @description Boolean ensuring that we prevent automatic browser scroll on refresh.
+   * @private
+   * @memberof Alice
+   */
 
   private _refreshScroll = false;
 
+  private _optionsPluginsList: string[] = [];
+
   /**
    * Creates an instance of Alice.
    * @author Alphability <[email protected]>
    * @memberof Alice
    */
+
   constructor(optionsPluginsList: string[] = []) {
     this._scrollEventHandler = this._scrollEventHandler.bind(this);
 
     this._optionsPluginsList = optionsPluginsList;
   }
 
+  /**
+   * @description Method used to initialize the plugins only when window is loaded.
+   * @author Alphability <[email protected]>
+   * @private
+   * @param {string[]} pluginsList
+   * @returns {void}
+   * @memberof Alice
+   */
+
   private _initializePlugins(pluginsList: string[]): void {
     if (!pluginsList.length) {
       return;
@@ -96,6 +119,7 @@ export class Alice {
    * @private
    * @memberof Alice
    */
+
   private _collectEventValues(): void {
     Alice._reactor.data.scrollTop = window.scrollY || window.pageYOffset;
   }
@@ -106,6 +130,7 @@ export class Alice {
    * @private
    * @memberof Alice
    */
+
   private _scrollEventHandler(): void {
     // Prevent automatic browser scroll on refresh
     if (!this._refreshScroll) {
@@ -119,6 +144,11 @@ export class Alice {
     this._scrollEnd();
   }
 
+  /**
+   * @description Scroll end value refresh.
+   * @private
+   * @memberof Alice
+   */
   private _scrollEnd = debounce(() => {
     Alice._reactor.data.isScrolling = false;
   }, Alice._scrollEndDelay);
@@ -129,6 +159,7 @@ export class Alice {
    * @private
    * @memberof Alice
    */
+
   private _attachListeners(): void {
     window.addEventListener('scroll', this._scrollEventHandler, {
       passive: true,
@@ -141,16 +172,18 @@ export class Alice {
    * @private
    * @memberof Alice
    */
+
   private _detachListeners(): void {
     // ⚡ Avoid memory leak
     window.removeEventListener('scroll', this._scrollEventHandler, false);
   }
 
   /**
-   * @description Initializing the viewport reactive data abilities when the window object is defined.
+   * @description Initializing the scroll reactive data abilities when the window object is defined.
    * @author Alphability <[email protected]>
    * @memberof Alice
    */
+
   public initialize(): void {
     // No multiple init
     // Avoid having multiple listeners at the same time.
@@ -175,30 +208,54 @@ export class Alice {
    * @author Alphability <[email protected]>
    * @memberof Alice
    */
+
   public destroy(): void {
     this._detachListeners();
 
+    this._refreshScroll = false;
     this._isInitialized = false;
   }
 
   /**
-   * @description Reeactive properties object's getter.
+   * @description Reactive scroll properties object's getter.
    * @readonly
    * @type {Calvin}
    * @memberof Alice
    */
+
   get scroll(): Calvin {
     return Alice._reactor;
   }
 
+  /**
+   * @description Reactive viewport properties object's getter.
+   * @readonly
+   * @type {Calvin}
+   * @memberof Alice
+   */
+
   get view(): Calvin {
     return Alice._eva.view;
   }
 
+  /**
+   * @description HTMLElements in view detector.
+   * @readonly
+   * @type {Detect}
+   * @memberof Alice
+   */
+
   get detect(): Detect {
     return Alice._detect;
   }
 
+  /**
+   * @description HTMLELements speed modifier.
+   * @readonly
+   * @type {Speed}
+   * @memberof Alice
+   */
+
   get speed(): Speed {
     return Alice._speed;
   }