grapesjs/test/specs/parser/model/ParserCss.js

var path = 'Parser/';
define([path + 'model/ParserCss',],
  function(ParserCss) {

    return {
      run : function(){

        describe('ParserCss', function() {
          var obj;

          beforeEach(function () {
            obj = new ParserCss();
          });

          afterEach(function () {
            delete obj;
          });

          it('Parse selector', function() {
            var str = '.test';
            var result = [['test']];
            obj.parseSelector(str).should.deep.equal(result);
          });

          it('Parse selectors', function() {
            var str = '.test1, .test1.test2, .test2.test3';
            var result = [['test1'], ['test1', 'test2'], ['test2', 'test3']];
            obj.parseSelector(str).should.deep.equal(result);
          });

          it('Ignore not valid selectors', function() {
            var str = '.test1.test2, .test2 .test3, div > .test4, #test.test5, .test6';
            var result = [['test1', 'test2'], ['test6']];
            obj.parseSelector(str).should.deep.equal(result);
          });

          it('Parse selectors with state', function() {
            var str = '.test1. test2, .test2>test3, .test4.test5:hover';
            var result = [['test4', 'test5:hover']];
            obj.parseSelector(str).should.deep.equal(result);
          });

          it('Parse simple rule', function() {
            var str = ' .test1 {color:red; width: 50px  }';
            var result = {
              selectors: ['test1'],
              style: {
                color: 'red',
                width: '50px',
              }
            };
            obj.parse(str).should.deep.equal(result);
          });

          it('Parse rule with more selectors', function() {
            var str = ' .test1.test2 {color:red; test: value}';
            var result = {
              selectors: ['test1', 'test2'],
              style: { color: 'red'}
            };
            obj.parse(str).should.deep.equal(result);
          });

          it('Parse same rule with more selectors', function() {
            var str = ' .test1.test2, .test3{ color:red }';
            var result = [{
              selectors: ['test1', 'test2'],
              style: { color: 'red'}
            },{
              selectors: ['test3'],
              style: { color: 'red'}
            }];
            obj.parse(str).should.deep.equal(result);
          });

          it('Parse more rules', function() {
            var str = ' .test1.test2, .test3{ color:red } .test4, .test5.test6{ width:10px }';
            var result = [{
              selectors: ['test1', 'test2'],
              style: { color: 'red'}
            },{
              selectors: ['test3'],
              style: { color: 'red'}
            },{
              selectors: ['test4'],
              style: { width: '10px'}
            },{
              selectors: ['test5', 'test6'],
              style: { width: '10px'}
            }];
            obj.parse(str).should.deep.equal(result);
          });

          it('Parse rule with state', function() {
            var str = ' .test1.test2:hover{ color:red }';
            var result = {
              selectors: ['test1', 'test2'],
              style: { color: 'red'},
              state: 'hover'
            };
            obj.parse(str).should.deep.equal(result);
          });

        });

      }
    };

});