mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-23 00:36:50 +08:00
68343ec472
Summary: This diff moves us up to React 0.13.2 and transitions some of the core React components to the new syntax based on plain Javascript objects. `setInitialState` is now just code in the constructor, `getDOMNode(@)` is now `React.findDOMNode(@)`, and `isMounted` is no longer necessary or available. This diff also adds `RegisteredComponent` to match `RegisteredRegion`. In another diff, I think we should change the names of these to be `DynamicComponent` and `DynamicComponentSet`. This diff also includes preliminary API Reference docs for Menu.cjsx and Popover.cjsx. You can build the docs using `grunt docs` from the build folder. It produces a simple html format now, but it's easy to customize. Also we now ignore "Unnecessary fat arrow" Test Plan: Run tests Reviewers: evan Reviewed By: evan Differential Revision: https://review.inboxapp.com/D1437
116 lines
5.5 KiB
CoffeeScript
116 lines
5.5 KiB
CoffeeScript
# 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",
|
|
|
|
describe "ContenteditableComponent", ->
|
|
beforeEach ->
|
|
@onChange = jasmine.createSpy('onChange')
|
|
html = 'Test <strong>HTML</strong>'
|
|
@component = ReactTestUtils.renderIntoDocument(
|
|
<ContenteditableComponent html={html} onChange={@onChange}/>
|
|
)
|
|
|
|
@htmlWithQuote = 'Test <strong>HTML</strong><br><br><blockquote class="gmail_quote">QUOTE</blockquote>'
|
|
@componentWithQuote = ReactTestUtils.renderIntoDocument(
|
|
<ContenteditableComponent html={@htmlWithQuote}
|
|
onChange={@onChange}
|
|
mode={showQuotedText: false}/>
|
|
)
|
|
|
|
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}/>
|
|
)
|
|
@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)
|
|
@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 only display HTML up to the beginning of the quoted text", ->
|
|
@editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(@componentWithQuote, 'contentEditable')
|
|
expect(React.findDOMNode(@editDiv).innerHTML.indexOf('gmail_quote') >= 0).toBe(false)
|
|
|
|
describe "when showQuotedText is true", ->
|
|
beforeEach ->
|
|
@componentWithQuote = ReactTestUtils.renderIntoDocument(
|
|
<ContenteditableComponent html={@htmlWithQuote}
|
|
onChange={@onChange}
|
|
mode={showQuotedText: true}/>
|
|
)
|
|
|
|
it "should display all the HTML", ->
|
|
@componentWithQuote.setState(showQuotedText: true)
|
|
@editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(@componentWithQuote, 'contentEditable')
|
|
expect(React.findDOMNode(@editDiv).innerHTML.indexOf('gmail_quote') >= 0).toBe(true)
|
|
|
|
describe "showQuotedText", ->
|
|
it "should default to false", ->
|
|
expect(@component.props.mode?.showQuotedText).toBeUndefined()
|
|
|
|
describe "when the html is changed", ->
|
|
beforeEach ->
|
|
@changedHtmlWithoutQuote = 'Changed <strong>NEW 1 HTML</strong>'
|
|
@changedHtmlWithQuote = 'Changed <strong>NEW 1 HTML</strong><br><br><blockquote class="gmail_quote">QUOTE</blockquote>'
|
|
|
|
@performEdit = (newHTML, component = @componentWithQuote) =>
|
|
editDiv = ReactTestUtils.findRenderedDOMComponentWithAttr(component, 'contentEditable')
|
|
React.findDOMNode(editDiv).innerHTML = newHTML
|
|
ReactTestUtils.Simulate.input(editDiv, {target: {value: newHTML}})
|
|
|
|
describe "when showQuotedText is true", ->
|
|
beforeEach ->
|
|
@componentWithQuote = ReactTestUtils.renderIntoDocument(
|
|
<ContenteditableComponent html={@htmlWithQuote}
|
|
onChange={@onChange}
|
|
mode={showQuotedText: true}/>
|
|
)
|
|
|
|
it "should call `props.onChange` with the entire HTML string", ->
|
|
@componentWithQuote.setState(showQuotedText: 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><blockquote class="gmail_quote">QUOTE CHANGED!!!</blockquote>'
|
|
@componentWithQuote.setState(showQuotedText: true)
|
|
@performEdit(changed)
|
|
ev = @onChange.mostRecentCall.args[0]
|
|
expect(ev.target.value).toEqual(changed)
|
|
|
|
describe "when showQuotedText 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(showQuotedText: 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(showQuotedText: true)
|
|
@performEdit(changed, @component)
|
|
ev = @onChange.mostRecentCall.args[0]
|
|
expect(ev.target.value).toEqual(changed)
|