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
|
|
|
|
|
#
|
2015-05-20 07:06:59 +08:00
|
|
|
_ = require "underscore"
|
2015-03-06 08:00:56 +08:00
|
|
|
React = require "react/addons"
|
|
|
|
|
ReactTestUtils = React.addons.TestUtils
|
2015-03-21 08:51:49 +08:00
|
|
|
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')
|
2015-09-04 10:41:56 +08:00
|
|
|
@htmlNoQuote = 'Test <strong>HTML</strong><br>'
|
|
|
|
|
@htmlWithQuote = 'Test <strong>HTML</strong><br><blockquote class="gmail_quote">QUOTE</blockquote>'
|
|
|
|
|
|
|
|
|
|
# Must be called with the test's scope
|
|
|
|
|
setHTML = (newHTML) ->
|
|
|
|
|
@$contentEditable.innerHTML = newHTML
|
|
|
|
|
ReactTestUtils.Simulate.input(@$contentEditable, {target: {value: newHTML}})
|
|
|
|
|
|
|
|
|
|
describe "quoted-text-control toggle button", ->
|
|
|
|
|
|
|
|
|
|
describe "when there's no quoted text", ->
|
2015-03-18 07:19:40 +08:00
|
|
|
beforeEach ->
|
2015-09-04 10:41:56 +08:00
|
|
|
@contentEditable = ReactTestUtils.renderIntoDocument(
|
|
|
|
|
<ContenteditableComponent html={@htmlNoQuote}
|
2015-03-18 07:19:40 +08:00
|
|
|
onChange={@onChange}
|
2015-09-04 10:41:56 +08:00
|
|
|
mode={showQuotedText: true}/>)
|
|
|
|
|
@$contentEditable = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithAttr(@contentEditable, 'contentEditable'))
|
2015-03-18 07:19:40 +08:00
|
|
|
|
2015-09-04 10:41:56 +08:00
|
|
|
it 'should not display any quoted text', ->
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlNoQuote
|
2015-03-06 08:00:56 +08:00
|
|
|
|
2015-09-04 10:41:56 +08:00
|
|
|
it "allows the text to update", ->
|
|
|
|
|
textToAdd = "MORE <strong>TEXT</strong>!"
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlNoQuote
|
|
|
|
|
setHTML.call(@, textToAdd + @htmlNoQuote)
|
|
|
|
|
ev = @onChange.mostRecentCall.args[0]
|
|
|
|
|
expect(ev.target.value).toEqual(textToAdd + @htmlNoQuote)
|
2015-03-06 08:00:56 +08:00
|
|
|
|
2015-09-04 10:41:56 +08:00
|
|
|
it 'should not render the quoted-text-control toggle', ->
|
|
|
|
|
toggles = ReactTestUtils.scryRenderedDOMComponentsWithClass(@contentEditable, 'quoted-text-control')
|
|
|
|
|
expect(toggles.length).toBe 0
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
describe 'when showQuotedText is true', ->
|
2015-03-06 08:00:56 +08:00
|
|
|
beforeEach ->
|
2015-09-04 10:41:56 +08:00
|
|
|
@contentEditable = ReactTestUtils.renderIntoDocument(
|
|
|
|
|
<ContenteditableComponent html={@htmlWithQuote}
|
|
|
|
|
onChange={@onChange}
|
|
|
|
|
mode={showQuotedText: true}/>)
|
|
|
|
|
@$contentEditable = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithAttr(@contentEditable, 'contentEditable'))
|
|
|
|
|
|
|
|
|
|
it 'should display the quoted text', ->
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlWithQuote
|
|
|
|
|
|
|
|
|
|
it "should call `props.onChange` with the entire HTML string", ->
|
|
|
|
|
textToAdd = "MORE <strong>TEXT</strong>!"
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlWithQuote
|
|
|
|
|
setHTML.call(@, textToAdd + @htmlWithQuote)
|
|
|
|
|
ev = @onChange.mostRecentCall.args[0]
|
|
|
|
|
expect(ev.target.value).toEqual(textToAdd + @htmlWithQuote)
|
|
|
|
|
|
|
|
|
|
it "should allow the quoted text to be changed", ->
|
|
|
|
|
newText = 'Test <strong>NEW 1 HTML</strong><blockquote class="gmail_quote">QUOTE CHANGED!!!</blockquote>'
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlWithQuote
|
|
|
|
|
setHTML.call(@, newText)
|
|
|
|
|
ev = @onChange.mostRecentCall.args[0]
|
|
|
|
|
expect(ev.target.value).toEqual(newText)
|
|
|
|
|
|
|
|
|
|
describe 'quoted text control toggle button', ->
|
|
|
|
|
beforeEach ->
|
|
|
|
|
@toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@contentEditable, 'quoted-text-control')
|
|
|
|
|
|
|
|
|
|
it 'should be rendered', ->
|
|
|
|
|
expect(@toggle).toBeDefined()
|
2015-03-06 08:00:56 +08:00
|
|
|
|
2015-09-04 10:41:56 +08:00
|
|
|
it 'prompts to hide the quote', ->
|
|
|
|
|
expect(React.findDOMNode(@toggle).textContent).toEqual "•••Hide previous"
|
2015-03-06 08:00:56 +08:00
|
|
|
|
2015-09-04 10:41:56 +08:00
|
|
|
describe 'when showQuotedText is false', ->
|
|
|
|
|
beforeEach ->
|
|
|
|
|
@contentEditable = ReactTestUtils.renderIntoDocument(
|
|
|
|
|
<ContenteditableComponent html={@htmlWithQuote}
|
|
|
|
|
onChange={@onChange}
|
|
|
|
|
mode={showQuotedText: false}/>)
|
|
|
|
|
@$contentEditable = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithAttr(@contentEditable, 'contentEditable'))
|
|
|
|
|
|
|
|
|
|
# The quoted text dom parser wraps stuff inertly in body tags
|
|
|
|
|
wrapBody = (html) -> "<head></head><body>#{html}</body>"
|
|
|
|
|
|
|
|
|
|
it 'should not display any quoted text', ->
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlNoQuote
|
|
|
|
|
|
|
|
|
|
it "should let you change the text, and then append the quoted text part to the end before firing `onChange`", ->
|
|
|
|
|
textToAdd = "MORE <strong>TEXT</strong>!"
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlNoQuote
|
|
|
|
|
setHTML.call(@, textToAdd + @htmlNoQuote)
|
|
|
|
|
ev = @onChange.mostRecentCall.args[0]
|
|
|
|
|
# Note that we expect the version WITH a quote while setting the
|
|
|
|
|
# version withOUT a quote.
|
|
|
|
|
expect(ev.target.value).toEqual(wrapBody(textToAdd + @htmlWithQuote))
|
|
|
|
|
|
|
|
|
|
it "should let you add more html that looks like quoted text, and still properly appends the old quoted text", ->
|
|
|
|
|
textToAdd = "Yo <blockquote class=\"gmail_quote\">I'm a fake quote</blockquote>"
|
|
|
|
|
expect(@$contentEditable.innerHTML).toBe @htmlNoQuote
|
|
|
|
|
setHTML.call(@, textToAdd + @htmlNoQuote)
|
|
|
|
|
ev = @onChange.mostRecentCall.args[0]
|
|
|
|
|
# Note that we expect the version WITH a quote while setting the
|
|
|
|
|
# version withOUT a quote.
|
|
|
|
|
expect(ev.target.value).toEqual(wrapBody(textToAdd + @htmlWithQuote))
|
|
|
|
|
|
|
|
|
|
describe 'quoted text control toggle button', ->
|
2015-03-18 07:19:40 +08:00
|
|
|
beforeEach ->
|
2015-09-04 10:41:56 +08:00
|
|
|
@toggle = ReactTestUtils.findRenderedDOMComponentWithClass(@contentEditable, 'quoted-text-control')
|
|
|
|
|
|
|
|
|
|
it 'should be rendered', ->
|
|
|
|
|
expect(@toggle).toBeDefined()
|
|
|
|
|
|
|
|
|
|
it 'prompts to hide the quote', ->
|
|
|
|
|
expect(React.findDOMNode(@toggle).textContent).toEqual "•••Show previous"
|
