tests for contenteditable component

internal_packages/composer/lib/contenteditable-component.cjsx

@@ -6,6 +6,12 @@ FloatingToolbar = require './floating-toolbar.cjsx'
 
 module.exports =
 ContenteditableComponent = React.createClass
+  propTypes:
+    html: React.PropTypes.string
+    style: React.PropTypes.object
+    tabIndex: React.PropTypes.number
+    onChange: React.PropTypes.func.isRequired
+
   getInitialState: ->
     toolbarTop: 0
     toolbarMode: "buttons"

internal_packages/composer/spec/contenteditable-component-spec.cjsx

@@ -1,20 +1,13 @@
+# This tests the basic Contenteditable component. For various modules of
+# the contenteditable (such as selection, tooltip, quoting, etc) see the
+# related test files.
+#
 _ = require "underscore-plus"
 React = require "react/addons"
-
 ReactTestUtils = React.addons.TestUtils
-ReactTestUtils.scryRenderedDOMComponentsWithAttr = (root, attrName, attrValue) ->
-  ReactTestUtils.findAllInRenderedTree root, (inst) ->
-    inst.props[attrName] and (!attrValue or inst.props[attrName] is attrValue)
-
-ReactTestUtils.findRenderedDOMComponentWithAttr = (root, attrName, attrValue) ->
-  all = ReactTestUtils.scryRenderedDOMComponentsWithAttr(root, attrName, attrValue)
-  if all.length is not 1
-    throw new Error("Did not find exactly one match for data attribute: #{attrName} with value: #{attrValue}")
-  all[0]
-
 ContenteditableComponent = require "../lib/contenteditable-component.cjsx",
 
-describe "ContenteditableComponent", ->
+fdescribe "ContenteditableComponent", ->
   beforeEach ->
     @onChange = jasmine.createSpy('onChange')
     html = 'Test <strong>HTML</strong>'
@@ -22,11 +15,6 @@ describe "ContenteditableComponent", ->
       <ContenteditableComponent html={html} onChange={@onChange}/>
     )
 
-    html = 'Test <strong>HTML</strong><br><blockquote class="gmail_quote">QUOTE</blockquote>'
-    @componentWithQuote = ReactTestUtils.renderIntoDocument(
-      <ContenteditableComponent html={html} onChange={@onChange}/>
-    )
-
   describe "render", ->
     it 'should render into the document', ->
       expect(ReactTestUtils.isCompositeComponentWithType @component, ContenteditableComponent).toBe true
@@ -34,49 +22,12 @@ describe "ContenteditableComponent", ->
     it "should include a content-editable div", ->
       expect(ReactTestUtils.findRenderedDOMComponentWithAttr(@component, 'contentEditable')).toBeDefined()
 
-    describe "quoted-text-control", ->
-      it "should be rendered", ->
-        expect(ReactTestUtils.findRenderedDOMComponentWithClass(@component, 'quoted-text-control')).toBeDefined()
-
-      it "should be visible if the html contains quoted text", ->
-        @toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@componentWithQuote, 'quoted-text-control')
-        expect(@toggle.props.className.indexOf('no-quoted-text') >= 0).toBe(false)
-
-      it "should be have `show-quoted-text` if editQuotedText is true", ->
-        @componentWithQuote.setState(editQuotedText: true)
-        @toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@componentWithQuote, 'quoted-text-control')
-        expect(@toggle.props.className.indexOf('show-quoted-text') >= 0).toBe(true)
-
-      it "should not have `show-quoted-text` if editQuotedText is false", ->
-        @componentWithQuote.setState(editQuotedText: false)
-        @toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@componentWithQuote, 'quoted-text-control')
-        expect(@toggle.props.className.indexOf('show-quoted-text') >= 0).toBe(false)
-
-      it "should be hidden otherwise", ->
-        @toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@component, 'quoted-text-control')
-        expect(@toggle.props.className.indexOf('no-quoted-text') >= 0).toBe(true)
-
-    describe "when editQuotedText is false", ->
-      it "should only display HTML up to the beginning of the quoted text", ->
-        @editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(@componentWithQuote, 'contentEditable')
-        expect(@editDiv.getDOMNode().innerHTML.indexOf('gmail_quote') >= 0).toBe(false)
-
-    describe "when editQuotedText is true", ->
-      it "should display all the HTML", ->
-        @componentWithQuote.setState(editQuotedText: true)
-        @editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(@componentWithQuote, 'contentEditable')
-        expect(@editDiv.getDOMNode().innerHTML.indexOf('gmail_quote') >= 0).toBe(true)
-
-  describe "editQuotedText", ->
-    it "should default to false", ->
-      expect(@component.state.editQuotedText).toBe(false)
-
   describe "when the html is changed", ->
     beforeEach ->
       @changedHtmlWithoutQuote = 'Changed <strong>NEW 1 HTML</strong><br>'
       @changedHtmlWithQuote = 'Changed <strong>NEW 1 HTML</strong><br><blockquote class="gmail_quote">QUOTE</blockquote>'
 
-      @performEdit = (newHTML, component = @componentWithQuote) =>
+      @performEdit = (newHTML, component = @component) =>
         editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(component, 'contentEditable')
         editDiv.getDOMNode().innerHTML = newHTML
         ReactTestUtils.Simulate.input(editDiv, {target: {value: newHTML}})
@@ -93,31 +44,3 @@ describe "ContenteditableComponent", ->
       expect(@onChange.callCount).toBe(1)
       @performEdit(@changedHtmlWithoutQuote)
       expect(@onChange.callCount).toBe(2)
-
-    describe "when editQuotedText is true", ->
-      it "should call `props.onChange` with the entire HTML string", ->
-        @componentWithQuote.setState(editQuotedText: true)
-        @performEdit(@changedHtmlWithQuote)
-        ev = @onChange.mostRecentCall.args[0]
-        expect(ev.target.value).toEqual(@changedHtmlWithQuote)
-
-      it "should allow the quoted text to be changed", ->
-        changed = 'Test <strong>NEW 1 HTML</strong><br><blockquote class="gmail_quote">QUOTE CHANGED!!!</blockquote>'
-        @componentWithQuote.setState(editQuotedText: true)
-        @performEdit(changed)
-        ev = @onChange.mostRecentCall.args[0]
-        expect(ev.target.value).toEqual(changed)
-
-    describe "when editQuotedText is false", ->
-      it "should call `props.onChange` with the entire HTML string, even though the div being edited only contains some of it", ->
-        @componentWithQuote.setState(editQuotedText: false)
-        @performEdit(@changedHtmlWithoutQuote)
-        ev = @onChange.mostRecentCall.args[0]
-        expect(ev.target.value).toEqual(@changedHtmlWithQuote)
-
-      it "should work if the component does not contain quoted text", ->
-        changed = 'Hallooo! <strong>NEW 1 HTML HTML HTML</strong><br>'
-        @component.setState(editQuotedText: true)
-        @performEdit(changed, @component)
-        ev = @onChange.mostRecentCall.args[0]
-        expect(ev.target.value).toEqual(changed)

internal_packages/composer/spec/contenteditable-quoted-text-spec.cjsx

@@ -0,0 +1,97 @@
+# This tests just quoted text within a contenteditable.
+#
+# For a test of the basic component itself see
+# contenteditable-component-spec.cjsx
+#
+_ = require "underscore-plus"
+React = require "react/addons"
+ReactTestUtils = React.addons.TestUtils
+ContenteditableComponent = require "../lib/contenteditable-component.cjsx",
+
+fdescribe "ContenteditableComponent", ->
+  beforeEach ->
+    @onChange = jasmine.createSpy('onChange')
+    html = 'Test <strong>HTML</strong>'
+    @component = ReactTestUtils.renderIntoDocument(
+      <ContenteditableComponent html={html} onChange={@onChange}/>
+    )
+
+    html = 'Test <strong>HTML</strong><br><blockquote class="gmail_quote">QUOTE</blockquote>'
+    @componentWithQuote = ReactTestUtils.renderIntoDocument(
+      <ContenteditableComponent html={html} onChange={@onChange}/>
+    )
+
+  describe "quoted-text-control", ->
+    it "should be rendered", ->
+      expect(ReactTestUtils.findRenderedDOMComponentWithClass(@component, 'quoted-text-control')).toBeDefined()
+
+    it "should be visible if the html contains quoted text", ->
+      @toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@componentWithQuote, 'quoted-text-control')
+      expect(@toggle.props.className.indexOf('no-quoted-text') >= 0).toBe(false)
+
+    it "should be have `show-quoted-text` if editQuotedText is true", ->
+      @componentWithQuote.setState(editQuotedText: true)
+      @toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@componentWithQuote, 'quoted-text-control')
+      expect(@toggle.props.className.indexOf('show-quoted-text') >= 0).toBe(true)
+
+    it "should not have `show-quoted-text` if editQuotedText is false", ->
+      @componentWithQuote.setState(editQuotedText: false)
+      @toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@componentWithQuote, 'quoted-text-control')
+      expect(@toggle.props.className.indexOf('show-quoted-text') >= 0).toBe(false)
+
+    it "should be hidden otherwise", ->
+      @toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@component, 'quoted-text-control')
+      expect(@toggle.props.className.indexOf('no-quoted-text') >= 0).toBe(true)
+
+  describe "when editQuotedText is false", ->
+    it "should only display HTML up to the beginning of the quoted text", ->
+      @editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(@componentWithQuote, 'contentEditable')
+      expect(@editDiv.getDOMNode().innerHTML.indexOf('gmail_quote') >= 0).toBe(false)
+
+  describe "when editQuotedText is true", ->
+    it "should display all the HTML", ->
+      @componentWithQuote.setState(editQuotedText: true)
+      @editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(@componentWithQuote, 'contentEditable')
+      expect(@editDiv.getDOMNode().innerHTML.indexOf('gmail_quote') >= 0).toBe(true)
+
+  describe "editQuotedText", ->
+    it "should default to false", ->
+      expect(@component.state.editQuotedText).toBe(false)
+
+  describe "when the html is changed", ->
+    beforeEach ->
+      @changedHtmlWithoutQuote = 'Changed <strong>NEW 1 HTML</strong><br>'
+      @changedHtmlWithQuote = 'Changed <strong>NEW 1 HTML</strong><br><blockquote class="gmail_quote">QUOTE</blockquote>'
+
+      @performEdit = (newHTML, component = @componentWithQuote) =>
+        editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(component, 'contentEditable')
+        editDiv.getDOMNode().innerHTML = newHTML
+        ReactTestUtils.Simulate.input(editDiv, {target: {value: newHTML}})
+
+    describe "when editQuotedText is true", ->
+      it "should call `props.onChange` with the entire HTML string", ->
+        @componentWithQuote.setState(editQuotedText: true)
+        @performEdit(@changedHtmlWithQuote)
+        ev = @onChange.mostRecentCall.args[0]
+        expect(ev.target.value).toEqual(@changedHtmlWithQuote)
+
+      it "should allow the quoted text to be changed", ->
+        changed = 'Test <strong>NEW 1 HTML</strong><br><blockquote class="gmail_quote">QUOTE CHANGED!!!</blockquote>'
+        @componentWithQuote.setState(editQuotedText: true)
+        @performEdit(changed)
+        ev = @onChange.mostRecentCall.args[0]
+        expect(ev.target.value).toEqual(changed)
+
+    describe "when editQuotedText is false", ->
+      it "should call `props.onChange` with the entire HTML string, even though the div being edited only contains some of it", ->
+        @componentWithQuote.setState(editQuotedText: false)
+        @performEdit(@changedHtmlWithoutQuote)
+        ev = @onChange.mostRecentCall.args[0]
+        expect(ev.target.value).toEqual(@changedHtmlWithQuote)
+
+      it "should work if the component does not contain quoted text", ->
+        changed = 'Hallooo! <strong>NEW 1 HTML HTML HTML</strong><br>'
+        @component.setState(editQuotedText: true)
+        @performEdit(changed, @component)
+        ev = @onChange.mostRecentCall.args[0]
+        expect(ev.target.value).toEqual(changed)