View.test.js
No OneTemporary
Actions

Size

6 KB

Referenced Files

None

Subscribers

None

View.test.js
View Options

	/* global $ */
	const
	mw = require( '../utils/mw' ),
	mustache = require( '../utils/mustache' ),
	jQuery = require( '../utils/jQuery' ),
	dom = require( '../utils/dom' ),
	mfExtend = require( '../../../src/mobile.startup/mfExtend' ),
	util = require( '../../../src/mobile.startup/util' ),
	oo = require( '../utils/oo' ),
	sinon = require( 'sinon' );
	let
	View;
	/** @type {sinon.SinonSandbox} */ let sandbox;

	QUnit.module( 'MobileFrontend mobile.startup/View', {
	beforeEach: function () {
	sandbox = sinon.sandbox.create();
	dom.setUp( sandbox, global );
	jQuery.setUp( sandbox, global );
	oo.setUp( sandbox, global );
	mw.setUp( sandbox, global );
	mustache.setUp( sandbox, global );

	View = require( '../../../src/mobile.startup/View' );
	},
	afterEach: function () {
	jQuery.tearDown();
	sandbox.restore();
	}
	} );

	QUnit.test( 'View', function ( assert ) {
	const el = document.createElement( 'div' ),
	view = new View( {
	el
	} );
	assert.strictEqual( view.$el[ 0 ].outerHTML, '<div class="view-border-box"></div>',
	'Views use el and treat as CSS selector. view border box by default' );
	assert.strictEqual( view.$el[ 0 ].tagName.toUpperCase(), 'DIV', 'assign proper jQuery object to $el' );
	} );

	QUnit.test( 'View, jQuery proxy functions', function ( assert ) {
	const view = new View( {
	el: 'body'
	} );
	[
	'append',
	'prepend',
	'appendTo',
	'prependTo',
	'after',
	'before',
	'insertAfter',
	'insertBefore',
	'remove',
	'detach'
	].forEach( function ( prop ) {
	const stub = sandbox.stub( view.$el, prop );
	view[ prop ]( 'test', 1 );
	assert.true( stub.calledWith( 'test', 1 ) );
	stub.restore();
	} );
	} );

	QUnit.test( 'View#preRender', function ( assert ) {
	function ChildView() {
	View.apply( this, arguments );
	}

	mfExtend( ChildView, View, {
	template: util.template( '<p>{{text}}</p>' ),
	preRender: function () {
	this.options.text = 'hello';
	}
	} );

	const view = new ChildView();
	assert.strictEqual( view.$el.html(), '<p>hello</p>', 'manipulate template data' );
	} );

	QUnit.test( 'View#postRender', function ( assert ) {
	const spy = sandbox.spy();
	function ChildView() {
	View.apply( this, arguments );
	}

	mfExtend( ChildView, View, {
	postRender: function () {
	spy();
	}
	} );

	// eslint-disable-next-line no-new
	new ChildView();
	assert.strictEqual( spy.callCount, 1, 'invoke postRender' );
	} );

	QUnit.test( 'View#delegateEvents', function ( assert ) {

	function EventsView( props ) {
	View.call(
	this,
	util.extend(
	{
	events: {
	'click p span': function ( ev ) {
	ev.preventDefault();
	assert.true( true, 'Span was clicked and handled' );
	},
	'click p': 'onParagraphClick',
	click: 'onClick'
	}
	},
	props
	)
	);
	}

	mfExtend( EventsView, View, {
	template: util.template( '<p><span>test</span></p>' ),
	onParagraphClick: function ( ev ) {
	ev.preventDefault();
	assert.true( true, 'Paragraph was clicked and handled' );
	},
	onClick: function ( ev ) {
	ev.preventDefault();
	assert.true( true, 'View was clicked and handled' );
	}
	} );

	const view = new EventsView();
	view.appendTo( 'body' );
	// Check if events are set and handlers called
	view.$el.find( 'span' ).trigger( 'click' );
	view.$el.find( 'p' ).trigger( 'click' );
	view.$el.trigger( 'click' );
	// Check if events can be unset and handlers are not called
	view.undelegateEvents();
	view.$el.find( 'span' ).trigger( 'click' );
	view.$el.find( 'p' ).trigger( 'click' );
	view.$el.trigger( 'click' );
	} );

	QUnit.test( 'View#render (with isTemplateMode)', function ( assert ) {
	const $parent = $( '<div>' );
	function TemplateModeView() {
	View.apply( this, arguments );
	}

	mfExtend( TemplateModeView, View, {
	template: util.template( '<p class="foo"><span>{{text}}</span></p>' ),
	isTemplateMode: true
	} );

	function ContainerView() {
	View.call( this, { className: 'bar' } );
	}

	mfExtend( ContainerView, View, {
	template: util.template( '<p class="foo"><span>test</span></p>' )
	} );

	const view = new TemplateModeView();
	const textFirstRun = view.$el.text();
	const view2 = new ContainerView();
	view.render();
	view2.render();
	// attach to the DOM
	view.$el.appendTo( $parent );
	// and then do a second render...
	view.render( { text: 'hello' } );
	assert.true( view.$el.hasClass( 'foo' ) );
	assert.true( view2.$el.hasClass( 'bar' ) );
	assert.strictEqual( textFirstRun, '', 'first run, no text defined' );
	assert.strictEqual( view.$el.text(), 'hello', 'second run, text has been defined' );
	assert.strictEqual( view.$el.parent( $parent ).length, 1,
	'A re-rendered view thats attached to the DOM remains attached to the DOM' );
	} );

	QUnit.test( 'View#render events (with isTemplateMode)', function ( assert ) {
	function TemplateModeView( props ) {
	View.call(
	this,
	util.extend( { events: { 'click span': 'onClick' } }, props )
	);
	}

	mfExtend( TemplateModeView, View, {
	onClick: function () {
	this.$el.empty().text( 'hello world' );
	},
	template: util.template( '<p class="foo"><span>test</span></p>' ),
	isTemplateMode: true
	} );

	const view = new TemplateModeView();
	// trigger event
	view.$el.find( 'span' ).trigger( 'click' );
	assert.strictEqual( view.$el.text(), 'hello world', 'event was called' );
	assert.strictEqual( view.$el.find( 'span' ).length, 0, 'span disappeared' );

	// do same again but call render twice
	const view2 = new TemplateModeView();
	// force a re-render
	view2.render();
	// trigger event to show events didn't get lost
	view2.$el.find( 'span' ).trigger( 'click' );
	assert.strictEqual( view2.$el.text(), 'hello world', 'event was called' );
	assert.strictEqual( view2.$el.find( 'span' ).length, 0, 'span disappeared' );
	} );

	QUnit.test( 'View with className option', function ( assert ) {
	[
	[
	new View(),
	'view-border-box',
	'className not defined on a normal View without options and isBorderBox is default'
	],
	[
	new View( {} ),
	'view-border-box',
	'className not defined on a normal View with empty options and isBorderBox is default'
	],
	[
	new View( {
	className: 'banana'
	} ),
	'banana view-border-box',
	'option is passed to View (along with default isBorderBox property)'
	],
	[
	new View( { isBorderBox: false } ),
	undefined,
	'Passing isBorderBox option removes default view-border-box class'
	],
	[
	new View( { isBorderBox: true } ),
	'view-border-box',
	'Passing isBorderBox option as true retains default view-border-box class'
	]
	].forEach( function ( test ) {
	assert.strictEqual( test[0].$el.attr( 'class' ), test[1], test[2] );
	} );
	} );

	QUnit.test( 'View.make()', function ( assert ) {
	const view = View.make( { className: 'foo' }, [ util.parseHTML( '<div>' ).text( 'hello' ) ] );
	assert.strictEqual( view.$el.find( '> div' ).text().trim(), 'hello', 'view created with element' );
	} );

File Metadata

Mime Type: text/plain
Expires: Fri, Jul 3, 16:14 (2 h, 42 m)
Storage Engine: local-disk
Storage Format: Raw Data
Storage Handle: f4/69/d68971227a25d10e23bc48e363fd
Default Alt Text: View.test.js (6 KB)

View.test.jsNo OneTemporaryActions

View.test.jsView Options

File Metadata

Event Timeline

View.test.js
No OneTemporary
Actions

View.test.js
View Options