lucid-ui

<!doctype html> <html lang="en"> <head> <title>Code coverage report for util/generic-tests.jsx</title> <meta charset="utf-8" /> <link rel="stylesheet" href="../prettify.css" /> <link rel="stylesheet" href="../base.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type='text/css'> .coverage-summary .sorter { background-image: url(../sort-arrow-sprite.png); } </style> </head> <body> <div class='wrapper'> <div class='pad1'> <h1> <a href="../index.html">All files</a> / <a href="index.html">util</a> generic-tests.jsx </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 100% Statements 74/74 </div> <div class='fl pad1y space-right2'> 100% Branches 15/15 </div> <div class='fl pad1y space-right2'> 100% Functions 32/32 </div> <div class='fl pad1y space-right2'> 100% Lines 71/71 </div> </div> </div> <div class='status-line high'></div> <pre><table class="coverage"> <tr><td class="line-count quiet">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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175</td><td class="line-coverage quiet">                                    480x     120x 120x 120x     120x 120x     120x   120x 120x 120x     120x 120x 120x 120x 120x   120x     120x 120x 120x 120x 120x   120x     120x 120x 120x 120x 120x 209x 140x     69x     120x   120x 214x       120x   1121x   120x 85x 85x           120x   120x               120x 120x       39x   35x 35x             120x 422x   120x 422x 422x       422x 215x   207x 648x               120x 111x 111x               60x 60x 60x 60x 60x               7x 7x 7x 7x         7x   7x     7x   7x 7x        </td><td class="text"><pre class="prettyprint lang-js">import sinon from 'sinon'; import React from 'react'; import { mount, shallow } from 'enzyme'; import assert from 'assert'; import _ from 'lodash'; import glob from 'glob'; import { shallowToJson } from 'enzyme-to-json'; import * as lucid from '../index';   // Common tests for all our components export function common(Component, { getDefaultProps = _.constant({}), exemptFunctionProps = [], exemptChildComponents = [], selectRoot = _.identity, } = {}) {   function generateDefaultProps(props={}) { return _.assign({}, getDefaultProps(), props); }   describe('[common]', () => { it('should have a `displayName` defined', () => { assert(Component.displayName); });   it('should pass through styles to the root element', () => { let style = { backgroundColor: '#f0f', }; const wrapper = shallow(<Component {...generateDefaultProps()} style={style}/>);   const rootWrapper = selectRoot(wrapper).first(); const rootStyle = rootWrapper.prop('style'); assert(_.every(style, (val, key) => val === rootStyle[key]), 'root style must contain passed styles'); });   it('should pass through `className`', () => { const expectedClass = 'rAnDoM'; const wrapper = shallow(<Component {...generateDefaultProps()} className={expectedClass}/>); const rootWrapper = selectRoot(wrapper).first(); const classNames = rootWrapper.prop('className').split(' ');   assert(_.includes(classNames, expectedClass), `'${classNames}' should include '${expectedClass}'`); });   it('should have an application scoped base class', () => { const expectedClass = 'lucid-' + Component.displayName; const wrapper = shallow(<Component {...generateDefaultProps()} />); const rootWrapper = selectRoot(wrapper).first(); const classNames = rootWrapper.prop('className').split(' ');   assert(_.includes(classNames, expectedClass), `'${classNames}' should include '${Component.displayName}'`); });   it('should have only application scoped classes', () => { const wrapper = shallow(<Component {...generateDefaultProps()} />); const rootWrapper = selectRoot(wrapper).first(); const parentClasses = rootWrapper.prop('className').split(' '); const childrenClasses = rootWrapper.children().reduce((acc, node) => { if (!node.prop('className')) { return acc; }   return acc.concat(node.prop('className').split(' ')) }, []);   const allClasses = parentClasses.concat(childrenClasses);   _.forEach(allClasses, className => { assert(_.includes(className, `lucid-${Component.displayName}`), `${className} must be scoped`); }); });   describe('function propTypes', () => {   const funcProps = _.pickBy(Component.propTypes, propType => propType === React.PropTypes.func);   _.forEach(funcProps, (propType, propName) => { it(`${propName} should only use onX convention for function proptypes`, () => { assert(_.startsWith(propName, 'on') || _.includes(exemptFunctionProps, propName), `${propName} must follow onX convention`); }); });   });   describe('child components', () => {   const childComponents = _.omit(Component.definition.statics, [ '_isPrivate', 'definition', 'propName', 'reducers', 'selectors', ]);   describe('propNames in propTypes', () => { _.chain(childComponents) .map('propName') .compact() .flatMap(_.castArray) .reject(propName => _.includes(exemptChildComponents, propName)) .forEach(propName => { it(`should include ${propName} in propTypes`, () => { assert(Component.propTypes[propName], `must include ${propName} in propTypes`); }); }) .value(); }); });   describe('example testing', () => { const examples = glob.sync(`./src/components/**/${Component.displayName}/examples/*.jsx`).map(path => require('../../' + path).default);   _.each(examples, Example => { it(`should match snapshot(s) for ${Example.displayName}`, () => { const shallowExample = shallow(<Example />);   // If the root of the example is an instance of the Component under test, snapshot it. // Otherwise, look under the root for instances of the Component and snapshot those. if (shallowExample.is(Component.displayName)) { expect(shallowToJson(shallow(<Component {...shallowExample.props()} />))).toMatchSnapshot(); } else { shallowExample.find(Component).forEach(example => { expect(shallowToJson(shallow(<Component {...example.props()} />))).toMatchSnapshot(); }); } }); }); });   // Only run this test if it's a public component if (!Component._isPrivate) { it('should be available as an exported module from index.js', () => { assert(lucid[Component.displayName]); }); } }); }   // Common tests for all our icon components export function icons(Component) { describe('[icon]', () => { it('should add the correct class for isClickable', () => { const wrapper = mount(<Component isClickable={true} />); const targetClassName = 'lucid-Icon-is-clickable'; assert(wrapper.find('svg').hasClass(targetClassName), `Missing '${targetClassName}' class`); }); }); }   // Common tests for all control components export function controls(Component, { callbackName, controlSelector , eventType, additionalProps={} }) { // Use DOM tests here since some of our controls use dom events under the hood describe('[control]', () => { it('should callback with `event` and `props`', () => { const expectedSpecialProp = 32; const props = { specialProp: expectedSpecialProp, [callbackName]: sinon.spy(), ...additionalProps, }; const wrapper = mount(<Component {...props} />);   wrapper.find(controlSelector).simulate(eventType);   // Last argument should be an object with `uniqueId` and `event` const { props: { specialProp }, event } = _.last(props[callbackName].args[0]);   assert(event, 'missing event'); assert.equal(specialProp, expectedSpecialProp, 'incorrect or missing specialProp'); }); }); }  </pre></td></tr> </table></pre> <div class='push'></div> </div> <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Fri Feb 03 2017 18:10:35 GMT+0000 (UTC) </div> </div> <script src="../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../sorter.js"></script> </body> </html>