From 6b27ab02e8dd5d2bd22f8929b8e4ea7fbf0df876 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20St=C3=BCmmel?= Date: Wed, 14 Jun 2017 01:05:22 +0200 Subject: [PATCH] feat(testing): added a bunch of tests related to instructure-react/react-tinymce#65 --- .babelrc | 3 ++ karma.conf.js | 53 +++++++++++++++++++++++ lib/components/__tests__/TinyMCE-test.js | 11 ----- package.json | 32 +++++++++++--- test/TinyMCESpec.js | 36 ++++++++++++++++ test/basicSpec.js | 50 +++++++++++++++++++++ test/fixtures/badCreateClass.js | 5 +++ test/fixtures/badPropTypes.js | 6 +++ test/reactWarningSpec.js | 55 ++++++++++++++++++++++++ 9 files changed, 234 insertions(+), 17 deletions(-) create mode 100644 .babelrc create mode 100644 karma.conf.js delete mode 100644 lib/components/__tests__/TinyMCE-test.js create mode 100644 test/TinyMCESpec.js create mode 100644 test/basicSpec.js create mode 100644 test/fixtures/badCreateClass.js create mode 100644 test/fixtures/badPropTypes.js create mode 100644 test/reactWarningSpec.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..2fbab11 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": [ "react", "es2015" ] +} diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..bcd332c --- /dev/null +++ b/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' ] ] + } + }) +} diff --git a/lib/components/__tests__/TinyMCE-test.js b/lib/components/__tests__/TinyMCE-test.js deleted file mode 100644 index c717ead..0000000 --- a/lib/components/__tests__/TinyMCE-test.js +++ /dev/null @@ -1,11 +0,0 @@ -// import React 'react'; -// import TestUtils from 'react-addons-test-utils'; -// import TinyMCE from '../..//main'; -import { equal } from 'assert'; - -/* eslint func-names:0 */ -describe('react-tinymce', function() { - it('should render', function() { - equal(true, true); - }); -}); diff --git a/package.json b/package.json index 54c5510..d292edc 100644 --- a/package.json +++ b/package.json @@ -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" } -} \ No newline at end of file +} diff --git a/test/TinyMCESpec.js b/test/TinyMCESpec.js new file mode 100644 index 0000000..a107a88 --- /dev/null +++ b/test/TinyMCESpec.js @@ -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(, testContainer); + }); + + + it('should render TinyMCE Component inline', () => { + + var div = document.createElement('div'); + testContainer.appendChild(div); + + ReactDOM.render( + , + div + ); + }); + + +}); diff --git a/test/basicSpec.js b/test/basicSpec.js new file mode 100644 index 0000000..5504daf --- /dev/null +++ b/test/basicSpec.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('
Hello World
') + testContainer.appendChild(div); + + // when + tinymce.init({ selector: '#inline', inline: true }); + + // then + expect(div.contentEditable).to.equal('true'); + expect(div.innerHTML).to.equal('

Hello World

'); + }); + +}); diff --git a/test/fixtures/badCreateClass.js b/test/fixtures/badCreateClass.js new file mode 100644 index 0000000..26a2711 --- /dev/null +++ b/test/fixtures/badCreateClass.js @@ -0,0 +1,5 @@ +const React = require('react'); +var test = React.createClass({ + render: function(){ return null; } +}); +module.exports = Test; diff --git a/test/fixtures/badPropTypes.js b/test/fixtures/badPropTypes.js new file mode 100644 index 0000000..802ff07 --- /dev/null +++ b/test/fixtures/badPropTypes.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; diff --git a/test/reactWarningSpec.js b/test/reactWarningSpec.js new file mode 100644 index 0000000..51c55a5 --- /dev/null +++ b/test/reactWarningSpec.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(); + }); + +});