Значения цветов RGB / RGBA в Транспортире

История:

В нескольких местах нашей тестовой кодовой базы мы утверждаем, что различные значения CSS равны ожидаемым значениям. Как правило, это 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)'.

Задачи:

  • Как видите, во-первых, само ожидание не вполне читаемо. Пока мы не поместим комментарий рядом с ним, не очевидно, какой цвет мы ожидаем увидеть.

  • Кроме того, сообщение об ошибке не является информативным. Неясно, что такое реальный цвет и какой цвет мы ожидаем увидеть.

Вопрос:

Можно ли улучшить проверьте себя и сообщение об ошибке, чтобы быть более читаемым и информативным и работать названия цветов вместо цвета RGB / RGBA значения ?

желаемое ожидание : 

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

желаемые сообщения об ошибках : 

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

В настоящее время я думаю о создании пользовательского сопоставления jasmine, которое преобразует значение RGB/RGBA в пользовательский объект Color, который сохранит исходное значение, а также определит ближайший цвет. color пакет npm выглядит очень многообещающе.

Был бы признателен за любые намеки.

2 11
javascript css jasmine rgba protractor

2 ответа:

Транспортир используетJasmine в качестве основы тестирования по умолчанию и обеспечивает механизм добавления пользовательскихожиданий .

Итак, вы можете сделать что-то вроде этого:

В конфигурационном файле транспортира: 

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");
Я не пробовал этого, но это основная идея того, что вам нужно.
8

Я получил рабочий ответ, основанный на рекомендациях @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");
1