Skip to content

Commit

Permalink
Add tests for classic editor menu bar.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mremiszewski
mremiszewski committed Feb 22, 2024
1 parent 1e0684e commit 76919d5
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 24 deletions.
150 changes: 130 additions & 20 deletions packages/ckeditor5-editor-classic/tests/classiceditorui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -685,7 +685,7 @@ describe( 'Focus handling and navigation between editing root and editor toolbar
ui.focusTracker.isFocused = true;
ui.focusTracker.focusedElement = domRoot;

pressAltF10();
pressAltF10( editor );

sinon.assert.calledOnce( spy );
} );
Expand All @@ -697,11 +697,11 @@ describe( 'Focus handling and navigation between editing root and editor toolbar
setModelData( editor.model, '<paragraph>foo[]</paragraph>' );

// Focus the toolbar.
pressAltF10();
pressAltF10( editor );
ui.focusTracker.focusedElement = toolbarView.element;

// Try Alt+F10 again.
pressAltF10();
pressAltF10( editor );

sinon.assert.calledOnce( toolbarFocusSpy );
sinon.assert.notCalled( domRootFocusSpy );
Expand All @@ -721,7 +721,7 @@ describe( 'Focus handling and navigation between editing root and editor toolbar
);

// Focus the image balloon toolbar.
pressAltF10();
pressAltF10( editor );
ui.focusTracker.focusedElement = imageToolbar.element;

sinon.assert.calledOnce( imageToolbarSpy );
Expand All @@ -742,10 +742,10 @@ describe( 'Focus handling and navigation between editing root and editor toolbar
setModelData( editor.model, '<paragraph>foo[]</paragraph>' );

// Focus the toolbar.
pressAltF10();
pressAltF10( editor );
ui.focusTracker.focusedElement = toolbarView.element;

pressEsc();
pressEsc( editor );

sinon.assert.callOrder( toolbarFocusSpy, domRootFocusSpy );
} );
Expand All @@ -756,31 +756,141 @@ describe( 'Focus handling and navigation between editing root and editor toolbar

setModelData( editor.model, '<paragraph>foo[]</paragraph>' );

pressEsc();
pressEsc( editor );

sinon.assert.notCalled( domRootFocusSpy );
sinon.assert.notCalled( toolbarFocusSpy );
} );
} );
} );

describe( 'Focus handling and navigation between editing root and editor menu bar', () => {
let editorElement, editor, ui, menuBarView, domRoot;

testUtils.createSinonSandbox();

function pressAltF10() {
editor.keystrokes.press( {
keyCode: keyCodes.f10,
altKey: true,
preventDefault: sinon.spy(),
stopPropagation: sinon.spy()
beforeEach( async () => {
editorElement = document.body.appendChild( document.createElement( 'div' ) );

editor = await ClassicEditor.create( editorElement, {
plugins: [ Paragraph, Image, ImageToolbar, ImageCaption ],
toolbar: [ 'imageTextAlternative' ],
image: {
toolbar: [ 'toggleImageCaption' ]
}
} );
}

function pressEsc() {
editor.keystrokes.press( {
keyCode: keyCodes.esc,
preventDefault: sinon.spy(),
stopPropagation: sinon.spy()
domRoot = editor.editing.view.domRoots.get( 'main' );

ui = editor.ui;
menuBarView = ui.view.menuBarView;
} );

afterEach( () => {
editorElement.remove();

return editor.destroy();
} );

describe( 'Focusing menu bar on Alt+F9 key press', () => {
beforeEach( () => {
ui.focusTracker.isFocused = true;
ui.focusTracker.focusedElement = domRoot;
} );
}

it( 'should focus the menu bar when the focus is in the editing root', () => {
const spy = testUtils.sinon.spy( menuBarView, 'focus' );

setModelData( editor.model, '<paragraph>foo[]</paragraph>' );

ui.focusTracker.isFocused = true;
ui.focusTracker.focusedElement = domRoot;

// Focus the menu bar.
pressAltF9( editor );

sinon.assert.calledOnce( spy );
} );

it( 'should do nothing if the menu bar is already focused', () => {
const domRootFocusSpy = testUtils.sinon.spy( domRoot, 'focus' );
const menuBarFocusSpy = testUtils.sinon.spy( menuBarView, 'focus' );

setModelData( editor.model, '<paragraph>foo[]</paragraph>' );

// Focus the menu bar.
pressAltF9( editor );
ui.focusTracker.focusedElement = menuBarView.element;

// Try Alt+F9 again.
pressAltF9( editor );

sinon.assert.calledOnce( menuBarFocusSpy );
sinon.assert.notCalled( domRootFocusSpy );
} );
} );

describe( 'Restoring focus on Esc key press', () => {
beforeEach( () => {
ui.focusTracker.isFocused = true;
ui.focusTracker.focusedElement = domRoot;
} );

it( 'should move the focus back from the menu bar to the editing root', () => {
const domRootFocusSpy = testUtils.sinon.spy( domRoot, 'focus' );
const menuBarFocusSpy = testUtils.sinon.spy( menuBarView, 'focus' );

setModelData( editor.model, '<paragraph>foo[]</paragraph>' );

// Focus the menu bar.
pressAltF9( editor );
ui.focusTracker.focusedElement = menuBarView.element;

pressEsc( editor );

sinon.assert.callOrder( menuBarFocusSpy, domRootFocusSpy );
} );

it( 'should do nothing if it was pressed when menu bar was not focused', () => {
const domRootFocusSpy = testUtils.sinon.spy( domRoot, 'focus' );
const menuBarFocusSpy = testUtils.sinon.spy( menuBarView, 'focus' );

setModelData( editor.model, '<paragraph>foo[]</paragraph>' );

pressEsc( editor );

sinon.assert.notCalled( domRootFocusSpy );
sinon.assert.notCalled( menuBarFocusSpy );
} );
} );
} );

function pressAltF9( editor ) {
editor.keystrokes.press( {
keyCode: keyCodes.f9,
altKey: true,
preventDefault: sinon.spy(),
stopPropagation: sinon.spy()
} );
}

function pressAltF10( editor ) {
editor.keystrokes.press( {
keyCode: keyCodes.f10,
altKey: true,
preventDefault: sinon.spy(),
stopPropagation: sinon.spy()
} );
}

function pressEsc( editor ) {
editor.keystrokes.press( {
keyCode: keyCodes.esc,
preventDefault: sinon.spy(),
stopPropagation: sinon.spy()
} );
}

function viewCreator( name ) {
return locale => {
const view = new View( locale );
Expand Down
23 changes: 19 additions & 4 deletions packages/ckeditor5-editor-classic/tests/classiceditoruiview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ClassicEditorUIView from '../src/classiceditoruiview.js';
import EditingView from '@ckeditor/ckeditor5-engine/src/view/view.js';
import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview.js';
import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js';
import MenuBarView from '@ckeditor/ckeditor5-ui/src/menubar/menubarview.js';
import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview.js';
import Locale from '@ckeditor/ckeditor5-utils/src/locale.js';
import createRoot from '@ckeditor/ckeditor5-engine/tests/view/_utils/createroot.js';
Expand Down Expand Up @@ -37,7 +38,7 @@ describe( 'ClassicEditorUIView', () => {
expect( view.stickyPanel ).to.be.instanceof( StickyPanelView );
} );

it( 'is given a locate object', () => {
it( 'is given a locale object', () => {
expect( view.stickyPanel.locale ).to.equal( locale );
} );

Expand All @@ -51,12 +52,12 @@ describe( 'ClassicEditorUIView', () => {
expect( view.toolbar ).to.be.instanceof( ToolbarView );
} );

it( 'is given a locate object', () => {
it( 'is given a locale object', () => {
expect( view.toolbar.locale ).to.equal( locale );
} );

it( 'is put into the "stickyPanel.content" collection', () => {
expect( view.stickyPanel.content.get( 0 ) ).to.equal( view.toolbar );
expect( view.stickyPanel.content.has( view.toolbar ) ).to.be.true;
} );

describe( 'automatic items grouping', () => {
Expand All @@ -82,12 +83,26 @@ describe( 'ClassicEditorUIView', () => {
} );
} );

describe( '#menuBarView', () => {
it( 'is created', () => {
expect( view.menuBarView ).to.be.instanceof( MenuBarView );
} );

it( 'is given a locale object', () => {
expect( view.menuBarView.locale ).to.equal( locale );
} );

it( 'is put into the "stickyPanel.content" collection', () => {
expect( view.stickyPanel.content.has( view.menuBarView ) ).to.be.true;
} );
} );

describe( '#editable', () => {
it( 'is created', () => {
expect( view.editable ).to.be.instanceof( InlineEditableUIView );
} );

it( 'is given a locate object', () => {
it( 'is given a locale object', () => {
expect( view.editable.locale ).to.equal( locale );
} );

Expand Down

0 comments on commit 76919d5

Please sign in to comment.