gradient-parser/spec/parser.spec.js

'use strict';

var expect = require('expect.js');
var gradients = require('index');

// [
//   {
//     type: 'linear-gradient',
//     orientation: {
//       type: 'directional',
//       value: 'right'
//     },
//     colorStops: [
//       {
//         type: 'literal',
//         value: 'transparent',
//         length: {
//           value: '10',
//           type: 'px'
//         }
//       },
//       {
//         type: 'hex',
//         value: 'c2c2c2',
//         length: {
//           value: '10',
//           type: 'px'
//         }
//       }
//     ]
//   }
// ]

describe('gradient-parser.js', function () {
  var ast,
    subject;

  it('should exist', function () {
    expect(typeof gradients.parse).to.equal('function');
  });

  describe('error cases', function() {
    it('one more comma in definitions', function() {
      expect(function() {
        gradients.parse('linear-gradient(red, blue),');
      }).to.throwException(/One extra comma/);
    });

    it('one more comma in colors', function() {
      expect(function() {
        gradients.parse('linear-gradient(red, blue,)');
      }).to.throwException(/Expected color definition/);
    });

    it('invalid input', function() {
      expect(function() {
        gradients.parse('linear-gradient(red, blue) aaa');
      }).to.throwException(/Invalid input not EOF/);
    });

    it('missing open call', function() {
      expect(function() {
        gradients.parse('linear-gradient red, blue');
      }).to.throwException(/Missing \(/);
    });

    it('missing comma before color stops', function() {
      expect(function() {
        gradients.parse('linear-gradient(to right red, blue)');
      }).to.throwException(/Missing comma before color stops/);
    });

    it('missing color stops', function() {
      expect(function() {
        gradients.parse('linear-gradient(to right, )');
      }).to.throwException(/Expected color definition/);
    });

    it('missing closing call', function() {
      expect(function() {
        gradients.parse('linear-gradient(to right, red, blue aaa');
      }).to.throwException(/Missing \)/);
    });
  });

  describe('when parsing a simple definition', function() {
    beforeEach(function() {
      ast = gradients.parse('linear-gradient(red, blue)');
      subject = ast[0];
    });

    it('should get the gradient type', function () {
      expect(subject.type).to.equal('linear-gradient');
    });

    it('should get the orientation', function() {
      expect(subject.orientation).to.be(undefined);
    });

    describe('colors', function() {
      it('should get all colors', function() {
        expect(subject.colorStops).to.have.length(2);
      });

      describe('first color', function() {
        beforeEach(function() {
          subject = subject.colorStops[0];
        });

        it('should get literal type', function() {
          expect(subject.type).to.equal('literal');
        });

        it('should get the right color', function() {
          expect(subject.value).to.equal('red');
        });
      });

      describe('second color', function() {
        beforeEach(function() {
          subject = subject.colorStops[1];
        });

        it('should get literal type', function() {
          expect(subject.type).to.equal('literal');
        });

        it('should get the right color', function() {
          expect(subject.value).to.equal('blue');
        });
      });
    });
  });

  ['px', 'em', '%'].forEach(function(metric) {
    describe('parse color stop for metric '+ metric, function() {
      beforeEach(function() {
        ast = gradients.parse('linear-gradient(blue 10' + metric + ', transparent)');
        subject = ast[0];
      });

      describe('the first color', function() {
        beforeEach(function() {
          subject = subject.colorStops[0];
        });

        it('should have the length', function() {
          expect(subject.length.type).to.equal(metric);
          expect(subject.length.value).to.equal('10');
        });
      });
    });
  });

  [
    {type: 'angular', unparsedValue: '145deg', value: '145'},
    {type: 'directional', unparsedValue: 'to left top', value: 'left top'}
  ].forEach(function(orientation) {
    describe('parse orientation ' + orientation.type, function() {
      beforeEach(function() {
        ast = gradients.parse('linear-gradient(' + orientation.unparsedValue + ', blue, green)');
        subject = ast[0].orientation;
      });

      it('should parse value', function() {
        expect(subject.type).to.equal(orientation.type);
        expect(subject.value).to.equal(orientation.value);
      });
    });
  });

  [
    {type: 'literal', unparsedValue: 'red', value: 'red'},
    {type: 'hex', unparsedValue: '#c2c2c2', value: 'c2c2c2'},
    {type: 'rgb', unparsedValue: 'rgb(243, 226, 195)', value: ['243', '226', '195']},
    {type: 'rgba', unparsedValue: 'rgba(243, 226, 195)', value: ['243', '226', '195']}
  ].forEach(function(color) {
    describe('parse color type '+ color.type, function() {
      beforeEach(function() {
          ast = gradients.parse('linear-gradient(12deg, ' + color.unparsedValue + ', blue, green)');
          subject = ast[0].colorStops[0];
        });

        it('should parse value', function() {
          expect(subject.type).to.equal(color.type);
          expect(subject.value).to.eql(color.value);
        });
    });
  });
});