mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
bda80df05c
Summary: Fixes T2272 If the label is too long, the unread icons will now ellipsis truncate the text correctly instead of being pushed off of the side. I made the max-width of the sidebar 17px wider to allow for Karim's french "Inbox" translation. Fixes T2266 Added some more protection to places where filenames could be blank when downloading. This was partially fixed by Rob's D1685 Fixes T2258 You can now finish selecting a participant by pressing `space`, but only when the participant looks like an email address. When you do this we directly add the email address to the chip instead of looking up a contact. This allows you to send just to the email instead of adding a potentially erroneous name into the input field Test Plan: edgehill --test Reviewers: bengotow Reviewed By: bengotow Maniphest Tasks: T2272, T2266, T2258 Differential Revision: https://phab.nylas.com/D1729
267 lines
11 KiB
CoffeeScript
267 lines
11 KiB
CoffeeScript
_ = require 'underscore'
|
|
React = require 'react/addons'
|
|
ReactTestUtils = React.addons.TestUtils
|
|
|
|
{NylasTestUtils,
|
|
Namespace,
|
|
NamespaceStore,
|
|
Contact,
|
|
} = require 'nylas-exports'
|
|
{TokenizingTextField, Menu} = require 'nylas-component-kit'
|
|
|
|
me = new Namespace
|
|
name: 'Test User'
|
|
email: 'test@example.com'
|
|
provider: 'inbox'
|
|
NamespaceStore._current = me
|
|
|
|
CustomToken = React.createClass
|
|
render: ->
|
|
<span>{@props.item.email}</span>
|
|
|
|
CustomSuggestion = React.createClass
|
|
render: ->
|
|
<span>{@props.item.email}</span>
|
|
|
|
participant1 = new Contact
|
|
email: 'ben@nylas.com'
|
|
participant2 = new Contact
|
|
email: 'burgers@nylas.com'
|
|
name: 'Nylas Burger Basket'
|
|
participant3 = new Contact
|
|
email: 'evan@nylas.com'
|
|
name: 'Evan'
|
|
participant4 = new Contact
|
|
email: 'tester@elsewhere.com',
|
|
name: 'Tester'
|
|
participant5 = new Contact
|
|
email: 'michael@elsewhere.com',
|
|
name: 'Michael'
|
|
|
|
describe 'TokenizingTextField', ->
|
|
NylasTestUtils.loadKeymap()
|
|
|
|
beforeEach ->
|
|
@completions = []
|
|
@propAdd = jasmine.createSpy 'add'
|
|
@propRemove = jasmine.createSpy 'remove'
|
|
@propEmptied = jasmine.createSpy 'emptied'
|
|
@propTokenKey = jasmine.createSpy("tokenKey").andCallFake (p) -> p.email
|
|
@propTokenNode = (p) -> <CustomToken item={p} />
|
|
@propOnTokenAction = jasmine.createSpy 'tokenAction'
|
|
@propCompletionNode = (p) -> <CustomSuggestion item={p} />
|
|
@propCompletionsForInput = (input) => @completions
|
|
|
|
spyOn(@, 'propCompletionNode').andCallThrough()
|
|
spyOn(@, 'propCompletionsForInput').andCallThrough()
|
|
|
|
@tabIndex = 100
|
|
@tokens = [participant1, participant2, participant3]
|
|
|
|
@renderedField = ReactTestUtils.renderIntoDocument(
|
|
<TokenizingTextField
|
|
tokens={@tokens}
|
|
tokenKey={@propTokenKey}
|
|
tokenNode={@propTokenNode}
|
|
onRequestCompletions={@propCompletionsForInput}
|
|
completionNode={@propCompletionNode}
|
|
onAdd={@propAdd}
|
|
onRemove={@propRemove}
|
|
onEmptied={@propEmptied}
|
|
onTokenAction={@propOnTokenAction}
|
|
tabIndex={@tabIndex}
|
|
/>
|
|
)
|
|
|
|
@renderedInput = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(@renderedField, 'input'))
|
|
|
|
it 'renders into the document', ->
|
|
expect(ReactTestUtils.isCompositeComponentWithType @renderedField, TokenizingTextField).toBe(true)
|
|
|
|
it 'applies the tabIndex provided to the inner input', ->
|
|
expect(@renderedInput.tabIndex).toBe(@tabIndex)
|
|
|
|
it 'shows the tokens provided by the tokenNode method', ->
|
|
@renderedTokens = ReactTestUtils.scryRenderedComponentsWithType(@renderedField, CustomToken)
|
|
expect(@renderedTokens.length).toBe(@tokens.length)
|
|
|
|
it 'shows the tokens in the correct order', ->
|
|
@renderedTokens = ReactTestUtils.scryRenderedComponentsWithType(@renderedField, CustomToken)
|
|
for i in [0..@tokens.length-1]
|
|
expect(@renderedTokens[i].props.item).toBe(@tokens[i])
|
|
|
|
describe "When the user selects a token", ->
|
|
beforeEach ->
|
|
token = ReactTestUtils.scryRenderedDOMComponentsWithClass(@renderedField, 'token')[0]
|
|
ReactTestUtils.Simulate.click(token)
|
|
|
|
it "should mark the token as focused", ->
|
|
expect(@propTokenKey).toHaveBeenCalledWith(participant1)
|
|
|
|
it "should set the selectedTokenKeyState", ->
|
|
expect(@renderedField.state.selectedTokenKey).toBe participant1.email
|
|
|
|
it "should return the appropriate token objet", ->
|
|
expect(@renderedField._selectedToken()).toBe participant1
|
|
|
|
describe "when focused", ->
|
|
it 'should receive the `focused` class', ->
|
|
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(@renderedField, 'focused').length).toBe(0)
|
|
ReactTestUtils.Simulate.focus(@renderedInput)
|
|
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(@renderedField, 'focused').length).toBe(1)
|
|
|
|
describe "when the user types in the input", ->
|
|
it 'should fetch completions for the text', ->
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc'}})
|
|
advanceClock(1000)
|
|
expect(@propCompletionsForInput.calls[0].args[0]).toBe('abc')
|
|
|
|
it 'should fetch completions on focus', ->
|
|
@renderedField.setState inputValue: "abc"
|
|
ReactTestUtils.Simulate.focus(@renderedInput)
|
|
advanceClock(1000)
|
|
expect(@propCompletionsForInput.calls[0].args[0]).toBe('abc')
|
|
|
|
it 'should display the completions', ->
|
|
@completions = [participant4, participant5]
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc'}})
|
|
|
|
components = ReactTestUtils.scryRenderedComponentsWithType(@renderedField, CustomSuggestion)
|
|
expect(components.length).toBe(2)
|
|
expect(components[0].props.item).toBe(participant4)
|
|
expect(components[1].props.item).toBe(participant5)
|
|
|
|
it 'should not display items with keys matching items already in the token field', ->
|
|
@completions = [participant2, participant4, participant1]
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc'}})
|
|
|
|
components = ReactTestUtils.scryRenderedComponentsWithType(@renderedField, CustomSuggestion)
|
|
expect(components.length).toBe(1)
|
|
expect(components[0].props.item).toBe(participant4)
|
|
|
|
it 'should highlight the first completion', ->
|
|
@completions = [participant4, participant5]
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc'}})
|
|
components = ReactTestUtils.scryRenderedComponentsWithType(@renderedField, Menu.Item)
|
|
menuItem = components[0]
|
|
expect(menuItem.props.selected).toBe true
|
|
|
|
it 'select the clicked element', ->
|
|
@completions = [participant4, participant5]
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc'}})
|
|
components = ReactTestUtils.scryRenderedComponentsWithType(@renderedField, Menu.Item)
|
|
menuItem = components[0]
|
|
ReactTestUtils.Simulate.mouseDown(React.findDOMNode(menuItem))
|
|
expect(@propAdd).toHaveBeenCalledWith([participant4])
|
|
|
|
it "manually enters whatever's in the field when the user presses the space bar as long as it looks like an email", ->
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc@foo.com '}})
|
|
advanceClock(10)
|
|
expect(@propAdd).toHaveBeenCalledWith("abc@foo.com", skipNameLookup: true)
|
|
|
|
it "doesn't sumbmit if it looks like an email but has no space at the end", ->
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc@foo.com'}})
|
|
advanceClock(10)
|
|
expect(@propCompletionsForInput.calls[0].args[0]).toBe('abc@foo.com')
|
|
expect(@propAdd).not.toHaveBeenCalled()
|
|
|
|
it "allows spaces if what's currently being entered doesn't look like an email", ->
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'ab'}})
|
|
advanceClock(10)
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'ab '}})
|
|
advanceClock(10)
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'ab c'}})
|
|
advanceClock(10)
|
|
expect(@propCompletionsForInput.calls[2].args[0]).toBe('ab c')
|
|
expect(@propAdd).not.toHaveBeenCalled()
|
|
|
|
['enter', ','].forEach (key) ->
|
|
describe "when the user presses #{key}", ->
|
|
describe "and there is an completion available", ->
|
|
it "should call add with the first completion", ->
|
|
@completions = [participant4]
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc'}})
|
|
NylasTestUtils.keyPress(key, @renderedInput)
|
|
expect(@propAdd).toHaveBeenCalledWith([participant4])
|
|
|
|
describe "and there is NO completion available", ->
|
|
it 'should call add, allowing the parent to (optionally) turn the text into a token', ->
|
|
@completions = []
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc'}})
|
|
NylasTestUtils.keyPress(key, @renderedInput)
|
|
expect(@propAdd).toHaveBeenCalledWith('abc', {})
|
|
|
|
describe "when the user presses tab", ->
|
|
describe "and there is an completion available", ->
|
|
it "should call add with the first completion", ->
|
|
@completions = [participant4]
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'abc'}})
|
|
NylasTestUtils.keyPress('tab', @renderedInput)
|
|
expect(@propAdd).toHaveBeenCalledWith([participant4])
|
|
|
|
describe "when blurred", ->
|
|
it 'should call add, allowing the parent component to (optionally) turn the entered text into a token', ->
|
|
ReactTestUtils.Simulate.focus(@renderedInput)
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'text'}})
|
|
ReactTestUtils.Simulate.blur(@renderedInput)
|
|
expect(@propAdd).toHaveBeenCalledWith('text', {})
|
|
|
|
it 'should clear the entered text', ->
|
|
ReactTestUtils.Simulate.focus(@renderedInput)
|
|
ReactTestUtils.Simulate.change(@renderedInput, {target: {value: 'text'}})
|
|
ReactTestUtils.Simulate.blur(@renderedInput)
|
|
expect(@renderedInput.value).toBe('')
|
|
|
|
it 'should no longer have the `focused` class', ->
|
|
ReactTestUtils.Simulate.focus(@renderedInput)
|
|
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(@renderedField, 'focused').length).toBe(1)
|
|
ReactTestUtils.Simulate.blur(@renderedInput)
|
|
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(@renderedField, 'focused').length).toBe(0)
|
|
|
|
|
|
describe "When the user removes a token", ->
|
|
|
|
it "deletes with the backspace key", ->
|
|
spyOn(@renderedField, "_removeToken")
|
|
NylasTestUtils.keyPress("backspace", @renderedInput)
|
|
expect(@renderedField._removeToken).toHaveBeenCalled()
|
|
|
|
describe "when removal is passed in a token object", ->
|
|
it "asks to removes that participant", ->
|
|
@renderedField._removeToken(participant1)
|
|
expect(@propRemove).toHaveBeenCalledWith([participant1])
|
|
expect(@propEmptied).not.toHaveBeenCalled()
|
|
|
|
describe "when no token is selected", ->
|
|
it "selects the last token first and doesn't remove", ->
|
|
@renderedField._removeToken()
|
|
expect(@renderedField._selectedToken()).toBe participant3
|
|
expect(@propRemove).not.toHaveBeenCalled()
|
|
expect(@propEmptied).not.toHaveBeenCalled()
|
|
|
|
describe "when a token is selected", ->
|
|
beforeEach ->
|
|
@renderedField.setState selectedTokenKey: participant1.email
|
|
|
|
it "removes that token and deselects", ->
|
|
@renderedField._removeToken()
|
|
expect(@propRemove).toHaveBeenCalledWith([participant1])
|
|
expect(@renderedField._selectedToken()).toBeUndefined()
|
|
expect(@propEmptied).not.toHaveBeenCalled()
|
|
|
|
it "removes on cut when a token is selected", ->
|
|
@renderedField._onCut({preventDefault: -> })
|
|
expect(@propRemove).toHaveBeenCalledWith([participant1])
|
|
expect(@renderedField._selectedToken()).toBeUndefined()
|
|
expect(@propEmptied).not.toHaveBeenCalled()
|
|
|
|
describe "when there are no tokens left", ->
|
|
it "fires onEmptied", ->
|
|
newProps = _.clone @renderedField.props
|
|
newProps.tokens = []
|
|
emptyField = ReactTestUtils.renderIntoDocument(
|
|
React.createElement(TokenizingTextField, newProps)
|
|
)
|
|
emptyField._removeToken()
|
|
expect(@propEmptied).toHaveBeenCalled()
|