mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-11-03 10:43:14 +08:00
tests for contenteditable component
This commit is contained in:
Evan Morikawa
parent
06eb12f395
commit
73f4c97910
3 changed files with 109 additions and 83 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
Loading…
Add table
Reference in a new issue