mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-09-20 15:37:46 +03:00
4923 lines
202 KiB
JavaScript
4923 lines
202 KiB
JavaScript
/** @babel */
|
|
|
|
import {it, fit, ffit, fffit, beforeEach, afterEach, conditionPromise} from './async-spec-helpers'
|
|
import TextEditorElement from '../src/text-editor-element'
|
|
import _, {extend, flatten, last, toArray} from 'underscore-plus'
|
|
|
|
const NBSP = String.fromCharCode(160)
|
|
const TILE_SIZE = 3
|
|
|
|
describe('TextEditorComponent', function () {
|
|
let charWidth, component, componentNode, contentNode, editor,
|
|
horizontalScrollbarNode, lineHeightInPixels, tileHeightInPixels,
|
|
verticalScrollbarNode, wrapperNode, animationFrameRequests
|
|
|
|
function runAnimationFrames (runFollowupFrames) {
|
|
if (runFollowupFrames) {
|
|
let fn
|
|
while (fn = animationFrameRequests.shift()) fn()
|
|
} else {
|
|
const requests = animationFrameRequests.slice()
|
|
animationFrameRequests = []
|
|
for (let fn of requests) fn()
|
|
}
|
|
}
|
|
|
|
beforeEach(async function () {
|
|
animationFrameRequests = []
|
|
spyOn(window, 'requestAnimationFrame').andCallFake(function (fn) { animationFrameRequests.push(fn) })
|
|
jasmine.useMockClock()
|
|
|
|
await atom.packages.activatePackage('language-javascript')
|
|
editor = await atom.workspace.open('sample.js')
|
|
|
|
contentNode = document.querySelector('#jasmine-content')
|
|
contentNode.style.width = '1000px'
|
|
|
|
wrapperNode = new TextEditorElement()
|
|
wrapperNode.tileSize = TILE_SIZE
|
|
wrapperNode.initialize(editor, atom)
|
|
wrapperNode.setUpdatedSynchronously(false)
|
|
jasmine.attachToDOM(wrapperNode)
|
|
|
|
component = wrapperNode.component
|
|
component.setFontFamily('monospace')
|
|
component.setLineHeight(1.3)
|
|
component.setFontSize(20)
|
|
|
|
lineHeightInPixels = editor.getLineHeightInPixels()
|
|
tileHeightInPixels = TILE_SIZE * lineHeightInPixels
|
|
charWidth = editor.getDefaultCharWidth()
|
|
|
|
componentNode = component.getDomNode()
|
|
verticalScrollbarNode = componentNode.querySelector('.vertical-scrollbar')
|
|
horizontalScrollbarNode = componentNode.querySelector('.horizontal-scrollbar')
|
|
|
|
component.measureDimensions()
|
|
advanceClock(atom.views.minimumPollInterval)
|
|
runAnimationFrames(true)
|
|
})
|
|
|
|
afterEach(function () {
|
|
contentNode.style.width = ''
|
|
})
|
|
|
|
describe('async updates', function () {
|
|
it('handles corrupted state gracefully', function () {
|
|
editor.insertNewline()
|
|
component.presenter.startRow = -1
|
|
component.presenter.endRow = 9999
|
|
runAnimationFrames() // assert an update does occur
|
|
})
|
|
|
|
it('does not update when an animation frame was requested but the component got destroyed before its delivery', function () {
|
|
editor.setText('You should not see this update.')
|
|
component.destroy()
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(component.lineNodeForScreenRow(0).textContent).not.toBe('You should not see this update.')
|
|
})
|
|
})
|
|
|
|
describe('line rendering', function () {
|
|
function expectTileContainsRow (tileNode, screenRow, {top}) {
|
|
let lineNode = tileNode.querySelector('[data-screen-row="' + screenRow + '"]')
|
|
let text = editor.lineTextForScreenRow(screenRow)
|
|
expect(lineNode.offsetTop).toBe(top)
|
|
if (text === '') {
|
|
expect(lineNode.textContent).toBe(' ')
|
|
} else {
|
|
expect(lineNode.textContent).toBe(text)
|
|
}
|
|
}
|
|
|
|
it('gives the lines container the same height as the wrapper node', function () {
|
|
let linesNode = componentNode.querySelector('.lines')
|
|
wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(linesNode.getBoundingClientRect().height).toBe(6.5 * lineHeightInPixels)
|
|
wrapperNode.style.height = 3.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(linesNode.getBoundingClientRect().height).toBe(3.5 * lineHeightInPixels)
|
|
})
|
|
|
|
it('renders higher tiles in front of lower ones', function () {
|
|
wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
|
|
runAnimationFrames()
|
|
|
|
let tilesNodes = component.tileNodesForLines()
|
|
expect(tilesNodes[0].style.zIndex).toBe('2')
|
|
expect(tilesNodes[1].style.zIndex).toBe('1')
|
|
expect(tilesNodes[2].style.zIndex).toBe('0')
|
|
verticalScrollbarNode.scrollTop = 1 * lineHeightInPixels
|
|
verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
|
|
tilesNodes = component.tileNodesForLines()
|
|
expect(tilesNodes[0].style.zIndex).toBe('3')
|
|
expect(tilesNodes[1].style.zIndex).toBe('2')
|
|
expect(tilesNodes[2].style.zIndex).toBe('1')
|
|
expect(tilesNodes[3].style.zIndex).toBe('0')
|
|
})
|
|
|
|
it('renders the currently-visible lines in a tiled fashion', function () {
|
|
wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
|
|
runAnimationFrames()
|
|
|
|
let tilesNodes = component.tileNodesForLines()
|
|
expect(tilesNodes.length).toBe(3)
|
|
|
|
expect(tilesNodes[0].style['-webkit-transform']).toBe('translate3d(0px, 0px, 0px)')
|
|
expect(tilesNodes[0].querySelectorAll('.line').length).toBe(TILE_SIZE)
|
|
expectTileContainsRow(tilesNodes[0], 0, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 1, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 2, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
|
|
expect(tilesNodes[1].style['-webkit-transform']).toBe('translate3d(0px, ' + (1 * tileHeightInPixels) + 'px, 0px)')
|
|
expect(tilesNodes[1].querySelectorAll('.line').length).toBe(TILE_SIZE)
|
|
expectTileContainsRow(tilesNodes[1], 3, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 4, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 5, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
|
|
expect(tilesNodes[2].style['-webkit-transform']).toBe('translate3d(0px, ' + (2 * tileHeightInPixels) + 'px, 0px)')
|
|
expect(tilesNodes[2].querySelectorAll('.line').length).toBe(TILE_SIZE)
|
|
expectTileContainsRow(tilesNodes[2], 6, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 7, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 8, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
|
|
expect(component.lineNodeForScreenRow(9)).toBeUndefined()
|
|
|
|
verticalScrollbarNode.scrollTop = TILE_SIZE * lineHeightInPixels + 5
|
|
verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
|
|
tilesNodes = component.tileNodesForLines()
|
|
expect(component.lineNodeForScreenRow(2)).toBeUndefined()
|
|
expect(tilesNodes.length).toBe(3)
|
|
|
|
expect(tilesNodes[0].style['-webkit-transform']).toBe('translate3d(0px, ' + (0 * tileHeightInPixels - 5) + 'px, 0px)')
|
|
expect(tilesNodes[0].querySelectorAll('.line').length).toBe(TILE_SIZE)
|
|
expectTileContainsRow(tilesNodes[0], 3, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 4, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 5, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
|
|
expect(tilesNodes[1].style['-webkit-transform']).toBe('translate3d(0px, ' + (1 * tileHeightInPixels - 5) + 'px, 0px)')
|
|
expect(tilesNodes[1].querySelectorAll('.line').length).toBe(TILE_SIZE)
|
|
expectTileContainsRow(tilesNodes[1], 6, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 7, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 8, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
|
|
expect(tilesNodes[2].style['-webkit-transform']).toBe('translate3d(0px, ' + (2 * tileHeightInPixels - 5) + 'px, 0px)')
|
|
expect(tilesNodes[2].querySelectorAll('.line').length).toBe(TILE_SIZE)
|
|
expectTileContainsRow(tilesNodes[2], 9, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 10, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 11, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
})
|
|
|
|
it('updates the top position of subsequent tiles when lines are inserted or removed', function () {
|
|
wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
editor.getBuffer().deleteRows(0, 1)
|
|
|
|
runAnimationFrames()
|
|
|
|
let tilesNodes = component.tileNodesForLines()
|
|
expect(tilesNodes[0].style['-webkit-transform']).toBe('translate3d(0px, 0px, 0px)')
|
|
expectTileContainsRow(tilesNodes[0], 0, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 1, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 2, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
|
|
expect(tilesNodes[1].style['-webkit-transform']).toBe('translate3d(0px, ' + (1 * tileHeightInPixels) + 'px, 0px)')
|
|
expectTileContainsRow(tilesNodes[1], 3, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 4, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 5, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
|
|
editor.getBuffer().insert([0, 0], '\n\n')
|
|
|
|
runAnimationFrames()
|
|
|
|
tilesNodes = component.tileNodesForLines()
|
|
expect(tilesNodes[0].style['-webkit-transform']).toBe('translate3d(0px, 0px, 0px)')
|
|
expectTileContainsRow(tilesNodes[0], 0, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 1, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 2, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
|
|
expect(tilesNodes[1].style['-webkit-transform']).toBe('translate3d(0px, ' + (1 * tileHeightInPixels) + 'px, 0px)')
|
|
expectTileContainsRow(tilesNodes[1], 3, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 4, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 5, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
|
|
expect(tilesNodes[2].style['-webkit-transform']).toBe('translate3d(0px, ' + (2 * tileHeightInPixels) + 'px, 0px)')
|
|
expectTileContainsRow(tilesNodes[2], 6, {
|
|
top: 0 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 7, {
|
|
top: 1 * lineHeightInPixels
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 8, {
|
|
top: 2 * lineHeightInPixels
|
|
})
|
|
})
|
|
|
|
it('updates the lines when lines are inserted or removed above the rendered row range', function () {
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
verticalScrollbarNode.scrollTop = 5 * lineHeightInPixels
|
|
verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
|
|
let buffer = editor.getBuffer()
|
|
buffer.insert([0, 0], '\n\n')
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(component.lineNodeForScreenRow(3).textContent).toBe(editor.lineTextForScreenRow(3))
|
|
buffer.delete([[0, 0], [3, 0]])
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(component.lineNodeForScreenRow(3).textContent).toBe(editor.lineTextForScreenRow(3))
|
|
})
|
|
|
|
it('updates the top position of lines when the line height changes', function () {
|
|
let initialLineHeightInPixels = editor.getLineHeightInPixels()
|
|
|
|
component.setLineHeight(2)
|
|
|
|
runAnimationFrames()
|
|
|
|
let newLineHeightInPixels = editor.getLineHeightInPixels()
|
|
expect(newLineHeightInPixels).not.toBe(initialLineHeightInPixels)
|
|
expect(component.lineNodeForScreenRow(1).offsetTop).toBe(1 * newLineHeightInPixels)
|
|
})
|
|
|
|
it('updates the top position of lines when the font size changes', function () {
|
|
let initialLineHeightInPixels = editor.getLineHeightInPixels()
|
|
component.setFontSize(10)
|
|
|
|
runAnimationFrames()
|
|
|
|
let newLineHeightInPixels = editor.getLineHeightInPixels()
|
|
expect(newLineHeightInPixels).not.toBe(initialLineHeightInPixels)
|
|
expect(component.lineNodeForScreenRow(1).offsetTop).toBe(1 * newLineHeightInPixels)
|
|
})
|
|
|
|
it('renders the .lines div at the full height of the editor if there are not enough lines to scroll vertically', function () {
|
|
editor.setText('')
|
|
wrapperNode.style.height = '300px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
let linesNode = componentNode.querySelector('.lines')
|
|
expect(linesNode.offsetHeight).toBe(300)
|
|
})
|
|
|
|
it('assigns the width of each line so it extends across the full width of the editor', function () {
|
|
let gutterWidth = componentNode.querySelector('.gutter').offsetWidth
|
|
let scrollViewNode = componentNode.querySelector('.scroll-view')
|
|
let lineNodes = Array.from(componentNode.querySelectorAll('.line'))
|
|
|
|
componentNode.style.width = gutterWidth + (30 * charWidth) + 'px'
|
|
component.measureDimensions()
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollWidth()).toBeGreaterThan(scrollViewNode.offsetWidth)
|
|
let editorFullWidth = wrapperNode.getScrollWidth() + wrapperNode.getVerticalScrollbarWidth()
|
|
for (let lineNode of lineNodes) {
|
|
expect(lineNode.getBoundingClientRect().width).toBe(editorFullWidth)
|
|
}
|
|
|
|
componentNode.style.width = gutterWidth + wrapperNode.getScrollWidth() + 100 + 'px'
|
|
component.measureDimensions()
|
|
|
|
runAnimationFrames()
|
|
|
|
let scrollViewWidth = scrollViewNode.offsetWidth
|
|
for (let lineNode of lineNodes) {
|
|
expect(lineNode.getBoundingClientRect().width).toBe(scrollViewWidth)
|
|
}
|
|
})
|
|
|
|
it('renders an placeholder space on empty lines when no line-ending character is defined', function () {
|
|
editor.update({showInvisibles: false})
|
|
expect(component.lineNodeForScreenRow(10).textContent).toBe(' ')
|
|
})
|
|
|
|
it('gives the lines and tiles divs the same background color as the editor to improve GPU performance', async function () {
|
|
let linesNode = componentNode.querySelector('.lines')
|
|
let backgroundColor = getComputedStyle(wrapperNode).backgroundColor
|
|
|
|
expect(linesNode.style.backgroundColor).toBe(backgroundColor)
|
|
for (let tileNode of component.tileNodesForLines()) {
|
|
expect(tileNode.style.backgroundColor).toBe(backgroundColor)
|
|
}
|
|
|
|
wrapperNode.style.backgroundColor = 'rgb(255, 0, 0)'
|
|
// Polling should happen automatically in a mutation observer but its async
|
|
// and everything is mocked to be sync
|
|
atom.views.performDocumentPoll()
|
|
runAnimationFrames(true)
|
|
|
|
expect(linesNode.style.backgroundColor).toBe('rgb(255, 0, 0)')
|
|
for (let tileNode of component.tileNodesForLines()) {
|
|
expect(tileNode.style.backgroundColor).toBe('rgb(255, 0, 0)')
|
|
}
|
|
})
|
|
|
|
it('applies .leading-whitespace for lines with leading spaces and/or tabs', function () {
|
|
editor.setText(' a')
|
|
|
|
runAnimationFrames()
|
|
|
|
let leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
|
|
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(true)
|
|
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(false)
|
|
|
|
editor.setText('\ta')
|
|
runAnimationFrames()
|
|
|
|
leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
|
|
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(true)
|
|
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(false)
|
|
})
|
|
|
|
it('applies .trailing-whitespace for lines with trailing spaces and/or tabs', function () {
|
|
editor.setText(' ')
|
|
runAnimationFrames()
|
|
|
|
let leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
|
|
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(true)
|
|
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(false)
|
|
|
|
editor.setText('\t')
|
|
runAnimationFrames()
|
|
|
|
leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
|
|
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(true)
|
|
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(false)
|
|
editor.setText('a ')
|
|
runAnimationFrames()
|
|
|
|
leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
|
|
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(true)
|
|
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(false)
|
|
editor.setText('a\t')
|
|
runAnimationFrames()
|
|
|
|
leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
|
|
expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe(true)
|
|
expect(leafNodes[0].classList.contains('leading-whitespace')).toBe(false)
|
|
})
|
|
|
|
it('keeps rebuilding lines when continuous reflow is on', function () {
|
|
wrapperNode.setContinuousReflow(true)
|
|
let oldLineNode = componentNode.querySelectorAll('.line')[1]
|
|
|
|
while (true) {
|
|
runAnimationFrames()
|
|
if (componentNode.querySelectorAll('.line')[1] !== oldLineNode) break
|
|
}
|
|
})
|
|
|
|
describe('when showInvisibles is enabled', function () {
|
|
const invisibles = {
|
|
eol: 'E',
|
|
space: 'S',
|
|
tab: 'T',
|
|
cr: 'C'
|
|
}
|
|
|
|
beforeEach(function () {
|
|
editor.update({
|
|
showInvisibles: true,
|
|
invisibles: invisibles
|
|
})
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('re-renders the lines when the showInvisibles config option changes', function () {
|
|
editor.setText(' a line with tabs\tand spaces \n')
|
|
runAnimationFrames()
|
|
|
|
expect(component.lineNodeForScreenRow(0).textContent).toBe('' + invisibles.space + 'a line with tabs' + invisibles.tab + 'and spaces' + invisibles.space + invisibles.eol)
|
|
|
|
editor.update({showInvisibles: false})
|
|
runAnimationFrames()
|
|
|
|
expect(component.lineNodeForScreenRow(0).textContent).toBe(' a line with tabs and spaces ')
|
|
|
|
editor.update({showInvisibles: true})
|
|
runAnimationFrames()
|
|
|
|
expect(component.lineNodeForScreenRow(0).textContent).toBe('' + invisibles.space + 'a line with tabs' + invisibles.tab + 'and spaces' + invisibles.space + invisibles.eol)
|
|
})
|
|
|
|
it('displays leading/trailing spaces, tabs, and newlines as visible characters', function () {
|
|
editor.setText(' a line with tabs\tand spaces \n')
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(component.lineNodeForScreenRow(0).textContent).toBe('' + invisibles.space + 'a line with tabs' + invisibles.tab + 'and spaces' + invisibles.space + invisibles.eol)
|
|
|
|
let leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
|
|
expect(leafNodes[0].classList.contains('invisible-character')).toBe(true)
|
|
expect(leafNodes[leafNodes.length - 1].classList.contains('invisible-character')).toBe(true)
|
|
})
|
|
|
|
it('displays newlines as their own token outside of the other tokens\' scopeDescriptor', function () {
|
|
editor.setText('let\n')
|
|
runAnimationFrames()
|
|
expect(component.lineNodeForScreenRow(0).innerHTML).toBe('<span class="source js"><span class="storage type var js">let</span><span class="invisible-character eol">' + invisibles.eol + '</span></span>')
|
|
})
|
|
|
|
it('displays trailing carriage returns using a visible, non-empty value', function () {
|
|
editor.setText('a line that ends with a carriage return\r\n')
|
|
runAnimationFrames()
|
|
expect(component.lineNodeForScreenRow(0).textContent).toBe('a line that ends with a carriage return' + invisibles.cr + invisibles.eol)
|
|
})
|
|
|
|
it('renders invisible line-ending characters on empty lines', function () {
|
|
expect(component.lineNodeForScreenRow(10).textContent).toBe(invisibles.eol)
|
|
})
|
|
|
|
it('renders a placeholder space on empty lines when the line-ending character is an empty string', function () {
|
|
editor.update({invisibles: {eol: ''}})
|
|
runAnimationFrames()
|
|
expect(component.lineNodeForScreenRow(10).textContent).toBe(' ')
|
|
})
|
|
|
|
it('renders an placeholder space on empty lines when the line-ending character is false', function () {
|
|
editor.update({invisibles: {eol: false}})
|
|
runAnimationFrames()
|
|
expect(component.lineNodeForScreenRow(10).textContent).toBe(' ')
|
|
})
|
|
|
|
it('interleaves invisible line-ending characters with indent guides on empty lines', function () {
|
|
editor.update({showIndentGuide: true})
|
|
|
|
runAnimationFrames()
|
|
|
|
editor.setTabLength(2)
|
|
editor.setTextInBufferRange([[10, 0], [11, 0]], '\r\n', {
|
|
normalizeLineEndings: false
|
|
})
|
|
runAnimationFrames()
|
|
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="source js"><span class="invisible-character eol indent-guide">CE</span></span>')
|
|
|
|
editor.setTabLength(3)
|
|
runAnimationFrames()
|
|
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="source js"><span class="invisible-character eol indent-guide">CE</span></span>')
|
|
|
|
editor.setTabLength(1)
|
|
runAnimationFrames()
|
|
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="source js"><span class="invisible-character eol indent-guide">CE</span></span>')
|
|
|
|
editor.setTextInBufferRange([[9, 0], [9, Infinity]], ' ')
|
|
editor.setTextInBufferRange([[11, 0], [11, Infinity]], ' ')
|
|
runAnimationFrames()
|
|
expect(component.lineNodeForScreenRow(10).innerHTML).toBe('<span class="source js"><span class="invisible-character eol indent-guide">CE</span></span>')
|
|
})
|
|
|
|
describe('when soft wrapping is enabled', function () {
|
|
beforeEach(function () {
|
|
editor.setText('a line that wraps \n')
|
|
editor.setSoftWrapped(true)
|
|
runAnimationFrames()
|
|
|
|
componentNode.style.width = 16 * charWidth + wrapperNode.getVerticalScrollbarWidth() + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('does not show end of line invisibles at the end of wrapped lines', function () {
|
|
expect(component.lineNodeForScreenRow(0).textContent).toBe('a line ')
|
|
expect(component.lineNodeForScreenRow(1).textContent).toBe('that wraps' + invisibles.space + invisibles.eol)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when indent guides are enabled', function () {
|
|
beforeEach(function () {
|
|
editor.update({showIndentGuide: true})
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('adds an "indent-guide" class to spans comprising the leading whitespace', function () {
|
|
let line1LeafNodes = getLeafNodes(component.lineNodeForScreenRow(1))
|
|
expect(line1LeafNodes[0].textContent).toBe(' ')
|
|
expect(line1LeafNodes[0].classList.contains('indent-guide')).toBe(true)
|
|
expect(line1LeafNodes[1].classList.contains('indent-guide')).toBe(false)
|
|
|
|
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
|
|
expect(line2LeafNodes[0].textContent).toBe(' ')
|
|
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(true)
|
|
expect(line2LeafNodes[1].textContent).toBe(' ')
|
|
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(true)
|
|
expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe(false)
|
|
})
|
|
|
|
it('renders leading whitespace spans with the "indent-guide" class for empty lines', function () {
|
|
editor.getBuffer().insert([1, Infinity], '\n')
|
|
runAnimationFrames()
|
|
|
|
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
|
|
expect(line2LeafNodes.length).toBe(2)
|
|
expect(line2LeafNodes[0].textContent).toBe(' ')
|
|
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(true)
|
|
expect(line2LeafNodes[1].textContent).toBe(' ')
|
|
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(true)
|
|
})
|
|
|
|
it('renders indent guides correctly on lines containing only whitespace', function () {
|
|
editor.getBuffer().insert([1, Infinity], '\n ')
|
|
runAnimationFrames()
|
|
|
|
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
|
|
expect(line2LeafNodes.length).toBe(3)
|
|
expect(line2LeafNodes[0].textContent).toBe(' ')
|
|
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(true)
|
|
expect(line2LeafNodes[1].textContent).toBe(' ')
|
|
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(true)
|
|
expect(line2LeafNodes[2].textContent).toBe(' ')
|
|
expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe(true)
|
|
})
|
|
|
|
it('renders indent guides correctly on lines containing only whitespace when invisibles are enabled', function () {
|
|
editor.update({
|
|
showInvisibles: true,
|
|
invisibles: {
|
|
space: '-',
|
|
eol: 'x'
|
|
}
|
|
})
|
|
editor.getBuffer().insert([1, Infinity], '\n ')
|
|
|
|
runAnimationFrames()
|
|
|
|
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
|
|
expect(line2LeafNodes.length).toBe(4)
|
|
expect(line2LeafNodes[0].textContent).toBe('--')
|
|
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(true)
|
|
expect(line2LeafNodes[1].textContent).toBe('--')
|
|
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(true)
|
|
expect(line2LeafNodes[2].textContent).toBe('--')
|
|
expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe(true)
|
|
expect(line2LeafNodes[3].textContent).toBe('x')
|
|
})
|
|
|
|
it('does not render indent guides in trailing whitespace for lines containing non whitespace characters', function () {
|
|
editor.getBuffer().setText(' hi ')
|
|
|
|
runAnimationFrames()
|
|
|
|
let line0LeafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
|
|
expect(line0LeafNodes[0].textContent).toBe(' ')
|
|
expect(line0LeafNodes[0].classList.contains('indent-guide')).toBe(true)
|
|
expect(line0LeafNodes[1].textContent).toBe(' ')
|
|
expect(line0LeafNodes[1].classList.contains('indent-guide')).toBe(false)
|
|
})
|
|
|
|
it('updates the indent guides on empty lines preceding an indentation change', function () {
|
|
editor.getBuffer().insert([12, 0], '\n')
|
|
runAnimationFrames()
|
|
|
|
editor.getBuffer().insert([13, 0], ' ')
|
|
runAnimationFrames()
|
|
|
|
let line12LeafNodes = getLeafNodes(component.lineNodeForScreenRow(12))
|
|
expect(line12LeafNodes[0].textContent).toBe(' ')
|
|
expect(line12LeafNodes[0].classList.contains('indent-guide')).toBe(true)
|
|
expect(line12LeafNodes[1].textContent).toBe(' ')
|
|
expect(line12LeafNodes[1].classList.contains('indent-guide')).toBe(true)
|
|
})
|
|
|
|
it('updates the indent guides on empty lines following an indentation change', function () {
|
|
editor.getBuffer().insert([12, 2], '\n')
|
|
|
|
runAnimationFrames()
|
|
|
|
editor.getBuffer().insert([12, 0], ' ')
|
|
runAnimationFrames()
|
|
|
|
let line13LeafNodes = getLeafNodes(component.lineNodeForScreenRow(13))
|
|
expect(line13LeafNodes[0].textContent).toBe(' ')
|
|
expect(line13LeafNodes[0].classList.contains('indent-guide')).toBe(true)
|
|
expect(line13LeafNodes[1].textContent).toBe(' ')
|
|
expect(line13LeafNodes[1].classList.contains('indent-guide')).toBe(true)
|
|
})
|
|
})
|
|
|
|
describe('when indent guides are disabled', function () {
|
|
beforeEach(function () {
|
|
expect(atom.config.get('editor.showIndentGuide')).toBe(false)
|
|
})
|
|
|
|
it('does not render indent guides on lines containing only whitespace', function () {
|
|
editor.getBuffer().insert([1, Infinity], '\n ')
|
|
|
|
runAnimationFrames()
|
|
|
|
let line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
|
|
expect(line2LeafNodes.length).toBe(3)
|
|
expect(line2LeafNodes[0].textContent).toBe(' ')
|
|
expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe(false)
|
|
expect(line2LeafNodes[1].textContent).toBe(' ')
|
|
expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe(false)
|
|
expect(line2LeafNodes[2].textContent).toBe(' ')
|
|
expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('when the buffer contains null bytes', function () {
|
|
it('excludes the null byte from character measurement', function () {
|
|
editor.setText('a\0b')
|
|
runAnimationFrames()
|
|
expect(wrapperNode.pixelPositionForScreenPosition([0, Infinity]).left).toEqual(2 * charWidth)
|
|
})
|
|
})
|
|
|
|
describe('when there is a fold', function () {
|
|
it('renders a fold marker on the folded line', function () {
|
|
let foldedLineNode = component.lineNodeForScreenRow(4)
|
|
expect(foldedLineNode.querySelector('.fold-marker')).toBeFalsy()
|
|
editor.foldBufferRow(4)
|
|
|
|
runAnimationFrames()
|
|
|
|
foldedLineNode = component.lineNodeForScreenRow(4)
|
|
expect(foldedLineNode.querySelector('.fold-marker')).toBeTruthy()
|
|
editor.unfoldBufferRow(4)
|
|
|
|
runAnimationFrames()
|
|
|
|
foldedLineNode = component.lineNodeForScreenRow(4)
|
|
expect(foldedLineNode.querySelector('.fold-marker')).toBeFalsy()
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('gutter rendering', function () {
|
|
function expectTileContainsRow (tileNode, screenRow, {top, text}) {
|
|
let lineNode = tileNode.querySelector('[data-screen-row="' + screenRow + '"]')
|
|
expect(lineNode.offsetTop).toBe(top)
|
|
expect(lineNode.textContent).toBe(text)
|
|
}
|
|
|
|
it('renders higher tiles in front of lower ones', function () {
|
|
wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames(true)
|
|
|
|
let tilesNodes = component.tileNodesForLineNumbers()
|
|
expect(tilesNodes[0].style.zIndex).toBe('2')
|
|
expect(tilesNodes[1].style.zIndex).toBe('1')
|
|
expect(tilesNodes[2].style.zIndex).toBe('0')
|
|
verticalScrollbarNode.scrollTop = 1 * lineHeightInPixels
|
|
verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
|
|
tilesNodes = component.tileNodesForLineNumbers()
|
|
expect(tilesNodes[0].style.zIndex).toBe('3')
|
|
expect(tilesNodes[1].style.zIndex).toBe('2')
|
|
expect(tilesNodes[2].style.zIndex).toBe('1')
|
|
expect(tilesNodes[3].style.zIndex).toBe('0')
|
|
})
|
|
|
|
it('gives the line numbers container the same height as the wrapper node', function () {
|
|
let linesNode = componentNode.querySelector('.line-numbers')
|
|
wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(linesNode.getBoundingClientRect().height).toBe(6.5 * lineHeightInPixels)
|
|
wrapperNode.style.height = 3.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(linesNode.getBoundingClientRect().height).toBe(3.5 * lineHeightInPixels)
|
|
})
|
|
|
|
it('renders the currently-visible line numbers in a tiled fashion', function () {
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let tilesNodes = component.tileNodesForLineNumbers()
|
|
expect(tilesNodes.length).toBe(3)
|
|
|
|
expect(tilesNodes[0].style['-webkit-transform']).toBe('translate3d(0px, 0px, 0px)')
|
|
expect(tilesNodes[0].querySelectorAll('.line-number').length).toBe(3)
|
|
expectTileContainsRow(tilesNodes[0], 0, {
|
|
top: lineHeightInPixels * 0,
|
|
text: '' + NBSP + '1'
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 1, {
|
|
top: lineHeightInPixels * 1,
|
|
text: '' + NBSP + '2'
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 2, {
|
|
top: lineHeightInPixels * 2,
|
|
text: '' + NBSP + '3'
|
|
})
|
|
|
|
expect(tilesNodes[1].style['-webkit-transform']).toBe('translate3d(0px, ' + (1 * tileHeightInPixels) + 'px, 0px)')
|
|
expect(tilesNodes[1].querySelectorAll('.line-number').length).toBe(3)
|
|
expectTileContainsRow(tilesNodes[1], 3, {
|
|
top: lineHeightInPixels * 0,
|
|
text: '' + NBSP + '4'
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 4, {
|
|
top: lineHeightInPixels * 1,
|
|
text: '' + NBSP + '5'
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 5, {
|
|
top: lineHeightInPixels * 2,
|
|
text: '' + NBSP + '6'
|
|
})
|
|
|
|
expect(tilesNodes[2].style['-webkit-transform']).toBe('translate3d(0px, ' + (2 * tileHeightInPixels) + 'px, 0px)')
|
|
expect(tilesNodes[2].querySelectorAll('.line-number').length).toBe(3)
|
|
expectTileContainsRow(tilesNodes[2], 6, {
|
|
top: lineHeightInPixels * 0,
|
|
text: '' + NBSP + '7'
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 7, {
|
|
top: lineHeightInPixels * 1,
|
|
text: '' + NBSP + '8'
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 8, {
|
|
top: lineHeightInPixels * 2,
|
|
text: '' + NBSP + '9'
|
|
})
|
|
verticalScrollbarNode.scrollTop = TILE_SIZE * lineHeightInPixels + 5
|
|
verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
|
|
tilesNodes = component.tileNodesForLineNumbers()
|
|
expect(component.lineNumberNodeForScreenRow(2)).toBeUndefined()
|
|
expect(tilesNodes.length).toBe(3)
|
|
|
|
expect(tilesNodes[0].style['-webkit-transform']).toBe('translate3d(0px, ' + (0 * tileHeightInPixels - 5) + 'px, 0px)')
|
|
expect(tilesNodes[0].querySelectorAll('.line-number').length).toBe(TILE_SIZE)
|
|
expectTileContainsRow(tilesNodes[0], 3, {
|
|
top: lineHeightInPixels * 0,
|
|
text: '' + NBSP + '4'
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 4, {
|
|
top: lineHeightInPixels * 1,
|
|
text: '' + NBSP + '5'
|
|
})
|
|
expectTileContainsRow(tilesNodes[0], 5, {
|
|
top: lineHeightInPixels * 2,
|
|
text: '' + NBSP + '6'
|
|
})
|
|
|
|
expect(tilesNodes[1].style['-webkit-transform']).toBe('translate3d(0px, ' + (1 * tileHeightInPixels - 5) + 'px, 0px)')
|
|
expect(tilesNodes[1].querySelectorAll('.line-number').length).toBe(TILE_SIZE)
|
|
expectTileContainsRow(tilesNodes[1], 6, {
|
|
top: 0 * lineHeightInPixels,
|
|
text: '' + NBSP + '7'
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 7, {
|
|
top: 1 * lineHeightInPixels,
|
|
text: '' + NBSP + '8'
|
|
})
|
|
expectTileContainsRow(tilesNodes[1], 8, {
|
|
top: 2 * lineHeightInPixels,
|
|
text: '' + NBSP + '9'
|
|
})
|
|
|
|
expect(tilesNodes[2].style['-webkit-transform']).toBe('translate3d(0px, ' + (2 * tileHeightInPixels - 5) + 'px, 0px)')
|
|
expect(tilesNodes[2].querySelectorAll('.line-number').length).toBe(TILE_SIZE)
|
|
expectTileContainsRow(tilesNodes[2], 9, {
|
|
top: 0 * lineHeightInPixels,
|
|
text: '10'
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 10, {
|
|
top: 1 * lineHeightInPixels,
|
|
text: '11'
|
|
})
|
|
expectTileContainsRow(tilesNodes[2], 11, {
|
|
top: 2 * lineHeightInPixels,
|
|
text: '12'
|
|
})
|
|
})
|
|
|
|
it('updates the translation of subsequent line numbers when lines are inserted or removed', function () {
|
|
editor.getBuffer().insert([0, 0], '\n\n')
|
|
runAnimationFrames()
|
|
|
|
let lineNumberNodes = componentNode.querySelectorAll('.line-number')
|
|
expect(component.lineNumberNodeForScreenRow(0).offsetTop).toBe(0 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(1).offsetTop).toBe(1 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(2).offsetTop).toBe(2 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(3).offsetTop).toBe(0 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(4).offsetTop).toBe(1 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(5).offsetTop).toBe(2 * lineHeightInPixels)
|
|
editor.getBuffer().insert([0, 0], '\n\n')
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(component.lineNumberNodeForScreenRow(0).offsetTop).toBe(0 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(1).offsetTop).toBe(1 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(2).offsetTop).toBe(2 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(3).offsetTop).toBe(0 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(4).offsetTop).toBe(1 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(5).offsetTop).toBe(2 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(6).offsetTop).toBe(0 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(7).offsetTop).toBe(1 * lineHeightInPixels)
|
|
expect(component.lineNumberNodeForScreenRow(8).offsetTop).toBe(2 * lineHeightInPixels)
|
|
})
|
|
|
|
it('renders • characters for soft-wrapped lines', function () {
|
|
editor.setSoftWrapped(true)
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 30 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.querySelectorAll('.line-number').length).toBe(9 + 1)
|
|
expect(component.lineNumberNodeForScreenRow(0).textContent).toBe('' + NBSP + '1')
|
|
expect(component.lineNumberNodeForScreenRow(1).textContent).toBe('' + NBSP + '•')
|
|
expect(component.lineNumberNodeForScreenRow(2).textContent).toBe('' + NBSP + '2')
|
|
expect(component.lineNumberNodeForScreenRow(3).textContent).toBe('' + NBSP + '•')
|
|
expect(component.lineNumberNodeForScreenRow(4).textContent).toBe('' + NBSP + '3')
|
|
expect(component.lineNumberNodeForScreenRow(5).textContent).toBe('' + NBSP + '•')
|
|
expect(component.lineNumberNodeForScreenRow(6).textContent).toBe('' + NBSP + '4')
|
|
expect(component.lineNumberNodeForScreenRow(7).textContent).toBe('' + NBSP + '•')
|
|
expect(component.lineNumberNodeForScreenRow(8).textContent).toBe('' + NBSP + '•')
|
|
})
|
|
|
|
it('pads line numbers to be right-justified based on the maximum number of line number digits', function () {
|
|
editor.getBuffer().setText([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].join('\n'))
|
|
runAnimationFrames()
|
|
|
|
for (let screenRow = 0; screenRow <= 8; ++screenRow) {
|
|
expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe('' + NBSP + (screenRow + 1))
|
|
}
|
|
expect(component.lineNumberNodeForScreenRow(9).textContent).toBe('10')
|
|
let gutterNode = componentNode.querySelector('.gutter')
|
|
let initialGutterWidth = gutterNode.offsetWidth
|
|
editor.getBuffer().delete([[1, 0], [2, 0]])
|
|
|
|
runAnimationFrames()
|
|
|
|
for (let screenRow = 0; screenRow <= 8; ++screenRow) {
|
|
expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe('' + (screenRow + 1))
|
|
}
|
|
expect(gutterNode.offsetWidth).toBeLessThan(initialGutterWidth)
|
|
editor.getBuffer().insert([0, 0], '\n\n')
|
|
|
|
runAnimationFrames()
|
|
|
|
for (let screenRow = 0; screenRow <= 8; ++screenRow) {
|
|
expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe('' + NBSP + (screenRow + 1))
|
|
}
|
|
expect(component.lineNumberNodeForScreenRow(9).textContent).toBe('10')
|
|
expect(gutterNode.offsetWidth).toBe(initialGutterWidth)
|
|
})
|
|
|
|
it('renders the .line-numbers div at the full height of the editor even if it\'s taller than its content', function () {
|
|
wrapperNode.style.height = componentNode.offsetHeight + 100 + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
expect(componentNode.querySelector('.line-numbers').offsetHeight).toBe(componentNode.offsetHeight)
|
|
})
|
|
|
|
it('applies the background color of the gutter or the editor to the line numbers to improve GPU performance', function () {
|
|
let gutterNode = componentNode.querySelector('.gutter')
|
|
let lineNumbersNode = gutterNode.querySelector('.line-numbers')
|
|
let backgroundColor = getComputedStyle(wrapperNode).backgroundColor
|
|
expect(lineNumbersNode.style.backgroundColor).toBe(backgroundColor)
|
|
for (let tileNode of component.tileNodesForLineNumbers()) {
|
|
expect(tileNode.style.backgroundColor).toBe(backgroundColor)
|
|
}
|
|
|
|
gutterNode.style.backgroundColor = 'rgb(255, 0, 0)'
|
|
atom.views.performDocumentPoll()
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumbersNode.style.backgroundColor).toBe('rgb(255, 0, 0)')
|
|
for (let tileNode of component.tileNodesForLineNumbers()) {
|
|
expect(tileNode.style.backgroundColor).toBe('rgb(255, 0, 0)')
|
|
}
|
|
})
|
|
|
|
it('hides or shows the gutter based on the "::isLineNumberGutterVisible" property on the model and the global "editor.showLineNumbers" config setting', function () {
|
|
expect(component.gutterContainerComponent.getLineNumberGutterComponent() != null).toBe(true)
|
|
editor.setLineNumberGutterVisible(false)
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.querySelector('.gutter').style.display).toBe('none')
|
|
editor.update({showLineNumbers: false})
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.querySelector('.gutter').style.display).toBe('none')
|
|
editor.setLineNumberGutterVisible(true)
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.querySelector('.gutter').style.display).toBe('none')
|
|
editor.update({showLineNumbers: true})
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.querySelector('.gutter').style.display).toBe('')
|
|
expect(component.lineNumberNodeForScreenRow(3) != null).toBe(true)
|
|
})
|
|
|
|
it('keeps rebuilding line numbers when continuous reflow is on', function () {
|
|
wrapperNode.setContinuousReflow(true)
|
|
let oldLineNode = componentNode.querySelectorAll('.line-number')[1]
|
|
|
|
while (true) {
|
|
runAnimationFrames()
|
|
if (componentNode.querySelectorAll('.line-number')[1] !== oldLineNode) break
|
|
}
|
|
})
|
|
|
|
describe('fold decorations', function () {
|
|
describe('rendering fold decorations', function () {
|
|
it('adds the foldable class to line numbers when the line is foldable', function () {
|
|
expect(lineNumberHasClass(0, 'foldable')).toBe(true)
|
|
expect(lineNumberHasClass(1, 'foldable')).toBe(true)
|
|
expect(lineNumberHasClass(2, 'foldable')).toBe(false)
|
|
expect(lineNumberHasClass(3, 'foldable')).toBe(false)
|
|
expect(lineNumberHasClass(4, 'foldable')).toBe(true)
|
|
expect(lineNumberHasClass(5, 'foldable')).toBe(false)
|
|
})
|
|
|
|
it('updates the foldable class on the correct line numbers when the foldable positions change', function () {
|
|
editor.getBuffer().insert([0, 0], '\n')
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(0, 'foldable')).toBe(false)
|
|
expect(lineNumberHasClass(1, 'foldable')).toBe(true)
|
|
expect(lineNumberHasClass(2, 'foldable')).toBe(true)
|
|
expect(lineNumberHasClass(3, 'foldable')).toBe(false)
|
|
expect(lineNumberHasClass(4, 'foldable')).toBe(false)
|
|
expect(lineNumberHasClass(5, 'foldable')).toBe(true)
|
|
expect(lineNumberHasClass(6, 'foldable')).toBe(false)
|
|
})
|
|
|
|
it('updates the foldable class on a line number that becomes foldable', function () {
|
|
expect(lineNumberHasClass(11, 'foldable')).toBe(false)
|
|
editor.getBuffer().insert([11, 44], '\n fold me')
|
|
runAnimationFrames()
|
|
expect(lineNumberHasClass(11, 'foldable')).toBe(true)
|
|
editor.undo()
|
|
runAnimationFrames()
|
|
expect(lineNumberHasClass(11, 'foldable')).toBe(false)
|
|
})
|
|
|
|
it('adds, updates and removes the folded class on the correct line number componentNodes', function () {
|
|
editor.foldBufferRow(4)
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(4, 'folded')).toBe(true)
|
|
|
|
editor.getBuffer().insert([0, 0], '\n')
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(4, 'folded')).toBe(false)
|
|
expect(lineNumberHasClass(5, 'folded')).toBe(true)
|
|
|
|
editor.unfoldBufferRow(5)
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(5, 'folded')).toBe(false)
|
|
})
|
|
|
|
describe('when soft wrapping is enabled', function () {
|
|
beforeEach(function () {
|
|
editor.setSoftWrapped(true)
|
|
runAnimationFrames()
|
|
componentNode.style.width = 20 * charWidth + wrapperNode.getVerticalScrollbarWidth() + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('does not add the foldable class for soft-wrapped lines', function () {
|
|
expect(lineNumberHasClass(0, 'foldable')).toBe(true)
|
|
expect(lineNumberHasClass(1, 'foldable')).toBe(false)
|
|
})
|
|
|
|
it('does not add the folded class for soft-wrapped lines that contain a fold', function () {
|
|
editor.foldBufferRange([[3, 19], [3, 21]])
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(11, 'folded')).toBe(true)
|
|
expect(lineNumberHasClass(12, 'folded')).toBe(false)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('mouse interactions with fold indicators', function () {
|
|
let gutterNode
|
|
|
|
function buildClickEvent (target) {
|
|
return buildMouseEvent('click', {
|
|
target: target
|
|
})
|
|
}
|
|
|
|
beforeEach(function () {
|
|
gutterNode = componentNode.querySelector('.gutter')
|
|
})
|
|
|
|
describe('when the component is destroyed', function () {
|
|
it('stops listening for folding events', function () {
|
|
let lineNumber, target
|
|
component.destroy()
|
|
lineNumber = component.lineNumberNodeForScreenRow(1)
|
|
target = lineNumber.querySelector('.icon-right')
|
|
target.dispatchEvent(buildClickEvent(target))
|
|
})
|
|
})
|
|
|
|
it('folds and unfolds the block represented by the fold indicator when clicked', function () {
|
|
expect(lineNumberHasClass(1, 'folded')).toBe(false)
|
|
|
|
let lineNumber = component.lineNumberNodeForScreenRow(1)
|
|
let target = lineNumber.querySelector('.icon-right')
|
|
|
|
target.dispatchEvent(buildClickEvent(target))
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(1, 'folded')).toBe(true)
|
|
lineNumber = component.lineNumberNodeForScreenRow(1)
|
|
target = lineNumber.querySelector('.icon-right')
|
|
target.dispatchEvent(buildClickEvent(target))
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(1, 'folded')).toBe(false)
|
|
})
|
|
|
|
it('unfolds all the free-form folds intersecting the buffer row when clicked', function () {
|
|
expect(lineNumberHasClass(3, 'foldable')).toBe(false)
|
|
|
|
editor.foldBufferRange([[3, 4], [5, 4]])
|
|
editor.foldBufferRange([[5, 5], [8, 10]])
|
|
runAnimationFrames()
|
|
expect(lineNumberHasClass(3, 'folded')).toBe(true)
|
|
expect(lineNumberHasClass(5, 'folded')).toBe(false)
|
|
|
|
let lineNumber = component.lineNumberNodeForScreenRow(3)
|
|
let target = lineNumber.querySelector('.icon-right')
|
|
target.dispatchEvent(buildClickEvent(target))
|
|
runAnimationFrames()
|
|
expect(lineNumberHasClass(3, 'folded')).toBe(false)
|
|
expect(lineNumberHasClass(5, 'folded')).toBe(true)
|
|
|
|
editor.setSoftWrapped(true)
|
|
componentNode.style.width = 20 * charWidth + wrapperNode.getVerticalScrollbarWidth() + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
editor.foldBufferRange([[3, 19], [3, 21]]) // fold starting on a soft-wrapped portion of the line
|
|
runAnimationFrames()
|
|
expect(lineNumberHasClass(11, 'folded')).toBe(true)
|
|
|
|
lineNumber = component.lineNumberNodeForScreenRow(11)
|
|
target = lineNumber.querySelector('.icon-right')
|
|
target.dispatchEvent(buildClickEvent(target))
|
|
runAnimationFrames()
|
|
expect(lineNumberHasClass(11, 'folded')).toBe(false)
|
|
})
|
|
|
|
it('does not fold when the line number componentNode is clicked', function () {
|
|
let lineNumber = component.lineNumberNodeForScreenRow(1)
|
|
lineNumber.dispatchEvent(buildClickEvent(lineNumber))
|
|
waits(100)
|
|
runs(function () {
|
|
expect(lineNumberHasClass(1, 'folded')).toBe(false)
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('cursor rendering', function () {
|
|
it('renders the currently visible cursors', function () {
|
|
let cursor1 = editor.getLastCursor()
|
|
cursor1.setScreenPosition([0, 5], {
|
|
autoscroll: false
|
|
})
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 20 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let cursorNodes = componentNode.querySelectorAll('.cursor')
|
|
expect(cursorNodes.length).toBe(1)
|
|
expect(cursorNodes[0].offsetHeight).toBe(lineHeightInPixels)
|
|
expect(cursorNodes[0].offsetWidth).toBeCloseTo(charWidth, 0)
|
|
expect(cursorNodes[0].style['-webkit-transform']).toBe('translate(' + (Math.round(5 * charWidth)) + 'px, ' + (0 * lineHeightInPixels) + 'px)')
|
|
let cursor2 = editor.addCursorAtScreenPosition([8, 11], {
|
|
autoscroll: false
|
|
})
|
|
let cursor3 = editor.addCursorAtScreenPosition([4, 10], {
|
|
autoscroll: false
|
|
})
|
|
runAnimationFrames()
|
|
|
|
cursorNodes = componentNode.querySelectorAll('.cursor')
|
|
expect(cursorNodes.length).toBe(2)
|
|
expect(cursorNodes[0].offsetTop).toBe(0)
|
|
expect(cursorNodes[0].style['-webkit-transform']).toBe('translate(' + (Math.round(5 * charWidth)) + 'px, ' + (0 * lineHeightInPixels) + 'px)')
|
|
expect(cursorNodes[1].style['-webkit-transform']).toBe('translate(' + (Math.round(10 * charWidth)) + 'px, ' + (4 * lineHeightInPixels) + 'px)')
|
|
verticalScrollbarNode.scrollTop = 4.5 * lineHeightInPixels
|
|
verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
|
|
horizontalScrollbarNode.scrollLeft = 3.5 * charWidth
|
|
horizontalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
|
|
cursorNodes = componentNode.querySelectorAll('.cursor')
|
|
expect(cursorNodes.length).toBe(2)
|
|
expect(cursorNodes[0].style['-webkit-transform']).toBe('translate(' + (Math.round(10 * charWidth - horizontalScrollbarNode.scrollLeft)) + 'px, ' + (4 * lineHeightInPixels - verticalScrollbarNode.scrollTop) + 'px)')
|
|
expect(cursorNodes[1].style['-webkit-transform']).toBe('translate(' + (Math.round(11 * charWidth - horizontalScrollbarNode.scrollLeft)) + 'px, ' + (8 * lineHeightInPixels - verticalScrollbarNode.scrollTop) + 'px)')
|
|
editor.onDidChangeCursorPosition(cursorMovedListener = jasmine.createSpy('cursorMovedListener'))
|
|
cursor3.setScreenPosition([4, 11], {
|
|
autoscroll: false
|
|
})
|
|
runAnimationFrames()
|
|
|
|
expect(cursorNodes[0].style['-webkit-transform']).toBe('translate(' + (Math.round(11 * charWidth - horizontalScrollbarNode.scrollLeft)) + 'px, ' + (4 * lineHeightInPixels - verticalScrollbarNode.scrollTop) + 'px)')
|
|
expect(cursorMovedListener).toHaveBeenCalled()
|
|
cursor3.destroy()
|
|
runAnimationFrames()
|
|
|
|
cursorNodes = componentNode.querySelectorAll('.cursor')
|
|
expect(cursorNodes.length).toBe(1)
|
|
expect(cursorNodes[0].style['-webkit-transform']).toBe('translate(' + (Math.round(11 * charWidth - horizontalScrollbarNode.scrollLeft)) + 'px, ' + (8 * lineHeightInPixels - verticalScrollbarNode.scrollTop) + 'px)')
|
|
})
|
|
|
|
it('accounts for character widths when positioning cursors', function () {
|
|
component.setFontFamily('sans-serif')
|
|
editor.setCursorScreenPosition([0, 16])
|
|
runAnimationFrames()
|
|
|
|
let cursor = componentNode.querySelector('.cursor')
|
|
let cursorRect = cursor.getBoundingClientRect()
|
|
let cursorLocationTextNode = component.lineNodeForScreenRow(0).querySelector('.storage.type.function.js').firstChild
|
|
let range = document.createRange()
|
|
range.setStart(cursorLocationTextNode, 0)
|
|
range.setEnd(cursorLocationTextNode, 1)
|
|
let rangeRect = range.getBoundingClientRect()
|
|
expect(cursorRect.left).toBeCloseTo(rangeRect.left, 0)
|
|
expect(cursorRect.width).toBeCloseTo(rangeRect.width, 0)
|
|
})
|
|
|
|
it('accounts for the width of paired characters when positioning cursors', function () {
|
|
component.setFontFamily('sans-serif')
|
|
editor.setText('he\u0301y')
|
|
editor.setCursorBufferPosition([0, 3])
|
|
runAnimationFrames()
|
|
|
|
let cursor = componentNode.querySelector('.cursor')
|
|
let cursorRect = cursor.getBoundingClientRect()
|
|
let cursorLocationTextNode = component.lineNodeForScreenRow(0).querySelector('.source.js').childNodes[2]
|
|
let range = document.createRange(cursorLocationTextNode)
|
|
range.setStart(cursorLocationTextNode, 0)
|
|
range.setEnd(cursorLocationTextNode, 1)
|
|
let rangeRect = range.getBoundingClientRect()
|
|
expect(cursorRect.left).toBeCloseTo(rangeRect.left, 0)
|
|
expect(cursorRect.width).toBeCloseTo(rangeRect.width, 0)
|
|
})
|
|
|
|
it('positions cursors after the fold-marker when a fold ends the line', function () {
|
|
editor.foldBufferRow(0)
|
|
runAnimationFrames()
|
|
editor.setCursorScreenPosition([0, 30])
|
|
runAnimationFrames()
|
|
|
|
let cursorRect = componentNode.querySelector('.cursor').getBoundingClientRect()
|
|
let foldMarkerRect = componentNode.querySelector('.fold-marker').getBoundingClientRect()
|
|
expect(cursorRect.left).toBeCloseTo(foldMarkerRect.right, 0)
|
|
})
|
|
|
|
it('positions cursors correctly after character widths are changed via a stylesheet change', function () {
|
|
component.setFontFamily('sans-serif')
|
|
editor.setCursorScreenPosition([0, 16])
|
|
runAnimationFrames(true)
|
|
|
|
atom.styles.addStyleSheet('.function.js {\n font-weight: bold;\n}', {
|
|
context: 'atom-text-editor'
|
|
})
|
|
runAnimationFrames(true)
|
|
|
|
let cursor = componentNode.querySelector('.cursor')
|
|
let cursorRect = cursor.getBoundingClientRect()
|
|
let cursorLocationTextNode = component.lineNodeForScreenRow(0).querySelector('.storage.type.function.js').firstChild
|
|
let range = document.createRange()
|
|
range.setStart(cursorLocationTextNode, 0)
|
|
range.setEnd(cursorLocationTextNode, 1)
|
|
let rangeRect = range.getBoundingClientRect()
|
|
expect(cursorRect.left).toBeCloseTo(rangeRect.left, 0)
|
|
expect(cursorRect.width).toBeCloseTo(rangeRect.width, 0)
|
|
atom.themes.removeStylesheet('test')
|
|
})
|
|
|
|
it('sets the cursor to the default character width at the end of a line', function () {
|
|
editor.setCursorScreenPosition([0, Infinity])
|
|
runAnimationFrames()
|
|
let cursorNode = componentNode.querySelector('.cursor')
|
|
expect(cursorNode.offsetWidth).toBeCloseTo(charWidth, 0)
|
|
})
|
|
|
|
it('gives the cursor a non-zero width even if it\'s inside atomic tokens', function () {
|
|
editor.setCursorScreenPosition([1, 0])
|
|
runAnimationFrames()
|
|
let cursorNode = componentNode.querySelector('.cursor')
|
|
expect(cursorNode.offsetWidth).toBeCloseTo(charWidth, 0)
|
|
})
|
|
|
|
it('blinks cursors when they are not moving', async function () {
|
|
let cursorsNode = componentNode.querySelector('.cursors')
|
|
wrapperNode.focus()
|
|
runAnimationFrames()
|
|
expect(cursorsNode.classList.contains('blink-off')).toBe(false)
|
|
advanceClock(component.cursorBlinkPeriod / 2)
|
|
runAnimationFrames()
|
|
expect(cursorsNode.classList.contains('blink-off')).toBe(true)
|
|
advanceClock(component.cursorBlinkPeriod / 2)
|
|
runAnimationFrames()
|
|
expect(cursorsNode.classList.contains('blink-off')).toBe(false)
|
|
editor.moveRight()
|
|
runAnimationFrames()
|
|
expect(cursorsNode.classList.contains('blink-off')).toBe(false)
|
|
advanceClock(component.cursorBlinkResumeDelay)
|
|
runAnimationFrames(true)
|
|
expect(cursorsNode.classList.contains('blink-off')).toBe(false)
|
|
advanceClock(component.cursorBlinkPeriod / 2)
|
|
runAnimationFrames()
|
|
expect(cursorsNode.classList.contains('blink-off')).toBe(true)
|
|
})
|
|
|
|
it('does not render cursors that are associated with non-empty selections', function () {
|
|
editor.setSelectedScreenRange([[0, 4], [4, 6]])
|
|
editor.addCursorAtScreenPosition([6, 8])
|
|
runAnimationFrames()
|
|
let cursorNodes = componentNode.querySelectorAll('.cursor')
|
|
expect(cursorNodes.length).toBe(1)
|
|
expect(cursorNodes[0].style['-webkit-transform']).toBe('translate(' + (Math.round(8 * charWidth)) + 'px, ' + (6 * lineHeightInPixels) + 'px)')
|
|
})
|
|
|
|
it('updates cursor positions when the line height changes', function () {
|
|
editor.setCursorBufferPosition([1, 10])
|
|
component.setLineHeight(2)
|
|
runAnimationFrames()
|
|
let cursorNode = componentNode.querySelector('.cursor')
|
|
expect(cursorNode.style['-webkit-transform']).toBe('translate(' + (Math.round(10 * editor.getDefaultCharWidth())) + 'px, ' + (editor.getLineHeightInPixels()) + 'px)')
|
|
})
|
|
|
|
it('updates cursor positions when the font size changes', function () {
|
|
editor.setCursorBufferPosition([1, 10])
|
|
component.setFontSize(10)
|
|
runAnimationFrames()
|
|
let cursorNode = componentNode.querySelector('.cursor')
|
|
expect(cursorNode.style['-webkit-transform']).toBe('translate(' + (Math.round(10 * editor.getDefaultCharWidth())) + 'px, ' + (editor.getLineHeightInPixels()) + 'px)')
|
|
})
|
|
|
|
it('updates cursor positions when the font family changes', function () {
|
|
editor.setCursorBufferPosition([1, 10])
|
|
component.setFontFamily('sans-serif')
|
|
runAnimationFrames()
|
|
let cursorNode = componentNode.querySelector('.cursor')
|
|
let left = wrapperNode.pixelPositionForScreenPosition([1, 10]).left
|
|
expect(cursorNode.style['-webkit-transform']).toBe('translate(' + (Math.round(left)) + 'px, ' + (editor.getLineHeightInPixels()) + 'px)')
|
|
})
|
|
})
|
|
|
|
describe('selection rendering', function () {
|
|
let scrollViewClientLeft, scrollViewNode
|
|
|
|
beforeEach(function () {
|
|
scrollViewNode = componentNode.querySelector('.scroll-view')
|
|
scrollViewClientLeft = componentNode.querySelector('.scroll-view').getBoundingClientRect().left
|
|
})
|
|
|
|
it('renders 1 region for 1-line selections', function () {
|
|
editor.setSelectedScreenRange([[1, 6], [1, 10]])
|
|
runAnimationFrames()
|
|
|
|
let regions = componentNode.querySelectorAll('.selection .region')
|
|
expect(regions.length).toBe(1)
|
|
|
|
let regionRect = regions[0].getBoundingClientRect()
|
|
expect(regionRect.top).toBe(1 * lineHeightInPixels)
|
|
expect(regionRect.height).toBe(1 * lineHeightInPixels)
|
|
expect(regionRect.left).toBeCloseTo(scrollViewClientLeft + 6 * charWidth, 0)
|
|
expect(regionRect.width).toBeCloseTo(4 * charWidth, 0)
|
|
})
|
|
|
|
it('renders 2 regions for 2-line selections', function () {
|
|
editor.setSelectedScreenRange([[1, 6], [2, 10]])
|
|
runAnimationFrames()
|
|
|
|
let tileNode = component.tileNodesForLines()[0]
|
|
let regions = tileNode.querySelectorAll('.selection .region')
|
|
expect(regions.length).toBe(2)
|
|
|
|
let region1Rect = regions[0].getBoundingClientRect()
|
|
expect(region1Rect.top).toBe(1 * lineHeightInPixels)
|
|
expect(region1Rect.height).toBe(1 * lineHeightInPixels)
|
|
expect(region1Rect.left).toBeCloseTo(scrollViewClientLeft + 6 * charWidth, 0)
|
|
expect(region1Rect.right).toBeCloseTo(tileNode.getBoundingClientRect().right, 0)
|
|
|
|
let region2Rect = regions[1].getBoundingClientRect()
|
|
expect(region2Rect.top).toBe(2 * lineHeightInPixels)
|
|
expect(region2Rect.height).toBe(1 * lineHeightInPixels)
|
|
expect(region2Rect.left).toBeCloseTo(scrollViewClientLeft + 0, 0)
|
|
expect(region2Rect.width).toBeCloseTo(10 * charWidth, 0)
|
|
})
|
|
|
|
it('renders 3 regions per tile for selections with more than 2 lines', function () {
|
|
editor.setSelectedScreenRange([[0, 6], [5, 10]])
|
|
runAnimationFrames()
|
|
|
|
let region1Rect, region2Rect, region3Rect, regions, tileNode
|
|
tileNode = component.tileNodesForLines()[0]
|
|
regions = tileNode.querySelectorAll('.selection .region')
|
|
expect(regions.length).toBe(3)
|
|
|
|
region1Rect = regions[0].getBoundingClientRect()
|
|
expect(region1Rect.top).toBe(0)
|
|
expect(region1Rect.height).toBe(1 * lineHeightInPixels)
|
|
expect(region1Rect.left).toBeCloseTo(scrollViewClientLeft + 6 * charWidth, 0)
|
|
expect(region1Rect.right).toBeCloseTo(tileNode.getBoundingClientRect().right, 0)
|
|
|
|
region2Rect = regions[1].getBoundingClientRect()
|
|
expect(region2Rect.top).toBe(1 * lineHeightInPixels)
|
|
expect(region2Rect.height).toBe(1 * lineHeightInPixels)
|
|
expect(region2Rect.left).toBeCloseTo(scrollViewClientLeft + 0, 0)
|
|
expect(region2Rect.right).toBeCloseTo(tileNode.getBoundingClientRect().right, 0)
|
|
|
|
region3Rect = regions[2].getBoundingClientRect()
|
|
expect(region3Rect.top).toBe(2 * lineHeightInPixels)
|
|
expect(region3Rect.height).toBe(1 * lineHeightInPixels)
|
|
expect(region3Rect.left).toBeCloseTo(scrollViewClientLeft + 0, 0)
|
|
expect(region3Rect.right).toBeCloseTo(tileNode.getBoundingClientRect().right, 0)
|
|
|
|
tileNode = component.tileNodesForLines()[1]
|
|
regions = tileNode.querySelectorAll('.selection .region')
|
|
expect(regions.length).toBe(3)
|
|
|
|
region1Rect = regions[0].getBoundingClientRect()
|
|
expect(region1Rect.top).toBe(3 * lineHeightInPixels)
|
|
expect(region1Rect.height).toBe(1 * lineHeightInPixels)
|
|
expect(region1Rect.left).toBeCloseTo(scrollViewClientLeft + 0, 0)
|
|
expect(region1Rect.right).toBeCloseTo(tileNode.getBoundingClientRect().right, 0)
|
|
|
|
region2Rect = regions[1].getBoundingClientRect()
|
|
expect(region2Rect.top).toBe(4 * lineHeightInPixels)
|
|
expect(region2Rect.height).toBe(1 * lineHeightInPixels)
|
|
expect(region2Rect.left).toBeCloseTo(scrollViewClientLeft + 0, 0)
|
|
expect(region2Rect.right).toBeCloseTo(tileNode.getBoundingClientRect().right, 0)
|
|
|
|
region3Rect = regions[2].getBoundingClientRect()
|
|
expect(region3Rect.top).toBe(5 * lineHeightInPixels)
|
|
expect(region3Rect.height).toBe(1 * lineHeightInPixels)
|
|
expect(region3Rect.left).toBeCloseTo(scrollViewClientLeft + 0, 0)
|
|
expect(region3Rect.width).toBeCloseTo(10 * charWidth, 0)
|
|
})
|
|
|
|
it('does not render empty selections', function () {
|
|
editor.addSelectionForBufferRange([[2, 2], [2, 2]])
|
|
runAnimationFrames()
|
|
expect(editor.getSelections()[0].isEmpty()).toBe(true)
|
|
expect(editor.getSelections()[1].isEmpty()).toBe(true)
|
|
expect(componentNode.querySelectorAll('.selection').length).toBe(0)
|
|
})
|
|
|
|
it('updates selections when the line height changes', function () {
|
|
editor.setSelectedBufferRange([[1, 6], [1, 10]])
|
|
component.setLineHeight(2)
|
|
runAnimationFrames()
|
|
let selectionNode = componentNode.querySelector('.region')
|
|
expect(selectionNode.offsetTop).toBe(editor.getLineHeightInPixels())
|
|
})
|
|
|
|
it('updates selections when the font size changes', function () {
|
|
editor.setSelectedBufferRange([[1, 6], [1, 10]])
|
|
component.setFontSize(10)
|
|
|
|
runAnimationFrames()
|
|
|
|
let selectionNode = componentNode.querySelector('.region')
|
|
expect(selectionNode.offsetTop).toBe(editor.getLineHeightInPixels())
|
|
expect(selectionNode.offsetLeft).toBeCloseTo(6 * editor.getDefaultCharWidth(), 0)
|
|
})
|
|
|
|
it('updates selections when the font family changes', function () {
|
|
editor.setSelectedBufferRange([[1, 6], [1, 10]])
|
|
component.setFontFamily('sans-serif')
|
|
|
|
runAnimationFrames()
|
|
|
|
let selectionNode = componentNode.querySelector('.region')
|
|
expect(selectionNode.offsetTop).toBe(editor.getLineHeightInPixels())
|
|
expect(selectionNode.offsetLeft).toBeCloseTo(wrapperNode.pixelPositionForScreenPosition([1, 6]).left, 0)
|
|
})
|
|
|
|
it('will flash the selection when flash:true is passed to editor::setSelectedBufferRange', async function () {
|
|
editor.setSelectedBufferRange([[1, 6], [1, 10]], {
|
|
flash: true
|
|
})
|
|
runAnimationFrames()
|
|
|
|
let selectionNode = componentNode.querySelector('.selection')
|
|
expect(selectionNode.classList.contains('flash')).toBe(true)
|
|
|
|
advanceClock(editor.selectionFlashDuration)
|
|
|
|
editor.setSelectedBufferRange([[1, 5], [1, 7]], {
|
|
flash: true
|
|
})
|
|
runAnimationFrames()
|
|
|
|
expect(selectionNode.classList.contains('flash')).toBe(true)
|
|
})
|
|
})
|
|
|
|
describe('line decoration rendering', async function () {
|
|
let decoration, marker
|
|
|
|
beforeEach(async function () {
|
|
marker = editor.addMarkerLayer({
|
|
maintainHistory: true
|
|
}).markBufferRange([[2, 13], [3, 15]], {
|
|
invalidate: 'inside'
|
|
})
|
|
decoration = editor.decorateMarker(marker, {
|
|
type: ['line-number', 'line'],
|
|
'class': 'a'
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('applies line decoration classes to lines and line numbers', async function () {
|
|
expect(lineAndLineNumberHaveClass(2, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(3, 'a')).toBe(true)
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let marker2 = editor.markBufferRange([[9, 0], [9, 0]])
|
|
editor.decorateMarker(marker2, {
|
|
type: ['line-number', 'line'],
|
|
'class': 'b'
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
verticalScrollbarNode.scrollTop = 4.5 * lineHeightInPixels
|
|
verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
|
|
expect(lineAndLineNumberHaveClass(9, 'b')).toBe(true)
|
|
|
|
editor.foldBufferRow(5)
|
|
runAnimationFrames()
|
|
|
|
expect(lineAndLineNumberHaveClass(9, 'b')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(6, 'b')).toBe(true)
|
|
})
|
|
|
|
it('only applies decorations to screen rows that are spanned by their marker when lines are soft-wrapped', async function () {
|
|
editor.setText('a line that wraps, ok')
|
|
editor.setSoftWrapped(true)
|
|
componentNode.style.width = 16 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
|
|
runAnimationFrames()
|
|
marker.destroy()
|
|
marker = editor.markBufferRange([[0, 0], [0, 2]])
|
|
editor.decorateMarker(marker, {
|
|
type: ['line-number', 'line'],
|
|
'class': 'b'
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(0, 'b')).toBe(true)
|
|
expect(lineNumberHasClass(1, 'b')).toBe(false)
|
|
marker.setBufferRange([[0, 0], [0, Infinity]])
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(0, 'b')).toBe(true)
|
|
expect(lineNumberHasClass(1, 'b')).toBe(true)
|
|
})
|
|
|
|
it('updates decorations when markers move', async function () {
|
|
expect(lineAndLineNumberHaveClass(1, 'a')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(2, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(3, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(4, 'a')).toBe(false)
|
|
|
|
editor.getBuffer().insert([0, 0], '\n')
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(lineAndLineNumberHaveClass(2, 'a')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(3, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(4, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(5, 'a')).toBe(false)
|
|
|
|
marker.setBufferRange([[4, 4], [6, 4]])
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(lineAndLineNumberHaveClass(2, 'a')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(3, 'a')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(4, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(5, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(6, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(7, 'a')).toBe(false)
|
|
})
|
|
|
|
it('remove decoration classes when decorations are removed', async function () {
|
|
decoration.destroy()
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
expect(lineNumberHasClass(1, 'a')).toBe(false)
|
|
expect(lineNumberHasClass(2, 'a')).toBe(false)
|
|
expect(lineNumberHasClass(3, 'a')).toBe(false)
|
|
expect(lineNumberHasClass(4, 'a')).toBe(false)
|
|
})
|
|
|
|
it('removes decorations when their marker is invalidated', async function () {
|
|
editor.getBuffer().insert([3, 2], 'n')
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(marker.isValid()).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(1, 'a')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(2, 'a')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(3, 'a')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(4, 'a')).toBe(false)
|
|
editor.undo()
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(marker.isValid()).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(1, 'a')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(2, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(3, 'a')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(4, 'a')).toBe(false)
|
|
})
|
|
|
|
it('removes decorations when their marker is destroyed', async function () {
|
|
marker.destroy()
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
expect(lineNumberHasClass(1, 'a')).toBe(false)
|
|
expect(lineNumberHasClass(2, 'a')).toBe(false)
|
|
expect(lineNumberHasClass(3, 'a')).toBe(false)
|
|
expect(lineNumberHasClass(4, 'a')).toBe(false)
|
|
})
|
|
|
|
describe('when the decoration\'s "onlyHead" property is true', async function () {
|
|
it('only applies the decoration\'s class to lines containing the marker\'s head', async function () {
|
|
editor.decorateMarker(marker, {
|
|
type: ['line-number', 'line'],
|
|
'class': 'only-head',
|
|
onlyHead: true
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
expect(lineAndLineNumberHaveClass(1, 'only-head')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(2, 'only-head')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(3, 'only-head')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(4, 'only-head')).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('when the decoration\'s "onlyEmpty" property is true', function () {
|
|
it('only applies the decoration when its marker is empty', async function () {
|
|
editor.decorateMarker(marker, {
|
|
type: ['line-number', 'line'],
|
|
'class': 'only-empty',
|
|
onlyEmpty: true
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(lineAndLineNumberHaveClass(2, 'only-empty')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(3, 'only-empty')).toBe(false)
|
|
|
|
marker.clearTail()
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(lineAndLineNumberHaveClass(2, 'only-empty')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(3, 'only-empty')).toBe(true)
|
|
})
|
|
})
|
|
|
|
describe('when the decoration\'s "onlyNonEmpty" property is true', function () {
|
|
it('only applies the decoration when its marker is non-empty', async function () {
|
|
editor.decorateMarker(marker, {
|
|
type: ['line-number', 'line'],
|
|
'class': 'only-non-empty',
|
|
onlyNonEmpty: true
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(lineAndLineNumberHaveClass(2, 'only-non-empty')).toBe(true)
|
|
expect(lineAndLineNumberHaveClass(3, 'only-non-empty')).toBe(true)
|
|
|
|
marker.clearTail()
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(lineAndLineNumberHaveClass(2, 'only-non-empty')).toBe(false)
|
|
expect(lineAndLineNumberHaveClass(3, 'only-non-empty')).toBe(false)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('block decorations rendering', function () {
|
|
function createBlockDecorationBeforeScreenRow(screenRow, {className}) {
|
|
let item = document.createElement("div")
|
|
item.className = className || ""
|
|
let blockDecoration = editor.decorateMarker(
|
|
editor.markScreenPosition([screenRow, 0], {invalidate: "never"}),
|
|
{type: "block", item: item, position: "before"}
|
|
)
|
|
return [item, blockDecoration]
|
|
}
|
|
|
|
function createBlockDecorationAfterScreenRow(screenRow, {className}) {
|
|
let item = document.createElement("div")
|
|
item.className = className || ""
|
|
let blockDecoration = editor.decorateMarker(
|
|
editor.markScreenPosition([screenRow, 0], {invalidate: "never"}),
|
|
{type: "block", item: item, position: "after"}
|
|
)
|
|
return [item, blockDecoration]
|
|
}
|
|
|
|
beforeEach(function () {
|
|
wrapperNode.style.height = 5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
})
|
|
|
|
afterEach(function () {
|
|
atom.themes.removeStylesheet('test')
|
|
})
|
|
|
|
it("renders visible and yet-to-be-measured block decorations, inserting them between the appropriate lines and refreshing them as needed", async function () {
|
|
let [item1, blockDecoration1] = createBlockDecorationBeforeScreenRow(0, {className: "decoration-1"})
|
|
let [item2, blockDecoration2] = createBlockDecorationBeforeScreenRow(2, {className: "decoration-2"})
|
|
let [item3, blockDecoration3] = createBlockDecorationBeforeScreenRow(4, {className: "decoration-3"})
|
|
let [item4, blockDecoration4] = createBlockDecorationBeforeScreenRow(7, {className: "decoration-4"})
|
|
let [item5, blockDecoration5] = createBlockDecorationAfterScreenRow(7, {className: "decoration-5"})
|
|
|
|
atom.styles.addStyleSheet(
|
|
`atom-text-editor .decoration-1 { width: 30px; height: 80px; }
|
|
atom-text-editor .decoration-2 { width: 30px; height: 40px; }
|
|
atom-text-editor .decoration-3 { width: 30px; height: 100px; }
|
|
atom-text-editor .decoration-4 { width: 30px; height: 120px; }
|
|
atom-text-editor .decoration-5 { width: 30px; height: 42px; }`,
|
|
{context: 'atom-text-editor'}
|
|
)
|
|
runAnimationFrames()
|
|
|
|
expect(component.getDomNode().querySelectorAll(".line").length).toBe(7)
|
|
|
|
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 80 + 40 + "px")
|
|
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
|
|
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 100 + "px")
|
|
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
|
|
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 120 + 42 + "px")
|
|
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
|
|
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-1")).toBe(item1)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-2")).toBe(item2)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-3")).toBe(item3)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-4")).toBeNull()
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-5")).toBeNull()
|
|
|
|
expect(item1.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 0)
|
|
expect(item2.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 2 + 80)
|
|
expect(item3.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 4 + 80 + 40)
|
|
|
|
editor.setCursorScreenPosition([0, 0])
|
|
editor.insertNewline()
|
|
blockDecoration1.destroy()
|
|
|
|
runAnimationFrames()
|
|
|
|
expect(component.getDomNode().querySelectorAll(".line").length).toBe(7)
|
|
|
|
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
|
|
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
|
|
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 100 + 40 + "px")
|
|
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
|
|
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 120 + 42 + "px")
|
|
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
|
|
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-1")).toBeNull()
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-2")).toBe(item2)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-3")).toBe(item3)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-4")).toBeNull()
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-5")).toBeNull()
|
|
|
|
expect(item2.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 3)
|
|
expect(item3.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 5 + 40)
|
|
|
|
atom.styles.addStyleSheet(
|
|
'atom-text-editor .decoration-2 { height: 60px; }',
|
|
{context: 'atom-text-editor'}
|
|
)
|
|
|
|
runAnimationFrames() // causes the DOM to update and to retrieve new styles
|
|
runAnimationFrames() // applies the changes
|
|
|
|
expect(component.getDomNode().querySelectorAll(".line").length).toBe(7)
|
|
|
|
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
|
|
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
|
|
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 100 + 60 + "px")
|
|
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
|
|
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 120 + 42 + "px")
|
|
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
|
|
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-1")).toBeNull()
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-2")).toBe(item2)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-3")).toBe(item3)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-4")).toBeNull()
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-5")).toBeNull()
|
|
|
|
expect(item2.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 3)
|
|
expect(item3.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 5 + 60)
|
|
|
|
item2.style.height = "20px"
|
|
wrapperNode.invalidateBlockDecorationDimensions(blockDecoration2)
|
|
runAnimationFrames()
|
|
runAnimationFrames()
|
|
|
|
expect(component.getDomNode().querySelectorAll(".line").length).toBe(9)
|
|
|
|
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
|
|
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
|
|
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 100 + 20 + "px")
|
|
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
|
|
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 120 + 42 + "px")
|
|
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
|
|
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-1")).toBeNull()
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-2")).toBe(item2)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-3")).toBe(item3)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-4")).toBe(item4)
|
|
expect(component.getTopmostDOMNode().querySelector(".decoration-5")).toBe(item5)
|
|
|
|
expect(item2.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 3)
|
|
expect(item3.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 5 + 20)
|
|
expect(item4.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 8 + 20 + 100)
|
|
expect(item5.getBoundingClientRect().top).toBe(editor.getLineHeightInPixels() * 8 + 20 + 100 + 120 + lineHeightInPixels)
|
|
})
|
|
|
|
it("correctly sets screen rows on <content> elements, both initially and when decorations move", function () {
|
|
let [item, blockDecoration] = createBlockDecorationBeforeScreenRow(0, {className: "decoration-1"})
|
|
atom.styles.addStyleSheet(
|
|
'atom-text-editor .decoration-1 { width: 30px; height: 80px; }',
|
|
{context: 'atom-text-editor'}
|
|
)
|
|
|
|
runAnimationFrames()
|
|
|
|
let tileNode, contentElements
|
|
|
|
tileNode = component.tileNodesForLines()[0]
|
|
contentElements = tileNode.querySelectorAll("content")
|
|
|
|
expect(contentElements.length).toBe(1)
|
|
expect(contentElements[0].dataset.screenRow).toBe("0")
|
|
expect(component.lineNodeForScreenRow(0).dataset.screenRow).toBe("0")
|
|
expect(component.lineNodeForScreenRow(1).dataset.screenRow).toBe("1")
|
|
expect(component.lineNodeForScreenRow(2).dataset.screenRow).toBe("2")
|
|
|
|
editor.setCursorBufferPosition([0, 0])
|
|
editor.insertNewline()
|
|
runAnimationFrames()
|
|
|
|
tileNode = component.tileNodesForLines()[0]
|
|
contentElements = tileNode.querySelectorAll("content")
|
|
|
|
expect(contentElements.length).toBe(1)
|
|
expect(contentElements[0].dataset.screenRow).toBe("1")
|
|
expect(component.lineNodeForScreenRow(0).dataset.screenRow).toBe("0")
|
|
expect(component.lineNodeForScreenRow(1).dataset.screenRow).toBe("1")
|
|
expect(component.lineNodeForScreenRow(2).dataset.screenRow).toBe("2")
|
|
|
|
blockDecoration.getMarker().setHeadBufferPosition([2, 0])
|
|
runAnimationFrames()
|
|
|
|
tileNode = component.tileNodesForLines()[0]
|
|
contentElements = tileNode.querySelectorAll("content")
|
|
|
|
expect(contentElements.length).toBe(1)
|
|
expect(contentElements[0].dataset.screenRow).toBe("2")
|
|
expect(component.lineNodeForScreenRow(0).dataset.screenRow).toBe("0")
|
|
expect(component.lineNodeForScreenRow(1).dataset.screenRow).toBe("1")
|
|
expect(component.lineNodeForScreenRow(2).dataset.screenRow).toBe("2")
|
|
})
|
|
|
|
it('measures block decorations taking into account both top and bottom margins of the element and its children', function () {
|
|
let [item, blockDecoration] = createBlockDecorationBeforeScreenRow(0, {className: "decoration-1"})
|
|
let child = document.createElement("div")
|
|
child.style.height = "7px"
|
|
child.style.width = "30px"
|
|
child.style.marginBottom = "20px"
|
|
item.appendChild(child)
|
|
atom.styles.addStyleSheet(
|
|
'atom-text-editor .decoration-1 { width: 30px; margin-top: 10px; }',
|
|
{context: 'atom-text-editor'}
|
|
)
|
|
|
|
runAnimationFrames() // causes the DOM to update and to retrieve new styles
|
|
runAnimationFrames() // applies the changes
|
|
|
|
expect(component.tileNodesForLines()[0].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + 10 + 7 + 20 + "px")
|
|
expect(component.tileNodesForLines()[0].style.webkitTransform).toBe("translate3d(0px, 0px, 0px)")
|
|
expect(component.tileNodesForLines()[1].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
|
|
expect(component.tileNodesForLines()[1].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight}px, 0px)`)
|
|
expect(component.tileNodesForLines()[2].style.height).toBe(TILE_SIZE * editor.getLineHeightInPixels() + "px")
|
|
expect(component.tileNodesForLines()[2].style.webkitTransform).toBe(`translate3d(0px, ${component.tileNodesForLines()[0].offsetHeight + component.tileNodesForLines()[1].offsetHeight}px, 0px)`)
|
|
})
|
|
})
|
|
|
|
describe('highlight decoration rendering', function () {
|
|
let decoration, marker, scrollViewClientLeft
|
|
|
|
beforeEach(async function () {
|
|
scrollViewClientLeft = componentNode.querySelector('.scroll-view').getBoundingClientRect().left
|
|
marker = editor.addMarkerLayer({
|
|
maintainHistory: true
|
|
}).markBufferRange([[2, 13], [3, 15]], {
|
|
invalidate: 'inside'
|
|
})
|
|
decoration = editor.decorateMarker(marker, {
|
|
type: 'highlight',
|
|
'class': 'test-highlight'
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('does not render highlights for off-screen lines until they come on-screen', async function () {
|
|
wrapperNode.style.height = 2.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
marker = editor.markBufferRange([[9, 2], [9, 4]], {
|
|
invalidate: 'inside'
|
|
})
|
|
editor.decorateMarker(marker, {
|
|
type: 'highlight',
|
|
'class': 'some-highlight'
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(component.presenter.endRow).toBeLessThan(9)
|
|
let regions = componentNode.querySelectorAll('.some-highlight .region')
|
|
expect(regions.length).toBe(0)
|
|
verticalScrollbarNode.scrollTop = 6 * lineHeightInPixels
|
|
verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
|
|
expect(component.presenter.endRow).toBeGreaterThan(8)
|
|
regions = componentNode.querySelectorAll('.some-highlight .region')
|
|
expect(regions.length).toBe(1)
|
|
let regionRect = regions[0].style
|
|
expect(regionRect.top).toBe(0 + 'px')
|
|
expect(regionRect.height).toBe(1 * lineHeightInPixels + 'px')
|
|
expect(regionRect.left).toBe(Math.round(2 * charWidth) + 'px')
|
|
expect(regionRect.width).toBe(Math.round(2 * charWidth) + 'px')
|
|
})
|
|
|
|
it('renders highlights decoration\'s marker is added', function () {
|
|
let regions = componentNode.querySelectorAll('.test-highlight .region')
|
|
expect(regions.length).toBe(2)
|
|
})
|
|
|
|
it('removes highlights when a decoration is removed', async function () {
|
|
decoration.destroy()
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
let regions = componentNode.querySelectorAll('.test-highlight .region')
|
|
expect(regions.length).toBe(0)
|
|
})
|
|
|
|
it('does not render a highlight that is within a fold', async function () {
|
|
editor.foldBufferRow(1)
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
expect(componentNode.querySelectorAll('.test-highlight').length).toBe(0)
|
|
})
|
|
|
|
it('removes highlights when a decoration\'s marker is destroyed', async function () {
|
|
marker.destroy()
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
let regions = componentNode.querySelectorAll('.test-highlight .region')
|
|
expect(regions.length).toBe(0)
|
|
})
|
|
|
|
it('only renders highlights when a decoration\'s marker is valid', async function () {
|
|
editor.getBuffer().insert([3, 2], 'n')
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(marker.isValid()).toBe(false)
|
|
let regions = componentNode.querySelectorAll('.test-highlight .region')
|
|
expect(regions.length).toBe(0)
|
|
editor.getBuffer().undo()
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(marker.isValid()).toBe(true)
|
|
regions = componentNode.querySelectorAll('.test-highlight .region')
|
|
expect(regions.length).toBe(2)
|
|
})
|
|
|
|
it('allows multiple space-delimited decoration classes', async function () {
|
|
decoration.setProperties({
|
|
type: 'highlight',
|
|
'class': 'foo bar'
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
expect(componentNode.querySelectorAll('.foo.bar').length).toBe(2)
|
|
decoration.setProperties({
|
|
type: 'highlight',
|
|
'class': 'bar baz'
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
expect(componentNode.querySelectorAll('.bar.baz').length).toBe(2)
|
|
})
|
|
|
|
it('renders classes on the regions directly if "deprecatedRegionClass" option is defined', async function () {
|
|
decoration = editor.decorateMarker(marker, {
|
|
type: 'highlight',
|
|
'class': 'test-highlight',
|
|
deprecatedRegionClass: 'test-highlight-region'
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
let regions = componentNode.querySelectorAll('.test-highlight .region.test-highlight-region')
|
|
expect(regions.length).toBe(2)
|
|
})
|
|
|
|
describe('when flashing a decoration via Decoration::flash()', function () {
|
|
let highlightNode
|
|
|
|
beforeEach(function () {
|
|
highlightNode = componentNode.querySelectorAll('.test-highlight')[1]
|
|
})
|
|
|
|
it('adds and removes the flash class specified in ::flash', async function () {
|
|
expect(highlightNode.classList.contains('flash-class')).toBe(false)
|
|
decoration.flash('flash-class', 10)
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(highlightNode.classList.contains('flash-class')).toBe(true)
|
|
advanceClock(10)
|
|
expect(highlightNode.classList.contains('flash-class')).toBe(false)
|
|
})
|
|
|
|
describe('when ::flash is called again before the first has finished', function () {
|
|
it('removes the class from the decoration highlight before adding it for the second ::flash call', async function () {
|
|
decoration.flash('flash-class', 500)
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
expect(highlightNode.classList.contains('flash-class')).toBe(true)
|
|
|
|
decoration.flash('flash-class', 500)
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(highlightNode.classList.contains('flash-class')).toBe(false)
|
|
runAnimationFrames()
|
|
expect(highlightNode.classList.contains('flash-class')).toBe(true)
|
|
advanceClock(500)
|
|
expect(highlightNode.classList.contains('flash-class')).toBe(false)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when a decoration\'s marker moves', function () {
|
|
it('moves rendered highlights when the buffer is changed', async function () {
|
|
let regionStyle = componentNode.querySelector('.test-highlight .region').style
|
|
let originalTop = parseInt(regionStyle.top)
|
|
expect(originalTop).toBe(2 * lineHeightInPixels)
|
|
|
|
editor.getBuffer().insert([0, 0], '\n')
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
regionStyle = componentNode.querySelector('.test-highlight .region').style
|
|
let newTop = parseInt(regionStyle.top)
|
|
expect(newTop).toBe(0)
|
|
})
|
|
|
|
it('moves rendered highlights when the marker is manually moved', async function () {
|
|
let regionStyle = componentNode.querySelector('.test-highlight .region').style
|
|
expect(parseInt(regionStyle.top)).toBe(2 * lineHeightInPixels)
|
|
|
|
marker.setBufferRange([[5, 8], [5, 13]])
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
regionStyle = componentNode.querySelector('.test-highlight .region').style
|
|
expect(parseInt(regionStyle.top)).toBe(2 * lineHeightInPixels)
|
|
})
|
|
})
|
|
|
|
describe('when a decoration is updated via Decoration::update', function () {
|
|
it('renders the decoration\'s new params', async function () {
|
|
expect(componentNode.querySelector('.test-highlight')).toBeTruthy()
|
|
decoration.setProperties({
|
|
type: 'highlight',
|
|
'class': 'new-test-highlight'
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
expect(componentNode.querySelector('.test-highlight')).toBeFalsy()
|
|
expect(componentNode.querySelector('.new-test-highlight')).toBeTruthy()
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('overlay decoration rendering', function () {
|
|
let gutterWidth, item
|
|
|
|
beforeEach(function () {
|
|
item = document.createElement('div')
|
|
item.classList.add('overlay-test')
|
|
item.style.background = 'red'
|
|
gutterWidth = componentNode.querySelector('.gutter').offsetWidth
|
|
})
|
|
|
|
describe('when the marker is empty', function () {
|
|
it('renders an overlay decoration when added and removes the overlay when the decoration is destroyed', async function () {
|
|
let marker = editor.markBufferRange([[2, 13], [2, 13]], {
|
|
invalidate: 'never'
|
|
})
|
|
let decoration = editor.decorateMarker(marker, {
|
|
type: 'overlay',
|
|
item: item
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
let overlay = component.getTopmostDOMNode().querySelector('atom-overlay .overlay-test')
|
|
expect(overlay).toBe(item)
|
|
|
|
decoration.destroy()
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
overlay = component.getTopmostDOMNode().querySelector('atom-overlay .overlay-test')
|
|
expect(overlay).toBe(null)
|
|
})
|
|
|
|
it('renders the overlay element with the CSS class specified by the decoration', async function () {
|
|
let marker = editor.markBufferRange([[2, 13], [2, 13]], {
|
|
invalidate: 'never'
|
|
})
|
|
let decoration = editor.decorateMarker(marker, {
|
|
type: 'overlay',
|
|
'class': 'my-overlay',
|
|
item: item
|
|
})
|
|
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
let overlay = component.getTopmostDOMNode().querySelector('atom-overlay.my-overlay')
|
|
expect(overlay).not.toBe(null)
|
|
let child = overlay.querySelector('.overlay-test')
|
|
expect(child).toBe(item)
|
|
})
|
|
})
|
|
|
|
describe('when the marker is not empty', function () {
|
|
it('renders at the head of the marker by default', async function () {
|
|
let marker = editor.markBufferRange([[2, 5], [2, 10]], {
|
|
invalidate: 'never'
|
|
})
|
|
let decoration = editor.decorateMarker(marker, {
|
|
type: 'overlay',
|
|
item: item
|
|
})
|
|
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
let position = wrapperNode.pixelPositionForBufferPosition([2, 10])
|
|
let overlay = component.getTopmostDOMNode().querySelector('atom-overlay')
|
|
expect(overlay.style.left).toBe(Math.round(position.left + gutterWidth) + 'px')
|
|
expect(overlay.style.top).toBe(position.top + editor.getLineHeightInPixels() + 'px')
|
|
})
|
|
})
|
|
|
|
describe('positioning the overlay when near the edge of the editor', function () {
|
|
let itemHeight, itemWidth, windowHeight, windowWidth
|
|
|
|
beforeEach(async function () {
|
|
atom.storeWindowDimensions()
|
|
itemWidth = Math.round(4 * editor.getDefaultCharWidth())
|
|
itemHeight = 4 * editor.getLineHeightInPixels()
|
|
windowWidth = Math.round(gutterWidth + 30 * editor.getDefaultCharWidth())
|
|
windowHeight = 10 * editor.getLineHeightInPixels()
|
|
item.style.width = itemWidth + 'px'
|
|
item.style.height = itemHeight + 'px'
|
|
wrapperNode.style.width = windowWidth + 'px'
|
|
wrapperNode.style.height = windowHeight + 'px'
|
|
await atom.setWindowDimensions({
|
|
width: windowWidth,
|
|
height: windowHeight
|
|
})
|
|
|
|
component.measureDimensions()
|
|
component.measureWindowSize()
|
|
runAnimationFrames()
|
|
})
|
|
|
|
afterEach(function () {
|
|
atom.restoreWindowDimensions()
|
|
})
|
|
|
|
it('slides horizontally left when near the right edge on #win32 and #darwin', async function () {
|
|
let marker = editor.markBufferRange([[0, 26], [0, 26]], {
|
|
invalidate: 'never'
|
|
})
|
|
let decoration = editor.decorateMarker(marker, {
|
|
type: 'overlay',
|
|
item: item
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
let position = wrapperNode.pixelPositionForBufferPosition([0, 26])
|
|
let overlay = component.getTopmostDOMNode().querySelector('atom-overlay')
|
|
expect(overlay.style.left).toBe(Math.round(position.left + gutterWidth) + 'px')
|
|
expect(overlay.style.top).toBe(position.top + editor.getLineHeightInPixels() + 'px')
|
|
|
|
editor.insertText('a')
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(overlay.style.left).toBe(window.innerWidth - itemWidth + 'px')
|
|
expect(overlay.style.top).toBe(position.top + editor.getLineHeightInPixels() + 'px')
|
|
|
|
editor.insertText('b')
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(overlay.style.left).toBe(window.innerWidth - itemWidth + 'px')
|
|
expect(overlay.style.top).toBe(position.top + editor.getLineHeightInPixels() + 'px')
|
|
|
|
// window size change
|
|
const innerWidthBefore = window.innerWidth
|
|
await atom.setWindowDimensions({
|
|
width: Math.round(gutterWidth + 20 * editor.getDefaultCharWidth()),
|
|
height: windowHeight,
|
|
})
|
|
// wait for window to resize :(
|
|
await conditionPromise(() => {
|
|
return window.innerWidth !== innerWidthBefore
|
|
})
|
|
|
|
atom.views.performDocumentPoll()
|
|
runAnimationFrames()
|
|
|
|
expect(overlay.style.left).toBe(window.innerWidth - itemWidth + 'px')
|
|
expect(overlay.style.top).toBe(position.top + editor.getLineHeightInPixels() + 'px')
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('hidden input field', function () {
|
|
it('renders the hidden input field at the position of the last cursor if the cursor is on screen and the editor is focused', async function () {
|
|
editor.setVerticalScrollMargin(0)
|
|
editor.setHorizontalScrollMargin(0)
|
|
let inputNode = componentNode.querySelector('.hidden-input')
|
|
wrapperNode.style.height = 5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 0])
|
|
|
|
wrapperNode.setScrollTop(3 * lineHeightInPixels)
|
|
wrapperNode.setScrollLeft(3 * charWidth)
|
|
runAnimationFrames()
|
|
|
|
expect(inputNode.offsetTop).toBe(0)
|
|
expect(inputNode.offsetLeft).toBe(0)
|
|
|
|
editor.setCursorBufferPosition([5, 4], {
|
|
autoscroll: false
|
|
})
|
|
await decorationsUpdatedPromise(editor)
|
|
runAnimationFrames()
|
|
|
|
expect(inputNode.offsetTop).toBe(0)
|
|
expect(inputNode.offsetLeft).toBe(0)
|
|
|
|
wrapperNode.focus()
|
|
runAnimationFrames()
|
|
|
|
expect(inputNode.offsetTop).toBe((5 * lineHeightInPixels) - wrapperNode.getScrollTop())
|
|
expect(inputNode.offsetLeft).toBeCloseTo((4 * charWidth) - wrapperNode.getScrollLeft(), 0)
|
|
|
|
inputNode.blur()
|
|
runAnimationFrames()
|
|
|
|
expect(inputNode.offsetTop).toBe(0)
|
|
expect(inputNode.offsetLeft).toBe(0)
|
|
|
|
editor.setCursorBufferPosition([1, 2], {
|
|
autoscroll: false
|
|
})
|
|
runAnimationFrames()
|
|
|
|
expect(inputNode.offsetTop).toBe(0)
|
|
expect(inputNode.offsetLeft).toBe(0)
|
|
|
|
inputNode.focus()
|
|
runAnimationFrames()
|
|
|
|
expect(inputNode.offsetTop).toBe(0)
|
|
expect(inputNode.offsetLeft).toBe(0)
|
|
})
|
|
})
|
|
|
|
describe('mouse interactions on the lines', function () {
|
|
let linesNode
|
|
|
|
beforeEach(function () {
|
|
linesNode = componentNode.querySelector('.lines')
|
|
})
|
|
|
|
describe('when the mouse is single-clicked above the first line', function () {
|
|
it('moves the cursor to the start of file buffer position', function () {
|
|
let height
|
|
editor.setText('foo')
|
|
editor.setCursorBufferPosition([0, 3])
|
|
height = 4.5 * lineHeightInPixels
|
|
wrapperNode.style.height = height + 'px'
|
|
wrapperNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let coordinates = clientCoordinatesForScreenPosition([0, 2])
|
|
coordinates.clientY = -1
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', coordinates))
|
|
|
|
runAnimationFrames()
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 0])
|
|
})
|
|
})
|
|
|
|
describe('when the mouse is single-clicked below the last line', function () {
|
|
it('moves the cursor to the end of file buffer position', function () {
|
|
editor.setText('foo')
|
|
editor.setCursorBufferPosition([0, 0])
|
|
let height = 4.5 * lineHeightInPixels
|
|
wrapperNode.style.height = height + 'px'
|
|
wrapperNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let coordinates = clientCoordinatesForScreenPosition([0, 2])
|
|
coordinates.clientY = height * 2
|
|
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', coordinates))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 3])
|
|
})
|
|
})
|
|
|
|
describe('when a non-folded line is single-clicked', function () {
|
|
describe('when no modifier keys are held down', function () {
|
|
it('moves the cursor to the nearest screen position', function () {
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
wrapperNode.setScrollTop(3.5 * lineHeightInPixels)
|
|
wrapperNode.setScrollLeft(2 * charWidth)
|
|
runAnimationFrames()
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([4, 8])))
|
|
runAnimationFrames()
|
|
expect(editor.getCursorScreenPosition()).toEqual([4, 8])
|
|
})
|
|
})
|
|
|
|
describe('when the shift key is held down', function () {
|
|
it('selects to the nearest screen position', function () {
|
|
editor.setCursorScreenPosition([3, 4])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 6]), {
|
|
shiftKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[3, 4], [5, 6]])
|
|
})
|
|
})
|
|
|
|
describe('when the command key is held down', function () {
|
|
describe('the current cursor position and screen position do not match', function () {
|
|
it('adds a cursor at the nearest screen position', function () {
|
|
editor.setCursorScreenPosition([3, 4])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 6]), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[3, 4], [3, 4]], [[5, 6], [5, 6]]])
|
|
})
|
|
})
|
|
|
|
describe('when there are multiple cursors, and one of the cursor\'s screen position is the same as the mouse click screen position', function () {
|
|
it('removes a cursor at the mouse screen position', function () {
|
|
editor.setCursorScreenPosition([3, 4])
|
|
editor.addCursorAtScreenPosition([5, 2])
|
|
editor.addCursorAtScreenPosition([7, 5])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([3, 4]), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[5, 2], [5, 2]], [[7, 5], [7, 5]]])
|
|
})
|
|
})
|
|
|
|
describe('when there is a single cursor and the click occurs at the cursor\'s screen position', function () {
|
|
it('neither adds a new cursor nor removes the current cursor', function () {
|
|
editor.setCursorScreenPosition([3, 4])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([3, 4]), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[3, 4], [3, 4]]])
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when a non-folded line is double-clicked', function () {
|
|
describe('when no modifier keys are held down', function () {
|
|
it('selects the word containing the nearest screen position', function () {
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 2
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 6], [5, 13]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([6, 6]), {
|
|
detail: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[6, 6], [6, 6]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([8, 8]), {
|
|
detail: 1,
|
|
shiftKey: true
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[6, 6], [8, 8]])
|
|
})
|
|
})
|
|
|
|
describe('when the command key is held down', function () {
|
|
it('selects the word containing the newly-added cursor', function () {
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 1,
|
|
metaKey: true
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 2,
|
|
metaKey: true
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[0, 0], [0, 0]], [[5, 6], [5, 13]]])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when a non-folded line is triple-clicked', function () {
|
|
describe('when no modifier keys are held down', function () {
|
|
it('selects the line containing the nearest screen position', function () {
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 2
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 3
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 0], [6, 0]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([6, 6]), {
|
|
detail: 1,
|
|
shiftKey: true
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 0], [7, 0]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([7, 5]), {
|
|
detail: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([8, 8]), {
|
|
detail: 1,
|
|
shiftKey: true
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[7, 5], [8, 8]])
|
|
})
|
|
})
|
|
|
|
describe('when the command key is held down', function () {
|
|
it('selects the line containing the newly-added cursor', function () {
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 1,
|
|
metaKey: true
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 2,
|
|
metaKey: true
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 3,
|
|
metaKey: true
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[0, 0], [0, 0]], [[5, 0], [6, 0]]])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the mouse is clicked and dragged', function () {
|
|
it('selects to the nearest screen position until the mouse button is released', function () {
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([2, 4]), {
|
|
which: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([6, 8]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [6, 8]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([10, 0]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [10, 0]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([12, 0]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [10, 0]])
|
|
})
|
|
|
|
it('autoscrolls when the cursor approaches the boundaries of the editor', function () {
|
|
wrapperNode.style.height = '100px'
|
|
wrapperNode.style.width = '100px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
expect(wrapperNode.getScrollLeft()).toBe(0)
|
|
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', {
|
|
clientX: 0,
|
|
clientY: 0
|
|
}, {
|
|
which: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', {
|
|
clientX: 100,
|
|
clientY: 50
|
|
}, {
|
|
which: 1
|
|
}))
|
|
|
|
for (let i = 0; i <= 5; ++i) {
|
|
runAnimationFrames()
|
|
}
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
expect(wrapperNode.getScrollLeft()).toBeGreaterThan(0)
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', {
|
|
clientX: 100,
|
|
clientY: 100
|
|
}, {
|
|
which: 1
|
|
}))
|
|
|
|
for (let i = 0; i <= 5; ++i) {
|
|
runAnimationFrames()
|
|
}
|
|
|
|
expect(wrapperNode.getScrollTop()).toBeGreaterThan(0)
|
|
let previousScrollTop = wrapperNode.getScrollTop()
|
|
let previousScrollLeft = wrapperNode.getScrollLeft()
|
|
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', {
|
|
clientX: 10,
|
|
clientY: 50
|
|
}, {
|
|
which: 1
|
|
}))
|
|
|
|
for (let i = 0; i <= 5; ++i) {
|
|
runAnimationFrames()
|
|
}
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(previousScrollTop)
|
|
expect(wrapperNode.getScrollLeft()).toBeLessThan(previousScrollLeft)
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', {
|
|
clientX: 10,
|
|
clientY: 10
|
|
}, {
|
|
which: 1
|
|
}))
|
|
|
|
for (let i = 0; i <= 5; ++i) {
|
|
runAnimationFrames()
|
|
}
|
|
|
|
expect(wrapperNode.getScrollTop()).toBeLessThan(previousScrollTop)
|
|
})
|
|
|
|
it('stops selecting if the mouse is dragged into the dev tools', function () {
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([2, 4]), {
|
|
which: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([6, 8]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [6, 8]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([10, 0]), {
|
|
which: 0
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [6, 8]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([8, 0]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [6, 8]])
|
|
})
|
|
|
|
it('stops selecting before the buffer is modified during the drag', function () {
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([2, 4]), {
|
|
which: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([6, 8]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [6, 8]])
|
|
|
|
editor.insertText('x')
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 5], [2, 5]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([8, 0]), {
|
|
which: 1
|
|
}))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 5], [2, 5]])
|
|
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([2, 4]), {
|
|
which: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([5, 4]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [5, 4]])
|
|
|
|
editor.delete()
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [2, 4]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([8, 0]), {
|
|
which: 1
|
|
}))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 4], [2, 4]])
|
|
})
|
|
|
|
describe('when the command key is held down', function () {
|
|
it('adds a new selection and selects to the nearest screen position, then merges intersecting selections when the mouse button is released', function () {
|
|
editor.setSelectedScreenRange([[4, 4], [4, 9]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([2, 4]), {
|
|
which: 1,
|
|
metaKey: true
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([6, 8]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[4, 4], [4, 9]], [[2, 4], [6, 8]]])
|
|
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([4, 6]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[4, 4], [4, 9]], [[2, 4], [4, 6]]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenPosition([4, 6]), {
|
|
which: 1
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[2, 4], [4, 9]]])
|
|
})
|
|
})
|
|
|
|
describe('when the editor is destroyed while dragging', function () {
|
|
it('cleans up the handlers for window.mouseup and window.mousemove', function () {
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([2, 4]), {
|
|
which: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([6, 8]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
spyOn(window, 'removeEventListener').andCallThrough()
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([6, 10]), {
|
|
which: 1
|
|
}))
|
|
|
|
editor.destroy()
|
|
runAnimationFrames()
|
|
|
|
for (let call of window.removeEventListener.calls) {
|
|
call.args.pop()
|
|
}
|
|
expect(window.removeEventListener).toHaveBeenCalledWith('mouseup')
|
|
expect(window.removeEventListener).toHaveBeenCalledWith('mousemove')
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the mouse is double-clicked and dragged', function () {
|
|
it('expands the selection over the nearest word as the cursor moves', function () {
|
|
jasmine.attachToDOM(wrapperNode)
|
|
wrapperNode.style.height = 6 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 2
|
|
}))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 6], [5, 13]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([11, 11]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 6], [12, 2]])
|
|
let maximalScrollTop = wrapperNode.getScrollTop()
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([9, 3]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 6], [9, 4]])
|
|
expect(wrapperNode.getScrollTop()).toBe(maximalScrollTop)
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenPosition([9, 3]), {
|
|
which: 1
|
|
}))
|
|
})
|
|
})
|
|
|
|
describe('when the mouse is triple-clicked and dragged', function () {
|
|
it('expands the selection over the nearest line as the cursor moves', function () {
|
|
jasmine.attachToDOM(wrapperNode)
|
|
wrapperNode.style.height = 6 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 1
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 2
|
|
}))
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup'))
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([5, 10]), {
|
|
detail: 3
|
|
}))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 0], [6, 0]])
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([11, 11]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 0], [12, 2]])
|
|
let maximalScrollTop = wrapperNode.getScrollTop()
|
|
linesNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenPosition([8, 4]), {
|
|
which: 1
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[5, 0], [8, 0]])
|
|
expect(wrapperNode.getScrollTop()).toBe(maximalScrollTop)
|
|
linesNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenPosition([9, 3]), {
|
|
which: 1
|
|
}))
|
|
})
|
|
})
|
|
|
|
describe('when a fold marker is clicked', function () {
|
|
function clickElementAtPosition (marker, position) {
|
|
linesNode.dispatchEvent(
|
|
buildMouseEvent('mousedown', clientCoordinatesForScreenPosition(position), {target: marker})
|
|
)
|
|
}
|
|
|
|
it('unfolds only the selected fold when other folds are on the same line', function () {
|
|
editor.foldBufferRange([[4, 6], [4, 10]])
|
|
editor.foldBufferRange([[4, 15], [4, 20]])
|
|
runAnimationFrames()
|
|
let foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
|
|
expect(foldMarkers.length).toBe(2)
|
|
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
|
|
|
|
clickElementAtPosition(foldMarkers[0], [4, 6])
|
|
runAnimationFrames()
|
|
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
|
|
expect(foldMarkers.length).toBe(1)
|
|
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
|
|
|
|
clickElementAtPosition(foldMarkers[0], [4, 15])
|
|
runAnimationFrames()
|
|
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
|
|
expect(foldMarkers.length).toBe(0)
|
|
expect(editor.isFoldedAtBufferRow(4)).toBe(false)
|
|
})
|
|
|
|
it('unfolds only the selected fold when other folds are inside it', function () {
|
|
editor.foldBufferRange([[4, 10], [4, 15]])
|
|
editor.foldBufferRange([[4, 4], [4, 5]])
|
|
editor.foldBufferRange([[4, 4], [4, 20]])
|
|
runAnimationFrames()
|
|
let foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
|
|
expect(foldMarkers.length).toBe(1)
|
|
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
|
|
|
|
clickElementAtPosition(foldMarkers[0], [4, 4])
|
|
runAnimationFrames()
|
|
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
|
|
expect(foldMarkers.length).toBe(1)
|
|
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
|
|
|
|
clickElementAtPosition(foldMarkers[0], [4, 4])
|
|
runAnimationFrames()
|
|
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
|
|
expect(foldMarkers.length).toBe(1)
|
|
expect(editor.isFoldedAtBufferRow(4)).toBe(true)
|
|
|
|
clickElementAtPosition(foldMarkers[0], [4, 10])
|
|
runAnimationFrames()
|
|
foldMarkers = component.lineNodeForScreenRow(4).querySelectorAll('.fold-marker')
|
|
expect(foldMarkers.length).toBe(0)
|
|
expect(editor.isFoldedAtBufferRow(4)).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('when the horizontal scrollbar is interacted with', function () {
|
|
it('clicking on the scrollbar does not move the cursor', function () {
|
|
let target = horizontalScrollbarNode
|
|
linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([4, 8]), {
|
|
target: target
|
|
}))
|
|
expect(editor.getCursorScreenPosition()).toEqual([0, 0])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('mouse interactions on the gutter', function () {
|
|
let gutterNode
|
|
|
|
beforeEach(function () {
|
|
gutterNode = componentNode.querySelector('.gutter')
|
|
})
|
|
|
|
describe('when the component is destroyed', function () {
|
|
it('stops listening for selection events', function () {
|
|
component.destroy()
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(1)))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[0, 0], [0, 0]])
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is clicked', function () {
|
|
it('selects the clicked row', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(4)))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[4, 0], [5, 0]])
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is meta-clicked', function () {
|
|
it('creates a new selection for the clicked row', function () {
|
|
editor.setSelectedScreenRange([[3, 0], [3, 2]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(4), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[3, 0], [3, 2]], [[4, 0], [5, 0]]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(6), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[3, 0], [3, 2]], [[4, 0], [5, 0]], [[6, 0], [7, 0]]])
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is shift-clicked', function () {
|
|
beforeEach(function () {
|
|
editor.setSelectedScreenRange([[3, 4], [4, 5]])
|
|
})
|
|
|
|
describe('when the clicked row is before the current selection\'s tail', function () {
|
|
it('selects to the beginning of the clicked row', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(1), {
|
|
shiftKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 0], [3, 4]])
|
|
})
|
|
})
|
|
|
|
describe('when the clicked row is after the current selection\'s tail', function () {
|
|
it('selects to the beginning of the row following the clicked row', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(6), {
|
|
shiftKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[3, 4], [7, 0]])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is clicked and dragged', function () {
|
|
describe('when dragging downward', function () {
|
|
it('selects the rows between the start and end of the drag', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(2)))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(6)))
|
|
runAnimationFrames()
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(6)))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 0], [7, 0]])
|
|
})
|
|
})
|
|
|
|
describe('when dragging upward', function () {
|
|
it('selects the rows between the start and end of the drag', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(6)))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(2)))
|
|
runAnimationFrames()
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(2)))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 0], [7, 0]])
|
|
})
|
|
})
|
|
|
|
it('orients the selection appropriately when the mouse moves above or below the initially-clicked row', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(4)))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(2)))
|
|
runAnimationFrames()
|
|
expect(editor.getLastSelection().isReversed()).toBe(true)
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(6)))
|
|
runAnimationFrames()
|
|
expect(editor.getLastSelection().isReversed()).toBe(false)
|
|
})
|
|
|
|
it('autoscrolls when the cursor approaches the top or bottom of the editor', function () {
|
|
wrapperNode.style.height = 6 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(2)))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(8)))
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBeGreaterThan(0)
|
|
let maxScrollTop = wrapperNode.getScrollTop()
|
|
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(10)))
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(maxScrollTop)
|
|
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(7)))
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBeLessThan(maxScrollTop)
|
|
})
|
|
|
|
it('stops selecting if a textInput event occurs during the drag', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(2)))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(6)))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 0], [7, 0]])
|
|
|
|
let inputEvent = new Event('textInput')
|
|
inputEvent.data = 'x'
|
|
Object.defineProperty(inputEvent, 'target', {
|
|
get: function () {
|
|
return componentNode.querySelector('.hidden-input')
|
|
}
|
|
})
|
|
componentNode.dispatchEvent(inputEvent)
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 1], [2, 1]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(12)))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 1], [2, 1]])
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is meta-clicked and dragged', function () {
|
|
beforeEach(function () {
|
|
editor.setSelectedScreenRange([[3, 0], [3, 2]])
|
|
})
|
|
|
|
describe('when dragging downward', function () {
|
|
it('selects the rows between the start and end of the drag', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(4), {
|
|
metaKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(6), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(6), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[3, 0], [3, 2]], [[4, 0], [7, 0]]])
|
|
})
|
|
|
|
it('merges overlapping selections when the mouse button is released', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(2), {
|
|
metaKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(6), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[3, 0], [3, 2]], [[2, 0], [7, 0]]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(6), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[2, 0], [7, 0]]])
|
|
})
|
|
})
|
|
|
|
describe('when dragging upward', function () {
|
|
it('selects the rows between the start and end of the drag', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(6), {
|
|
metaKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(4), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(4), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[3, 0], [3, 2]], [[4, 0], [7, 0]]])
|
|
})
|
|
|
|
it('merges overlapping selections', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(6), {
|
|
metaKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(2), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(2), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[2, 0], [7, 0]]])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is shift-clicked and dragged', function () {
|
|
describe('when the shift-click is below the existing selection\'s tail', function () {
|
|
describe('when dragging downward', function () {
|
|
it('selects the rows between the existing selection\'s tail and the end of the drag', function () {
|
|
editor.setSelectedScreenRange([[3, 4], [4, 5]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(7), {
|
|
shiftKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(8)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[3, 4], [9, 0]])
|
|
})
|
|
})
|
|
|
|
describe('when dragging upward', function () {
|
|
it('selects the rows between the end of the drag and the tail of the existing selection', function () {
|
|
editor.setSelectedScreenRange([[4, 4], [5, 5]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(7), {
|
|
shiftKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(5)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[4, 4], [6, 0]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(1)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 0], [4, 4]])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the shift-click is above the existing selection\'s tail', function () {
|
|
describe('when dragging upward', function () {
|
|
it('selects the rows between the end of the drag and the tail of the existing selection', function () {
|
|
editor.setSelectedScreenRange([[4, 4], [5, 5]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(2), {
|
|
shiftKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(1)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 0], [4, 4]])
|
|
})
|
|
})
|
|
|
|
describe('when dragging downward', function () {
|
|
it('selects the rows between the existing selection\'s tail and the end of the drag', function () {
|
|
editor.setSelectedScreenRange([[3, 4], [4, 5]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(1), {
|
|
shiftKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(2)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[2, 0], [3, 4]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(8)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[3, 4], [9, 0]])
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when soft wrap is enabled', function () {
|
|
beforeEach(function () {
|
|
gutterNode = componentNode.querySelector('.gutter')
|
|
editor.setSoftWrapped(true)
|
|
runAnimationFrames()
|
|
componentNode.style.width = 21 * charWidth + wrapperNode.getVerticalScrollbarWidth() + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
})
|
|
|
|
describe('when the gutter is clicked', function () {
|
|
it('selects the clicked buffer row', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(1)))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[0, 0], [2, 0]])
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is meta-clicked', function () {
|
|
it('creates a new selection for the clicked buffer row', function () {
|
|
editor.setSelectedScreenRange([[1, 0], [1, 2]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(2), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[1, 0], [1, 2]], [[2, 0], [5, 0]]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(7), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[1, 0], [1, 2]], [[2, 0], [5, 0]], [[5, 0], [10, 0]]])
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is shift-clicked', function () {
|
|
beforeEach(function () {
|
|
return editor.setSelectedScreenRange([[7, 4], [7, 6]])
|
|
})
|
|
|
|
describe('when the clicked row is before the current selection\'s tail', function () {
|
|
it('selects to the beginning of the clicked buffer row', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(1), {
|
|
shiftKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[0, 0], [7, 4]])
|
|
})
|
|
})
|
|
|
|
describe('when the clicked row is after the current selection\'s tail', function () {
|
|
it('selects to the beginning of the screen row following the clicked buffer row', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(11), {
|
|
shiftKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[7, 4], [17, 0]])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is clicked and dragged', function () {
|
|
describe('when dragging downward', function () {
|
|
it('selects the buffer row containing the click, then screen rows until the end of the drag', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(1)))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(6)))
|
|
runAnimationFrames()
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(6)))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[0, 0], [6, 14]])
|
|
})
|
|
})
|
|
|
|
describe('when dragging upward', function () {
|
|
it('selects the buffer row containing the click, then screen rows until the end of the drag', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(6)))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(1)))
|
|
runAnimationFrames()
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(1)))
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 0], [10, 0]])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is meta-clicked and dragged', function () {
|
|
beforeEach(function () {
|
|
editor.setSelectedScreenRange([[7, 4], [7, 6]])
|
|
})
|
|
|
|
describe('when dragging downward', function () {
|
|
it('adds a selection from the buffer row containing the click to the screen row containing the end of the drag', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(1), {
|
|
metaKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(3), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(3), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[7, 4], [7, 6]], [[0, 0], [3, 14]]])
|
|
})
|
|
|
|
it('merges overlapping selections on mouseup', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(1), {
|
|
metaKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(7), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(7), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[0, 0], [7, 12]]])
|
|
})
|
|
})
|
|
|
|
describe('when dragging upward', function () {
|
|
it('adds a selection from the buffer row containing the click to the screen row containing the end of the drag', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(17), {
|
|
metaKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(11), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(11), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[7, 4], [7, 6]], [[11, 4], [20, 0]]])
|
|
})
|
|
|
|
it('merges overlapping selections on mouseup', function () {
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(17), {
|
|
metaKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(5), {
|
|
metaKey: true
|
|
}))
|
|
runAnimationFrames()
|
|
gutterNode.dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenRowInGutter(5), {
|
|
metaKey: true
|
|
}))
|
|
expect(editor.getSelectedScreenRanges()).toEqual([[[5, 0], [20, 0]]])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the gutter is shift-clicked and dragged', function () {
|
|
describe('when the shift-click is below the existing selection\'s tail', function () {
|
|
describe('when dragging downward', function () {
|
|
it('selects the screen rows between the existing selection\'s tail and the end of the drag', function () {
|
|
editor.setSelectedScreenRange([[1, 4], [1, 7]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(7), {
|
|
shiftKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(11)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 4], [11, 5]])
|
|
})
|
|
})
|
|
|
|
describe('when dragging upward', function () {
|
|
it('selects the screen rows between the end of the drag and the tail of the existing selection', function () {
|
|
editor.setSelectedScreenRange([[1, 4], [1, 7]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(11), {
|
|
shiftKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(7)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 4], [7, 12]])
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the shift-click is above the existing selection\'s tail', function () {
|
|
describe('when dragging upward', function () {
|
|
it('selects the screen rows between the end of the drag and the tail of the existing selection', function () {
|
|
editor.setSelectedScreenRange([[7, 4], [7, 6]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(3), {
|
|
shiftKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(1)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[1, 0], [7, 4]])
|
|
})
|
|
})
|
|
|
|
describe('when dragging downward', function () {
|
|
it('selects the screen rows between the existing selection\'s tail and the end of the drag', function () {
|
|
editor.setSelectedScreenRange([[7, 4], [7, 6]])
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenRowInGutter(1), {
|
|
shiftKey: true
|
|
}))
|
|
gutterNode.dispatchEvent(buildMouseEvent('mousemove', clientCoordinatesForScreenRowInGutter(3)))
|
|
runAnimationFrames()
|
|
expect(editor.getSelectedScreenRange()).toEqual([[3, 2], [7, 4]])
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('focus handling', function () {
|
|
let inputNode
|
|
beforeEach(function () {
|
|
inputNode = componentNode.querySelector('.hidden-input')
|
|
})
|
|
|
|
it('transfers focus to the hidden input', function () {
|
|
expect(document.activeElement).toBe(document.body)
|
|
wrapperNode.focus()
|
|
expect(document.activeElement).toBe(wrapperNode)
|
|
expect(wrapperNode.shadowRoot.activeElement).toBe(inputNode)
|
|
})
|
|
|
|
it('adds the "is-focused" class to the editor when the hidden input is focused', function () {
|
|
expect(document.activeElement).toBe(document.body)
|
|
inputNode.focus()
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.classList.contains('is-focused')).toBe(true)
|
|
expect(wrapperNode.classList.contains('is-focused')).toBe(true)
|
|
inputNode.blur()
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.classList.contains('is-focused')).toBe(false)
|
|
expect(wrapperNode.classList.contains('is-focused')).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('selection handling', function () {
|
|
let cursor
|
|
|
|
beforeEach(function () {
|
|
editor.setCursorScreenPosition([0, 0])
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('adds the "has-selection" class to the editor when there is a selection', function () {
|
|
expect(componentNode.classList.contains('has-selection')).toBe(false)
|
|
editor.selectDown()
|
|
runAnimationFrames()
|
|
expect(componentNode.classList.contains('has-selection')).toBe(true)
|
|
editor.moveDown()
|
|
runAnimationFrames()
|
|
expect(componentNode.classList.contains('has-selection')).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('scrolling', function () {
|
|
it('updates the vertical scrollbar when the scrollTop is changed in the model', function () {
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
expect(verticalScrollbarNode.scrollTop).toBe(0)
|
|
wrapperNode.setScrollTop(10)
|
|
runAnimationFrames()
|
|
expect(verticalScrollbarNode.scrollTop).toBe(10)
|
|
})
|
|
|
|
it('updates the horizontal scrollbar and the x transform of the lines based on the scrollLeft of the model', function () {
|
|
componentNode.style.width = 30 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let top = 0
|
|
let tilesNodes = component.tileNodesForLines()
|
|
for (let tileNode of tilesNodes) {
|
|
expect(tileNode.style['-webkit-transform']).toBe('translate3d(0px, ' + top + 'px, 0px)')
|
|
top += tileNode.offsetHeight
|
|
}
|
|
expect(horizontalScrollbarNode.scrollLeft).toBe(0)
|
|
wrapperNode.setScrollLeft(100)
|
|
|
|
runAnimationFrames()
|
|
|
|
top = 0
|
|
for (let tileNode of tilesNodes) {
|
|
expect(tileNode.style['-webkit-transform']).toBe('translate3d(-100px, ' + top + 'px, 0px)')
|
|
top += tileNode.offsetHeight
|
|
}
|
|
expect(horizontalScrollbarNode.scrollLeft).toBe(100)
|
|
})
|
|
|
|
it('updates the scrollLeft of the model when the scrollLeft of the horizontal scrollbar changes', function () {
|
|
componentNode.style.width = 30 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
expect(wrapperNode.getScrollLeft()).toBe(0)
|
|
horizontalScrollbarNode.scrollLeft = 100
|
|
horizontalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
|
|
runAnimationFrames(true)
|
|
expect(wrapperNode.getScrollLeft()).toBe(100)
|
|
})
|
|
|
|
it('does not obscure the last line with the horizontal scrollbar', function () {
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
wrapperNode.setScrollBottom(wrapperNode.getScrollHeight())
|
|
runAnimationFrames()
|
|
|
|
let lastLineNode = component.lineNodeForScreenRow(editor.getLastScreenRow())
|
|
let bottomOfLastLine = lastLineNode.getBoundingClientRect().bottom
|
|
topOfHorizontalScrollbar = horizontalScrollbarNode.getBoundingClientRect().top
|
|
expect(bottomOfLastLine).toBe(topOfHorizontalScrollbar)
|
|
wrapperNode.style.width = 100 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
bottomOfLastLine = lastLineNode.getBoundingClientRect().bottom
|
|
let bottomOfEditor = componentNode.getBoundingClientRect().bottom
|
|
expect(bottomOfLastLine).toBe(bottomOfEditor)
|
|
})
|
|
|
|
it('does not obscure the last character of the longest line with the vertical scrollbar', function () {
|
|
wrapperNode.style.height = 7 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
wrapperNode.setScrollLeft(Infinity)
|
|
|
|
runAnimationFrames()
|
|
let rightOfLongestLine = component.lineNodeForScreenRow(6).querySelector('.line > span:last-child').getBoundingClientRect().right
|
|
let leftOfVerticalScrollbar = verticalScrollbarNode.getBoundingClientRect().left
|
|
expect(Math.round(rightOfLongestLine)).toBeCloseTo(leftOfVerticalScrollbar - 1, 0)
|
|
})
|
|
|
|
it('only displays dummy scrollbars when scrollable in that direction', function () {
|
|
expect(verticalScrollbarNode.style.display).toBe('none')
|
|
expect(horizontalScrollbarNode.style.display).toBe('none')
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = '1000px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(verticalScrollbarNode.style.display).toBe('')
|
|
expect(horizontalScrollbarNode.style.display).toBe('none')
|
|
componentNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(verticalScrollbarNode.style.display).toBe('')
|
|
expect(horizontalScrollbarNode.style.display).toBe('')
|
|
wrapperNode.style.height = 20 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(verticalScrollbarNode.style.display).toBe('none')
|
|
expect(horizontalScrollbarNode.style.display).toBe('')
|
|
})
|
|
|
|
it('makes the dummy scrollbar divs only as tall/wide as the actual scrollbars', function () {
|
|
wrapperNode.style.height = 4 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
atom.styles.addStyleSheet('::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}', {
|
|
context: 'atom-text-editor'
|
|
})
|
|
|
|
runAnimationFrames()
|
|
runAnimationFrames()
|
|
|
|
let scrollbarCornerNode = componentNode.querySelector('.scrollbar-corner')
|
|
expect(verticalScrollbarNode.offsetWidth).toBe(8)
|
|
expect(horizontalScrollbarNode.offsetHeight).toBe(8)
|
|
expect(scrollbarCornerNode.offsetWidth).toBe(8)
|
|
expect(scrollbarCornerNode.offsetHeight).toBe(8)
|
|
atom.themes.removeStylesheet('test')
|
|
})
|
|
|
|
it('assigns the bottom/right of the scrollbars to the width of the opposite scrollbar if it is visible', function () {
|
|
let scrollbarCornerNode = componentNode.querySelector('.scrollbar-corner')
|
|
expect(verticalScrollbarNode.style.bottom).toBe('0px')
|
|
expect(horizontalScrollbarNode.style.right).toBe('0px')
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = '1000px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(verticalScrollbarNode.style.bottom).toBe('0px')
|
|
expect(horizontalScrollbarNode.style.right).toBe(verticalScrollbarNode.offsetWidth + 'px')
|
|
expect(scrollbarCornerNode.style.display).toBe('none')
|
|
componentNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(verticalScrollbarNode.style.bottom).toBe(horizontalScrollbarNode.offsetHeight + 'px')
|
|
expect(horizontalScrollbarNode.style.right).toBe(verticalScrollbarNode.offsetWidth + 'px')
|
|
expect(scrollbarCornerNode.style.display).toBe('')
|
|
wrapperNode.style.height = 20 * lineHeightInPixels + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(verticalScrollbarNode.style.bottom).toBe(horizontalScrollbarNode.offsetHeight + 'px')
|
|
expect(horizontalScrollbarNode.style.right).toBe('0px')
|
|
expect(scrollbarCornerNode.style.display).toBe('none')
|
|
})
|
|
|
|
it('accounts for the width of the gutter in the scrollWidth of the horizontal scrollbar', function () {
|
|
let gutterNode = componentNode.querySelector('.gutter')
|
|
componentNode.style.width = 10 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
expect(horizontalScrollbarNode.scrollWidth).toBe(wrapperNode.getScrollWidth())
|
|
expect(horizontalScrollbarNode.style.left).toBe('0px')
|
|
})
|
|
})
|
|
|
|
describe('mousewheel events', function () {
|
|
beforeEach(function () {
|
|
editor.update({scrollSensitivity: 100})
|
|
})
|
|
|
|
describe('updating scrollTop and scrollLeft', function () {
|
|
beforeEach(function () {
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 20 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('updates the scrollLeft or scrollTop on mousewheel events depending on which delta is greater (x or y)', function () {
|
|
expect(verticalScrollbarNode.scrollTop).toBe(0)
|
|
expect(horizontalScrollbarNode.scrollLeft).toBe(0)
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: -5,
|
|
wheelDeltaY: -10
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(verticalScrollbarNode.scrollTop).toBe(10)
|
|
expect(horizontalScrollbarNode.scrollLeft).toBe(0)
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: -15,
|
|
wheelDeltaY: -5
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(verticalScrollbarNode.scrollTop).toBe(10)
|
|
expect(horizontalScrollbarNode.scrollLeft).toBe(15)
|
|
})
|
|
|
|
it('updates the scrollLeft or scrollTop according to the scroll sensitivity', function () {
|
|
editor.update({scrollSensitivity: 50})
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: -5,
|
|
wheelDeltaY: -10
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(horizontalScrollbarNode.scrollLeft).toBe(0)
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: -15,
|
|
wheelDeltaY: -5
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(verticalScrollbarNode.scrollTop).toBe(5)
|
|
expect(horizontalScrollbarNode.scrollLeft).toBe(7)
|
|
})
|
|
})
|
|
|
|
describe('when the mousewheel event\'s target is a line', function () {
|
|
it('keeps the line on the DOM if it is scrolled off-screen', function () {
|
|
component.presenter.stoppedScrollingDelay = 3000 // account for slower build machines
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 20 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let lineNode = componentNode.querySelector('.line')
|
|
let wheelEvent = new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: -500
|
|
})
|
|
Object.defineProperty(wheelEvent, 'target', {
|
|
get: function () {
|
|
return lineNode
|
|
}
|
|
})
|
|
componentNode.dispatchEvent(wheelEvent)
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.contains(lineNode)).toBe(true)
|
|
})
|
|
|
|
it('does not set the mouseWheelScreenRow if scrolling horizontally', function () {
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 20 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let lineNode = componentNode.querySelector('.line')
|
|
let wheelEvent = new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 10,
|
|
wheelDeltaY: 0
|
|
})
|
|
Object.defineProperty(wheelEvent, 'target', {
|
|
get: function () {
|
|
return lineNode
|
|
}
|
|
})
|
|
componentNode.dispatchEvent(wheelEvent)
|
|
runAnimationFrames()
|
|
|
|
expect(component.presenter.mouseWheelScreenRow).toBe(null)
|
|
})
|
|
|
|
it('clears the mouseWheelScreenRow after a delay even if the event does not cause scrolling', async function () {
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
let lineNode = componentNode.querySelector('.line')
|
|
let wheelEvent = new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: 10
|
|
})
|
|
Object.defineProperty(wheelEvent, 'target', {
|
|
get: function () {
|
|
return lineNode
|
|
}
|
|
})
|
|
componentNode.dispatchEvent(wheelEvent)
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
expect(component.presenter.mouseWheelScreenRow).toBe(0)
|
|
|
|
advanceClock(component.presenter.stoppedScrollingDelay)
|
|
expect(component.presenter.mouseWheelScreenRow).toBeNull()
|
|
})
|
|
|
|
it('does not preserve the line if it is on screen', function () {
|
|
let lineNode, lineNodes, wheelEvent
|
|
expect(componentNode.querySelectorAll('.line-number').length).toBe(14)
|
|
lineNodes = componentNode.querySelectorAll('.line')
|
|
expect(lineNodes.length).toBe(13)
|
|
lineNode = lineNodes[0]
|
|
wheelEvent = new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: 100
|
|
})
|
|
Object.defineProperty(wheelEvent, 'target', {
|
|
get: function () {
|
|
return lineNode
|
|
}
|
|
})
|
|
componentNode.dispatchEvent(wheelEvent)
|
|
expect(component.presenter.mouseWheelScreenRow).toBe(0)
|
|
editor.insertText('hello')
|
|
expect(componentNode.querySelectorAll('.line-number').length).toBe(14)
|
|
expect(componentNode.querySelectorAll('.line').length).toBe(13)
|
|
})
|
|
})
|
|
|
|
describe('when the mousewheel event\'s target is a line number', function () {
|
|
it('keeps the line number on the DOM if it is scrolled off-screen', function () {
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 20 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let lineNumberNode = componentNode.querySelectorAll('.line-number')[1]
|
|
let wheelEvent = new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: -500
|
|
})
|
|
Object.defineProperty(wheelEvent, 'target', {
|
|
get: function () {
|
|
return lineNumberNode
|
|
}
|
|
})
|
|
componentNode.dispatchEvent(wheelEvent)
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.contains(lineNumberNode)).toBe(true)
|
|
})
|
|
})
|
|
|
|
describe('when the mousewheel event\'s target is a block decoration', function () {
|
|
it('keeps it on the DOM if it is scrolled off-screen', function () {
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 20 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
let item = document.createElement("div")
|
|
item.style.width = "30px"
|
|
item.style.height = "30px"
|
|
item.className = "decoration-1"
|
|
editor.decorateMarker(
|
|
editor.markScreenPosition([0, 0], {invalidate: "never"}),
|
|
{type: "block", item: item}
|
|
)
|
|
|
|
runAnimationFrames()
|
|
|
|
let wheelEvent = new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: -500
|
|
})
|
|
Object.defineProperty(wheelEvent, 'target', {
|
|
get: function () {
|
|
return item
|
|
}
|
|
})
|
|
componentNode.dispatchEvent(wheelEvent)
|
|
runAnimationFrames()
|
|
|
|
expect(component.getTopmostDOMNode().contains(item)).toBe(true)
|
|
})
|
|
})
|
|
|
|
it('only prevents the default action of the mousewheel event if it actually lead to scrolling', function () {
|
|
spyOn(WheelEvent.prototype, 'preventDefault').andCallThrough()
|
|
wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
|
|
wrapperNode.style.width = 20 * charWidth + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: 50
|
|
}))
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
expect(WheelEvent.prototype.preventDefault).not.toHaveBeenCalled()
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: -3000
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
let maxScrollTop = wrapperNode.getScrollTop()
|
|
expect(WheelEvent.prototype.preventDefault).toHaveBeenCalled()
|
|
WheelEvent.prototype.preventDefault.reset()
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 0,
|
|
wheelDeltaY: -30
|
|
}))
|
|
expect(wrapperNode.getScrollTop()).toBe(maxScrollTop)
|
|
expect(WheelEvent.prototype.preventDefault).not.toHaveBeenCalled()
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: 50,
|
|
wheelDeltaY: 0
|
|
}))
|
|
expect(wrapperNode.getScrollLeft()).toBe(0)
|
|
expect(WheelEvent.prototype.preventDefault).not.toHaveBeenCalled()
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: -3000,
|
|
wheelDeltaY: 0
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
let maxScrollLeft = wrapperNode.getScrollLeft()
|
|
expect(WheelEvent.prototype.preventDefault).toHaveBeenCalled()
|
|
WheelEvent.prototype.preventDefault.reset()
|
|
componentNode.dispatchEvent(new WheelEvent('mousewheel', {
|
|
wheelDeltaX: -30,
|
|
wheelDeltaY: 0
|
|
}))
|
|
expect(wrapperNode.getScrollLeft()).toBe(maxScrollLeft)
|
|
expect(WheelEvent.prototype.preventDefault).not.toHaveBeenCalled()
|
|
})
|
|
})
|
|
|
|
describe('input events', function () {
|
|
function buildTextInputEvent ({data, target}) {
|
|
let event = new Event('textInput')
|
|
event.data = data
|
|
Object.defineProperty(event, 'target', {
|
|
get: function () {
|
|
return target
|
|
}
|
|
})
|
|
return event
|
|
}
|
|
|
|
function buildKeydownEvent ({keyCode, target}) {
|
|
let event = new KeyboardEvent('keydown')
|
|
Object.defineProperty(event, 'keyCode', {
|
|
get: function () {
|
|
return keyCode
|
|
}
|
|
})
|
|
Object.defineProperty(event, 'target', {
|
|
get: function () {
|
|
return target
|
|
}
|
|
})
|
|
return event
|
|
}
|
|
|
|
let inputNode
|
|
|
|
beforeEach(function () {
|
|
inputNode = componentNode.querySelector('.hidden-input')
|
|
})
|
|
|
|
it('inserts the newest character in the input\'s value into the buffer', function () {
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: 'x',
|
|
target: inputNode
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.lineTextForBufferRow(0)).toBe('xvar quicksort = function () {')
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: 'y',
|
|
target: inputNode
|
|
}))
|
|
|
|
expect(editor.lineTextForBufferRow(0)).toBe('xyvar quicksort = function () {')
|
|
})
|
|
|
|
it('replaces the last character if a keypress event is bracketed by keydown events with matching keyCodes, which occurs when the accented character menu is shown', function () {
|
|
componentNode.dispatchEvent(buildKeydownEvent({keyCode: 85, target: inputNode}))
|
|
componentNode.dispatchEvent(buildTextInputEvent({data: 'u', target: inputNode}))
|
|
componentNode.dispatchEvent(new KeyboardEvent('keypress'))
|
|
componentNode.dispatchEvent(buildKeydownEvent({keyCode: 85, target: inputNode}))
|
|
componentNode.dispatchEvent(new KeyboardEvent('keyup'))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.lineTextForBufferRow(0)).toBe('uvar quicksort = function () {')
|
|
inputNode.setSelectionRange(0, 1)
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: 'ü',
|
|
target: inputNode
|
|
}))
|
|
runAnimationFrames()
|
|
|
|
expect(editor.lineTextForBufferRow(0)).toBe('üvar quicksort = function () {')
|
|
})
|
|
|
|
it('does not handle input events when input is disabled', function () {
|
|
component.setInputEnabled(false)
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: 'x',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('var quicksort = function () {')
|
|
runAnimationFrames()
|
|
expect(editor.lineTextForBufferRow(0)).toBe('var quicksort = function () {')
|
|
})
|
|
|
|
it('groups events that occur close together in time into single undo entries', function () {
|
|
let currentTime = 0
|
|
spyOn(Date, 'now').andCallFake(function () {
|
|
return currentTime
|
|
})
|
|
editor.update({undoGroupingInterval: 100})
|
|
editor.setText('')
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: 'x',
|
|
target: inputNode
|
|
}))
|
|
currentTime += 99
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: 'y',
|
|
target: inputNode
|
|
}))
|
|
currentTime += 99
|
|
componentNode.dispatchEvent(new CustomEvent('editor:duplicate-lines', {
|
|
bubbles: true,
|
|
cancelable: true
|
|
}))
|
|
currentTime += 101
|
|
componentNode.dispatchEvent(new CustomEvent('editor:duplicate-lines', {
|
|
bubbles: true,
|
|
cancelable: true
|
|
}))
|
|
expect(editor.getText()).toBe('xy\nxy\nxy')
|
|
componentNode.dispatchEvent(new CustomEvent('core:undo', {
|
|
bubbles: true,
|
|
cancelable: true
|
|
}))
|
|
expect(editor.getText()).toBe('xy\nxy')
|
|
componentNode.dispatchEvent(new CustomEvent('core:undo', {
|
|
bubbles: true,
|
|
cancelable: true
|
|
}))
|
|
expect(editor.getText()).toBe('')
|
|
})
|
|
|
|
describe('when IME composition is used to insert international characters', function () {
|
|
function buildIMECompositionEvent (event, {data, target} = {}) {
|
|
event = new Event(event)
|
|
event.data = data
|
|
Object.defineProperty(event, 'target', {
|
|
get: function () {
|
|
return target
|
|
}
|
|
})
|
|
return event
|
|
}
|
|
|
|
let inputNode
|
|
|
|
beforeEach(function () {
|
|
inputNode = componentNode.querySelector('.hidden-input')
|
|
})
|
|
|
|
describe('when nothing is selected', function () {
|
|
it('inserts the chosen completion', function () {
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionstart', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: 's',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('svar quicksort = function () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: 'sd',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('sdvar quicksort = function () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionend', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: '速度',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('速度var quicksort = function () {')
|
|
})
|
|
|
|
it('reverts back to the original text when the completion helper is dismissed', function () {
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionstart', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: 's',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('svar quicksort = function () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: 'sd',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('sdvar quicksort = function () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionend', {
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('var quicksort = function () {')
|
|
})
|
|
|
|
it('allows multiple accented character to be inserted with the \' on a US international layout', function () {
|
|
inputNode.value = '\''
|
|
inputNode.setSelectionRange(0, 1)
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionstart', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: '\'',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('\'var quicksort = function () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionend', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: 'á',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('ávar quicksort = function () {')
|
|
inputNode.value = '\''
|
|
inputNode.setSelectionRange(0, 1)
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionstart', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: '\'',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('á\'var quicksort = function () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionend', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: 'á',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('áávar quicksort = function () {')
|
|
})
|
|
})
|
|
|
|
describe('when a string is selected', function () {
|
|
beforeEach(function () {
|
|
editor.setSelectedBufferRanges([[[0, 4], [0, 9]], [[0, 16], [0, 19]]])
|
|
})
|
|
|
|
it('inserts the chosen completion', function () {
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionstart', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: 's',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('var ssort = sction () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: 'sd',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('var sdsort = sdction () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionend', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildTextInputEvent({
|
|
data: '速度',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('var 速度sort = 速度ction () {')
|
|
})
|
|
|
|
it('reverts back to the original text when the completion helper is dismissed', function () {
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionstart', {
|
|
target: inputNode
|
|
}))
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: 's',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('var ssort = sction () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionupdate', {
|
|
data: 'sd',
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('var sdsort = sdction () {')
|
|
componentNode.dispatchEvent(buildIMECompositionEvent('compositionend', {
|
|
target: inputNode
|
|
}))
|
|
expect(editor.lineTextForBufferRow(0)).toBe('var quicksort = function () {')
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('commands', function () {
|
|
describe('editor:consolidate-selections', function () {
|
|
it('consolidates selections on the editor model, aborting the key binding if there is only one selection', function () {
|
|
spyOn(editor, 'consolidateSelections').andCallThrough()
|
|
let event = new CustomEvent('editor:consolidate-selections', {
|
|
bubbles: true,
|
|
cancelable: true
|
|
})
|
|
event.abortKeyBinding = jasmine.createSpy('event.abortKeyBinding')
|
|
componentNode.dispatchEvent(event)
|
|
expect(editor.consolidateSelections).toHaveBeenCalled()
|
|
expect(event.abortKeyBinding).toHaveBeenCalled()
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when decreasing the fontSize', function () {
|
|
it('decreases the widths of the korean char, the double width char and the half width char', function () {
|
|
originalDefaultCharWidth = editor.getDefaultCharWidth()
|
|
koreanDefaultCharWidth = editor.getKoreanCharWidth()
|
|
doubleWidthDefaultCharWidth = editor.getDoubleWidthCharWidth()
|
|
halfWidthDefaultCharWidth = editor.getHalfWidthCharWidth()
|
|
component.setFontSize(10)
|
|
runAnimationFrames()
|
|
expect(editor.getDefaultCharWidth()).toBeLessThan(originalDefaultCharWidth)
|
|
expect(editor.getKoreanCharWidth()).toBeLessThan(koreanDefaultCharWidth)
|
|
expect(editor.getDoubleWidthCharWidth()).toBeLessThan(doubleWidthDefaultCharWidth)
|
|
expect(editor.getHalfWidthCharWidth()).toBeLessThan(halfWidthDefaultCharWidth)
|
|
})
|
|
})
|
|
|
|
describe('when increasing the fontSize', function() {
|
|
it('increases the widths of the korean char, the double width char and the half width char', function () {
|
|
originalDefaultCharWidth = editor.getDefaultCharWidth()
|
|
koreanDefaultCharWidth = editor.getKoreanCharWidth()
|
|
doubleWidthDefaultCharWidth = editor.getDoubleWidthCharWidth()
|
|
halfWidthDefaultCharWidth = editor.getHalfWidthCharWidth()
|
|
component.setFontSize(25)
|
|
runAnimationFrames()
|
|
expect(editor.getDefaultCharWidth()).toBeGreaterThan(originalDefaultCharWidth)
|
|
expect(editor.getKoreanCharWidth()).toBeGreaterThan(koreanDefaultCharWidth)
|
|
expect(editor.getDoubleWidthCharWidth()).toBeGreaterThan(doubleWidthDefaultCharWidth)
|
|
expect(editor.getHalfWidthCharWidth()).toBeGreaterThan(halfWidthDefaultCharWidth)
|
|
})
|
|
})
|
|
|
|
describe('hiding and showing the editor', function () {
|
|
describe('when the editor is hidden when it is mounted', function () {
|
|
it('defers measurement and rendering until the editor becomes visible', function () {
|
|
wrapperNode.remove()
|
|
let hiddenParent = document.createElement('div')
|
|
hiddenParent.style.display = 'none'
|
|
contentNode.appendChild(hiddenParent)
|
|
wrapperNode = new TextEditorElement()
|
|
wrapperNode.tileSize = TILE_SIZE
|
|
wrapperNode.initialize(editor, atom)
|
|
hiddenParent.appendChild(wrapperNode)
|
|
component = wrapperNode.component
|
|
componentNode = component.getDomNode()
|
|
expect(componentNode.querySelectorAll('.line').length).toBe(0)
|
|
hiddenParent.style.display = 'block'
|
|
atom.views.performDocumentPoll()
|
|
expect(componentNode.querySelectorAll('.line').length).toBeGreaterThan(0)
|
|
})
|
|
})
|
|
|
|
describe('when the lineHeight changes while the editor is hidden', function () {
|
|
it('does not attempt to measure the lineHeightInPixels until the editor becomes visible again', function () {
|
|
wrapperNode.style.display = 'none'
|
|
component.checkForVisibilityChange()
|
|
let initialLineHeightInPixels = editor.getLineHeightInPixels()
|
|
component.setLineHeight(2)
|
|
expect(editor.getLineHeightInPixels()).toBe(initialLineHeightInPixels)
|
|
wrapperNode.style.display = ''
|
|
component.checkForVisibilityChange()
|
|
expect(editor.getLineHeightInPixels()).not.toBe(initialLineHeightInPixels)
|
|
})
|
|
})
|
|
|
|
describe('when the fontSize changes while the editor is hidden', function () {
|
|
it('does not attempt to measure the lineHeightInPixels or defaultCharWidth until the editor becomes visible again', function () {
|
|
wrapperNode.style.display = 'none'
|
|
component.checkForVisibilityChange()
|
|
let initialLineHeightInPixels = editor.getLineHeightInPixels()
|
|
let initialCharWidth = editor.getDefaultCharWidth()
|
|
component.setFontSize(22)
|
|
expect(editor.getLineHeightInPixels()).toBe(initialLineHeightInPixels)
|
|
expect(editor.getDefaultCharWidth()).toBe(initialCharWidth)
|
|
wrapperNode.style.display = ''
|
|
component.checkForVisibilityChange()
|
|
expect(editor.getLineHeightInPixels()).not.toBe(initialLineHeightInPixels)
|
|
expect(editor.getDefaultCharWidth()).not.toBe(initialCharWidth)
|
|
})
|
|
|
|
it('does not re-measure character widths until the editor is shown again', function () {
|
|
wrapperNode.style.display = 'none'
|
|
component.checkForVisibilityChange()
|
|
component.setFontSize(22)
|
|
editor.getBuffer().insert([0, 0], 'a')
|
|
wrapperNode.style.display = ''
|
|
component.checkForVisibilityChange()
|
|
editor.setCursorBufferPosition([0, Infinity])
|
|
runAnimationFrames()
|
|
let cursorLeft = componentNode.querySelector('.cursor').getBoundingClientRect().left
|
|
let line0Right = componentNode.querySelector('.line > span:last-child').getBoundingClientRect().right
|
|
expect(cursorLeft).toBeCloseTo(line0Right, 0)
|
|
})
|
|
})
|
|
|
|
describe('when the fontFamily changes while the editor is hidden', function () {
|
|
it('does not attempt to measure the defaultCharWidth until the editor becomes visible again', function () {
|
|
wrapperNode.style.display = 'none'
|
|
component.checkForVisibilityChange()
|
|
let initialLineHeightInPixels = editor.getLineHeightInPixels()
|
|
let initialCharWidth = editor.getDefaultCharWidth()
|
|
component.setFontFamily('serif')
|
|
expect(editor.getDefaultCharWidth()).toBe(initialCharWidth)
|
|
wrapperNode.style.display = ''
|
|
component.checkForVisibilityChange()
|
|
expect(editor.getDefaultCharWidth()).not.toBe(initialCharWidth)
|
|
})
|
|
|
|
it('does not re-measure character widths until the editor is shown again', function () {
|
|
wrapperNode.style.display = 'none'
|
|
component.checkForVisibilityChange()
|
|
component.setFontFamily('serif')
|
|
wrapperNode.style.display = ''
|
|
component.checkForVisibilityChange()
|
|
editor.setCursorBufferPosition([0, Infinity])
|
|
runAnimationFrames()
|
|
let cursorLeft = componentNode.querySelector('.cursor').getBoundingClientRect().left
|
|
let line0Right = componentNode.querySelector('.line > span:last-child').getBoundingClientRect().right
|
|
expect(cursorLeft).toBeCloseTo(line0Right, 0)
|
|
})
|
|
})
|
|
|
|
describe('when stylesheets change while the editor is hidden', function () {
|
|
afterEach(function () {
|
|
atom.themes.removeStylesheet('test')
|
|
})
|
|
|
|
it('does not re-measure character widths until the editor is shown again', function () {
|
|
atom.config.set('editor.fontFamily', 'sans-serif')
|
|
wrapperNode.style.display = 'none'
|
|
component.checkForVisibilityChange()
|
|
atom.themes.applyStylesheet('test', '.function.js {\n font-weight: bold;\n}')
|
|
wrapperNode.style.display = ''
|
|
component.checkForVisibilityChange()
|
|
editor.setCursorBufferPosition([0, Infinity])
|
|
runAnimationFrames()
|
|
let cursorLeft = componentNode.querySelector('.cursor').getBoundingClientRect().left
|
|
let line0Right = componentNode.querySelector('.line > span:last-child').getBoundingClientRect().right
|
|
expect(cursorLeft).toBeCloseTo(line0Right, 0)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('soft wrapping', function () {
|
|
beforeEach(function () {
|
|
editor.setSoftWrapped(true)
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('updates the wrap location when the editor is resized', function () {
|
|
let newHeight = 4 * editor.getLineHeightInPixels() + 'px'
|
|
expect(parseInt(newHeight)).toBeLessThan(wrapperNode.offsetHeight)
|
|
wrapperNode.style.height = newHeight
|
|
atom.views.performDocumentPoll()
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.querySelectorAll('.line')).toHaveLength(7)
|
|
let gutterWidth = componentNode.querySelector('.gutter').offsetWidth
|
|
componentNode.style.width = gutterWidth + 14 * charWidth + wrapperNode.getVerticalScrollbarWidth() + 'px'
|
|
atom.views.performDocumentPoll()
|
|
runAnimationFrames()
|
|
expect(componentNode.querySelector('.line').textContent).toBe('var quicksort ')
|
|
})
|
|
|
|
it('accounts for the scroll view\'s padding when determining the wrap location', function () {
|
|
let scrollViewNode = componentNode.querySelector('.scroll-view')
|
|
scrollViewNode.style.paddingLeft = 20 + 'px'
|
|
componentNode.style.width = 30 * charWidth + 'px'
|
|
atom.views.performDocumentPoll()
|
|
runAnimationFrames()
|
|
expect(component.lineNodeForScreenRow(0).textContent).toBe('var quicksort = ')
|
|
})
|
|
})
|
|
|
|
describe('default decorations', function () {
|
|
it('applies .cursor-line decorations for line numbers overlapping selections', function () {
|
|
editor.setCursorScreenPosition([4, 4])
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(3, 'cursor-line')).toBe(false)
|
|
expect(lineNumberHasClass(4, 'cursor-line')).toBe(true)
|
|
expect(lineNumberHasClass(5, 'cursor-line')).toBe(false)
|
|
editor.setSelectedScreenRange([[3, 4], [4, 4]])
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(3, 'cursor-line')).toBe(true)
|
|
expect(lineNumberHasClass(4, 'cursor-line')).toBe(true)
|
|
editor.setSelectedScreenRange([[3, 4], [4, 0]])
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(3, 'cursor-line')).toBe(true)
|
|
expect(lineNumberHasClass(4, 'cursor-line')).toBe(false)
|
|
})
|
|
|
|
it('does not apply .cursor-line to the last line of a selection if it\'s empty', function () {
|
|
editor.setSelectedScreenRange([[3, 4], [5, 0]])
|
|
runAnimationFrames()
|
|
expect(lineNumberHasClass(3, 'cursor-line')).toBe(true)
|
|
expect(lineNumberHasClass(4, 'cursor-line')).toBe(true)
|
|
expect(lineNumberHasClass(5, 'cursor-line')).toBe(false)
|
|
})
|
|
|
|
it('applies .cursor-line decorations for lines containing the cursor in non-empty selections', function () {
|
|
editor.setCursorScreenPosition([4, 4])
|
|
runAnimationFrames()
|
|
|
|
expect(lineHasClass(3, 'cursor-line')).toBe(false)
|
|
expect(lineHasClass(4, 'cursor-line')).toBe(true)
|
|
expect(lineHasClass(5, 'cursor-line')).toBe(false)
|
|
editor.setSelectedScreenRange([[3, 4], [4, 4]])
|
|
runAnimationFrames()
|
|
|
|
expect(lineHasClass(2, 'cursor-line')).toBe(false)
|
|
expect(lineHasClass(3, 'cursor-line')).toBe(false)
|
|
expect(lineHasClass(4, 'cursor-line')).toBe(false)
|
|
expect(lineHasClass(5, 'cursor-line')).toBe(false)
|
|
})
|
|
|
|
it('applies .cursor-line-no-selection to line numbers for rows containing the cursor when the selection is empty', function () {
|
|
editor.setCursorScreenPosition([4, 4])
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(4, 'cursor-line-no-selection')).toBe(true)
|
|
editor.setSelectedScreenRange([[3, 4], [4, 4]])
|
|
runAnimationFrames()
|
|
|
|
expect(lineNumberHasClass(4, 'cursor-line-no-selection')).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('height', function () {
|
|
describe('when the wrapper view has an explicit height', function () {
|
|
it('does not assign a height on the component node', function () {
|
|
wrapperNode.style.height = '200px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
expect(componentNode.style.height).toBe('')
|
|
})
|
|
})
|
|
|
|
describe('when the wrapper view does not have an explicit height', function () {
|
|
it('assigns a height on the component node based on the editor\'s content', function () {
|
|
expect(wrapperNode.style.height).toBe('')
|
|
expect(componentNode.style.height).toBe(editor.getScreenLineCount() * lineHeightInPixels + 'px')
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when the "mini" property is true', function () {
|
|
beforeEach(function () {
|
|
editor.setMini(true)
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('does not render the gutter', function () {
|
|
expect(componentNode.querySelector('.gutter')).toBeNull()
|
|
})
|
|
|
|
it('adds the "mini" class to the wrapper view', function () {
|
|
expect(wrapperNode.classList.contains('mini')).toBe(true)
|
|
})
|
|
|
|
it('does not have an opaque background on lines', function () {
|
|
expect(component.linesComponent.getDomNode().getAttribute('style')).not.toContain('background-color')
|
|
})
|
|
|
|
it('does not render invisible characters', function () {
|
|
editor.update({
|
|
showInvisibles: true,
|
|
invisibles: {eol: 'E'}
|
|
})
|
|
expect(component.lineNodeForScreenRow(0).textContent).toBe('var quicksort = function () {')
|
|
})
|
|
|
|
it('does not assign an explicit line-height on the editor contents', function () {
|
|
expect(componentNode.style.lineHeight).toBe('')
|
|
})
|
|
|
|
it('does not apply cursor-line decorations', function () {
|
|
expect(component.lineNodeForScreenRow(0).classList.contains('cursor-line')).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('when placholderText is specified', function () {
|
|
it('renders the placeholder text when the buffer is empty', function () {
|
|
editor.setPlaceholderText('Hello World')
|
|
expect(componentNode.querySelector('.placeholder-text')).toBeNull()
|
|
editor.setText('')
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.querySelector('.placeholder-text').textContent).toBe('Hello World')
|
|
editor.setText('hey')
|
|
runAnimationFrames()
|
|
|
|
expect(componentNode.querySelector('.placeholder-text')).toBeNull()
|
|
})
|
|
})
|
|
|
|
describe('grammar data attributes', function () {
|
|
it('adds and updates the grammar data attribute based on the current grammar', function () {
|
|
expect(wrapperNode.dataset.grammar).toBe('source js')
|
|
editor.setGrammar(atom.grammars.nullGrammar)
|
|
expect(wrapperNode.dataset.grammar).toBe('text plain null-grammar')
|
|
})
|
|
})
|
|
|
|
describe('encoding data attributes', function () {
|
|
it('adds and updates the encoding data attribute based on the current encoding', function () {
|
|
expect(wrapperNode.dataset.encoding).toBe('utf8')
|
|
editor.setEncoding('utf16le')
|
|
expect(wrapperNode.dataset.encoding).toBe('utf16le')
|
|
})
|
|
})
|
|
|
|
describe('detaching and reattaching the editor (regression)', function () {
|
|
it('does not throw an exception', function () {
|
|
wrapperNode.remove()
|
|
jasmine.attachToDOM(wrapperNode)
|
|
atom.commands.dispatch(wrapperNode, 'core:move-right')
|
|
expect(editor.getCursorBufferPosition()).toEqual([0, 1])
|
|
})
|
|
})
|
|
|
|
describe('autoscroll', function () {
|
|
beforeEach(function () {
|
|
editor.setVerticalScrollMargin(2)
|
|
editor.setHorizontalScrollMargin(2)
|
|
component.setLineHeight('10px')
|
|
component.setFontSize(17)
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
wrapperNode.setWidth(55)
|
|
wrapperNode.setHeight(55)
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
component.presenter.setHorizontalScrollbarHeight(0)
|
|
component.presenter.setVerticalScrollbarWidth(0)
|
|
runAnimationFrames()
|
|
})
|
|
|
|
describe('when selecting buffer ranges', function () {
|
|
it('autoscrolls the selection if it is last unless the "autoscroll" option is false', function () {
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.setSelectedBufferRange([[5, 6], [6, 8]])
|
|
runAnimationFrames()
|
|
|
|
let right = wrapperNode.pixelPositionForBufferPosition([6, 8 + editor.getHorizontalScrollMargin()]).left
|
|
expect(wrapperNode.getScrollBottom()).toBe((7 + editor.getVerticalScrollMargin()) * 10)
|
|
expect(wrapperNode.getScrollRight()).toBeCloseTo(right, 0)
|
|
editor.setSelectedBufferRange([[0, 0], [0, 0]])
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
expect(wrapperNode.getScrollLeft()).toBe(0)
|
|
editor.setSelectedBufferRange([[6, 6], [6, 8]])
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollBottom()).toBe((7 + editor.getVerticalScrollMargin()) * 10)
|
|
expect(wrapperNode.getScrollRight()).toBeCloseTo(right, 0)
|
|
})
|
|
})
|
|
|
|
describe('when adding selections for buffer ranges', function () {
|
|
it('autoscrolls to the added selection if needed', function () {
|
|
editor.addSelectionForBufferRange([[8, 10], [8, 15]])
|
|
runAnimationFrames()
|
|
|
|
let right = wrapperNode.pixelPositionForBufferPosition([8, 15]).left
|
|
expect(wrapperNode.getScrollBottom()).toBe((9 * 10) + (2 * 10))
|
|
expect(wrapperNode.getScrollRight()).toBeCloseTo(right + 2 * 10, 0)
|
|
})
|
|
})
|
|
|
|
describe('when selecting lines containing cursors', function () {
|
|
it('autoscrolls to the selection', function () {
|
|
editor.setCursorScreenPosition([5, 6])
|
|
runAnimationFrames()
|
|
|
|
wrapperNode.scrollToTop()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.selectLinesContainingCursors()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollBottom()).toBe((7 + editor.getVerticalScrollMargin()) * 10)
|
|
})
|
|
})
|
|
|
|
describe('when inserting text', function () {
|
|
describe('when there are multiple empty selections on different lines', function () {
|
|
it('autoscrolls to the last cursor', function () {
|
|
editor.setCursorScreenPosition([1, 2], {
|
|
autoscroll: false
|
|
})
|
|
runAnimationFrames()
|
|
|
|
editor.addCursorAtScreenPosition([10, 4], {
|
|
autoscroll: false
|
|
})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.insertText('a')
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(75)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('when scrolled to cursor position', function () {
|
|
it('scrolls the last cursor into view, centering around the cursor if possible and the "center" option is not false', function () {
|
|
editor.setCursorScreenPosition([8, 8], {
|
|
autoscroll: false
|
|
})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
expect(wrapperNode.getScrollLeft()).toBe(0)
|
|
editor.scrollToCursorPosition()
|
|
runAnimationFrames()
|
|
|
|
let right = wrapperNode.pixelPositionForScreenPosition([8, 9 + editor.getHorizontalScrollMargin()]).left
|
|
expect(wrapperNode.getScrollTop()).toBe((8.8 * 10) - 30)
|
|
expect(wrapperNode.getScrollBottom()).toBe((8.3 * 10) + 30)
|
|
expect(wrapperNode.getScrollRight()).toBeCloseTo(right, 0)
|
|
wrapperNode.setScrollTop(0)
|
|
editor.scrollToCursorPosition({
|
|
center: false
|
|
})
|
|
expect(wrapperNode.getScrollTop()).toBe((7.8 - editor.getVerticalScrollMargin()) * 10)
|
|
expect(wrapperNode.getScrollBottom()).toBe((9.3 + editor.getVerticalScrollMargin()) * 10)
|
|
})
|
|
})
|
|
|
|
describe('moving cursors', function () {
|
|
it('scrolls down when the last cursor gets closer than ::verticalScrollMargin to the bottom of the editor', function () {
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
expect(wrapperNode.getScrollBottom()).toBe(5.5 * 10)
|
|
editor.setCursorScreenPosition([2, 0])
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollBottom()).toBe(5.5 * 10)
|
|
editor.moveDown()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollBottom()).toBe(6 * 10)
|
|
editor.moveDown()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollBottom()).toBe(7 * 10)
|
|
})
|
|
|
|
it('scrolls up when the last cursor gets closer than ::verticalScrollMargin to the top of the editor', function () {
|
|
editor.setCursorScreenPosition([11, 0])
|
|
runAnimationFrames()
|
|
|
|
wrapperNode.setScrollBottom(wrapperNode.getScrollHeight())
|
|
runAnimationFrames()
|
|
|
|
editor.moveUp()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollBottom()).toBe(wrapperNode.getScrollHeight())
|
|
editor.moveUp()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(7 * 10)
|
|
editor.moveUp()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(6 * 10)
|
|
})
|
|
|
|
it('scrolls right when the last cursor gets closer than ::horizontalScrollMargin to the right of the editor', function () {
|
|
expect(wrapperNode.getScrollLeft()).toBe(0)
|
|
expect(wrapperNode.getScrollRight()).toBe(5.5 * 10)
|
|
editor.setCursorScreenPosition([0, 2])
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollRight()).toBe(5.5 * 10)
|
|
editor.moveRight()
|
|
runAnimationFrames()
|
|
|
|
let margin = component.presenter.getHorizontalScrollMarginInPixels()
|
|
let right = wrapperNode.pixelPositionForScreenPosition([0, 4]).left + margin
|
|
expect(wrapperNode.getScrollRight()).toBeCloseTo(right, 0)
|
|
editor.moveRight()
|
|
runAnimationFrames()
|
|
|
|
right = wrapperNode.pixelPositionForScreenPosition([0, 5]).left + margin
|
|
expect(wrapperNode.getScrollRight()).toBeCloseTo(right, 0)
|
|
})
|
|
|
|
it('scrolls left when the last cursor gets closer than ::horizontalScrollMargin to the left of the editor', function () {
|
|
wrapperNode.setScrollRight(wrapperNode.getScrollWidth())
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollRight()).toBe(wrapperNode.getScrollWidth())
|
|
editor.setCursorScreenPosition([6, 62], {
|
|
autoscroll: false
|
|
})
|
|
runAnimationFrames()
|
|
|
|
editor.moveLeft()
|
|
runAnimationFrames()
|
|
|
|
let margin = component.presenter.getHorizontalScrollMarginInPixels()
|
|
let left = wrapperNode.pixelPositionForScreenPosition([6, 61]).left - margin
|
|
expect(wrapperNode.getScrollLeft()).toBeCloseTo(left, 0)
|
|
editor.moveLeft()
|
|
runAnimationFrames()
|
|
|
|
left = wrapperNode.pixelPositionForScreenPosition([6, 60]).left - margin
|
|
expect(wrapperNode.getScrollLeft()).toBeCloseTo(left, 0)
|
|
})
|
|
|
|
it('scrolls down when inserting lines makes the document longer than the editor\'s height', function () {
|
|
editor.setCursorScreenPosition([13, Infinity])
|
|
editor.insertNewline()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollBottom()).toBe(14 * 10)
|
|
editor.insertNewline()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollBottom()).toBe(15 * 10)
|
|
})
|
|
|
|
it('autoscrolls to the cursor when it moves due to undo', function () {
|
|
editor.insertText('abc')
|
|
wrapperNode.setScrollTop(Infinity)
|
|
runAnimationFrames()
|
|
|
|
editor.undo()
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
})
|
|
|
|
it('does not scroll when the cursor moves into the visible area', function () {
|
|
editor.setCursorBufferPosition([0, 0])
|
|
runAnimationFrames()
|
|
|
|
wrapperNode.setScrollTop(40)
|
|
runAnimationFrames()
|
|
|
|
editor.setCursorBufferPosition([6, 0])
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(40)
|
|
})
|
|
|
|
it('honors the autoscroll option on cursor and selection manipulation methods', function () {
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.addCursorAtScreenPosition([11, 11], {autoscroll: false})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.addCursorAtBufferPosition([11, 11], {autoscroll: false})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.setCursorScreenPosition([11, 11], {autoscroll: false})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.setCursorBufferPosition([11, 11], {autoscroll: false})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.addSelectionForBufferRange([[11, 11], [11, 11]], {autoscroll: false})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.addSelectionForScreenRange([[11, 11], [11, 12]], {autoscroll: false})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.setSelectedBufferRange([[11, 0], [11, 1]], {autoscroll: false})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.setSelectedScreenRange([[11, 0], [11, 6]], {autoscroll: false})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.clearSelections({autoscroll: false})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.addSelectionForScreenRange([[0, 0], [0, 4]])
|
|
runAnimationFrames()
|
|
|
|
editor.getCursors()[0].setScreenPosition([11, 11], {autoscroll: true})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBeGreaterThan(0)
|
|
editor.getCursors()[0].setBufferPosition([0, 0], {autoscroll: true})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
editor.getSelections()[0].setScreenRange([[11, 0], [11, 4]], {autoscroll: true})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBeGreaterThan(0)
|
|
editor.getSelections()[0].setBufferRange([[0, 0], [0, 4]], {autoscroll: true})
|
|
runAnimationFrames()
|
|
|
|
expect(wrapperNode.getScrollTop()).toBe(0)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('::getVisibleRowRange()', function () {
|
|
beforeEach(function () {
|
|
wrapperNode.style.height = lineHeightInPixels * 8 + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
})
|
|
|
|
it('returns the first and the last visible rows', function () {
|
|
component.setScrollTop(0)
|
|
runAnimationFrames()
|
|
expect(component.getVisibleRowRange()).toEqual([0, 9])
|
|
})
|
|
|
|
it('ends at last buffer row even if there\'s more space available', function () {
|
|
wrapperNode.style.height = lineHeightInPixels * 13 + 'px'
|
|
component.measureDimensions()
|
|
runAnimationFrames()
|
|
|
|
component.setScrollTop(60)
|
|
runAnimationFrames()
|
|
|
|
expect(component.getVisibleRowRange()).toEqual([0, 13])
|
|
})
|
|
})
|
|
|
|
describe('::pixelPositionForScreenPosition()', () => {
|
|
it('returns the correct horizontal position, even if it is on a row that has not yet been rendered (regression)', () => {
|
|
editor.setTextInBufferRange([[5, 0], [6, 0]], 'hello world\n')
|
|
expect(wrapperNode.pixelPositionForScreenPosition([5, Infinity]).left).toBeGreaterThan(0)
|
|
})
|
|
})
|
|
|
|
describe('middle mouse paste on Linux', function () {
|
|
let originalPlatform
|
|
|
|
beforeEach(function () {
|
|
originalPlatform = process.platform
|
|
Object.defineProperty(process, 'platform', {
|
|
value: 'linux'
|
|
})
|
|
})
|
|
|
|
afterEach(function () {
|
|
Object.defineProperty(process, 'platform', {
|
|
value: originalPlatform
|
|
})
|
|
})
|
|
|
|
it('pastes the previously selected text at the clicked location', async function () {
|
|
let clipboardWrittenTo = false
|
|
spyOn(require('electron').ipcRenderer, 'send').andCallFake(function (eventName, selectedText) {
|
|
if (eventName === 'write-text-to-selection-clipboard') {
|
|
require('../src/safe-clipboard').writeText(selectedText, 'selection')
|
|
clipboardWrittenTo = true
|
|
}
|
|
})
|
|
atom.clipboard.write('')
|
|
component.trackSelectionClipboard()
|
|
editor.setSelectedBufferRange([[1, 6], [1, 10]])
|
|
advanceClock(0)
|
|
|
|
componentNode.querySelector('.scroll-view').dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([10, 0]), {
|
|
button: 1
|
|
}))
|
|
componentNode.querySelector('.scroll-view').dispatchEvent(buildMouseEvent('mouseup', clientCoordinatesForScreenPosition([10, 0]), {
|
|
which: 2
|
|
}))
|
|
expect(atom.clipboard.read()).toBe('sort')
|
|
expect(editor.lineTextForBufferRow(10)).toBe('sort')
|
|
})
|
|
})
|
|
|
|
function buildMouseEvent (type, ...propertiesObjects) {
|
|
let properties = extend({
|
|
bubbles: true,
|
|
cancelable: true
|
|
}, ...propertiesObjects)
|
|
|
|
if (properties.detail == null) {
|
|
properties.detail = 1
|
|
}
|
|
|
|
let event = new MouseEvent(type, properties)
|
|
if (properties.which != null) {
|
|
Object.defineProperty(event, 'which', {
|
|
get: function () {
|
|
return properties.which
|
|
}
|
|
})
|
|
}
|
|
if (properties.target != null) {
|
|
Object.defineProperty(event, 'target', {
|
|
get: function () {
|
|
return properties.target
|
|
}
|
|
})
|
|
Object.defineProperty(event, 'srcObject', {
|
|
get: function () {
|
|
return properties.target
|
|
}
|
|
})
|
|
}
|
|
return event
|
|
}
|
|
|
|
function clientCoordinatesForScreenPosition (screenPosition) {
|
|
let clientX, clientY, positionOffset, scrollViewClientRect
|
|
positionOffset = wrapperNode.pixelPositionForScreenPosition(screenPosition)
|
|
scrollViewClientRect = componentNode.querySelector('.scroll-view').getBoundingClientRect()
|
|
clientX = scrollViewClientRect.left + positionOffset.left - wrapperNode.getScrollLeft()
|
|
clientY = scrollViewClientRect.top + positionOffset.top - wrapperNode.getScrollTop()
|
|
return {
|
|
clientX: clientX,
|
|
clientY: clientY
|
|
}
|
|
}
|
|
|
|
function clientCoordinatesForScreenRowInGutter (screenRow) {
|
|
let clientX, clientY, gutterClientRect, positionOffset
|
|
positionOffset = wrapperNode.pixelPositionForScreenPosition([screenRow, Infinity])
|
|
gutterClientRect = componentNode.querySelector('.gutter').getBoundingClientRect()
|
|
clientX = gutterClientRect.left + positionOffset.left - wrapperNode.getScrollLeft()
|
|
clientY = gutterClientRect.top + positionOffset.top - wrapperNode.getScrollTop()
|
|
return {
|
|
clientX: clientX,
|
|
clientY: clientY
|
|
}
|
|
}
|
|
|
|
function lineAndLineNumberHaveClass (screenRow, klass) {
|
|
return lineHasClass(screenRow, klass) && lineNumberHasClass(screenRow, klass)
|
|
}
|
|
|
|
function lineNumberHasClass (screenRow, klass) {
|
|
return component.lineNumberNodeForScreenRow(screenRow).classList.contains(klass)
|
|
}
|
|
|
|
function lineNumberForBufferRowHasClass (bufferRow, klass) {
|
|
let screenRow
|
|
screenRow = editor.screenRowForBufferRow(bufferRow)
|
|
return component.lineNumberNodeForScreenRow(screenRow).classList.contains(klass)
|
|
}
|
|
|
|
function lineHasClass (screenRow, klass) {
|
|
return component.lineNodeForScreenRow(screenRow).classList.contains(klass)
|
|
}
|
|
|
|
function getLeafNodes (node) {
|
|
if (node.children.length > 0) {
|
|
return flatten(toArray(node.children).map(getLeafNodes))
|
|
} else {
|
|
return [node]
|
|
}
|
|
}
|
|
|
|
function conditionPromise (condition) {
|
|
let timeoutError = new Error("Timed out waiting on condition")
|
|
Error.captureStackTrace(timeoutError, conditionPromise)
|
|
|
|
return new Promise(function (resolve, reject) {
|
|
let interval = window.setInterval.originalValue.apply(window, [function () {
|
|
if (condition()) {
|
|
window.clearInterval(interval)
|
|
window.clearTimeout(timeout)
|
|
resolve()
|
|
}
|
|
}, 100])
|
|
let timeout = window.setTimeout.originalValue.apply(window, [function () {
|
|
window.clearInterval(interval)
|
|
reject(timeoutError)
|
|
}, 5000])
|
|
})
|
|
}
|
|
|
|
function decorationsUpdatedPromise(editor) {
|
|
return new Promise(function (resolve) {
|
|
let disposable = editor.onDidUpdateDecorations(function () {
|
|
disposable.dispose()
|
|
resolve()
|
|
})
|
|
})
|
|
}
|
|
})
|