test.js
'use strict';
const loader = require('./index.js');
const invalidInput = 'div { background=white; }';
const simpleInput = 'div { background: white; }';
const simpleOutput = 'div{background:#fff}';
const complexInput = 'div { background: white; } span { background: blue; } ul { background: white; }';
const complexOutput = 'div{background:#fff}span{background:#00f}ul{background:#fff}';
const restructuredOutput = 'div,ul{background:#fff}span{background:#00f}';
const commentsInput = '/*! comment */ div { /*! comment */ background: white; }';
let globalOutput = [];
console.error = function(message) {
globalOutput.push(message);
};
let testLoader = function(input, output, options) {
options = typeof options !== 'undefined' ? options : {};
expect(
loader.call(options, input)
).toEqual(output);
};
let testLoaderOutput = function(input, output, options) {
options = typeof options !== 'undefined' ? options : {};
globalOutput = [];
loader.call(options, input);
expect(globalOutput).toContain(output);
};
describe('csso-loader', function() {
it('should minimize css', function() {
testLoader(simpleInput, simpleOutput);
});
it('should return restructured css by default', function() {
testLoader(complexInput, restructuredOutput);
});
it('should return original css in case of error input', function() {
testLoader(invalidInput, invalidInput);
});
it('should throw error to console in case of error input', function() {
testLoaderOutput(
invalidInput,
' \nCssSyntaxError : Colon is expected\nLine: 1\nColumn: 17'
);
});
it('should return debug information in case of debug parameter', function() {
testLoaderOutput(
simpleInput,
'## parsing done in %d ms\n', {
query: '?debug'
}
);
});
it('should return debug information in case of debug equals true in csso options', function() {
testLoaderOutput(
simpleInput,
'## compress done in %d ms\n', {
options: {
csso: {
debug: true
}
}
}
);
});
it('should return more debug information in case of debug equals 3 in csso options', function() {
testLoaderOutput(
simpleInput,
'[0.000s] clean\n div{background:white}\n', {
options: {
csso: {
debug: 3
}
}
}
);
});
it('should overwrite debug information in csso options over query debug parameter', function() {
globalOutput = [];
loader.call({
query: '?debug',
options: {
csso: {
debug: false
}
}
}, simpleInput);
expect(globalOutput).toHaveLength(0);
});
it('should return non-restructured css in case of -restructure parameter', function() {
testLoader(
complexInput,
complexOutput, {
query: '?-restructure'
}
);
});
it('should return non-restructured css in case of restructure equals false in csso options', function() {
testLoader(
complexInput,
complexOutput, {
options: {
csso: {
restructure: false
}
}
}
);
});
it('should overwrite restructure information in csso options over query restructure parameter', function() {
testLoader(
complexInput,
restructuredOutput, {
query: '?-restructure',
options: {
csso: {
restructure: true
}
}
}
);
});
it('should cut unnecessary tags, ids and classes from css due to usage data in csso options', function() {
testLoader(
'div { background: white; } span { background: blue; } #id1 { background: white; } #id2 { background: red; } .class1 { background: blue; } .class2 { background: green; }',
'.class1,span{background:#00f}#id1{background:#fff}', {
options: {
csso: {
usage: {
tags: ['span'],
ids: ['id1'],
classes: ['class1']
}
}
}
}
);
});
it('should return optimized css due to scopes in usage data in csso options', function() {
testLoader(
'.class1 { background: white; } .class2 { font-size: 20px; } .class3 { background: white; } .class4 { font-size: 25px; }',
'.class1,.class3{background:#fff}.class2{font-size:20px}.class4{font-size:25px}', {
options: {
csso: {
usage: {
scopes: [
['class1', 'class2'],
['class3', 'class4']
]
}
}
}
}
);
});
it('should return debug information in logger function in csso options', function() {
testLoaderOutput(
simpleInput,
'initialMergeRuleset', {
options: {
csso: {
logger: function(stage, data) {
console.error(stage, data);
}
}
}
}
);
});
it('should leave exclamation comments in optimized css by default', function() {
testLoader(
'/*! comment */ div { background: white; } /*! comment */ /* comment */',
'/*! comment */\ndiv{background:#fff}\n/*! comment */'
);
});
it('should leave only first exclamation comment in optimized css due to first-exclamation in comments in csso options', function() {
testLoader(
commentsInput,
'/*! comment */\ndiv{background:#fff}', {
options: {
csso: {
comments: 'first-exclamation'
}
}
}
);
});
it('should cut all comments in optimized css due to false in comments in csso options', function() {
testLoader(
commentsInput,
simpleOutput, {
options: {
csso: {
comments: false
}
}
}
);
});
it('should cut all comments in optimized css in case of -comments parameter', function() {
testLoader(
commentsInput,
simpleOutput, {
query: '?-comments'
}
);
});
});