Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #15 from ckeditor/i/6109
Browse files Browse the repository at this point in the history 
Other: Made `SpecialCharactersNavigationView` an instance of the new `FormHeaderView` UI. See ckeditor/ckeditor5#6109.

BREAKING CHANGE: From now the `SpecialCharactersNavigationView` is an instance of the `FormHeaderView` and unnecessary `SpecialCharactersNavigationView#labelView` was removed.
  • Loading branch information
@jodator
jodator authored Mar 26, 2020
2 parents 5011a8c + a130ae2 commit 342a536
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 44 deletions.
41 changes: 16 additions & 25 deletions src/ui/specialcharactersnavigationview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,22 @@
* @module special-characters/ui/specialcharactersnavigationview
*/

import View from '@ckeditor/ckeditor5-ui/src/view';
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
import Model from '@ckeditor/ckeditor5-ui/src/model';
import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
import {
createDropdown,
addListToDropdown
} from '@ckeditor/ckeditor5-ui/src/dropdown/utils';

import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';

/**
* A class representing the navigation part of the special characters UI. It is responsible
* for describing the feature and allowing the user to select a particular character group.
*
* @extends module:ui/view~View
* @extends module:ui/formheader/formheaderview~FormHeaderView
*/
export default class SpecialCharactersNavigationView extends View {
export default class SpecialCharactersNavigationView extends FormHeaderView {
/**
* Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
* class.
Expand All @@ -35,13 +35,7 @@ export default class SpecialCharactersNavigationView extends View {

const t = locale.t;

/**
* The label of the navigation view describing its purpose.
*
* @member {module:ui/label/labelview~LabelView}
*/
this.labelView = new LabelView( locale );
this.labelView.text = t( 'Special characters' );
this.set( 'class', 'ck-special-characters-navigation' );

/**
* A dropdown that allows selecting a group of special characters to be displayed.
Expand All @@ -51,19 +45,15 @@ export default class SpecialCharactersNavigationView extends View {
this.groupDropdownView = this._createGroupDropdown( groupNames );
this.groupDropdownView.panelPosition = locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw';

this.setTemplate( {
tag: 'div',
attributes: {
class: [
'ck',
'ck-special-characters-navigation'
]
},
children: [
this.labelView,
this.groupDropdownView
]
} );
/**
* @inheritDoc
*/
this.label = t( 'Special characters' );

/**
* @inheritDoc
*/
this.children.add( this.groupDropdownView );
}

/**
Expand Down Expand Up @@ -95,7 +85,8 @@ export default class SpecialCharactersNavigationView extends View {
dropdown.buttonView.set( {
isOn: false,
withText: true,
tooltip: t( 'Character categories' )
tooltip: t( 'Character categories' ),
class: [ 'ck-dropdown__button_label-width_auto' ]
} );

dropdown.on( 'execute', evt => {
Expand Down
57 changes: 38 additions & 19 deletions tests/ui/specialcharactersnavigationview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
*/

import SpecialCharactersNavigationView from '../../src/ui/specialcharactersnavigationview';
import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';
import View from '@ckeditor/ckeditor5-ui/src/view';
import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';

describe( 'SpecialCharactersNavigationView', () => {
let view, locale;
Expand All @@ -26,20 +28,29 @@ describe( 'SpecialCharactersNavigationView', () => {
} );

describe( 'constructor()', () => {
it( 'creates #labelView', () => {
expect( view.labelView ).to.be.instanceOf( LabelView );
expect( view.labelView.text ).to.equal( 'Special characters' );
it( 'should be an instance of the FormHeaderView', () => {
expect( view ).to.be.instanceOf( FormHeaderView );
} );

it( 'should have "Special characters" label', () => {
expect( view.label ).to.equal( 'Special characters' );
} );

it( 'creates #groupDropdownView', () => {
expect( view.groupDropdownView ).to.be.instanceOf( DropdownView );
} );

it( 'creates #element from template', () => {
expect( view.element.classList.contains( 'ck' ) ).to.be.true;
expect( view.element.classList.contains( 'ck-special-characters-navigation' ) ).to.be.true;

expect( view.element.firstChild ).to.equal( view.labelView.element );
expect( view.element.lastChild ).to.equal( view.groupDropdownView.element );
expect( view.element.firstChild.classList.contains( 'ck-form__header__label' ) ).to.be.true;
expect( view.element.lastChild.classList.contains( 'ck-dropdown' ) ).to.be.true;
} );

it( 'should contain following instances as children: View, Dropdown', () => {
expect( view.children.first ).to.be.instanceOf( View );
expect( view.children.last ).to.be.instanceOf( DropdownView );
} );
} );

Expand Down Expand Up @@ -81,19 +92,6 @@ describe( 'SpecialCharactersNavigationView', () => {
view.destroy();
} );

it( 'binds its buttonView#label to #value', () => {
expect( groupDropdownView.buttonView.label ).to.equal( 'groupA' );

groupDropdownView.listView.items.last.children.first.fire( 'execute' );
expect( groupDropdownView.buttonView.label ).to.equal( 'groupB' );
} );

it( 'configures the #buttonView', () => {
expect( groupDropdownView.buttonView.isOn ).to.be.false;
expect( groupDropdownView.buttonView.withText ).to.be.true;
expect( groupDropdownView.buttonView.tooltip ).to.equal( 'Character categories' );
} );

it( 'delegates #execute to the naviation view', () => {
const spy = sinon.spy();

Expand All @@ -103,6 +101,27 @@ describe( 'SpecialCharactersNavigationView', () => {
sinon.assert.calledOnce( spy );
} );

describe( 'buttonView', () => {
it( 'binds #label to #value', () => {
expect( groupDropdownView.buttonView.label ).to.equal( 'groupA' );

groupDropdownView.listView.items.last.children.first.fire( 'execute' );
expect( groupDropdownView.buttonView.label ).to.equal( 'groupB' );
} );

it( 'should be configured by the #groupDropdownView', () => {
expect( groupDropdownView.buttonView.isOn ).to.be.false;
expect( groupDropdownView.buttonView.withText ).to.be.true;
expect( groupDropdownView.buttonView.tooltip ).to.equal( 'Character categories' );
} );

it( 'should have class "ck-dropdown__button_label-width_auto"', () => {
const element = groupDropdownView.buttonView.element;

expect( element.classList.contains( 'ck-dropdown__button_label-width_auto' ) ).to.be.true;
} );
} );

describe( 'character group list items', () => {
it( 'have basic properties', () => {
expect( groupDropdownView.listView.items
Expand Down

0 comments on commit 342a536

Please sign in to comment.