Add test for style example

Author: kuy

examples/style/app.js

@@ -10,7 +10,7 @@ class App extends Component {
 
         <p>
           If you want to apply a style defined in external CSS file,<br />
-          you can give <Origin name="id-tip" className="target"><code>class</code></Origin> and <Origin name="class-tip" className="target"><code>id</code></Origin> attributes to the DIV element of a tooltip.
+          you can give <Origin name="id-tip" className="target origin-id"><code>id</code></Origin> and <Origin name="class-tip" className="target origin-class"><code>class</code></Origin> attributes to the DIV element of a tooltip.
         </p>
 
         <Tooltip name="id-tip" id="my-id">

karma.conf.js

@@ -3,18 +3,21 @@ module.exports = function(config) {
     basePath: '',
     frameworks: ['mocha', 'sinon'],
     files: [
-      'tests/feature/*.js'
+      'tests/feature/*.js',
+      'examples/*.css'
     ],
     exclude: [],
     plugins: [
       'karma-phantomjs-launcher',
       'karma-mocha',
       'karma-mocha-reporter',
       'karma-sinon',
-      'karma-webpack'
+      'karma-webpack',
+      'karma-html2js-preprocessor'
     ],
     preprocessors: {
       'tests/feature/*.js': ['webpack'],
+      'examples/*.css': ['html2js']
     },
     webpack: {
       devtool: 'inline-source-map',

tests/feature/style.js

@@ -0,0 +1,59 @@
+import assert from 'power-assert';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+import { Provider } from 'react-redux';
+import { Tooltip, Origin, utils } from '../../src/index';
+import App from '../../examples/style/app';
+import store from '../../examples/common/store';
+import { firstComponent, getStyleValue, getComputedStyleValue } from '../helpers';
+
+const { position } = utils;
+
+describe('Style Example', () => {
+  before(() => {
+    document.body.innerHTML += '<div id="container" style="position:absolute;top:0;left:0;"></div>';
+    document.body.innerHTML += `<style type="text/css">${window.__html__['examples/style.css']}</style>`;
+  });
+
+  let tree;
+  beforeEach(() => {
+    tree = ReactDOM.render(
+      <Provider store={store}>
+        <App />
+      </Provider>,
+    document.getElementById('container'));
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(document.getElementById('container'));
+  });
+
+  describe('id tooltip', () => {
+    it('should be colored', () => {
+      const origin = firstComponent(tree, Origin.WrappedComponent, { name: 'id-tip' }).refs.wrapper;
+      TestUtils.Simulate.mouseEnter(origin);
+
+      const tooltip = firstComponent(tree, Tooltip.WrappedComponent, { name: 'id-tip' }).refs.tooltip;
+      assert(getComputedStyleValue(tooltip, 'background-color') === 'rgb(255, 205, 210)');
+      assert(tooltip.innerText === 'This is a id tooltip.');
+
+      const border = firstComponent(tree, Tooltip.WrappedComponent, { name: 'id-tip' }).refs.border;
+      assert(getComputedStyleValue(border, 'border-color') === 'rgb(255, 205, 210) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)');
+    });
+  });
+
+  describe('class tooltip', () => {
+    it('should be colored', () => {
+      const origin = firstComponent(tree, Origin.WrappedComponent, { name: 'class-tip' }).refs.wrapper;
+      TestUtils.Simulate.mouseEnter(origin);
+
+      const tooltip = firstComponent(tree, Tooltip.WrappedComponent, { name: 'class-tip' }).refs.tooltip;
+      assert(getComputedStyleValue(tooltip, 'background-color') === 'rgb(187, 222, 251)');
+      assert(tooltip.innerText === 'This is a class tooltip.');
+
+      const border = firstComponent(tree, Tooltip.WrappedComponent, { name: 'class-tip' }).refs.border;
+      assert(getComputedStyleValue(border, 'border-color') === 'rgb(187, 222, 251) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)');
+    });
+  });
+});

tests/helpers.js

@@ -28,3 +28,8 @@ export function getStyleValue(element, propName) {
   parser.cssText = element.getAttribute('style');
   return parser.getPropertyValue(propName);
 }
+
+export function getComputedStyleValue(element, propName) {
+  const style = getComputedStyle(element);
+  return style.getPropertyValue(propName);
+}