feat(testing): added a bunch of tests

related to instructure-react#65

Author: Jan Stümmel

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "react", "es2015" ]
+}

karma.conf.js

@@ -0,0 +1,53 @@
+module.exports = function(config) {
+  config.set({
+
+    basePath: '',
+
+    frameworks: [
+      'mocha',
+      'browserify',
+      'chai'
+    ],
+
+    files: [
+      
+      // tinymce
+      'node_modules/tinymce/tinymce.min.js',
+      'node_modules/tinymce/plugins/**/*.min.js',
+      'node_modules/tinymce/themes/**/*.min.js',
+      { pattern: 'node_modules/tinymce/skins/**', watched: false, included: false },
+
+      // tests
+      'test/**/*Spec.js',
+    ],
+
+    exclude: [
+    ],
+
+    preprocessors: {
+      'test/**/*Spec.js': [ 'browserify' ]
+    },
+
+    reporters: ['spec'],
+
+    port: 9876,
+
+    colors: true,
+
+    logLevel: config.LOG_INFO,
+
+    autoWatch: true,
+
+    browsers: ['PhantomJS'],
+
+    singleRun: false,
+
+    concurrency: Infinity,
+
+    // browserify configuration
+    browserify: {
+      debug: true,
+      transform: [ [ 'babelify' ] ]
+    }
+  })
+}

lib/components/__tests__/TinyMCE-test.js

@@ -4,8 +4,8 @@
   "description": "React TinyMCE component",
   "main": "lib/main.js",
   "scripts": {
-    "test": "node_modules/.bin/rackt test --single-run --browsers Firefox",
-    "start": "node_modules/.bin/rackt server"
+    "test": "karma start --single-run",
+    "test-watch": "karma start"
   },
   "repository": {
     "type": "git",
@@ -23,11 +23,31 @@
     "react-dom": "^0.14.0 || ^15.0.0"
   },
   "devDependencies": {
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babelify": "^7.3.0",
+    "browserify": "^14.4.0",
+    "chai": "^4.0.2",
+    "domify": "^1.4.0",
+    "karma": "^1.7.0",
+    "karma-browserify": "^5.1.1",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^2.1.1",
+    "karma-firefox-launcher": "^1.0.1",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-spec-reporter": "0.0.31",
+    "mocha": "^3.4.2",
+    "mocha-test-container-support": "^0.2.0",
     "rackt-cli": "^0.5.3",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "react": "^15.6.0",
+    "react-dom": "^15.6.0",
+    "sinon": "^2.3.4",
+    "tinymce": "^4.6.4",
+    "watchify": "^3.9.0"
   },
   "dependencies": {
-    "lodash": "^3.9.3"
+    "lodash": "^3.9.3",
+    "prop-types": "^15.5.10"
   }
-}
+}

package.json

@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import domify from 'domify';
+import TestContainer from 'mocha-test-container-support';
+
+import TinyMCE from '../';
+
+describe('TinyMCE component tests', () => {
+
+  var testContainer;
+
+  beforeEach( function () {
+    testContainer = TestContainer.get(this);
+  });
+
+
+  it('should render TinyMCE Component', () => {
+
+    ReactDOM.render(<TinyMCE config={{}} />, testContainer);
+  });
+
+
+  it('should render TinyMCE Component inline', () => {
+
+    var div = document.createElement('div');
+    testContainer.appendChild(div);
+
+    ReactDOM.render(
+      <TinyMCE config={{ inline: true }} content="<strong>Hello World</strong>"/>,
+      div
+    );
+  });
+
+
+});

test/TinyMCESpec.js

@@ -0,0 +1,50 @@
+const domify = require('domify');
+const TestContainer = require('mocha-test-container-support');
+
+describe('basic test with global tinymce', () => {
+
+  var testContainer;
+
+  beforeEach( function () {
+    testContainer = TestContainer.get(this);
+  });
+
+
+  it('should be defined', () => {
+
+    // when
+    var tm = global.tinymce
+
+    // then
+    expect(tm).to.be.not.undefined
+  });
+
+
+  it('should tinymceify textarea', () => {
+
+    // given
+    testContainer.appendChild(document.createElement('textarea'));
+
+    // when
+    tinymce.init({ selector: 'textarea' });
+
+    // then
+    expect(testContainer.childNodes[0].className).to.include('mce-tinymce');
+  });
+
+
+  it('should tinymceify textarea inline', () => {
+
+    // given
+    const div = domify('<div id="inline">Hello World</div>')
+    testContainer.appendChild(div);
+
+    // when
+    tinymce.init({ selector: '#inline', inline: true });
+
+    // then
+    expect(div.contentEditable).to.equal('true');
+    expect(div.innerHTML).to.equal('<p>Hello World</p>');
+  });
+
+});

test/basicSpec.js

@@ -0,0 +1,5 @@
+const React = require('react');
+var test = React.createClass({
+  render: function(){ return null; }
+});
+module.exports = Test;

test/fixtures/badCreateClass.js

@@ -0,0 +1,6 @@
+const React = require('react');
+class Test extends React.Component {
+  render() { return null; }
+}
+Test.propTypes = { foo: React.PropTypes.string };
+module.exports = Test;

test/fixtures/badPropTypes.js

@@ -0,0 +1,55 @@
+
+describe('createClass/PropTypes Error', () => {
+
+  var warn;
+
+  before(() => {
+    // let console.warn throw an error
+    warn = console.warn;
+    console.warn = (msg) => { throw new Error(msg);
+  }});
+
+  after(() => console.warn = warn);
+
+
+  it('should throw PropTypes Warning', () => {
+
+    expect(() => {
+
+      // when
+      var BadPropTypesTest = require('./fixtures/badPropTypes');
+    })
+
+    // then
+    .to.throw(/^Warning: Accessing PropTypes via the main React/);
+
+  });
+
+
+  it('should throw createClass Warning', () => {
+
+    expect(() => {
+
+      // when
+      var BadPropTypesTest = require('./fixtures/badCreateClass');
+    })
+
+    // then
+    .to.throw(/^Warning: Accessing createClass via the main React/);
+
+  });
+
+
+  it('should should not throw creatClass or PropTypes Warning', () => {
+
+    expect(() => {
+
+      // when
+      var TinyMCE = require('../')
+    })
+
+    // then
+    .to.not.throw();
+  });
+
+});