valori di colore RGB/RGBA a goniometro

Question

La Storia:

In diversi luoghi nel nostro codice di base di test abbiamo affermano diversi valori CSS per essere uguale a valori attesi. Di solito, questo è un color, background-color, font proprietà di stile correlate o cursor. Questa domanda riguarda i colori.

Ecco una prova di lavoro di esempio che attualmente passa:

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)"); 
    }); 
}); 

Si controlla che il pulsante Download sul sito AngularJS ha 0, 116, 204, 1 valore RGBA.

Ora, se il colore cambierebbe, il test fallirebbe come, ad esempio:

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

I problemi:

• Come si può vedere, prima di tutto, il l'aspettativa in sé non è del tutto leggibile. A meno che non ci mettiamo un commento vicino, non è ovvio quale colore ci aspettiamo di vedere.

• Inoltre, il messaggio di errore non è informativo. Non è chiaro quale sia il colore reale e quale colore ci aspettiamo di vedere.

la domanda:

E 'possibile migliorare la prova stessa e il messaggio di errore per essere più leggibile e informativo e far funzionare i nomi colore invece di valori di colore RGB/RGBA?

aspettativa desiderata:

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

messaggi di errore desiderati:

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

---

Attualmente, sto pensando di fare un matcher gelsomino personalizzata che sarebbe convertire il valore RGB/RGBA a un oggetto personalizzato Color che manterrebbe l'origine al valore così come determinare il colore più vicino. color Il pacchetto npm sembra molto promettente.

Apprezzerei qualsiasi suggerimento.

Answer 1

goniometro utilizza Jasmine come il suo framework di test di default e fornisce un meccanismo per l'aggiunta personalizzato expectations.

Quindi, si potrebbe fare qualcosa di simile:

nel file di configurazione goniometro:

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 
} 

E per usarlo:

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

Non ho provato questo fuori, ma questa è l'idea di base di ciò che ti serve.

Answer 2

Ho ottenuto una risposta funzionante in base alle raccomandazioni @Andrew e @Manasov.

Così l'aspettativa personalizzato sarebbe come questo:

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; 
     } 
    } 
} 

Abbiamo bisogno di installare prima i pacchetti necessari:

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

In primo luogo abbiamo bisogno di convertire il colore rgb in esadecimale. Inoltre dobbiamo rimuovere l'alfa dal colore per name-that-color in modo che corrisponda a un nome di colore, può essere rimosso dalla conversione hex.

Ora possiamo solo semplice chiamare piace:

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