test: add options test cases

Author: 43081j

docs/rules/no-add-event-listener.md

@@ -19,9 +19,20 @@ This rule reports usages of `addEventListener`:
 <!--eslint-skip-->
 
 ```svelte
+<!-- ✓ GOOD -->
 <script>
   /* eslint svelte/no-add-event-listener: "error" */
-  addEventListener(window, 'resize', handler);
+  on(window, 'resize', handler);
+</script>
+```
+
+<!--eslint-skip-->
+
+```svelte
+<!-- ✗ BAD -->
+<script>
+  /* eslint svelte/no-add-event-listener: "error" */
+  window.addEventListener('resize', handler);
 </script>
 ```
 

packages/eslint-plugin-svelte/src/rules/no-add-event-listener.ts

@@ -30,7 +30,7 @@ export default createRule('no-add-event-listener', {
 				const { callee, arguments: args } = node;
 				let target: string | null = null;
 
-				if (args.length !== 2) {
+				if (args.length < 2 || args.length > 3) {
 					return;
 				}
 

packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-errors.yaml

@@ -33,6 +33,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -71,6 +74,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -109,6 +115,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -147,6 +156,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -185,6 +197,9 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -223,6 +238,9 @@
         	on    (window, 'message', handler);
         	// with a comment
         	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>
@@ -261,6 +279,50 @@
         	window.addEventListener    ('message', handler);
         	// with a comment
         	on/* foo */(window, 'message', handler);
+
+        	// with options
+        	window.addEventListener('message', handler, { once: true });
+        </script>
+
+        <button onclick={onClick}>Hello</button>
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 31
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script>
+        	const handler = (ev) => {
+        		console.log(ev);
+        	};
+
+        	function onClick(event) {
+        		const target = event.currentTarget;
+
+        		const deepObj = {
+        			deep: {
+        				obj: {
+        					target
+        				}
+        			}
+        		};
+
+        		target.addEventListener('focus', handler);
+        		deepObj.deep.obj.target.addEventListener('focus', handler);
+        	}
+
+        	addEventListener('message', handler);
+        	window.addEventListener('message', handler);
+        	document.addEventListener('visibilitychange', handler);
+
+        	// with a load of whitespace
+        	window.addEventListener    ('message', handler);
+        	// with a comment
+        	window.addEventListener/* foo */('message', handler);
+
+        	// with options
+        	on(window, 'message', handler, { once: true });
         </script>
 
         <button onclick={onClick}>Hello</button>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/test01-input.svelte

@@ -26,6 +26,9 @@
 	window.addEventListener    ('message', handler);
 	// with a comment
 	window.addEventListener/* foo */('message', handler);
+
+	// with options
+	window.addEventListener('message', handler, { once: true });
 </script>
 
 <button onclick={onClick}>Hello</button>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-errors.yaml

@@ -0,0 +1,17 @@
+- message: Do not use `addEventListener`. Use the `on` function from
+    `svelte/events` instead.
+  line: 6
+  column: 2
+  suggestions:
+    - desc: Use `on` from `svelte/events` instead
+      output: |
+        <script lang="ts">
+        	const handler = (ev: Event) => {
+        		console.log(ev);
+        	};
+
+        	on(window as any, 'message', handler);
+        	(window.addEventListener as any)('message', handler);
+        </script>
+
+        <div>Hello</div>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-add-event-listener/invalid/typescript01-input.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	const handler = (ev: Event) => {
+		console.log(ev);
+	};
+
+	(window as any).addEventListener('message', handler);
+	(window.addEventListener as any)('message', handler);
+</script>
+
+<div>Hello</div>