#9 moved ckeditor loading to app.js to include in test spec

abbr · Oct 8, 2017 · d8a2e4c · d8a2e4c
1 parent a4971bb
commit d8a2e4c
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "react-test-renderer": "^16.0.0",
     "react-widgets": "^3.5.0",
     "rimraf": "^2.6.2",
+    "scriptjs": "^2.5.8",
     "spectrum-colorpicker": "^1.8.0",
     "string-replace-loader": "^1.3.0",
     "style-loader": "^0.13.0",

diff --git a/src/components/app.js b/src/components/app.js
@@ -10,6 +10,7 @@ import Slides from './slides'
 import Overview from './overview'
 import DeckStore from 'stores/deck'
 import _ from 'lodash'
+import $script from 'scriptjs'
 let key = require('mousetrap')
 let App = class extends React.Component {
   constructor(props) {
@@ -31,6 +32,7 @@ let App = class extends React.Component {
   componentWillMount() {
     super.componentWillMount && super.componentWillMount()
     this.setDocTitle(this.state.deck._fn)
+    $script('//cdn.ckeditor.com/4.5.7/full-all/ckeditor.js','ckeditor')
   }
   componentDidMount() {
     super.componentDidMount && super.componentDidMount()

diff --git a/src/components/widgets/primitives/textBox.js b/src/components/widgets/primitives/textBox.js
@@ -1,6 +1,7 @@
 'use strict'
 import React from 'react'
 import lang from 'i18n/lang'
+import $script from 'scriptjs'
 let TextBox = class extends React.Component {
   constructor(props) {
     super(props)
@@ -17,32 +18,34 @@ let TextBox = class extends React.Component {
     if (this.editor) {
       return
     }
-    let editor = (this.editor = window.CKEDITOR.inline(
-      this.refs.editableContent,
-      {
-        extraPlugins: 'sourcedialog'
-      }
-    ))
-    editor.setData(this.props.component.text)
-    editor.on('loaded', function() {
-      let editable = editor.editable(this.element)
-      editable.hasFocus = true
+    $script.ready('ckeditor', () => {
+      let editor = (this.editor = window.CKEDITOR.inline(
+        this.refs.editableContent,
+        {
+          extraPlugins: 'sourcedialog'
+        }
+      ))
+      editor.setData(this.props.component.text)
+      editor.on('loaded', function() {
+        let editable = editor.editable(this.element)
+        editable.hasFocus = true
+      })
+      editor.on('blur', function() {
+        setTimeout(() => {
+          this.destroy()
+          delete reactEle.editor
+        }, 0)
+        if (this.getData() !== reactEle.props.component.text) {
+          reactEle.props.onSelectedWidgetUpdated &&
+            reactEle.props.onSelectedWidgetUpdated(reactEle.props.idx, {
+              text: this.getData()
+            })
+        }
+        reactEle.setState({ editable: false })
+        reactEle.props.setDraggable(true)
+      })
+      ev.stopPropagation && ev.stopPropagation()
     })
-    editor.on('blur', function() {
-      setTimeout(() => {
-        this.destroy()
-        delete reactEle.editor
-      }, 0)
-      if (this.getData() !== reactEle.props.component.text) {
-        reactEle.props.onSelectedWidgetUpdated &&
-          reactEle.props.onSelectedWidgetUpdated(reactEle.props.idx, {
-            text: this.getData()
-          })
-      }
-      reactEle.setState({ editable: false })
-      reactEle.props.setDraggable(true)
-    })
-    ev.stopPropagation && ev.stopPropagation()
   }
   render() {
     return (

diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,6 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <script src="//cdn.ckeditor.com/4.5.7/full-all/ckeditor.js"></script>
 </head>
 <body>
   <div id="app"/>

diff --git a/test/components/AppTest.js b/test/components/AppTest.js
@@ -27,7 +27,10 @@ describe('MainComponent', () => {
 describe('<Main />', () => {
   it.only('should have its component name as default className', () => {
     debugger
-    const wrapper = mount(<Main />, { attachTo: document.body })
+    let app = document.createElement('div')
+    app.setAttribute('id', 'app')
+    document.body.appendChild(app)
+    const wrapper = mount(<Main />, { attachTo: app })
     expect(wrapper.children().is('.sp-main-container')).to.equal(true)
   })
 })