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

Commit

Permalink
Change #field to #fieldView
Browse files Browse the repository at this point in the history
  • Loading branch information
@panr
panr committed Mar 25, 2020
1 parent e89d8be commit f76842e
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 88 deletions.
6 changes: 3 additions & 3 deletions src/labeledfield/labeledfieldview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export default class LabeledFieldView extends View {
*
* @member {module:ui/view~View} #field
*/
this.field = viewCreator( this, viewUid, statusUid );
this.fieldView = viewCreator( this, viewUid, statusUid );

/**
* The text of the label.
Expand Down Expand Up @@ -175,7 +175,7 @@ export default class LabeledFieldView extends View {
},
children: [
this.labelView,
this.field,
this.fieldView,
this.statusView
]
} );
Expand Down Expand Up @@ -236,6 +236,6 @@ export default class LabeledFieldView extends View {
* Focuses the {@link #field}.
*/
focus() {
this.field.focus();
this.fieldView.focus();
}
}
102 changes: 51 additions & 51 deletions tests/labeledfield/labeledfieldview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ import LabelView from '../../src/label/labelview';
describe( 'LabeledFieldView', () => {
const locale = {};

let labeledFieldView, view;
let labeledInput, view;

beforeEach( () => {
labeledFieldView = new LabeledFieldView( locale, ( labeledFieldView, viewUid, statusUid ) => {
labeledInput = new LabeledFieldView( locale, ( labeledInput, viewUid, statusUid ) => {
view = new View( locale );
view.setTemplate( { tag: 'div' } );
view.focus = () => {};
Expand All @@ -23,120 +23,120 @@ describe( 'LabeledFieldView', () => {
return view;
} );

labeledFieldView.render();
labeledInput.render();
} );

afterEach( () => {
labeledFieldView.destroy();
labeledInput.destroy();
} );

describe( 'constructor()', () => {
it( 'should set labeledFieldView#locale', () => {
expect( labeledFieldView.locale ).to.deep.equal( locale );
it( 'should set labeledInput#locale', () => {
expect( labeledInput.locale ).to.deep.equal( locale );
} );

it( 'should set labeledFieldView#field', () => {
expect( labeledFieldView.field ).to.equal( view );
it( 'should set labeledInput#field', () => {
expect( labeledInput.fieldView ).to.equal( view );
} );

it( 'should set labeledFieldView#label', () => {
expect( labeledFieldView.label ).to.be.undefined;
it( 'should set labeledInput#label', () => {
expect( labeledInput.label ).to.be.undefined;
} );

it( 'should set labeledFieldView#isEnabled', () => {
expect( labeledFieldView.isEnabled ).to.be.true;
it( 'should set labeledInput#isEnabled', () => {
expect( labeledInput.isEnabled ).to.be.true;
} );

it( 'should set labeledFieldView#errorText', () => {
expect( labeledFieldView.errorText ).to.be.null;
it( 'should set labeledInput#errorText', () => {
expect( labeledInput.errorText ).to.be.null;
} );

it( 'should set labeledFieldView#infoText', () => {
expect( labeledFieldView.infoText ).to.be.null;
it( 'should set labeledInput#infoText', () => {
expect( labeledInput.infoText ).to.be.null;
} );

it( 'should set labeledFieldView#class', () => {
expect( labeledFieldView.class ).to.be.undefined;
it( 'should set labeledInput#class', () => {
expect( labeledInput.class ).to.be.undefined;
} );

it( 'should create labeledFieldView#labelView', () => {
expect( labeledFieldView.labelView ).to.instanceOf( LabelView );
it( 'should create labeledInput#labelView', () => {
expect( labeledInput.labelView ).to.instanceOf( LabelView );
} );

it( 'should create labeledFieldView#statusView', () => {
expect( labeledFieldView.statusView ).to.instanceOf( View );
it( 'should create labeledInput#statusView', () => {
expect( labeledInput.statusView ).to.instanceOf( View );

expect( labeledFieldView.statusView.element.tagName ).to.equal( 'DIV' );
expect( labeledFieldView.statusView.element.classList.contains( 'ck' ) ).to.be.true;
expect( labeledFieldView.statusView.element.classList.contains( 'ck-labeled-view__status' ) ).to.be.true;
expect( labeledInput.statusView.element.tagName ).to.equal( 'DIV' );
expect( labeledInput.statusView.element.classList.contains( 'ck' ) ).to.be.true;
expect( labeledInput.statusView.element.classList.contains( 'ck-labeled-view__status' ) ).to.be.true;
} );

it( 'should allow pairing #view and #labelView by unique id', () => {
expect( labeledFieldView.labelView.for ).to.equal( view.viewUid );
expect( labeledInput.labelView.for ).to.equal( view.viewUid );
} );

it( 'should allow pairing #view and #statusView by unique id', () => {
expect( view.statusUid ).to.equal( labeledFieldView.statusView.element.id );
expect( view.statusUid ).to.equal( labeledInput.statusView.element.id );
} );
} );

describe( 'template', () => {
it( 'should have the CSS class', () => {
expect( labeledFieldView.element.classList.contains( 'ck' ) ).to.be.true;
expect( labeledFieldView.element.classList.contains( 'ck-labeled-view' ) ).to.be.true;
expect( labeledInput.element.classList.contains( 'ck' ) ).to.be.true;
expect( labeledInput.element.classList.contains( 'ck-labeled-view' ) ).to.be.true;
} );

it( 'should have #labeledFieldView', () => {
expect( labeledFieldView.template.children[ 0 ] ).to.equal( labeledFieldView.labelView );
it( 'should have #labeledInput', () => {
expect( labeledInput.template.children[ 0 ] ).to.equal( labeledInput.labelView );
} );

it( 'should have #view', () => {
expect( labeledFieldView.template.children[ 1 ] ).to.equal( view );
expect( labeledInput.template.children[ 1 ] ).to.equal( view );
} );

it( 'should have the #statusView container', () => {
expect( labeledFieldView.template.children[ 2 ] ).to.equal( labeledFieldView.statusView );
expect( labeledInput.template.children[ 2 ] ).to.equal( labeledInput.statusView );
} );

describe( 'DOM bindings', () => {
describe( 'class', () => {
it( 'should react on labeledFieldView#class', () => {
labeledFieldView.class = 'foo';
expect( labeledFieldView.element.classList.contains( 'foo' ) ).to.be.true;
it( 'should react on labeledInput#class', () => {
labeledInput.class = 'foo';
expect( labeledInput.element.classList.contains( 'foo' ) ).to.be.true;

labeledFieldView.class = 'bar';
expect( labeledFieldView.element.classList.contains( 'foo' ) ).to.be.false;
expect( labeledFieldView.element.classList.contains( 'bar' ) ).to.be.true;
labeledInput.class = 'bar';
expect( labeledInput.element.classList.contains( 'foo' ) ).to.be.false;
expect( labeledInput.element.classList.contains( 'bar' ) ).to.be.true;
} );
} );

describe( 'status container', () => {
it( 'should react on labeledFieldView#errorText', () => {
const statusElement = labeledFieldView.statusView.element;
it( 'should react on labeledInput#errorText', () => {
const statusElement = labeledInput.statusView.element;

labeledFieldView.errorText = '';
labeledInput.errorText = '';
expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.true;
expect( statusElement.classList.contains( 'ck-labeled-view__status_error' ) ).to.be.false;
expect( statusElement.hasAttribute( 'role' ) ).to.be.false;
expect( statusElement.innerHTML ).to.equal( '' );

labeledFieldView.errorText = 'foo';
labeledInput.errorText = 'foo';
expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.false;
expect( statusElement.classList.contains( 'ck-labeled-view__status_error' ) ).to.be.true;
expect( statusElement.getAttribute( 'role' ) ).to.equal( 'alert' );
expect( statusElement.innerHTML ).to.equal( 'foo' );
} );

it( 'should react on labeledFieldView#infoText', () => {
const statusElement = labeledFieldView.statusView.element;
it( 'should react on labeledInput#infoText', () => {
const statusElement = labeledInput.statusView.element;

labeledFieldView.infoText = '';
labeledInput.infoText = '';
expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.true;
expect( statusElement.classList.contains( 'ck-labeled-view__status_error' ) ).to.be.false;
expect( statusElement.hasAttribute( 'role' ) ).to.be.false;
expect( statusElement.innerHTML ).to.equal( '' );

labeledFieldView.infoText = 'foo';
labeledInput.infoText = 'foo';
expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.false;
expect( statusElement.classList.contains( 'ck-labeled-view__status_error' ) ).to.be.false;
expect( statusElement.hasAttribute( 'role' ) ).to.be.false;
Expand All @@ -147,18 +147,18 @@ describe( 'LabeledFieldView', () => {
} );

describe( 'binding', () => {
it( 'should bind labeledFieldView#label to labeledFieldView.labelView#label', () => {
labeledFieldView.label = 'Foo bar';
it( 'should bind labeledInput#label to labeledInput.labelView#label', () => {
labeledInput.label = 'Foo bar';

expect( labeledFieldView.labelView.text ).to.equal( 'Foo bar' );
expect( labeledInput.labelView.text ).to.equal( 'Foo bar' );
} );
} );

describe( 'focus()', () => {
it( 'should focus the #view in DOM', () => {
const spy = sinon.spy( view, 'focus' );

labeledFieldView.focus();
labeledInput.focus();

sinon.assert.calledOnce( spy );
} );
Expand Down
68 changes: 34 additions & 34 deletions tests/labeledfield/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,86 +23,86 @@ describe( 'LabeledFieldView utils', () => {
} );

describe( 'createLabeledInputText()', () => {
let labeledFieldView;
let labeledInput;

beforeEach( () => {
labeledFieldView = new LabeledFieldView( locale, createLabeledInputText );
labeledInput = new LabeledFieldView( locale, createLabeledInputText );
} );

afterEach( () => {
labeledFieldView.destroy();
labeledInput.destroy();
} );

it( 'should create an InputTextView instance', () => {
expect( labeledFieldView.field ).to.be.instanceOf( InputTextView );
expect( labeledInput.fieldView ).to.be.instanceOf( InputTextView );
} );

it( 'should pass the Locale to the input', () => {
expect( labeledFieldView.field.locale ).to.equal( locale );
expect( labeledInput.fieldView.locale ).to.equal( locale );
} );

it( 'should set input #id and #ariaDescribedById', () => {
labeledFieldView.render();
labeledInput.render();

expect( labeledFieldView.field.id ).to.equal( labeledFieldView.labelView.for );
expect( labeledFieldView.field.ariaDescribedById ).to.equal( labeledFieldView.statusView.element.id );
expect( labeledInput.fieldView.id ).to.equal( labeledInput.labelView.for );
expect( labeledInput.fieldView.ariaDescribedById ).to.equal( labeledInput.statusView.element.id );
} );

it( 'should bind input\'s #isReadOnly to LabeledFieldView#isEnabled', () => {
labeledFieldView.isEnabled = true;
expect( labeledFieldView.field.isReadOnly ).to.be.false;
it( 'should bind input\'s #isReadOnly to labeledInput#isEnabled', () => {
labeledInput.isEnabled = true;
expect( labeledInput.fieldView.isReadOnly ).to.be.false;

labeledFieldView.isEnabled = false;
expect( labeledFieldView.field.isReadOnly ).to.be.true;
labeledInput.isEnabled = false;
expect( labeledInput.fieldView.isReadOnly ).to.be.true;
} );

it( 'should bind input\'s #hasError to LabeledFieldView#errorText', () => {
labeledFieldView.errorText = 'some error';
expect( labeledFieldView.field.hasError ).to.be.true;
it( 'should bind input\'s #hasError to labeledInput#errorText', () => {
labeledInput.errorText = 'some error';
expect( labeledInput.fieldView.hasError ).to.be.true;

labeledFieldView.errorText = null;
expect( labeledFieldView.field.hasError ).to.be.false;
labeledInput.errorText = null;
expect( labeledInput.fieldView.hasError ).to.be.false;
} );

it( 'should clean LabeledFieldView#errorText upon input\'s DOM "update" event', () => {
labeledFieldView.errorText = 'some error';
labeledFieldView.field.fire( 'input' );
expect( labeledFieldView.errorText ).to.be.null;
it( 'should clean labeledInput#errorText upon input\'s DOM "update" event', () => {
labeledInput.errorText = 'some error';
labeledInput.fieldView.fire( 'input' );
expect( labeledInput.errorText ).to.be.null;
} );
} );

describe( 'createLabeledDropdown', () => {
let labeledFieldView;
let labeledDropdown;

beforeEach( () => {
labeledFieldView = new LabeledFieldView( locale, createLabeledDropdown );
labeledDropdown = new LabeledFieldView( locale, createLabeledDropdown );
} );

afterEach( () => {
labeledFieldView.destroy();
labeledDropdown.destroy();
} );

it( 'should create a DropdownView', () => {
expect( labeledFieldView.field ).to.be.instanceOf( DropdownView );
expect( labeledDropdown.fieldView ).to.be.instanceOf( DropdownView );
} );

it( 'should pass the Locale to the dropdown', () => {
expect( labeledFieldView.field.locale ).to.equal( locale );
expect( labeledDropdown.fieldView.locale ).to.equal( locale );
} );

it( 'should set dropdown\'s #id and #ariaDescribedById', () => {
labeledFieldView.render();
labeledDropdown.render();

expect( labeledFieldView.field.id ).to.equal( labeledFieldView.labelView.for );
expect( labeledFieldView.field.ariaDescribedById ).to.equal( labeledFieldView.statusView.element.id );
expect( labeledDropdown.fieldView.id ).to.equal( labeledDropdown.labelView.for );
expect( labeledDropdown.fieldView.ariaDescribedById ).to.equal( labeledDropdown.statusView.element.id );
} );

it( 'should bind dropdown\'s #isEnabled to the labeled view', () => {
labeledFieldView.isEnabled = true;
expect( labeledFieldView.field.isEnabled ).to.be.true;
labeledDropdown.isEnabled = true;
expect( labeledDropdown.fieldView.isEnabled ).to.be.true;

labeledFieldView.isEnabled = false;
expect( labeledFieldView.field.isEnabled ).to.be.false;
labeledDropdown.isEnabled = false;
expect( labeledDropdown.fieldView.isEnabled ).to.be.false;
} );
} );
} );

0 comments on commit f76842e

Please sign in to comment.