कोणमापक

Question

में आरजीबी/RGBA रंग मान कहानी:

हमारे परीक्षण codebase में कई स्थानों में हम उम्मीद मूल्यों के बराबर होना करने के लिए अलग सीएसएस मूल्यों पर जोर। आमतौर पर, यह color, background-color, font संबंधित शैली गुण, या cursor है। यह सवाल रंगों से निपटने के बारे में है।

describe("AngularJS home page", function() { 
    beforeEach(function() { 
     browser.get("https://angularjs.org/"); 
    }); 

    it("should show a blue Download button", function() { 
     var downloadButton = element(by.partialLinkText("Download")); 

     expect(downloadButton.getCssValue("background-color")).toEqual("rgba(0, 116, 204, 1)"); 
    }); 
}); 

यह जाँच करता है AngularJS वेबसाइट पर डाउनलोड बटन 0, 116, 204, 1 RGBA मूल्य होता है:

यहाँ एक उदाहरण काम कर परीक्षण है कि वर्तमान में गुजरता है।

अब, अगर रंग बदल जाएगा, परीक्षण के रूप में विफल हो जाएगा, उदाहरण के लिए:

Expected 'rgba(0, 116, 204, 1)' to equal 'rgba(255, 116, 204, 1)'. 

समस्याएं:

• आप देख सकते हैं सब से पहले, उम्मीद खुद को काफी पठनीय नहीं है। जब तक हम इसके पास कोई टिप्पणी नहीं करते, यह स्पष्ट नहीं है कि हम किस रंग को देखने की उम्मीद कर रहे हैं।

• इसके अलावा, त्रुटि संदेश जानकारीपूर्ण नहीं है। यह स्पष्ट नहीं है कि वास्तविक रंग क्या है और हम किस रंग को देखने की उम्मीद कर रहे हैं।

प्रश्न:

इसे सुधारने परीक्षण ही और त्रुटि संदेश अधिक पठनीय और सूचनात्मक होने के लिए और बदले रंग आरजीबी/RGBA महत्व देता की रंग नामों संचालित करने के लिए संभव है?

वांछित उम्मीद:

expect(downloadButton).toHaveBackgroundColor("midnight blue"); 

वांछित त्रुटि संदेश:

Expect 'blue' to equal 'black' 
Expect 'dark grey' to equal 'light sea green' 

---

वर्तमान में, मैं एक कस्टम चमेली मिलानकर्ता कि RGB/RGBA मूल्य बदल जाएगा बनाने के बारे में सोच रहा हूँ एक कस्टम Color ऑब्जेक्ट जो मूल को बनाए रखेगा अल मूल्य के साथ ही निकटतम रंग निर्धारित करें। color एनपीएम पैकेज बहुत ही आशाजनक दिखता है।

किसी भी संकेत की सराहना करेंगे।

Answer 1

प्रोटैक्टर Jasmine डिफ़ॉल्ट रूप से इसके परीक्षण ढांचे के रूप में उपयोग करता है और यह कस्टम expectations जोड़ने के लिए एक तंत्र प्रदान करता है।

अपने चांदा कॉन्फ़िग फ़ाइल में:

तो, आप कुछ इस तरह कर सकता है

var customMatchers = { 
    toHaveBackgroundColor: function(util, customEqualityTesters) { 
     compare: function(actual, expected) { 
     result.pass = util.equals(extractColor(actual), convertToRGB(expected), customEqualityTesters); 
     result.message = 'Expected ' + actual + ' to be color ' + expected'; 
     } 
    } 
} 

jasmine.addMatchers(customMatchers); 

function convertToRGB(color) { 
    // convert a named color to rgb 
} 

function extractColor(domElement) { 
    // extract background color from dom element 
} 

और यह उपयोग करने के लिए:

expect(downloadButton).toHaveBackgroundColor("midnight blue"); 

मैं इस बाहर प्रयास नहीं किया है, लेकिन यह आपको आवश्यक चीज़ों का मूल विचार है।

Answer 2

मुझे @Andrew और @Manasov सिफारिशों के आधार पर एक कामकाजी उत्तर मिला।

तो कस्टम उम्मीद इस तरह होगा:

var nameColor = require('name-that-color/lib/ntc'); 
var rgbHex = require('rgb-hex'); 

toHaveColor: function() { 
    return { 
     compare: function (elem, color) { 
      var result = {}; 
      result.pass = elem.getCssValue("color").then(function(cssColor) { 
       var hexColor = rgbHex(cssColor); 
       var colorName = nameColor.name('#' + hexColor.substring(0, 6).toUpperCase()); 
       result.message = "Expect '" + colorName[1] + "' to equal '" + color + "'"; 
       return colorName[1] === color; 
      }); 
      return result; 
     } 
    } 
} 

हम पहले आवश्यक संकुल स्थापित करने की आवश्यकता:

npm install name-that-color 
npm install rgb-hex 

हम पहले हेक्स में rgb रंग परिवर्तित करने के लिए की जरूरत है। इसके अलावा हमें name-that-color के लिए रंग से अल्फा को वास्तव में रंग के नाम से मिलान करने के लिए निकालना होगा, इसे hex रूपांतरण से हटाया जा सकता है।

अब हम सिर्फ सरल इसे पसंद कॉल कर सकते हैं:

expect(downloadButton).toHaveColor("midnight blue");