fix(rules): Only report prefer-to-have-value errors on accepted queries (#133)

* fix(rules): Only report prefer-to-have-value errors on accepted queries

* Apply suggestions from code review

Co-authored-by: Ben Monro <[email protected]>

Author: juzerzarif

src/__tests__/lib/rules/prefer-to-have-value.js

@@ -20,6 +20,10 @@ const ruleTester = new RuleTester({ parserOptions: { ecmaVersion: 2020 } });
 const errors = [{ messageId: "use-to-have-value" }];
 ruleTester.run("prefer-to-have-value", rule, {
   valid: [
+    `expect(screen.getByRole("radio").value).toEqual("foo")`,
+    `expect(screen.queryAllByRole("checkbox")[0].value).toStrictEqual("foo")`,
+    `async function x() { expect((await screen.findByRole("button")).value).toBe("foo") }`,
+
     `expect(element).toHaveValue('foo')`,
     `expect(element.value).toBeGreaterThan(2);`,
     `expect(element.value).toBeLessThan(2);`,
@@ -34,6 +38,10 @@ ruleTester.run("prefer-to-have-value", rule, {
     `const element = { value: 'foo' };
     expect(element.value).toBe('foo');`,
 
+    `expect(screen.getByRole("radio").value).not.toEqual("foo")`,
+    `expect(screen.queryAllByRole("checkbox")[0].value).not.toStrictEqual("foo")`,
+    `async function x() { expect((await screen.findByRole("button")).value).not.toBe("foo") }`,
+
     `const element = document.getElementById('asdfasf');
     expect(element.value).not.toEqual('foo');`,
 
@@ -106,118 +114,5 @@ ruleTester.run("prefer-to-have-value", rule, {
       errors,
       output: `const element = screen.getByRole("textbox"); expect(element).not.toHaveValue("foo");`,
     },
-    //==========================================================================
-    {
-      code: `expect(screen.getByTestId('bananas').value).toEqual('foo')`,
-      errors: [
-        {
-          ...errors[0],
-          suggestions: [
-            {
-              desc: "Replace toEqual with toHaveValue",
-              output: `expect(screen.getByTestId('bananas')).toHaveValue('foo')`,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      code: `expect(screen.queryByTestId('bananas').value).toBe('foo')`,
-      errors: [
-        {
-          ...errors[0],
-          suggestions: [
-            {
-              desc: "Replace toBe with toHaveValue",
-              output: `expect(screen.queryByTestId('bananas')).toHaveValue('foo')`,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      code: `async function x() { expect((await screen.findByTestId("bananas")).value).toStrictEqual("foo") }`,
-      errors: [
-        {
-          ...errors[0],
-          suggestions: [
-            {
-              desc: "Replace toStrictEqual with toHaveValue",
-              output: `async function x() { expect((await screen.findByTestId("bananas"))).toHaveValue("foo") }`,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      code: `let element; element = screen.getByTestId('bananas'); expect(element.value).toEqual('foo');`,
-      errors: [
-        {
-          ...errors[0],
-          suggestions: [
-            {
-              desc: "Replace toEqual with toHaveValue",
-              output: `let element; element = screen.getByTestId('bananas'); expect(element).toHaveValue('foo');`,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      code: `expect(screen.getByTestId('bananas').value).not.toEqual('foo')`,
-      errors: [
-        {
-          ...errors[0],
-          suggestions: [
-            {
-              desc: "Replace toEqual with toHaveValue",
-              output: `expect(screen.getByTestId('bananas')).not.toHaveValue('foo')`,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      code: `expect(screen.queryByTestId('bananas').value).not.toBe('foo')`,
-      errors: [
-        {
-          ...errors[0],
-          suggestions: [
-            {
-              desc: "Replace toBe with toHaveValue",
-              output: `expect(screen.queryByTestId('bananas')).not.toHaveValue('foo')`,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      code: `async function x() { expect((await screen.findByTestId("bananas")).value).not.toStrictEqual("foo") }`,
-      errors: [
-        {
-          ...errors[0],
-          suggestions: [
-            {
-              desc: "Replace toStrictEqual with toHaveValue",
-              output: `async function x() { expect((await screen.findByTestId("bananas"))).not.toHaveValue("foo") }`,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      code: `let element; element = screen.getByTestId('bananas'); expect(element.value).not.toEqual('foo');`,
-      errors: [
-        {
-          ...errors[0],
-          suggestions: [
-            {
-              desc: "Replace toEqual with toHaveValue",
-              output: `let element; element = screen.getByTestId('bananas'); expect(element).not.toHaveValue('foo');`,
-            },
-          ],
-        },
-      ],
-    },
   ],
 });

src/rules/prefer-to-have-value.js

@@ -24,21 +24,17 @@ export const meta = {
 const messageId = "use-to-have-value";
 
 export const create = (context) => {
-  function validateQueryNode(nodeWithValueProp) {
+  function isValidQueryNode(nodeWithValueProp) {
     const { query, queryArg, isDTLQuery } = getQueryNodeFrom(
       context,
       nodeWithValueProp
     );
-    if (!query) {
-      return {
-        isDTLQuery: false,
-        isValidElement: false,
-      };
-    }
-    const isValidElement =
-      query.match(/^(get|find|query)ByRole$/) &&
-      ["textbox", "dropdown"].includes(queryArg);
-    return { isDTLQuery, isValidElement };
+    return (
+      !!query &&
+      isDTLQuery &&
+      !!query.match(/^(get|find|query)(All)?ByRole$/) &&
+      ["textbox", "dropdown"].includes(queryArg)
+    );
   }
   return {
     // expect(element.value).toBe('foo') / toEqual / toStrictEqual
@@ -50,28 +46,18 @@ export const create = (context) => {
       const valueProp = node.callee.object.arguments[0].property;
       const matcher = node.callee.property;
       const queryNode = node.callee.object.arguments[0].object;
-      const { isDTLQuery, isValidElement } = validateQueryNode(queryNode);
 
-      function fix(fixer) {
-        return [
-          fixer.remove(context.getSourceCode().getTokenBefore(valueProp)),
-          fixer.remove(valueProp),
-          fixer.replaceText(matcher, "toHaveValue"),
-        ];
-      }
-      if (isDTLQuery) {
+      if (isValidQueryNode(queryNode)) {
         context.report({
           messageId,
           node,
-          fix: isValidElement ? fix : undefined,
-          suggest: isValidElement
-            ? undefined
-            : [
-                {
-                  desc: `Replace ${matcher.name} with toHaveValue`,
-                  fix,
-                },
-              ],
+          fix(fixer) {
+            return [
+              fixer.remove(context.getSourceCode().getTokenBefore(valueProp)),
+              fixer.remove(valueProp),
+              fixer.replaceText(matcher, "toHaveValue"),
+            ];
+          },
         });
       }
     },
@@ -86,29 +72,19 @@ export const create = (context) => {
       const valueProp = node.callee.object.object.arguments[0].property;
       const matcher = node.callee.property;
 
-      const { isDTLQuery, isValidElement } = validateQueryNode(queryNode);
-      function fix(fixer) {
-        return [
-          fixer.removeRange([
-            context.getSourceCode().getTokenBefore(valueProp).range[0],
-            valueProp.range[1],
-          ]),
-          fixer.replaceText(matcher, "toHaveValue"),
-        ];
-      }
-      if (isDTLQuery) {
+      if (isValidQueryNode(queryNode)) {
         context.report({
           messageId,
           node,
-          fix: isValidElement ? fix : undefined,
-          suggest: isValidElement
-            ? undefined
-            : [
-                {
-                  desc: `Replace ${matcher.name} with toHaveValue`,
-                  fix,
-                },
-              ],
+          fix(fixer) {
+            return [
+              fixer.removeRange([
+                context.getSourceCode().getTokenBefore(valueProp).range[0],
+                valueProp.range[1],
+              ]),
+              fixer.replaceText(matcher, "toHaveValue"),
+            ];
+          },
         });
       }
     },