Rule fix: In no-animate allow stop and finish when allowScroll (#345)

We can't tell what type of animation is being stopped, so assume
it is an allowed scroll.

Author: edg2s

docs/rules/no-animate.md

@@ -49,15 +49,15 @@ $div.animate( { scrollTop: 100 } );
 ```js
 $div.animate();
 $div.animate( { scrollTop: 100, width: 300 } );
-$( 'div' ).stop( { scrollTop: 100, scrollLeft: 200 } );
-$( 'div' ).finish( { scrollTop: 100, scrollLeft: 200 } );
 ```
 
 ✔️ Examples of **correct** code with `[{"allowScroll":true}]` options:
 ```js
 $div.animate( { scrollTop: 100 } );
 $div.animate( { scrollLeft: 200 } );
 $div.animate( { scrollTop: 100, scrollLeft: 200 } );
+$div.animate( { scrollTop: 100 } ).stop();
+$div.animate( { scrollTop: 100 } ).finish();
 ```
 
 ## Resources

src/rules/no-animate.js

@@ -34,16 +34,23 @@ module.exports = {
 				return;
 			}
 			const allowScroll = context.options[ 0 ] && context.options[ 0 ].allowScroll;
-			if ( node.callee.property.name === 'animate' && allowScroll ) {
-				const arg = node.arguments[ 0 ];
-				// Check properties list has more than just scrollTop/scrollLeft
-				if ( arg && arg.type === 'ObjectExpression' ) {
-					if (
-						arg.properties.every(
-							( prop ) => prop.key.name === 'scrollTop' || prop.key.name === 'scrollLeft'
-						)
-					) {
-						return;
+			const name = node.callee.property.name;
+			if ( allowScroll ) {
+				if ( name === 'stop' || name === 'finish' ) {
+					// We can't tell what animation we are stopping, so assume
+					// it is an allowed scroll
+					return;
+				} else if ( name === 'animate' ) {
+					const arg = node.arguments[ 0 ];
+					// Check properties list has more than just scrollTop/scrollLeft
+					if ( arg && arg.type === 'ObjectExpression' ) {
+						if (
+							arg.properties.every(
+								( prop ) => prop.key.name === 'scrollTop' || prop.key.name === 'scrollLeft'
+							)
+						) {
+							return;
+						}
 					}
 				}
 			}

tests/rules/no-animate.js

@@ -32,6 +32,14 @@ ruleTester.run( 'no-animate', rule, {
 		{
 			code: '$div.animate({scrollTop: 100, scrollLeft: 200})',
 			options: [ { allowScroll: true } ]
+		},
+		{
+			code: '$div.animate({scrollTop: 100}).stop()',
+			options: [ { allowScroll: true } ]
+		},
+		{
+			code: '$div.animate({scrollTop: 100}).finish()',
+			options: [ { allowScroll: true } ]
 		}
 	],
 	invalid: [
@@ -89,16 +97,6 @@ ruleTester.run( 'no-animate', rule, {
 			code: '$div.animate({scrollTop: 100, width: 300})',
 			options: [ { allowScroll: true } ],
 			errors: [ errorNoScroll ]
-		},
-		{
-			code: '$("div").stop({scrollTop: 100, scrollLeft: 200})',
-			options: [ { allowScroll: true } ],
-			errors: [ errorNoScroll ]
-		},
-		{
-			code: '$("div").finish({scrollTop: 100, scrollLeft: 200})',
-			options: [ { allowScroll: true } ],
-			errors: [ errorNoScroll ]
 		}
 	]
 } );