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

117 lines
5.6 KiB
Text
Raw Normal View History

2015-03-06 08:00:56 +08:00
# This tests just quoted text within a contenteditable.
#
# For a test of the basic component itself see
# contenteditable-component-spec.cjsx
#
_ = require "underscore"
2015-03-06 08:00:56 +08:00
React = require "react/addons"
ReactTestUtils = React.addons.TestUtils
ContenteditableComponent = require "../lib/contenteditable-component",
2015-03-06 08:00:56 +08:00
2015-03-06 08:02:47 +08:00
describe "ContenteditableComponent", ->
2015-03-06 08:00:56 +08:00
beforeEach ->
@onChange = jasmine.createSpy('onChange')
@html = 'Test <strong>HTML</strong><br>'
2015-03-06 08:00:56 +08:00
@component = ReactTestUtils.renderIntoDocument(
<ContenteditableComponent html={@html} onChange={@onChange}/>
2015-03-06 08:00:56 +08:00
)
@htmlWithQuote = 'Test <strong>HTML</strong><br><br><blockquote class="gmail_quote">QUOTE</blockquote>'
2015-03-06 08:00:56 +08:00
@componentWithQuote = ReactTestUtils.renderIntoDocument(
<ContenteditableComponent html={@htmlWithQuote}
onChange={@onChange}
mode={showQuotedText: false}/>
2015-03-06 08:00:56 +08:00
)
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 showQuotedText is true", ->
@componentWithQuote = ReactTestUtils.renderIntoDocument(
<ContenteditableComponent html={@htmlWithQuote} onChange={@onChange} mode={showQuotedText: true}/>
)
2015-03-06 08:00:56 +08:00
@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 showQuotedText is false", ->
@componentWithQuote.setState(showQuotedText: false)
2015-03-06 08:00:56 +08:00
@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 showQuotedText is false", ->
it "should not display quoted text", ->
2015-03-06 08:00:56 +08:00
@editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(@componentWithQuote, 'contentEditable')
expect(React.findDOMNode(@editDiv).innerHTML).toEqual @html
2015-03-06 08:00:56 +08:00
describe "when showQuotedText is true", ->
beforeEach ->
@componentWithQuote = ReactTestUtils.renderIntoDocument(
<ContenteditableComponent html={@htmlWithQuote}
onChange={@onChange}
mode={showQuotedText: true}/>
)
2015-03-06 08:00:56 +08:00
it "should display all the HTML", ->
@componentWithQuote.setState(showQuotedText: true)
2015-03-06 08:00:56 +08:00
@editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(@componentWithQuote, 'contentEditable')
expect(React.findDOMNode(@editDiv).innerHTML.indexOf('gmail_quote') >= 0).toBe(true)
2015-03-06 08:00:56 +08:00
describe "showQuotedText", ->
2015-03-06 08:00:56 +08:00
it "should default to false", ->
expect(@component.props.mode?.showQuotedText).toBeUndefined()
2015-03-06 08:00:56 +08:00
describe "when the html is changed", ->
beforeEach ->
@changedHtmlWithoutQuote = '<head></head><body>Changed <strong>NEW 1 HTML</strong><br><br></body>'
@changedHtmlWithQuote = 'Changed <strong>NEW 1 HTML</strong><br><br><blockquote class="gmail_quote">QUOTE</blockquote>'
2015-03-06 08:00:56 +08:00
@performEdit = (newHTML, component = @componentWithQuote) =>
editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(component, 'contentEditable')
React.findDOMNode(editDiv).innerHTML = newHTML
2015-03-06 08:00:56 +08:00
ReactTestUtils.Simulate.input(editDiv, {target: {value: newHTML}})
describe "when showQuotedText is true", ->
beforeEach ->
@componentWithQuote = ReactTestUtils.renderIntoDocument(
<ContenteditableComponent html={@htmlWithQuote}
onChange={@onChange}
mode={showQuotedText: true}/>
)
2015-03-06 08:00:56 +08:00
it "should call `props.onChange` with the entire HTML string", ->
@componentWithQuote.setState(showQuotedText: true)
2015-03-06 08:00:56 +08:00
@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><blockquote class="gmail_quote">QUOTE CHANGED!!!</blockquote>'
@componentWithQuote.setState(showQuotedText: true)
2015-03-06 08:00:56 +08:00
@performEdit(changed)
ev = @onChange.mostRecentCall.args[0]
expect(ev.target.value).toEqual(changed)
describe "when showQuotedText is false", ->
it "should let you change the text, and then append the quoted text part to the end before firing `onChange`", ->
@componentWithQuote.setState(showQuotedText: false)
2015-03-06 08:00:56 +08:00
@performEdit(@changedHtmlWithoutQuote)
ev = @onChange.mostRecentCall.args[0]
withQuote = "<head></head><body>#{@changedHtmlWithQuote}</body>"
expect(ev.target.value).toEqual(withQuote)
2015-03-06 08:00:56 +08:00
it "should work if the component does not contain quoted text", ->
changed = '<head></head><body>Hallooo! <strong>NEW 1 HTML HTML HTML</strong><br></body>'
@component.setState(showQuotedText: true)
2015-03-06 08:00:56 +08:00
@performEdit(changed, @component)
ev = @onChange.mostRecentCall.args[0]
expect(ev.target.value).toEqual(changed)