помощник для получения переопределенного стиля в ферменте - PullRequest
Новая
       22

помощник для получения переопределенного стиля в ферменте

0 голосов
/ 17 июня 2019

Мы создаем оболочки для пользовательского интерфейса материала и настраиваем стили с помощью CSS в JS с помощью makeStyles из @ material-ui / styles. Нам нужно убедиться, что применяются правильные стили, поэтому мы создаем для них модульный тест. Проблема в том, что когда мы получаем computedStyle для элемента, мы получаем исходное значение CSS, а не окончательное значение CSS (переопределение).

Я попытался смонтировать элемент с помощью фермента и получить узел элемента с помощью getDomNode, а затем получить вычисленные стили с использованием getDOMNodeComputedStyle. 

const wrapper = createNumericalStepper(getProps2());

const labelNode = wrapper.find({
    'data-quid': 'Label-NumericalStepperLabel-1',
}).first();

const color = getDOMNodeComputedStyle(labelNode.getDOMNode(), 'color');
expect(color).to.equal('green');

AssertionError: expected 'rgba(0, 0, 0, 0.54)' to equal 'green'

====================================== 

export function getDOMNodeComputedStyle(domNode, cssRule) {

let strCssRule = cssRule;
let strValue = '';

if (document.defaultView && document.defaultView.getComputedStyle) {

    strValue = document.defaultView
      .getComputedStyle(domNode, null)
      .getPropertyValue(cssRule);
  } else if (domNode.currentStyle) {
    // Checks inlie styles
    strCssRule = strCssRule.replace(/-\(\w)/g, (strMatch, p1) => {
      return p1.toUpperCase();
    });
    strValue = domNode.currentStyle[strCssRule];
  }
  return strValue;
}

export default {
  getDOMNodeComputedStyle,
};
...