wiggle.js - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

.eslintrc.js

@@ -5,3 +5,4 @@ module.exports = {
     browser: true,
-    jasmine: true
+    jasmine: true,
+    es6: true
   },
@@ -8,0 +9,0 @@ globals: {

CHANGELOG.md

@@ -0,1 +1,5 @@
+## [1.2.0] - 2017-05-26
+### Changed
+- Validation for wiggle configuration
+
 ## [1.1.0] - 2017-05-21
@@ -2,0 +6,0 @@ ### Changed

karma.conf.js

@@ -11,2 +11,3 @@ module.exports = function (config) {
     files: [
+      'node_modules/babel-polyfill/dist/polyfill.js',
       'wiggle.js',
@@ -17,5 +18,19 @@ 'wiggle.spec.js'
     preprocessors: {
-      'src/app/*.js': ['coverage']
+      'wiggle.js': ['coverage'],
+      'wiggle.spec.js': ['babel']
     },
 
+    babelPreprocessor: {
+      options: {
+        presets: ['es2015'],
+        sourceMap: 'inline'
+      },
+      filename: function (file) {
+        return file.originalPath.replace(/\.js$/, '.es5.js');
+      },
+      sourceFileName: function (file) {
+        return file.originalPath;
+      }
+    },
+
     // test results reporter to use
@@ -22,0 +37,0 @@ // possible values: 'dots', 'progress'

package.json

 {
   "name": "wiggle.js",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Media query change listener",
@@ -26,2 +26,4 @@ "main": "wiggle.js",
   "devDependencies": {
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
     "eslint": "^3.17.1",
@@ -34,2 +36,3 @@ "gulp": "^3.9.1",
     "karma": "^1.5.0",
+    "karma-babel-preprocessor": "^6.0.1",
     "karma-chrome-launcher": "^2.0.0",
@@ -36,0 +39,0 @@ "karma-coverage": "^1.1.1",

wiggle.js

 /*****************************************************
 	  https://github.com/snovakovic/wiggle
     author: [e-mail]
-    version: 1.1.1
+    version: 1.2.0
  ***************************************************/
@@ -127,17 +127,12 @@ (function(global, factory) {
     init: function(screens) {
-      var readme = 'Check readme file at https://github.com/snovakovic/wiggle for more info about configuring wiggle.';
+      var valid = Array.isArray(screens) && screens.length &&
+        screens.every(function(screen) {
+          return typeof screen === 'object' && screen.name &&
+          (screen.mediaQuery || screen.minWidth || screen.maxWidth)
+        });
 
-      if (!screens || !Array.isArray(screens)) {
-        throw Error('Wiggle: Missing required screens array configuration. ' + readme);
+      if(!valid) {
+        throw Error('Wiggle: Configuration is invalid. Go to https://github.com/snovakovic/wiggle for more info about configuring wiggle.');
       }
 
-      screens.forEach(function(screen) {
-        if (typeof screen !== 'object' || !screen.name
-          || (!(screen.mediaQuery || screen.minWidth || screen.maxWidth))) {
-          throw Error('Wiggle: Invalid screens configuration. ' + readme);
-        }
-      });
-
-      // Instantiate wiggle
-
       return new Instance(screens);
@@ -144,0 +139,0 @@ }

wiggle.spec.js

@@ -1,43 +0,65 @@
-describe('Wiggle', function() {
-  var wiggle;
-  var screens = {
-    desktop: {
-      minWidth: 992,
-      name: 'desktop'
-    },
-    tablet: {
-      minWidth: 768,
-      maxWidth: 991,
-      name: 'tablet'
-    },
-    mobile: {
-      maxWidth: 767,
-      name: 'mobile'
-    }
-  }
+describe('Wiggle', () => {
+  let wiggle;
+  let listeners;
+  let activeSize;
+  let activeOrientation;
+  let counter;
 
-  function mockActiveScreen(name) {
-    var size = screens[name].minWidth || screens[name].maxWidth;
-    window.matchMedia = function(query) {
-      return {
-        matches: query.indexOf(size.toString()) !== -1
+  // Mock match media
+  window.matchMedia = function(query) {
+    return {
+      get matches() {
+        const screen = [
+          { def: '992', value: 'desktop'},
+          { def: '991', value: 'tablet'},
+          { def: '767', value: 'mobile'},
+          { def: 'portrait', value: 'portrait'},
+          { def: 'landscape', value: 'landscape'},
+        ].find((q) => query.includes(q.def)).value;
+
+        return screen === activeSize || screen === activeOrientation;
+      },
+      addListener: function(cb) {
+        listeners.push(cb.bind(null, this));
+        cb(this);
       }
-    };
-  }
+    }
+  };
 
-  function waitResize(fn) {
-    setTimeout(fn, 50);
+  // Mock change in screen
+  function triggerScreenChange(name) {
+    activeSize = name;
+    listeners.forEach((cb) => cb());
   }
 
-  beforeEach(function() {
-    mockActiveScreen('desktop');
+  beforeEach(() => {
+    listeners = [];
+    activeSize = 'desktop';
+    activeOrientation = 'landscape';
 
-    wiggle = Wiggle.init([
-      screens.desktop,
-      screens.tablet,
-      screens.mobile
-    ]);
+    counter = {
+      onDesktop: 0,
+      offDesktop: 0,
+      onTablet: 0,
+      offTablet: 0,
+      onMobile: 0,
+      offMobile: 0,
+      onPortrait: 0,
+      onLandscape: 0
+    }
+
+    wiggle = Wiggle.init([{
+      minWidth: 992,
+      name: 'desktop'
+    }, {
+      minWidth: '768px',
+      maxWidth: '991px',
+      name: 'tablet'
+    }, {
+      maxWidth: 767,
+      name: 'mobile'
+    }]);
   });
 
-  it('Wiggle should be initialized', function() {
+  it('should be initialized', () => {
     expect(wiggle.on).toEqual(jasmine.any(Function));
@@ -48,7 +70,7 @@ expect(wiggle.on.change).toEqual(jasmine.any(Function));
     expect(wiggle.is).toEqual(jasmine.any(Function));
+
+    expect(Object.isFrozen(wiggle)).toEqual(true);
   });
 
-  it('Wiggle should notify subscribers', function(done) {
-    wiggle.on('desktop', done);
-
+  it('should show correctly witch screen is active', () => {
     expect(wiggle.is('desktop')).toEqual(true);
@@ -60,87 +82,86 @@ expect(wiggle.is('tablet')).toEqual(false);
 
-  it('wiggle property should be immutable', function() {
-    wiggle.is = 'changed is';
-    wiggle.on = 'changed on';
+  it('should notify listeners on change', () => {
+    // Initial screen size is on desktop
+    wiggle.on('desktop', () => counter.onDesktop += 1);
+    wiggle.off('desktop', () => counter.offDesktop += 1);
+    wiggle.on('tablet', () => counter.onTablet += 1);
+    wiggle.off('tablet', () => counter.offTablet += 1);
+    wiggle.on('mobile', () => counter.onMobile += 1);
+    wiggle.off('mobile', () => counter.offMobile += 1);
 
-    expect(wiggle.is).toEqual(jasmine.any(Function));
-    expect(wiggle.on).toEqual(jasmine.any(Function));
+    expect(counter.onDesktop).toEqual(1);
+    expect(counter.offDesktop).toEqual(0);
+    expect(counter.onTablet).toEqual(0);
+    expect(counter.offTablet).toEqual(1);
+    expect(counter.onMobile).toEqual(0);
+    expect(counter.offMobile).toEqual(1);
+
+    // Execute mobile listeners
+    triggerScreenChange('mobile');
+
+    expect(counter.onDesktop).toEqual(1);
+    expect(counter.offDesktop).toEqual(1);
+    expect(counter.onTablet).toEqual(0);
+    expect(counter.offTablet).toEqual(1);
+    expect(counter.onMobile).toEqual(1);
+    expect(counter.offMobile).toEqual(1);
   });
 
-  it('On/Off listeners should be executed on resize', function(done) {
-    var onDesktop = 0;
-    var offDesktop = 0;
-    var onTablet = 0;
-    var offTablet = 0;
-    var onMobile = 0;
-    var offMobile = 0;
-
+  it('on.change/off.change Listeners should be executed on resize', () => {
     // Initial screen size is on desktop
-    wiggle.on('desktop', function() { onDesktop += 1; });
-    wiggle.off('desktop', function() { offDesktop += 1; });
-    wiggle.on('tablet', function() { onTablet += 1; });
-    wiggle.off('tablet', function() { offTablet += 1; });
-    wiggle.on('mobile', function() { onMobile += 1; });
-    wiggle.off('mobile', function() { offMobile += 1; });
+    wiggle.on.change('desktop', () => counter.onDesktop += 1);
+    wiggle.off.change('desktop', () => counter.offDesktop += 1);
 
-    expect(onDesktop).toEqual(1);
-    expect(offDesktop).toEqual(0);
-    expect(onTablet).toEqual(0);
-    expect(offTablet).toEqual(1);
-    expect(onMobile).toEqual(0);
-    expect(offMobile).toEqual(1);
+    // Queue should not be triggered on first screen size
+    expect(counter.onDesktop).toEqual(0);
+    expect(counter.offDesktop).toEqual(0);
 
-    // Set mobile to be active screen and activate resize event
-    mockActiveScreen('mobile');
-    window.dispatchEvent(new Event('resize'));
+    triggerScreenChange('mobile');
 
-    waitResize(function() {
-      expect(onDesktop).toEqual(1);
-      expect(offDesktop).toEqual(1);
-      expect(onTablet).toEqual(0);
-      expect(offTablet).toEqual(1);
-      expect(onMobile).toEqual(1);
-      expect(offMobile).toEqual(1);
+    expect(counter.onDesktop).toEqual(0);
+    expect(counter.offDesktop).toEqual(1);
 
-      done();
-    });
+    triggerScreenChange('desktop');
+    expect(counter.onDesktop).toEqual(1);
+    expect(counter.offDesktop).toEqual(1);
   });
 
-  it('on.change/off.change Listeners should be executed on resize', function(done) {
-    var onDesktop = 0;
-    var offDesktop = 0;
+  it('multiple instances of wiggle should run in parallel', () => {
+    const orientation = Wiggle.init([{
+      name: 'portrait',
+      mediaQuery: '(orientation: portrait)'
+    }, {
+      name: 'landscape',
+      mediaQuery: '(orientation: landscape)'
+    }]);
 
-    // Initial screen size is on desktop
-    wiggle.on.change('desktop', function() { onDesktop += 1; });
-    wiggle.off.change('desktop', function() { offDesktop += 1; });
+    wiggle.on('mobile', () => counter.onMobile += 1);
+    orientation.on('portrait', () => counter.onPortrait += 1);
+    orientation.on('landscape', () => counter.onLandscape += 1);
 
-    // Queue should not be triggered on first screen size
-    expect(onDesktop).toEqual(0);
-    expect(offDesktop).toEqual(0);
+    expect(wiggle.is('desktop')).toEqual(true);
+    expect(orientation.is('landscape')).toEqual(true);
+    expect(orientation.is('portrait')).toEqual(false);
+    expect(orientation.is('desktop')).toEqual(false);
 
-    // Set mobile to be active screen and activate resize event
-    mockActiveScreen('mobile');
-    window.dispatchEvent(new Event('resize'));
+    expect(counter.onLandscape).toEqual(1); // default orientation
+    expect(counter.onPortrait).toEqual(0);
+    expect(counter.onMobile).toEqual(0);
 
-    waitResize(function() {
-      expect(onDesktop).toEqual(0);
-      expect(offDesktop).toEqual(1);
-      // Set desktop to be active screen and activate resize event
-      mockActiveScreen('desktop');
-      window.dispatchEvent(new Event('resize'));
+    triggerScreenChange('mobile');
 
-      waitResize(function() {
-        expect(onDesktop).toEqual(1);
-        expect(offDesktop).toEqual(1);
+    expect(counter.onLandscape).toEqual(1);
+    expect(counter.onPortrait).toEqual(0);
+    expect(counter.onMobile).toEqual(1);
+  });
 
-        // No changes no listeners should be trigered
-        window.dispatchEvent(new Event('resize'));
+  it('should throw invalid configuration error', () => {
+    const errMsg = 'Wiggle: Configuration is invalid. Go to https://github.com/snovakovic/wiggle for more info about configuring wiggle.';
 
-        waitResize(function() {
-          expect(onDesktop).toEqual(1);
-          expect(offDesktop).toEqual(1);
-          done();
-        });
-      });
-    });
+    expect(Wiggle.init).toThrow(new Error(errMsg));
+    expect(() => Wiggle.init([])).toThrow(new Error(errMsg));
+    expect(() => Wiggle.init([{}])).toThrow(new Error(errMsg));
+    expect(() => Wiggle.init([{ name: 'ala' }])).toThrow(new Error(errMsg));
+    expect(() => Wiggle.init([{ mediaQuery: 'test' }])).toThrow(new Error(errMsg));
   });
 });

No alert changes

Improved metrics

Total package byte prevSize

17986

increased by7.36%

Lines of code

328

increased by10.07%

Worsened metrics

Dev dependency count

16

increased by23.08%

No dependency changes