prevent test cross contamination, disable controls on all non control…

… test mixers, add live control tests

.jshintrc

@@ -17,6 +17,7 @@
         "define",
         "console",
         "describe",
+        "after",
         "it"
     ]
 }

dist/mixitup.js

@@ -1,6 +1,6 @@
 /**!
  * MixItUp v3.0.0-beta
- * Build 5c984eb0-9884-4637-b4ba-2a51d2740f43
+ * Build a26f8f91-cc46-4999-9186-7cd1b220a294
  *
  * @copyright Copyright 2014-2016 KunkaLabs Limited.
  * @author    KunkaLabs Limited.

npm-debug.log

@@ -0,0 +1,40 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'test' ]
+2 info using npm@2.15.5
+3 info using node@v4.4.5
+4 verbose run-script [ 'pretest', 'test', 'posttest' ]
+5 info pretest mixitup@3.0.0-beta
+6 info test mixitup@3.0.0-beta
+7 verbose unsafe-perm in lifecycle true
+8 info mixitup@3.0.0-beta Failed to exec test script
+9 verbose stack Error: mixitup@3.0.0-beta test: `mocha ./tests/unit/main.js`
+9 verbose stack Exit status 1
+9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:217:16)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at EventEmitter.emit (events.js:172:7)
+9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at ChildProcess.emit (events.js:172:7)
+9 verbose stack     at maybeClose (internal/child_process.js:827:16)
+9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
+10 verbose pkgid mixitup@3.0.0-beta
+11 verbose cwd /Users/patrickkunka/Sites/mixitup
+12 error Darwin 14.5.0
+13 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "test"
+14 error node v4.4.5
+15 error npm  v2.15.5
+16 error code ELIFECYCLE
+17 error mixitup@3.0.0-beta test: `mocha ./tests/unit/main.js`
+17 error Exit status 1
+18 error Failed at the mixitup@3.0.0-beta test script 'mocha ./tests/unit/main.js'.
+18 error This is most likely a problem with the mixitup package,
+18 error not with npm itself.
+18 error Tell the author that this fails on your system:
+18 error     mocha ./tests/unit/main.js
+18 error You can get information on how to open an issue for this project with:
+18 error     npm bugs mixitup
+18 error Or if that isn't available, you can get their info via:
+18 error
+18 error     npm owner ls mixitup
+18 error There is likely additional logging output above.
+19 verbose exit [ 1, true ]

tests/mock/dom.js

@@ -47,6 +47,10 @@ module.exports = {
         '</div>');
     },
 
+    getFilterControl() {
+        return renderElement('<div class="mixitup-control" data-filter=".category-d">Category D</div>');
+    },
+
     getTotalWhitespace(html) {
         let re = /[>? ]( )[<? ]/g;
         let totalWhitespace = 0;

tests/unit/controls-filter.js

@@ -0,0 +1,301 @@
+'use strict';
+
+require('jsdom-global')();
+
+const chai    = require('chai');
+const dom     = require('../mock/dom');
+const mixitup = require('../../dist/mixitup.js');
+
+chai.use(require('chai-shallow-deep-equal'));
+chai.use(require('chai-as-promised'));
+
+describe('Controls', () => {
+    describe('#filter (static)', () => {
+        let container = dom.getContainer();
+        let controls = dom.getFilterControls();
+
+        container.insertBefore(controls, container.children[0]);
+
+        document.body.appendChild(container);
+
+        let mixer = mixitup(container);
+
+        after(() => mixer.destroy());
+
+        it('should detect nested filter controls and set active states upon instantiation', () => {
+            let filter = controls.querySelector('[data-filter="all"]');
+
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should map filter controls with value "none" to the selector ""', () => {
+            let filter = controls.querySelector('[data-filter="none"]');
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '');
+            chai.assert.equal(state.totalShow, 0);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should map filter controls with value "all" to the target selector', () => {
+            let filter = controls.querySelector('[data-filter="all"]');
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '.mix');
+            chai.assert.equal(state.totalHide, 0);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a selector value', () => {
+            let filter = controls.querySelector('[data-filter=".category-a"]');
+            let totalMatching = container.querySelectorAll('.category-a').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '.category-a');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a compound OR selector', () => {
+            let filter = controls.querySelector('[data-filter=".category-a, .category-b"]');
+            let totalMatching = container.querySelectorAll('.category-a, .category-b').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '.category-a, .category-b');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a compound AND selector', () => {
+            let filter = controls.querySelector('[data-filter=".category-a.category-c"]');
+            let totalMatching = container.querySelectorAll('.category-a.category-c').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '.category-a.category-c');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with an attribute selector value', () => {
+            let filter = controls.querySelector('.mixitup_control__attr-a');
+            let totalMatching = container.querySelectorAll('[data-category="a"]').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '[data-category="a"]');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with an attribute selector value', () => {
+            let filter = controls.querySelector('.mixitup_control__attr-a');
+            let totalMatching = container.querySelectorAll('[data-category="a"]').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '[data-category="a"]');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a compound OR attribute selector value', () => {
+            let filter = controls.querySelector('.mixitup_control__attr-a-or-b');
+            let totalMatching = container.querySelectorAll('[data-category="a"], [data-category="b"]').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '[data-category="a"], [data-category="b"]');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a compound AND attribute selector value', () => {
+            let filter = controls.querySelector('.mixitup_control__attr-a-and-c');
+            let totalMatching = container.querySelectorAll('[data-category="a"][data-category="c"]').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '[data-category="a"][data-category="c"]');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+    });
+
+    describe('#filter (live)', () => {
+        let container = dom.getContainer();
+        let controls = dom.getFilterControls();
+
+        container.insertBefore(controls, container.children[0]);
+
+        document.body.innerHTML = '';
+
+        document.body.appendChild(container);
+
+        let mixer = mixitup(container, {
+            controls: {
+                live: true
+            }
+        });
+
+        after(() => mixer.destroy());
+
+        it('should detect nested filter controls and set active states upon instantiation', () => {
+            let filter = controls.querySelector('[data-filter="all"]');
+
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should map filter controls with value "none" to the selector ""', () => {
+            let filter = controls.querySelector('[data-filter="none"]');
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '');
+            chai.assert.equal(state.totalShow, 0);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should map filter controls with value "all" to the target selector', () => {
+            let filter = controls.querySelector('[data-filter="all"]');
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '.mix');
+            chai.assert.equal(state.totalHide, 0);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a selector value', () => {
+            let filter = controls.querySelector('[data-filter=".category-a"]');
+            let totalMatching = container.querySelectorAll('.category-a').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '.category-a');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a compound OR selector', () => {
+            let filter = controls.querySelector('[data-filter=".category-a, .category-b"]');
+            let totalMatching = container.querySelectorAll('.category-a, .category-b').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '.category-a, .category-b');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a compound AND selector', () => {
+            let filter = controls.querySelector('[data-filter=".category-a.category-c"]');
+            let totalMatching = container.querySelectorAll('.category-a.category-c').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '.category-a.category-c');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with an attribute selector value', () => {
+            let filter = controls.querySelector('.mixitup_control__attr-a');
+            let totalMatching = container.querySelectorAll('[data-category="a"]').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '[data-category="a"]');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with an attribute selector value', () => {
+            let filter = controls.querySelector('.mixitup_control__attr-a');
+            let totalMatching = container.querySelectorAll('[data-category="a"]').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '[data-category="a"]');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a compound OR attribute selector value', () => {
+            let filter = controls.querySelector('.mixitup_control__attr-a-or-b');
+            let totalMatching = container.querySelectorAll('[data-category="a"], [data-category="b"]').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '[data-category="a"], [data-category="b"]');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should accept filter controls with a compound AND attribute selector value', () => {
+            let filter = controls.querySelector('.mixitup_control__attr-a-and-c');
+            let totalMatching = container.querySelectorAll('[data-category="a"][data-category="c"]').length;
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '[data-category="a"][data-category="c"]');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+
+        it('should allow new controls to be added', () => {
+            let filter = dom.getFilterControl();
+            let totalMatching = container.querySelectorAll('.category-d').length;
+
+            controls.appendChild(filter);
+
+            filter.click();
+
+            let state = mixer.getState();
+
+            chai.assert.equal(state.activeFilter.selector, '.category-d');
+            chai.assert.equal(state.totalShow, totalMatching);
+            chai.assert.isOk(filter.matches('.mixitup-control-active'));
+        });
+    });
+});