Skip to content

Commit

Permalink
Moved view positioning tests into separate file.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacekbogdanski
jacekbogdanski committed Apr 25, 2018
1 parent a0bfb19 commit db23436
Show file tree
Hide file tree
Showing 2 changed files with 174 additions and 235 deletions.
235 changes: 0 additions & 235 deletions tests/plugins/autocomplete/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,226 +158,6 @@
assert.isTrue( spy.calledOnce );
},

'test position not enough space between the caret and bottom viewport (classic)': function() {
// +---------------------------------------------+
// | |
// | editor viewport |
// | +--------------+ |
// | | | |
// | | view | |
// | | | |
// | +--------------+ |
// | █ - caret position |
// | |
// +---------------------------------------------+
var view = createPositionedView( this.editors.classic, {
caretRect: { top: 400, bottom: 410, left: 100 },
editorViewportRect: { top: 0, bottom: 500 },
viewPanelHeight: 100
} );

assert.areEqual( '300px', view.element.getStyle( 'top' ), 'View is displayed above the caret' );
assert.areEqual( '100px', view.element.getStyle( 'left' ) );
},

'test position not enough space between the caret and bottom viewport - edge case (classic)': function() {
// +---------------------------------------------+
// | |
// | |
// | editor viewport |
// | +--------------+ |
// | | | |
// | | view | |
// | | | |
// | +--------------+ |
// +-----█---------------------------------------+
// - caret position 1px above the viewport's bottom position
var view = createPositionedView( this.editors.classic, {
caretRect: { top: 199, bottom: 209, left: 100 },
editorViewportRect: { top: 0, bottom: 200 },
viewPanelHeight: 100
} );

assert.areEqual( '99px', view.element.getStyle( 'top' ), 'View is displayed above the caret' );
assert.areEqual( '100px', view.element.getStyle( 'left' ) );
},

'test enough space under and above the caret (classic)': function() {
// +---------------------------------------------+
// | editor viewport |
// | |
// | |
// | |
// | █ - caret position |
// | +--------------+ |
// | | view | |
// | +--------------+ |
// | |
// | |
// +---------------------------------------------+
var view = createPositionedView( this.editors.classic, {
caretRect: { top: 100, bottom: 110, left: 50 },
editorViewportRect: { top: 0, bottom: 500 },
viewPanelHeight: 100
} );

assert.areEqual( '110px', view.element.getStyle( 'top' ), 'View is displayed below the caret' );
assert.areEqual( '50px', view.element.getStyle( 'left' ) );
},

'test enough space under the caret - edge case (classic)': function() {
// - caret top position on a par with viewport's top
// +-----█---------------------------------------+
// | +--------------+ |
// | | view | |
// | +--------------+ |
// | |
// | |
// | editor viewport |
// +---------------------------------------------+
var view = createPositionedView( this.editors.classic, {
caretRect: { top: 0, bottom: 10, left: 50 },
editorViewportRect: { top: 0, bottom: 200 },
viewPanelHeight: 100
} );

assert.areEqual( '10px', view.element.getStyle( 'top' ), 'View is displayed below the caret' );
assert.areEqual( '50px', view.element.getStyle( 'left' ) );
},

'test view position below viewport (classic)': function() {
// +---------------------------------------------+
// | editor viewport |
// | |
// | +--------------+ |
// | | | |
// | | view | |
// | | | |
// +-----+==============+------------------------+
// | |
// | █ - caret position |
// | |
// +---------------------------------------------+
var view = createPositionedView( this.editors.classic, {
caretRect: { top: 400, bottom: 410, left: 100 },
editorViewportRect: { top: 0, bottom: 300 },
viewPanelHeight: 100
} );

assert.areEqual( '200px', view.element.getStyle( 'top' ), 'View is displayed above the caret' );
assert.areEqual( '100px', view.element.getStyle( 'left' ) );
},

'test view position above viewport (classic)': function() {
// +---------------------------------------------+
// | |
// | █ - caret position |
// | |
// +-----+==============+------------------------+
// | | | |
// | | view | |
// | | | |
// | +--------------+ |
// | |
// | editor viewport |
// +---------------------------------------------+
var view = createPositionedView( this.editors.classic, {
caretRect: { top: 100, bottom: 110, left: 50 },
editorViewportRect: { top: 200, bottom: 500 },
viewPanelHeight: 100
} );

assert.areEqual( '200px', view.element.getStyle( 'top' ), 'View is displayed below the caret' );
assert.areEqual( '50px', view.element.getStyle( 'left' ) );
},

'test enough space under and above the caret (inline)': function() {
// +---------------------------------------------+
// | editor viewport |
// | |
// | |
// | |
// | █ - caret position |
// | +--------------+ |
// | | view | |
// | +--------------+ |
// | |
// | |
// +---------------------------------------------+
var view = createPositionedView( this.editors.inline, {
caretRect: { top: 100, bottom: 110, left: 50 },
editorViewportRect: { top: 0, bottom: 500 },
viewPanelHeight: 100
} );

assert.areEqual( '110px', view.element.getStyle( 'top' ), 'View is displayed below the caret' );
assert.areEqual( '50px', view.element.getStyle( 'left' ) );
},

'test position not enough space between the caret and bottom viewport (inline)': function() {
// +---------------------------------------------+
// | |
// | editor viewport |
// | +--------------+ |
// | | | |
// | | view | |
// | | | |
// | +--------------+ |
// | █ - caret position |
// | |
// +---------------------------------------------+
var view = createPositionedView( this.editors.inline, {
caretRect: { top: 400, bottom: 410, left: 100 },
editorViewportRect: { top: 0, bottom: 500 },
viewPanelHeight: 100
} );

assert.areEqual( '300px', view.element.getStyle( 'top' ), 'View is displayed above the caret' );
assert.areEqual( '100px', view.element.getStyle( 'left' ) );
},

'test position not enough space between the caret and bottom viewport - edge case (inline)': function() {
// +---------------------------------------------+
// | |
// | |
// | editor viewport |
// | +--------------+ |
// | | | |
// | | view | |
// | | | |
// | +--------------+ |
// +-----█---------------------------------------+
// - caret position 1px above the viewport's bottom position
var view = createPositionedView( this.editors.inline, {
caretRect: { top: 199, bottom: 209, left: 100 },
editorViewportRect: { top: 0, bottom: 200 },
viewPanelHeight: 100
} );

assert.areEqual( '99px', view.element.getStyle( 'top' ), 'View is displayed above the caret' );
assert.areEqual( '100px', view.element.getStyle( 'left' ) );
},

'test enough space under the caret - edge case (inline)': function() {
// - caret top position on a par with viewport's top
// +-----█---------------------------------------+
// | +--------------+ |
// | | view | |
// | +--------------+ |
// | |
// | |
// | editor viewport |
// +---------------------------------------------+
var view = createPositionedView( this.editors.inline, {
caretRect: { top: 0, bottom: 10, left: 50 },
editorViewportRect: { top: 0, bottom: 200 },
viewPanelHeight: 100
} );

assert.areEqual( '10px', view.element.getStyle( 'top' ), 'View is displayed below the caret' );
assert.areEqual( '50px', view.element.getStyle( 'left' ) );
},

'test attach': function() {
var editor = this.editors.classic,
view = new CKEDITOR.plugins.autocomplete.view( editor ),
Expand All @@ -397,21 +177,6 @@

} );

function createPositionedView( editor, config ) {
var view = new CKEDITOR.plugins.autocomplete.view( editor ),
getClientRectStub = sinon.stub( CKEDITOR.dom.element.prototype, 'getClientRect' ).returns( config.editorViewportRect );

view.append();

sinon.stub( view.element, 'getSize' ).returns( config.viewPanelHeight );

view.setPosition( config.caretRect );

getClientRectStub.restore();

return view;
}

function assertViewElement( editor, element ) {
var zIndex = editor.config.baseFloatZIndex - 3,
expectedHtml = '<ul class="cke_autocomplete_panel" style="z-index: ' + zIndex + ';"></ul>';
Expand Down
Loading

0 comments on commit db23436

Please sign in to comment.