test: add basic unit tests (#13)

package.json

@@ -22,17 +22,21 @@
   "main": "./dist/float-sidebar.min.js",
   "module": "./dist/float-sidebar.js",
   "devDependencies": {
+    "@open-wc/testing": "^3.0.2",
+    "@web/test-runner": "^0.13.20",
     "babel-core": "^6.26.3",
     "babel-loader": "7",
     "babel-plugin-transform-object-assign": "6",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "6.24.1",
+    "sinon": "^11.1.2",
     "terser-webpack-plugin": "^3.0.0",
     "webpack": "4.42.1",
     "webpack-cli": "3.3.11"
   },
   "scripts": {
-    "build": "webpack"
+    "build": "webpack",
+    "test": "web-test-runner test/**/*.test.js --node-resolve"
   },
   "repository": {
     "type": "git",

src/dimension-observer.js

@@ -71,24 +71,26 @@ function createDimensionObserver(callback, {
     }
   }
 
-  let tick = requestAnimationFrameThrottle(() => {
+  let tick = () => {
     let dimensions = computeDimensions();
 
     callback(prevDimensions, dimensions);
 
     prevDimensions = dimensions;
-  });
+  };
+
+  let throttledTick = requestAnimationFrameThrottle(tick);
 
   let start = () => {
-    $viewport.addEventListener('scroll', tick);
-    $viewport.addEventListener('resize', tick);
+    $viewport.addEventListener('scroll', throttledTick);
+    $viewport.addEventListener('resize', throttledTick);
 
     tick();
   }
 
   let stop = () => {
-    $viewport.removeEventListener('scroll', tick);
-    $viewport.removeEventListener('resize', tick);
+    $viewport.removeEventListener('scroll', throttledTick);
+    $viewport.removeEventListener('resize', throttledTick);
   }
 
   return { start, stop, tick };

src/index.js → src/float-sidebar.js

@@ -1,4 +1,4 @@
-import fsmStates      from './fsm-states';
+import * as fsmStates from './fsm-states';
 import fsmActions     from './fsm-actions';
 import fsmTransitions from './fsm-transitions';
 
@@ -14,6 +14,8 @@ function FloatSidebar(options) {
   let topSpacing    = options.topSpacing    || 0;
   let bottomSpacing = options.bottomSpacing || 0;
 
+  let onStateChange = options.onStateChange;
+
   let fsm = createFSM({
     actions:      fsmActions,
     transitions:  fsmTransitions,
@@ -30,6 +32,10 @@ function FloatSidebar(options) {
           $sideOuter,
           $relative
         });
+
+        if (onStateChange) {
+          onStateChange(transition.to);
+        }
       }
 
       updateSideOuterHeight(prevDimensions, dimensions);

src/fsm-actions.js

@@ -1,4 +1,4 @@
-import states from './fsm-states.js';
+import * as states from './fsm-states.js';
 
 export default {
   [states.START]: (_d, { $sideInner }) => {

src/fsm-states.js

@@ -1,7 +1,5 @@
-export default {
-  START:        'START',
-  TOP_FIXED:    'TOP_FIXED',
-  UNFIXED:      'UNFIXED',
-  BOTTOM_FIXED: 'BOTTOM_FIXED',
-  FINISH:       'FINISH'
-}
+export const START = 'START';
+export const TOP_FIXED = 'TOP_FIXED';
+export const UNFIXED = 'UNFIXED';
+export const BOTTOM_FIXED = 'BOTTOM_FIXED';
+export const FINISH = 'FINISH';

src/fsm-transitions.js

@@ -1,4 +1,4 @@
-import states from './fsm-states.js';
+import * as states from './fsm-states.js';
 
 export default {
   [states.START]: [

test/helpers.js

@@ -0,0 +1,16 @@
+export function nextFrame() {
+  return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+export async function scrollTo(top) {
+  window.scrollTo({ top });
+  await nextFrame();
+}
+
+export function getElementTop(element) {
+  return element.getBoundingClientRect().top + window.pageYOffset;
+}
+
+export function getElementBottom(element) {
+  return element.getBoundingClientRect().bottom + window.pageYOffset;
+}

test/sidebar-height.test.js

@@ -0,0 +1,68 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { nextFrame } from './helpers.js';
+import FloatSidebar from '../src/float-sidebar.js';
+
+describe('sidebar height', function() {
+  let wrapperElement, sidebarElement, sidebarInnerElement, contentElement;
+  let floatSidebar;
+
+  async function forceUpdate() {
+    floatSidebar.forceUpdate();
+    await nextFrame();
+  }
+
+  beforeEach(async () => {
+    wrapperElement = await fixture(html`
+      <div class="wrapper" style="display: flex; align-items: flex-start;">
+        <div class="content" style="flex: 1;"></div>
+        <div class="sidebar" style="width: 200px; position: relative;">
+          <div class="sidebar__inner"></div>
+        </div>
+      </div>
+    `);
+    contentElement = wrapperElement.querySelector('.content');
+    sidebarElement = wrapperElement.querySelector('.sidebar');
+    sidebarInnerElement = wrapperElement.querySelector('.sidebar__inner');
+
+    floatSidebar = new FloatSidebar({
+      sidebar: sidebarElement,
+      relative: contentElement
+    });
+  });
+
+  describe('height(content) > height(sidebarInner)', () => {
+    beforeEach(async () => {
+      contentElement.style.height = '1000px';
+      sidebarInnerElement.style.height = '500px';
+      await nextFrame();
+    });
+
+    it('should set the sidebar height to the content height', () => {
+      expect(sidebarElement.style.height).to.equal('1000px');
+    });
+
+    it('should set the sidebar height to the sidebar inner height when it increases', async () => {
+      sidebarInnerElement.style.height = '2000px';
+      await forceUpdate();
+      expect(sidebarElement.style.height).to.equal('2000px');
+    });
+  });
+
+  describe('height(content) < height(sidebarInner)', () => {
+    beforeEach(async () => {
+      contentElement.style.height = '500px';
+      sidebarInnerElement.style.height = '1000px';
+      await nextFrame();
+    });
+
+    it('should set the sidebar height to the sidebar inner height', () => {
+      expect(sidebarElement.style.height).to.equal('1000px');
+    });
+
+    it('should set the sidebar height to the content height when it increases', async () => {
+      contentElement.style.height = '2000px';
+      await forceUpdate();
+      expect(sidebarElement.style.height).to.equal('2000px');
+    });
+  });
+});