Giter Club home page Giter Club logo

Comments (7)

rosenfeld avatar rosenfeld commented on August 23, 2024

Here is how I added it to my Rails Asset Pipeline:

# =require ./jasmine-jquery

jasmine.JQuery.matchersClass.toHaveCss = (css)->
  (return false unless @actual.css(prop) is value) for prop, value of css
  true

from jasmine-jquery.

travisjeffery avatar travisjeffery commented on August 23, 2024

Yeah I've been meaning to do this actually, will do it by the end of today for sure.

from jasmine-jquery.

nicoladj77 avatar nicoladj77 commented on August 23, 2024

When you check colors not all browsers return the same values, i had to use this

jasmine.JQuery.matchersClass.toHaveCss = function( css ) {
    var colorToHex = function( color ) {
        if ( color.substr(0, 1) === '#' ) {
            return color;
        }
        var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);

        var red = parseInt(digits[2]);
        var green = parseInt(digits[3]);
        var blue = parseInt(digits[4]);

        var rgb = blue | (green << 8) | (red << 16);
        return digits[1] + '#' + rgb.toString(16);
    };
    var convertToHexIfRgb = function( value_to_check ) {
        if( value_to_check.substr(0, 4) === 'rgb(' ) {
            return colorToHex( value_to_check );
        }
        return value_to_check;
    };
    for( var prop in css ) {
        var actual_prop = convertToHexIfRgb( this.actual.css( prop ) ).toUpperCase();
        var expected_prop = convertToHexIfRgb( css[prop] ).toUpperCase();
        if( actual_prop !== expected_prop ) {
            return false;
        }
    }
    return true;
}

To get things working

from jasmine-jquery.

rosenfeld avatar rosenfeld commented on August 23, 2024

With regards to color, that is true. Usually what I do is something like:

  blue = $('<div style="color: blue"/>').css 'color' # or something similar using some existing element as reference...
  expect(someElement).toHaveCss color: blue

from jasmine-jquery.

rosenfeld avatar rosenfeld commented on August 23, 2024

different browsers are not consistent on how to return colors but they always return it in the same representation :)

from jasmine-jquery.

travisjeffery avatar travisjeffery commented on August 23, 2024

I've pushed a simple solution, didn't want to introduce something so complex initially, @nicoladj77 make a separate ticket on handling colors and we can discuss.

Thanks.

from jasmine-jquery.

rosenfeld avatar rosenfeld commented on August 23, 2024

Thank you, @travisjeffery :)

from jasmine-jquery.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.