Framework: Upgrade ESLint computed-property-spacing to error

client/components/drop-zone/test/index.jsx

@@ -168,7 +168,7 @@ describe( 'index', function() {
 		window.dispatchEvent( dropEvent );
 
 		expect( spyDrop.calledOnce ).to.be.ok;
-		expect( spyDrop.getCall( 0 ).args[0] ).to.eql( dropEvent );
+		expect( spyDrop.getCall( 0 ).args[ 0 ] ).to.eql( dropEvent );
 	} );
 
 	it( 'should call onFilesDrop with the files array when a drop occurs', function() {
@@ -185,7 +185,7 @@ describe( 'index', function() {
 		window.dispatchEvent( dropEvent );
 
 		expect( spyDrop.calledOnce ).to.be.ok;
-		expect( spyDrop.getCall( 0 ).args[0] ).to.eql( [ 1, 2, 3 ] );
+		expect( spyDrop.getCall( 0 ).args[ 0 ] ).to.eql( [ 1, 2, 3 ] );
 	} );
 
 	it( 'should not call onFilesDrop if onVerifyValidTransfer returns false', function() {

client/components/forms/counted-textarea/test/index.jsx

@@ -27,7 +27,7 @@ describe( 'index', function() {
 
 		expect( result.props.className ).to.equal( 'counted-textarea' );
 		expect( result.props.children ).to.have.length( 2 );
-		expect( result.props.children[1].props.children[0] ).to.equal( '12 characters' );
+		expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '12 characters' );
 	} );
 
 	it( 'should render warning styles when the acceptable length is exceeded', function() {
@@ -57,9 +57,9 @@ describe( 'index', function() {
 		result = renderer.getRenderOutput();
 
 		expect( result.props.children ).to.have.length( 2 );
-		expect( result.props.children[0].props.value ).to.equal( value );
-		expect( result.props.children[0].props.placeholder ).to.equal( placeholder );
-		expect( result.props.children[0].props.className ).to.equal( 'counted-textarea__input' );
+		expect( result.props.children[ 0 ].props.value ).to.equal( value );
+		expect( result.props.children[ 0 ].props.placeholder ).to.equal( placeholder );
+		expect( result.props.children[ 0 ].props.className ).to.equal( 'counted-textarea__input' );
 	} );
 
 	it( 'should not use the placeholder as the counted item if value is empty and countPlaceholderLength is not set', function() {
@@ -70,7 +70,7 @@ describe( 'index', function() {
 		renderer.render( <CountedTextarea value={ value } className="custom-class" placeholder={ placeholder } /> );
 		result = renderer.getRenderOutput();
 
-		expect( result.props.children[1].props.children[0] ).to.equal( '0 characters' );
+		expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '0 characters' );
 	} );
 
 	it( 'should use the placeholder as the counted item if value is empty and countPlaceholderLength is true', function() {
@@ -81,7 +81,7 @@ describe( 'index', function() {
 		renderer.render( <CountedTextarea value={ value } className="custom-class" placeholder={ placeholder } countPlaceholderLength={ true } /> );
 		result = renderer.getRenderOutput();
 
-		expect( result.props.children[1].props.children[0] ).to.equal( '16 characters' );
+		expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '16 characters' );
 	} );
 
 	it( 'should use the value as the counted item if value is set', function() {
@@ -92,7 +92,7 @@ describe( 'index', function() {
 		renderer.render( <CountedTextarea value={ value } className="custom-class" placeholder={ placeholder }/> );
 		result = renderer.getRenderOutput();
 
-		expect( result.props.children[1].props.children[0] ).to.equal( '12 characters' );
+		expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '12 characters' );
 	} );
 
 	it( 'should not pass acceptableLength prop to the child textarea', function() {
@@ -104,9 +104,9 @@ describe( 'index', function() {
 		result = renderer.getRenderOutput();
 
 		expect( result.props.children ).to.have.length( 2 );
-		expect( result.props.children[0].props.value ).to.equal( value );
-		expect( result.props.children[0].props.acceptableLength ).to.be.undefined;
-		expect( result.props.children[0].props.className ).to.equal( 'counted-textarea__input' );
+		expect( result.props.children[ 0 ].props.value ).to.equal( value );
+		expect( result.props.children[ 0 ].props.acceptableLength ).to.be.undefined;
+		expect( result.props.children[ 0 ].props.className ).to.equal( 'counted-textarea__input' );
 	} );
 
 	it( 'should render a reversed count when set to showRemainingCount', function() {
@@ -119,7 +119,7 @@ describe( 'index', function() {
 
 		expect( result.props.className ).to.equal( 'counted-textarea' );
 		expect( result.props.children ).to.have.length( 2 );
-		expect( result.props.children[1].props.children[0] ).to.equal( '128 characters remaining' );
+		expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '128 characters remaining' );
 	} );
 
 	it( 'should render additional panel content when set', function() {
@@ -133,7 +133,7 @@ describe( 'index', function() {
 
 		expect( result.props.className ).to.equal( 'counted-textarea' );
 		expect( result.props.children ).to.have.length( 2 );
-		expect( result.props.children[1].props.children[0] ).to.equal( '128 characters remaining' );
-		expect( result.props.children[1].props.children[1][1] ).to.equal( 'Extra stuff' );
+		expect( result.props.children[ 1 ].props.children[ 0 ] ).to.equal( '128 characters remaining' );
+		expect( result.props.children[ 1 ].props.children[ 1 ][ 1 ] ).to.equal( 'Extra stuff' );
 	} );
 } );

client/components/forms/multi-checkbox/test/index.jsx

@@ -31,34 +31,34 @@ describe( 'index', function() {
 		} );
 
 		it( 'should accept an array of checked values', function() {
-			var checkboxes = TestUtils.renderIntoDocument( <MultiCheckbox name="favorite_colors" options={ options } checked={ [ options[0].value ] } /> ),
+			var checkboxes = TestUtils.renderIntoDocument( <MultiCheckbox name="favorite_colors" options={ options } checked={ [ options[ 0 ].value ] } /> ),
 				labels = TestUtils.scryRenderedDOMComponentsWithTag( checkboxes, 'label' );
 
-			assert.equal( true, labels[0].querySelector( 'input' ).checked );
-			assert.equal( false, labels[1].querySelector( 'input' ).checked );
+			assert.equal( true, labels[ 0 ].querySelector( 'input' ).checked );
+			assert.equal( false, labels[ 1 ].querySelector( 'input' ).checked );
 		} );
 
 		it( 'should accept an array of defaultChecked', function() {
-			var checkboxes = TestUtils.renderIntoDocument( <MultiCheckbox name="favorite_colors" options={ options } defaultChecked={ [ options[0].value ] } /> ),
+			var checkboxes = TestUtils.renderIntoDocument( <MultiCheckbox name="favorite_colors" options={ options } defaultChecked={ [ options[ 0 ].value ] } /> ),
 				labels = TestUtils.scryRenderedDOMComponentsWithTag( checkboxes, 'label' );
 
-			assert.equal( true, labels[0].querySelector( 'input' ).checked );
-			assert.equal( false, labels[1].querySelector( 'input' ).checked );
+			assert.equal( true, labels[ 0 ].querySelector( 'input' ).checked );
+			assert.equal( false, labels[ 1 ].querySelector( 'input' ).checked );
 		} );
 
 		it( 'should accept an onChange event handler', function( done ) {
 			var checkboxes = TestUtils.renderIntoDocument( <MultiCheckbox name="favorite_colors" options={ options } onChange={ finishTest } /> ),
 				labels = TestUtils.scryRenderedDOMComponentsWithTag( checkboxes, 'label' );
 
-			TestUtils.Simulate.change( labels[0].querySelector( 'input' ), {
+			TestUtils.Simulate.change( labels[ 0 ].querySelector( 'input' ), {
 				target: {
-					value: options[0].value,
+					value: options[ 0 ].value,
 					checked: true
 				}
 			} );
 
 			function finishTest( event ) {
-				assert.deepEqual( [ options[0].value ], event.value );
+				assert.deepEqual( [ options[ 0 ].value ], event.value );
 				done();
 			}
 		} );
@@ -67,8 +67,8 @@ describe( 'index', function() {
 			var checkboxes = TestUtils.renderIntoDocument( <MultiCheckbox name="favorite_colors" options={ options } disabled={ true } /> ),
 				labels = TestUtils.scryRenderedDOMComponentsWithTag( checkboxes, 'label' );
 
-			assert.ok( labels[0].querySelector( 'input' ).disabled );
-			assert.ok( labels[1].querySelector( 'input' ).disabled );
+			assert.ok( labels[ 0 ].querySelector( 'input' ).disabled );
+			assert.ok( labels[ 1 ].querySelector( 'input' ).disabled );
 		} );
 
 		it( 'should transfer props to the rendered element', function() {

client/components/forms/range/test/index.jsx

@@ -28,7 +28,7 @@ describe( 'index', function() {
 			content = TestUtils.scryRenderedDOMComponentsWithClass( range, 'range__content' );
 
 		expect( content ).to.have.length( 1 );
-		expect( content[0].getAttribute( 'class' ) ).to.contain( 'is-min' );
+		expect( content[ 0 ].getAttribute( 'class' ) ).to.contain( 'is-min' );
 	} );
 
 	it( 'should render ending content if passed a `maxContent` prop', function() {
@@ -41,7 +41,7 @@ describe( 'index', function() {
 			content = TestUtils.scryRenderedDOMComponentsWithClass( range, 'range__content' );
 
 		expect( content ).to.have.length( 1 );
-		expect( content[0].getAttribute( 'class' ) ).to.contain( 'is-max' );
+		expect( content[ 0 ].getAttribute( 'class' ) ).to.contain( 'is-max' );
 	} );
 
 	it( 'should render a value label if passed a truthy `showValueLabel` prop', function() {

client/components/site-users-fetcher/index.jsx

@@ -102,9 +102,9 @@ module.exports = React.createClass( {
 		}
 
 		return Object.assign( {}, paginationData, {
-			users: this.props.exclude ? users[0] : users,
+			users: this.props.exclude ? users[ 0 ] : users,
 			fetchOptions: fetchOptions,
-			excludedUsers: this.props.exclude ? users[1] : []
+			excludedUsers: this.props.exclude ? users[ 1 ] : []
 		} );
 	},
 

client/components/theme/test/index.jsx

@@ -61,16 +61,16 @@ describe( 'Theme', function() {
 				assert( this.themeNode.nodeName === 'DIV', 'nodeName doesn\'t equal "DIV"' );
 				assert.include( this.themeNode.className, 'theme is-actionable', 'className does not contain "theme is-actionable"' );
 
-				assert( this.themeNode.getElementsByTagName( 'h2' )[0].textContent === 'Theme name' );
+				assert( this.themeNode.getElementsByTagName( 'h2' )[ 0 ].textContent === 'Theme name' );
 			} );
 
 			it( 'should render a screenshot', function() {
-				var imgNode = this.themeNode.getElementsByTagName( 'img' )[0];
+				var imgNode = this.themeNode.getElementsByTagName( 'img' )[ 0 ];
 				assert.include( imgNode.getAttribute( 'src' ), '/theme/screenshot.png' );
 			} );
 
 			it( 'should call onScreenshotClick() on click on screenshot', function() {
-				var imgNode = this.themeNode.getElementsByTagName( 'img' )[0];
+				var imgNode = this.themeNode.getElementsByTagName( 'img' )[ 0 ];
 				TestUtils.Simulate.click( imgNode );
 				assert( this.props.onScreenshotClick.calledOnce, 'onClick did not trigger onScreenshotClick' );
 			} );
@@ -83,8 +83,8 @@ describe( 'Theme', function() {
 				var more = this.themeNode.getElementsByClassName( 'theme__more-button' );
 
 				assert( more.length === 1, 'More button container not found' );
-				assert( more[0].getElementsByTagName( 'button' ).length === 1, 'More button not found' );
-				TestUtils.Simulate.click( more[0].getElementsByTagName( 'button' )[0] );
+				assert( more[ 0 ].getElementsByTagName( 'button' ).length === 1, 'More button not found' );
+				TestUtils.Simulate.click( more[ 0 ].getElementsByTagName( 'button' )[ 0 ] );
 				assert( togglePopoverStub.calledOnce, 'More button press does not trigger state toggle' );
 			} );
 		} );
@@ -128,7 +128,7 @@ describe( 'Theme', function() {
 		} );
 
 		it( 'should show a price', function() {
-			assert( this.themeNode.getElementsByClassName( 'theme-badge__price' )[0].textContent === '$50' );
+			assert( this.themeNode.getElementsByClassName( 'theme-badge__price' )[ 0 ].textContent === '$50' );
 		} );
 	} );
 } );

client/components/tinymce/plugins/after-the-deadline/core.js

@@ -47,18 +47,18 @@ AtDCore.prototype.showTypes = function( strings ) {
 	/* set some default types that we want to make optional */
 
 	/* grammar checker options */
-	types['Double Negatives'] = 1;
-	types['Hidden Verbs'] = 1;
-	types['Passive voice'] = 1;
-	types['Bias Language'] = 1;
+	types[ 'Double Negatives' ] = 1;
+	types[ 'Hidden Verbs' ] = 1;
+	types[ 'Passive voice' ] = 1;
+	types[ 'Bias Language' ] = 1;
 
 	/* style checker options */
-	types['Cliches'] = 1; // eslint-disable-line dot-notation
-	types['Complex Expression'] = 1;
-	types['Diacritical Marks'] = 1;
-	types['Jargon Language'] = 1;
-	types['Phrases to Avoid'] = 1;
-	types['Redundant Expression'] = 1;
+	types[ 'Cliches' ] = 1; // eslint-disable-line dot-notation
+	types[ 'Complex Expression' ] = 1;
+	types[ 'Diacritical Marks' ] = 1;
+	types[ 'Jargon Language' ] = 1;
+	types[ 'Phrases to Avoid' ] = 1;
+	types[ 'Redundant Expression' ] = 1;
 
 	this.map( show_types, function( type ) {
 		types[ type ] = undefined;
@@ -104,7 +104,7 @@ AtDCore.prototype.addToErrorStructure = function( errors, list, type, seps ) {
 	this.map( list, function( error ) {
 		var tokens = error.word.split( /\s+/ );
 		var pre = error.pre;
-		var first = tokens[0];
+		var first = tokens[ 0 ];
 
 		if ( errors[ '__' + first ] === undefined ) {
 			errors[ '__' + first ] = {};
@@ -155,7 +155,7 @@ AtDCore.prototype.processXML = function( responseXML ) {
 	types = {};
 
 	this.map( this.ignore_types, function( type ) {
-		types[type] = 1;
+		types[ type ] = 1;
 	} );
 
 	/* save suggestions in the editor object */
@@ -212,7 +212,7 @@ AtDCore.prototype.processXML = function( responseXML ) {
 					suggestion.moreinfo = errorUrl + '&theme=tinymce';
 				}
 
-				if ( types[errorDescription] === undefined ) {
+				if ( types[ errorDescription ] === undefined ) {
 					if ( errorType === 'suggestion' ) {
 						enrichment.push( { word: errorString, pre: errorContext } );
 					}
@@ -284,18 +284,18 @@ function TokenIterator( tokens ) {
 }
 
 TokenIterator.prototype.next = function() {
-	var current = this.tokens[this.index];
+	var current = this.tokens[ this.index ];
 	this.count = this.last;
 	this.last += current.length + 1;
 	this.index++;
 
 	/* strip single quotes from token, AtD does this when presenting errors */
 	if ( current !== '' ) {
-		if ( current[0] === '\'' ) {
+		if ( current[ 0 ] === '\'' ) {
 			current = current.substring( 1, current.length );
 		}
 
-		if ( current[current.length - 1] === '\'' ) {
+		if ( current[ current.length - 1 ] === '\'' ) {
 			current = current.substring( 0, current.length - 1 );
 		}
 	}
@@ -316,7 +316,7 @@ TokenIterator.prototype.skip = function( m, n ) {
 	this.last += n;
 
 	if ( this.index < this.tokens.length ) {
-		this.count = this.last - this.tokens[this.index].length;
+		this.count = this.last - this.tokens[ this.index ].length;
 	}
 };
 
@@ -376,9 +376,9 @@ AtDCore.prototype.markMyWords = function( container_nodes, errors ) {
 		}
 
 		// capture the replacement of the matched string
-		captured.push( parent.create( match[0].replace( regexp, replacement ) ) );
+		captured.push( parent.create( match[ 0 ].replace( regexp, replacement ) ) );
 
-		cursor = index + match[0].length;
+		cursor = index + match[ 0 ].length;
 
 		if ( cursor < text.length ) {
 			// capture right text node
@@ -414,11 +414,11 @@ AtDCore.prototype.markMyWords = function( container_nodes, errors ) {
 
 			while ( iterator.hasNext() ) {
 				token = iterator.next();
-				current = errors['__' + token];
+				current = errors[ '__' + token ];
 
 				if ( current !== undefined && current.pretoks !== undefined ) {
 					defaults = current.defaults;
-					current = current.pretoks['__' + previous];
+					current = current.pretoks[ '__' + previous ];
 
 					done = false;
 					prev = v.substr( 0, iterator.getCount() );
@@ -453,8 +453,8 @@ AtDCore.prototype.markMyWords = function( container_nodes, errors ) {
 				newNode = n;
 
 				for ( x = 0; x < doReplaces.length; x++ ) {
-					regexp = doReplaces[x][0];
-					result = doReplaces[x][1];
+					regexp = doReplaces[ x ][ 0 ];
+					result = doReplaces[ x ][ 1 ];
 
 					/* it's assumed that this function is only being called on text nodes (nodeType == 3), the iterating is necessary
 					   because eventually the whole thing gets wrapped in an mceItemHidden span and from there it's necessary to
@@ -498,14 +498,14 @@ AtDCore.prototype.markMyWords = function( container_nodes, errors ) {
 						contents = parent.contents( node );
 
 						for ( y = 0; y < contents.length; y++ ) {
-							if ( contents[y].nodeType === 3 && regexp.test( contents[y].nodeValue ) ) {
-								if ( parent.isIE() && contents[y].nodeValue.length > 0 && contents[y].nodeValue.substr( 0, 1 ) === ' ' ) {
-									nnode = parent.create( emptySpan + contents[y].nodeValue.substr( 1, contents[y].nodeValue.length - 1 ).replace( regexp, result ), true );
+							if ( contents[ y ].nodeType === 3 && regexp.test( contents[ y ].nodeValue ) ) {
+								if ( parent.isIE() && contents[ y ].nodeValue.length > 0 && contents[ y ].nodeValue.substr( 0, 1 ) === ' ' ) {
+									nnode = parent.create( emptySpan + contents[ y ].nodeValue.substr( 1, contents[ y ].nodeValue.length - 1 ).replace( regexp, result ), true );
 								} else {
-									nnode = parent.create( contents[y].nodeValue.replace( regexp, result ), true );
+									nnode = parent.create( contents[ y ].nodeValue.replace( regexp, result ), true );
 								}
 
-								parent.replaceWith( contents[y], nnode );
+								parent.replaceWith( contents[ y ], nnode );
 								parent.removeParent( nnode );
 
 								ecount++;

client/components/tinymce/plugins/after-the-deadline/plugin.js

@@ -186,7 +186,7 @@ function plugin( editor ) {
 			i = nodes.length;
 
 		while ( i-- ) { // reversed
-			node = nodes[i];
+			node = nodes[ i ];
 
 			if ( node.className && regex.test( node.className ) ) {
 				editor.dom.remove( node, true );

client/components/tinymce/plugins/insert-menu/plugin.jsx

@@ -24,12 +24,12 @@ const initialize = editor => {
 		type: 'splitbutton',
 		title: i18n.translate( 'Insert content' ),
 		classes: 'btn wpcom-insert-menu insert-menu',
-		cmd: menuItems[0].cmd,
+		cmd: menuItems[ 0 ].cmd,
 		menu: menuItems.map( ( { name } ) => editor.menuItems[ name ] ),
 		onPostRender() {
 			ReactDOM.render(
 				<Gridicon icon="add-outline" />,
-				this.$el[0].children[0]
+				this.$el[ 0 ].children[ 0 ]
 			);
 		}
 	} );