Merge pull request #19 from streamich/test/prod

docs: cosmetic improvements

Author: streamich

addon/__tests__/index.test.js

@@ -0,0 +1,169 @@
+/* eslint-disable */
+'use strict';
+
+var create = require('../../index').create;
+
+function findCssRuleAndDelete (selector) {
+    var sheets = document.styleSheets;
+
+    for (var i = 0; i < sheets.length; i++) {
+        var sheet = sheets[i];
+
+        if (!sheet.cssRules) continue;
+
+        for (var j = 0; j < sheet.cssRules.length; j++) {
+            var rule = sheet.cssRules[j];
+
+            if (rule.selectorText === selector) {
+                sheet.deleteRule(j);
+
+                return rule;
+            }
+        }
+    }
+
+    return null;
+}
+
+describe('nano-css', function () {
+    it('exists', function () {
+        expect(typeof create).toBe('function');
+    });
+
+    it('can create renderer', function () {
+        var nano = create();
+
+        expect(typeof nano).toBe('object');
+        expect(typeof nano.putRaw).toBe('function');
+        expect(typeof nano.put).toBe('function');
+    });
+
+    it('default prefix is "_"', function () {
+        expect(create().pfx).toBe('_');
+    });
+
+    it('default assign function is Object.assign', function () {
+        expect(create().assign).toBe(Object.assign);
+    });
+
+    it('default stringify function is JSON.stringify', function () {
+        expect(create().stringify).toBe(JSON.stringify);
+    });
+
+    it('has no default hyperscript function', function () {
+        expect(create().h).toBe(undefined);
+    });
+
+    it('can set configuration', function () {
+        var assign = function () {
+            return Object.assign.apply(Object, arguments);
+        };
+        var h = function () {};
+        var stringify = function () {};
+        var nano = create({
+            pfx: 'hello-',
+            h: h,
+            assign: assign,
+            stringify: stringify
+        });
+
+        expect(nano.pfx).toBe('hello-');
+        expect(nano.h).toBe(h);
+        expect(nano.assign).toBe(assign);
+        expect(nano.stringify).toBe(stringify);
+    });
+
+    describe('.put()', function () {
+        it('inserts CSS', function () {
+            var nano = create();
+
+            nano.put('.foo', {
+                color: 'red'
+            });
+
+            var rule = findCssRuleAndDelete('.foo');
+
+            expect(typeof rule).toBe('object');
+            expect(rule.style.color).toBe('red');
+        });
+
+        it('puts many declarations', function () {
+            var nano = create();
+
+            nano.put('.foo2', {
+                color: 'red',
+                textDecoration: 'underline',
+                'border-radius': '5px',
+            });
+
+            var rule = findCssRuleAndDelete('.foo2');
+
+            expect(typeof rule).toBe('object');
+            expect(rule.style.color).toBe('red');
+            expect(rule.style['text-decoration']).toBe('underline');
+            expect(rule.style['border-radius']).toBe('5px');
+        });
+
+        it('supports class name nesting', function () {
+            var nano = create();
+
+            nano.put('.foo3', {
+                '.nested' : {
+                    color: 'blue',
+                }
+            });
+
+            var rule = findCssRuleAndDelete('.foo3 .nested');
+
+            expect(typeof rule).toBe('object');
+            expect(rule.style.color).toBe('blue');
+        });
+
+        it('supports pseudo selectors', function () {
+            var nano = create();
+
+            nano.put('.foo3', {
+                ':hover' : {
+                    color: 'green',
+                }
+            });
+
+            var rule = findCssRuleAndDelete('.foo3:hover');
+
+            expect(typeof rule).toBe('object');
+            expect(rule.style.color).toBe('green');
+        });
+
+        it('can insert global styles', function () {
+            var nano = create();
+
+            nano.put('', {
+                '.global' : {
+                    color: 'green',
+                }
+            });
+
+            var rule = findCssRuleAndDelete('.global');
+
+            expect(typeof rule).toBe('object');
+            expect(rule.style.color).toBe('green');
+        });
+
+        it('can insert @media queries', function () {
+            var nano = create();
+            nano.putRaw = jest.fn();
+
+            nano.put('', {
+                '@media screen': {
+                    '.global' : {
+                        color: 'green',
+                    }
+                }
+            });
+
+
+            expect(nano.putRaw).toHaveBeenCalledTimes(1);
+            expect(nano.putRaw.mock.calls[0][0].replace(/ /g, '')).toBe('@mediascreen{.global{color:green;}}');
+        });
+    });
+});

addon/__tests__/rule.test.js

@@ -0,0 +1,57 @@
+/* eslint-disable */
+'use strict';
+
+var create = require('../../index').create;
+var addonRule = require('../../addon/rule').addon;
+
+function createNano (config) {
+    var nano = create(config);
+
+    addonRule(nano);
+
+    return nano;
+};
+
+describe('rule()', function () {
+    it('installs rule() method', function () {
+        var nano = create();
+
+        expect(typeof nano.rule).toBe('undefined');
+
+        addonRule(nano);
+
+        expect(typeof nano.rule).toBe('function');
+    });
+
+    it('puts CSS styles', function () {
+        var nano = createNano({
+            pfx: 'test-'
+        });
+
+        nano.put = jest.fn();
+
+        var classNames = nano.rule({
+            color: 'red'
+        }, 'foobar');
+
+        expect(nano.put).toHaveBeenCalledTimes(1);
+        expect(nano.put).toHaveBeenCalledWith('.test-foobar', {color: 'red'});
+        expect(classNames).toBe(' test-foobar');
+    });
+
+    it('generates class name automatically if not specified', function () {
+        var nano = createNano({
+            pfx: 'test-'
+        });
+
+        nano.put = jest.fn();
+
+        var css = {color: 'red'};
+        var classNames = nano.rule(css);
+        var computed = 'test-' + nano.hash(css);
+
+        expect(nano.put).toHaveBeenCalledTimes(1);
+        expect(nano.put).toHaveBeenCalledWith('.' + computed, css);
+        expect(classNames).toBe(' ' + computed);
+    });
+});

addon/__tests__/sheet.test.js

@@ -0,0 +1,74 @@
+/* eslint-disable */
+'use strict';
+
+var create = require('../../index').create;
+var addonRule = require('../../addon/rule').addon;
+var addonSheet = require('../../addon/sheet').addon;
+
+function createNano (config) {
+    var nano = create(config);
+
+    addonRule(nano);
+    addonSheet(nano);
+
+    return nano;
+};
+
+describe('sheet()', function () {
+    it('installs sheet() method', function () {
+        var nano = create();
+
+        expect(typeof nano.sheet).toBe('undefined');
+
+        addonRule(nano);
+        addonSheet(nano);
+
+        expect(typeof nano.sheet).toBe('function');
+    });
+
+    it('returns a styles object', function () {
+        var nano = createNano();
+        var styles = nano.sheet({
+            input: {
+                color: 'red',
+            },
+            button: {
+                color: 'blue'
+            }
+        });
+
+        expect(typeof styles.input).toBe('string');
+        expect(typeof styles.button).toBe('string');
+    });
+
+    it('inserts a rule only when first accessed', function () {
+        var nano = createNano();
+
+        nano.rule = jest.fn();
+
+        var styles = nano.sheet({
+            input: {
+                color: 'red',
+            },
+            button: {
+                color: 'blue'
+            }
+        });
+
+        expect(nano.rule).toHaveBeenCalledTimes(0);
+
+        styles.input;
+
+        expect(nano.rule).toHaveBeenCalledTimes(1);
+
+        styles.button;
+
+        expect(nano.rule).toHaveBeenCalledTimes(2);
+
+        expect(nano.rule.mock.calls[0][0]).toEqual({color: 'red'});
+        expect(nano.rule.mock.calls[1][0]).toEqual({color: 'blue'});
+
+        expect(typeof nano.rule.mock.calls[0][1]).toBe('string');
+        expect(typeof nano.rule.mock.calls[1][1]).toBe('string');
+    });
+});

addon/animate/fadeIn.js

@@ -0,0 +1,22 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
+    }
+
+    renderer.put('', {
+        '@keyframes fadeIn': {
+            from: {
+                opacity: 0,
+            },
+            to: {
+                opacity: 1,
+            }
+        },
+
+        '.fadeIn': {
+            animationName: 'fadeIn',
+        }
+    });
+};