├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── css └── main.css ├── dist ├── Main.js ├── Main.min.js └── Styles.js ├── package-lock.json ├── package.json ├── src ├── Main.js └── Styles.js ├── stories └── Main.js ├── storybook └── config.js └── tests ├── helpers └── setup.js └── specs └── Main.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["airbnb"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "env": { 5 | "es6": true 6 | }, 7 | "ecmaFeatures": { 8 | "modules": true 9 | }, 10 | "settings": { 11 | "react": { 12 | "pragma": "React", 13 | "version": "15.0" 14 | } 15 | }, 16 | "rules": { 17 | "indent": ["error", 4], 18 | "id-length": 0, 19 | "react/jsx-indent": [2, 4], 20 | "react/jsx-indent-props": [2, 4] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #### joe made this: https://goel.io/joe 2 | 3 | #####=== Node ===##### 4 | 5 | # Logs 6 | logs 7 | *.log 8 | .nyc_output 9 | coverage/ 10 | 11 | # build 12 | .out 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # node-waf configuration 29 | .lock-wscript 30 | 31 | # Compiled binary addons (http://nodejs.org/api/addons.html) 32 | build/Release 33 | 34 | # Dependency directory 35 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 36 | node_modules 37 | 38 | # Debug log from npm 39 | npm-debug.log 40 | 41 | #####=== OSX ===##### 42 | .DS_Store 43 | .AppleDouble 44 | .LSOverride 45 | 46 | # Icon must end with two \r 47 | Icon 48 | 49 | 50 | # Thumbnails 51 | ._* 52 | 53 | # Files that might appear on external disk 54 | .Spotlight-V100 55 | .Trashes 56 | 57 | # Directories potentially created on remote AFP share 58 | .AppleDB 59 | .AppleDesktop 60 | Network Trash Folder 61 | Temporary Items 62 | .apdisk 63 | 64 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | coverage 2 | build -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - stable 5 | 6 | cache: 7 | directories: 8 | - node_modules 9 | 10 | script: 11 | - npm run lint 12 | - npm test 13 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | 1. Fork it! 4 | 2. Create your feature branch: `git checkout -b my-new-feature` 5 | 3. Commit your changes: `git commit -m 'Add some feature'` 6 | 4. Push to the branch: `git push origin my-new-feature` 7 | 8 | *Remember that we have a pre-push hook with steps that analyzes and prevents mistakes.* 9 | 10 | **After your pull request is merged**, you can safely delete your branch. 11 | 12 | ### Architecture 13 | 14 | This component was generated by [Slush Lyef-react](https://github.com/lyef/slush-lyef-react) following the [lyef-react-component](https://github.com/lyef/lyef-react-component) structure and guidelines. 15 | 16 | ### How to Develop with Storybook 17 | 18 | Create your [storybook stories](https://github.com/kadirahq/react-storybook/blob/master/docs/writing_stories.md) on `stories` folder. If you want to create another story file, remember to load on `.storybook/config.js`. With all stories, just run `npm run storybook` to open your isolated environment. 19 | 20 | If you want to know more about storybook, [see this link](https://github.com/kadirahq/react-storybook). 21 | 22 | ### Code Standarts 23 | 24 | We follow the [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react). 25 | 26 | This project uses [eslint](http://eslint.org/) and [.editorconfig](http://editorconfig.org/) is defined to have indent_size of **4 spaces**. 27 | 28 | This project also uses [Husky](https://github.com/typicode/husky) to prevent push messy and wrong code. Please, don't be stupid, fix all errors before push =D 29 | 30 | ### Tasks 31 | 32 | * `npm run build`: build component to external use. 33 | * `npm run pub`: build and publish the component to npm. 34 | * `npm run storybook`: launch storybook to develop your component. 35 | * `npm run build-storybook`: build an static storybook to `.out` folder. 36 | * `npm run deploy-storybook`: build and deploy a storybook with component to gh-pages. 37 | * `npm run test`: run all specs. 38 | * `npm run test:tdd`: run all specs and watch. 39 | * `npm run test:coverage`: run all specs and coverage. 40 | * `npm run lint`: lint all files searching for errors. 41 | * `npm run lint:fix`: fix some lint errors. 42 | 43 | 44 | ### [<-- Back](https://github.com/lyef/lyef-full-header) 45 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Lyef, lyef.github.io 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Lyef full header 2 | [![Build Status](https://travis-ci.org/lyef/lyef-full-header.svg?branch=master)](https://travis-ci.org/lyef/lyef-full-header) 3 | ![Badge size](https://badge-size.herokuapp.com/lyef/lyef-full-header/master/dist/Main.min.js.svg) 4 | ![Badge gzip size](https://badge-size.herokuapp.com/lyef/lyef-full-header/master/dist/Main.min.js.svg?compression=gzip) 5 | [![NPM version](https://badge-me.herokuapp.com/api/npm/lyef-full-header.png)](http://badges.enytc.com/for/npm/lyef-full-header) 6 | 7 | ![A gif with header containing video](https://media.giphy.com/media/l0MYPKsMPCK0YNFvy/giphy.gif) 8 | 9 | ## Demo 10 | 11 | [Live examples](https://lyef.github.io/lyef-full-header) 12 | 13 | ## Installation 14 | 15 | ```sh 16 | $ npm install --save lyef-full-header 17 | ``` 18 | 19 | ## Basic Usage 20 | 21 | ```jsx 22 | import FullHeader from 'lyef-full-header'; 23 | 24 | ... 25 | render() { 26 | return ( 27 | 35 | ); 36 | } 37 | ... 38 | ``` 39 | 40 | ## Props 41 | 42 | - `title` (string) - main title 43 | - `subtitle` (string) - subtitle 44 | - `bgColor` (string) - background color 45 | - `bgImg` (string) - image to background 46 | - `video` (string) - video to background 47 | - `textColor` (string) - texts color 48 | - `font` (string) - font-family to texts 49 | 50 | ## Architecture 51 | 52 | We've developed this component using the following boilerplate: 53 | [lyef-react-component](https://github.com/lyef/lyef-react-component). 54 | 55 | If you want to contribute with this component: 56 | [Contributing Documentation](https://github.com/lyef/lyef-full-header/blob/master/CONTRIBUTING.md). 57 | 58 | ## License 59 | 60 | [MIT License](https://github.com/lyef/lyef-full-header/blob/master/LICENSE.md) @ [lyef](https://lyef.github.io/) 61 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | -------------------------------------------------------------------------------- /dist/Main.js: -------------------------------------------------------------------------------- 1 | Object.defineProperty(exports, "__esModule", { 2 | value: true 3 | }); 4 | 5 | var _react = require('react'); 6 | 7 | var _react2 = _interopRequireDefault(_react); 8 | 9 | var _propTypes = require('prop-types'); 10 | 11 | var _propTypes2 = _interopRequireDefault(_propTypes); 12 | 13 | var _Styles = require('./Styles'); 14 | 15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 16 | 17 | var defaultProps = { 18 | bgColor: '#000', 19 | textColor: '#fff', 20 | font: 'sans-serif', 21 | bgImg: '' 22 | }; 23 | 24 | var propTypes = { 25 | title: _propTypes2['default'].string, 26 | subtitle: _propTypes2['default'].string, 27 | bgColor: _propTypes2['default'].string, 28 | textColor: _propTypes2['default'].string, 29 | font: _propTypes2['default'].string, 30 | bgImg: _propTypes2['default'].string, 31 | video: _propTypes2['default'].string 32 | }; 33 | 34 | var FullHeader = function FullHeader(_ref) { 35 | var title = _ref.title, 36 | subtitle = _ref.subtitle, 37 | bgColor = _ref.bgColor, 38 | textColor = _ref.textColor, 39 | font = _ref.font, 40 | bgImg = _ref.bgImg, 41 | video = _ref.video; 42 | 43 | var headerStyleCombined = Object.assign({}, _Styles.headerStyle, { 44 | backgroundColor: bgColor, 45 | backgroundImage: 'url(' + String(bgImg) + ')', 46 | color: textColor, 47 | fontFamily: font 48 | }); 49 | 50 | return _react2['default'].createElement( 51 | 'header', 52 | { className: 'full-header', style: headerStyleCombined }, 53 | _react2['default'].createElement( 54 | 'div', 55 | { className: 'texts', style: _Styles.containerStyle }, 56 | title && _react2['default'].createElement( 57 | 'h1', 58 | { className: 'title', style: _Styles.titleStyle }, 59 | title 60 | ), 61 | subtitle && _react2['default'].createElement( 62 | 'h2', 63 | { className: 'subtitle', style: _Styles.subtitleStyle }, 64 | subtitle 65 | ) 66 | ), 67 | video && _react2['default'].createElement('video', { className: 'video', autoPlay: true, muted: true, loop: true, src: video, style: _Styles.videoStyle }) 68 | ); 69 | }; 70 | 71 | FullHeader.defaultProps = defaultProps; 72 | FullHeader.propTypes = propTypes; 73 | 74 | exports['default'] = FullHeader; -------------------------------------------------------------------------------- /dist/Main.min.js: -------------------------------------------------------------------------------- 1 | function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var _react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),_Styles=require("./Styles"),defaultProps={bgColor:"#000",textColor:"#fff",font:"sans-serif",bgImg:""},propTypes={title:_propTypes2.default.string,subtitle:_propTypes2.default.string,bgColor:_propTypes2.default.string,textColor:_propTypes2.default.string,font:_propTypes2.default.string,bgImg:_propTypes2.default.string,video:_propTypes2.default.string},FullHeader=function(e){var t=e.title,r=e.subtitle,l=e.bgColor,a=e.textColor,s=e.font,o=e.bgImg,p=e.video,u=Object.assign({},_Styles.headerStyle,{backgroundColor:l,backgroundImage:"url("+String(o)+")",color:a,fontFamily:s});return _react2.default.createElement("header",{className:"full-header",style:u},_react2.default.createElement("div",{className:"texts",style:_Styles.containerStyle},t&&_react2.default.createElement("h1",{className:"title",style:_Styles.titleStyle},t),r&&_react2.default.createElement("h2",{className:"subtitle",style:_Styles.subtitleStyle},r)),p&&_react2.default.createElement("video",{className:"video",autoPlay:!0,muted:!0,loop:!0,src:p,style:_Styles.videoStyle}))};FullHeader.defaultProps=defaultProps,FullHeader.propTypes=propTypes,exports.default=FullHeader; -------------------------------------------------------------------------------- /dist/Styles.js: -------------------------------------------------------------------------------- 1 | Object.defineProperty(exports, "__esModule", { 2 | value: true 3 | }); 4 | var headerStyle = exports.headerStyle = { 5 | alignItems: 'center', 6 | display: 'flex', 7 | textAlign: 'center', 8 | width: '100%', 9 | height: '100vh', 10 | backgroundSize: 'cover' 11 | }; 12 | 13 | var containerStyle = exports.containerStyle = { 14 | width: '100%', 15 | position: 'relative', 16 | zIndex: 2 17 | }; 18 | 19 | var videoStyle = exports.videoStyle = { 20 | position: 'fixed', 21 | top: '50%', 22 | left: '50%', 23 | zIndex: 1, 24 | minWidth: '100%', 25 | minHeight: '100%', 26 | width: 'auto', 27 | height: 'auto', 28 | transform: 'translate(-50%, -50%)' 29 | }; 30 | 31 | var titleStyle = exports.titleStyle = { 32 | fontSize: '5rem', 33 | lineHeight: '1.5' 34 | }; 35 | 36 | var subtitleStyle = exports.subtitleStyle = { 37 | fontSize: '2rem' 38 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lyef-full-header", 3 | "version": "1.1.1", 4 | "description": "A full width and height header react component.", 5 | "main": "dist/Main.js", 6 | "scripts": { 7 | "build": "npm run clean && npm run babel && npm run minify", 8 | "babel": "./node_modules/.bin/babel src -d dist", 9 | "minify": "./node_modules/.bin/uglifyjs -c -m -o dist/Main.min.js dist/Main.js", 10 | "pub": "npm run build && npm publish", 11 | "clean": "rimraf dist", 12 | "start": "npm run storybook", 13 | "storybook": "./node_modules/.bin/start-storybook -p 9001 -c ./storybook", 14 | "build-storybook": "./node_modules/.bin/build-storybook -c ./storybook -o .out", 15 | "deploy-storybook": "storybook-to-ghpages", 16 | "test": "./node_modules/.bin/mocha --require tests/helpers/setup.js tests/specs/**/*.spec.js", 17 | "test:tdd": "./node_modules/.bin/mocha --require tests/helpers/setup.js tests/specs/**/*.spec.js -w", 18 | "test:coverage": "./node_modules/.bin/nyc --reporter=html --reporter=text ./node_modules/.bin/mocha tests/helpers/setup.js tests/specs/**/*.spec.js", 19 | "lint": "./node_modules/.bin/eslint src", 20 | "lint:fix": "./node_modules/.bin/eslint src --fix", 21 | "prepush": "npm run lint && npm test" 22 | }, 23 | "nyc": { 24 | "exclude": [ 25 | "tests", 26 | "dist" 27 | ] 28 | }, 29 | "repository": { 30 | "type": "git", 31 | "url": "git+ssh://git@github.com/lyef/lyef-full-header.git" 32 | }, 33 | "keywords": [ 34 | "react", 35 | "component", 36 | "es6", 37 | "storybook", 38 | "babel", 39 | "webpack" 40 | ], 41 | "author": "lyef", 42 | "license": "MIT", 43 | "devDependencies": { 44 | "@storybook/react": "^3.1.9", 45 | "@storybook/storybook-deployer": "^2.0.0", 46 | "assert-equal-jsx": "^1.0.3", 47 | "babel-cli": "^6.11.4", 48 | "babel-core": "^6.10.4", 49 | "babel-eslint": "^7.2.3", 50 | "babel-loader": "^6.2.4", 51 | "babel-preset-airbnb": "^2.0.0", 52 | "babel-register": "^6.24.1", 53 | "chai": "^3.5.0", 54 | "chai-enzyme": "^0.5.0", 55 | "enzyme": "^2.4.1", 56 | "eslint": "^2.13.1", 57 | "eslint-config-airbnb": "^9.0.1", 58 | "eslint-plugin-import": "^1.12.0", 59 | "eslint-plugin-jsx-a11y": "^1.5.5", 60 | "eslint-plugin-react": "^5.2.2", 61 | "husky": "^0.11.4", 62 | "jsdom": "^9.4.1", 63 | "mocha": "^2.5.3", 64 | "nyc": "^7.0.0", 65 | "raw-loader": "^0.5.1", 66 | "react-test-renderer": "^15.6.1", 67 | "rimraf": "^2.5.3", 68 | "sinon": "^1.17.4", 69 | "sinon-chai": "^2.8.0", 70 | "style-loader": "^0.13.1", 71 | "uglify-js": "^2.7.0" 72 | }, 73 | "dependencies": { 74 | "prop-types": "^15.5.10", 75 | "react": "^15.2.1", 76 | "react-dom": "^15.2.1" 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/Main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { headerStyle, containerStyle, titleStyle, subtitleStyle, videoStyle } from './Styles'; 4 | 5 | const defaultProps = { 6 | bgColor: '#000', 7 | textColor: '#fff', 8 | font: 'sans-serif', 9 | bgImg: '', 10 | }; 11 | 12 | const propTypes = { 13 | title: PropTypes.string, 14 | subtitle: PropTypes.string, 15 | bgColor: PropTypes.string, 16 | textColor: PropTypes.string, 17 | font: PropTypes.string, 18 | bgImg: PropTypes.string, 19 | video: PropTypes.string, 20 | }; 21 | 22 | const FullHeader = ({ title, subtitle, bgColor, textColor, font, bgImg, video }) => { 23 | const headerStyleCombined = { 24 | ...headerStyle, 25 | backgroundColor: bgColor, 26 | backgroundImage: `url(${bgImg})`, 27 | color: textColor, 28 | fontFamily: font, 29 | }; 30 | 31 | return ( 32 |
33 |
34 | {title &&

{title}

} 35 | {subtitle &&

{subtitle}

} 36 |
37 | {video && 38 |
41 | ); 42 | }; 43 | 44 | FullHeader.defaultProps = defaultProps; 45 | FullHeader.propTypes = propTypes; 46 | 47 | export default FullHeader; 48 | -------------------------------------------------------------------------------- /src/Styles.js: -------------------------------------------------------------------------------- 1 | export const headerStyle = { 2 | alignItems: 'center', 3 | display: 'flex', 4 | textAlign: 'center', 5 | width: '100%', 6 | height: '100vh', 7 | backgroundSize: 'cover', 8 | }; 9 | 10 | export const containerStyle = { 11 | width: '100%', 12 | position: 'relative', 13 | zIndex: 2, 14 | }; 15 | 16 | export const videoStyle = { 17 | position: 'fixed', 18 | top: '50%', 19 | left: '50%', 20 | zIndex: 1, 21 | minWidth: '100%', 22 | minHeight: '100%', 23 | width: 'auto', 24 | height: 'auto', 25 | transform: 'translate(-50%, -50%)', 26 | }; 27 | 28 | export const titleStyle = { 29 | fontSize: '5rem', 30 | lineHeight: '1.5', 31 | }; 32 | 33 | export const subtitleStyle = { 34 | fontSize: '2rem', 35 | }; 36 | -------------------------------------------------------------------------------- /stories/Main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FullHeader from '../src/Main'; // This is our component 3 | import { storiesOf } from '@storybook/react'; 4 | 5 | storiesOf('', module) 6 | .add('with title', () => ( 7 | 8 | )) 9 | .add('with title and subtitle', () => ( 10 | 11 | )) 12 | .add('with title, subtitle and bgColor', () => ( 13 | 18 | )) 19 | .add('with title, subtitle, bgColor and textColor', () => ( 20 | 26 | )) 27 | .add('with title, subtitle, bgColor, textColor and font', () => ( 28 | 35 | )) 36 | .add('with title, subtitle, bgImg', () => ( 37 | 42 | )) 43 | .add('with title, subtitle and video', () => ( 44 | 51 | )); 52 | -------------------------------------------------------------------------------- /storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | import '../css/main.css'; 4 | 5 | function loadStories() { 6 | require('../stories/Main.js'); 7 | } 8 | 9 | configure(loadStories, module); 10 | -------------------------------------------------------------------------------- /tests/helpers/setup.js: -------------------------------------------------------------------------------- 1 | require('babel-register')(); 2 | 3 | var jsdom = require('jsdom').jsdom; 4 | 5 | var exposedProperties = ['window', 'navigator', 'document']; 6 | 7 | global.document = jsdom(''); 8 | global.window = document.defaultView; 9 | Object.keys(document.defaultView).forEach((property) => { 10 | if (typeof global[property] === 'undefined') { 11 | exposedProperties.push(property); 12 | global[property] = document.defaultView[property]; 13 | } 14 | }); 15 | 16 | global.navigator = { 17 | userAgent: 'node.js' 18 | }; 19 | 20 | documentRef = document; 21 | -------------------------------------------------------------------------------- /tests/specs/Main.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import chai, { expect } from 'chai'; 3 | import chaiEnzyme from 'chai-enzyme'; 4 | import { shallow } from 'enzyme'; 5 | import FullHeader from '../../src/Main'; 6 | chai.use(chaiEnzyme()); 7 | 8 | describe('', () => { 9 | 10 | it('should have header when mount', () => { 11 | const wrapper = shallow(); 12 | expect(wrapper.find('header')).to.have.length(1); 13 | }); 14 | 15 | it('should have h1 when title passed', () => { 16 | const wrapper = shallow(); 17 | expect(wrapper.find('h1')).to.have.length(1); 18 | }); 19 | 20 | it('should not have h1 when title is not passed', () => { 21 | const wrapper = shallow(); 22 | expect(wrapper.find('h1')).to.have.length(0); 23 | }); 24 | 25 | it('should have h2 when subtitle passed', () => { 26 | const wrapper = shallow(); 27 | expect(wrapper.find('h2')).to.have.length(1); 28 | }); 29 | 30 | it('should not have h2 when subtitle is not passed', () => { 31 | const wrapper = shallow(); 32 | expect(wrapper.find('h2')).to.have.length(0); 33 | }); 34 | 35 | it('should have video when video passed', () => { 36 | const wrapper = shallow(); 37 | expect(wrapper.find('video')).to.have.length(1); 38 | }); 39 | 40 | it('should not have video when video is not passed', () => { 41 | const wrapper = shallow(); 42 | expect(wrapper.find('video')).to.have.length(0); 43 | }); 44 | 45 | it('should have background-color equal #000 when none is passed', () => { 46 | const wrapper = shallow(); 47 | expect(wrapper).to.have.style('background-color').equal('#000'); 48 | }); 49 | 50 | it('should have background-color equal bgColor passed', () => { 51 | const wrapper = shallow(); 52 | expect(wrapper).to.have.style('background-color').equal('#123'); 53 | }); 54 | 55 | it('should have color equal #fff when none is passed', () => { 56 | const wrapper = shallow(); 57 | expect(wrapper).to.have.style('color').equal('#fff'); 58 | }); 59 | 60 | it('should have color equal textColor passed', () => { 61 | const wrapper = shallow(); 62 | expect(wrapper).to.have.style('color').equal('#123'); 63 | }); 64 | 65 | it('should have font-family equal sans-serif when none is passed', () => { 66 | const wrapper = shallow(); 67 | expect(wrapper).to.have.style('font-family').equal('sans-serif'); 68 | }); 69 | 70 | it('should have font-family equal font passed', () => { 71 | const wrapper = shallow(); 72 | expect(wrapper).to.have.style('font-family').equal('Lobster'); 73 | }); 74 | 75 | it('should have background-image equal empty when none is passed', () => { 76 | const wrapper = shallow(); 77 | expect(wrapper).to.have.style('background-image').equal('url()'); 78 | }); 79 | 80 | it('should have background-image equal bgImg passed', () => { 81 | const wrapper = shallow(); 82 | expect(wrapper).to.have.style('background-image').equal('url(img/mybackground.jpg)'); 83 | }); 84 | }); 85 | --------------------------------------------------------------------------------