all files / tests/specs/class-style/ class.spec.js

80.95% Statements 17/21
100% Branches 0/0
100% Functions 5/5
80.95% Lines 17/21
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38                                         
import { resolve } from 'path';
import { renderSFCModule } from 'utils';
 
function checkColors(nodeList) {
  for (let i = 0, l = nodeList.length; i < l; i ++ ) {
    const computedStyle = getComputedStyle(nodeList[i]);
    computedStyle.color.should.be.colored(nodeList[i].dataset.color);
  }
}
 
describe('CSS class', () => {
  it('class with identifier', () => {
    const container = renderSFCModule(require('./class-with-identifier.html'));
    const testCaseDOM = container.querySelector('#klass');
    const computedStyle = getComputedStyle(testCaseDOM);
 
    computedStyle.color.should.be.colored('red');
    computedStyle.backgroundColor.should.be.colored('green');
    computedStyle.fontSize.should.equal('30px');
  });
 
  it('class with object stynax', () => {
    const container = renderSFCModule(require('./class-object-stynax.html'));
    const colorfulDOMs = container.querySelectorAll('[data-color]');
    checkColors(colorfulDOMs);
  });
 
  it('class with array stynax', () => {
    const container = renderSFCModule(require('./class-array-stynax.html'));
    const testCaseDOM = container.querySelector('#klass');
    const computedStyle = getComputedStyle(testCaseDOM);
 
    computedStyle.color.should.be.colored('yellow');
    computedStyle.backgroundColor.should.be.colored('red');
  });
});