fix: use @testing-library/dom native methods for suggestion btns

devtools/src/devtools/components/MenuBar.js

@@ -37,7 +37,7 @@ function MenuBar({ cssPath, suggestion }) {
         className="focus:outline-none"
         title="Inspect the matching DOM element"
         disabled={!cssPath}
-        onClick={() => inspectedWindow.inspect(cssPath)}
+        onClick={() => inspectedWindow.inspect(cssPath.toString())}
       >
         <InspectIcon />
       </button>

package.json

@@ -37,7 +37,7 @@
     "postversion": "git push && git push --tags && git checkout master && git merge develop --ff && git push && git checkout -"
   },
   "dependencies": {
-    "@testing-library/dom": "^7.12.0",
+    "@testing-library/dom": "^7.15.0",
     "codemirror": "5.54.0",
     "crx-bridge": "^2.1.0",
     "deep-diff": "^1.0.2",

src/components/Result.js

@@ -3,7 +3,6 @@ import ErrorBox from './ErrorBox';
 import ResultQueries from './ResultQueries';
 import ResultSuggestion from './ResultSuggestion';
 import Scrollable from './Scrollable';
-import { emptyResult } from '../lib';
 
 function Result({ result, dispatch }) {
   if (result.error) {
@@ -37,9 +36,7 @@ function Result({ result, dispatch }) {
       </div>
     );
   }
-
-  const { data, suggestion } = result.elements?.[0] || emptyResult;
-
+  const { data, suggestion, queries } = result.elements[0];
   return (
     <div className="flex flex-col w-full h-full overflow-hidden">
       <div className="flex-none pb-4 border-b">
@@ -55,6 +52,7 @@ function Result({ result, dispatch }) {
         <Scrollable>
           <ResultQueries
             data={data}
+            possibleQueries={queries}
             suggestion={suggestion}
             activeMethod={result.expression?.method}
             dispatch={dispatch}

src/components/ResultQueries.js

@@ -1,22 +1,30 @@
 import React from 'react';
-import { getExpression, getFieldName } from '../lib';
+import { getFieldName } from '../lib';
+import { queries } from '../constants';
 
 function Section({ children }) {
   return <div className="space-y-3">{children}</div>;
 }
 
 function Heading({ children }) {
-  return <h3 className="font-bold text-xs">{children}</h3>;
+  return <h3 className="text-xs font-bold">{children}</h3>;
 }
 
-const Field = React.memo(function Field({ method, data, dispatch, active }) {
+const Field = React.memo(function Field({
+  data,
+  method,
+  query,
+  dispatch,
+  active,
+}) {
   const field = getFieldName(method);
   const value = data[field];
-
   const handleClick = value
     ? () => {
-        const expression = getExpression({ method, data });
-        dispatch({ type: 'SET_QUERY', query: expression });
+        dispatch({
+          type: 'SET_QUERY',
+          query: `screen.${query.toString()}`,
+        });
       }
     : undefined;
 
@@ -26,7 +34,7 @@ const Field = React.memo(function Field({ method, data, dispatch, active }) {
       data-clickable={!!handleClick}
       onClick={handleClick}
     >
-      <div className="text-gray-800 font-light">{field}</div>
+      <div className="font-light text-gray-800">{field}</div>
       <div className="truncate">
         {value || <span className="text-gray-400">n/a</span>}
       </div>
@@ -35,68 +43,62 @@ const Field = React.memo(function Field({ method, data, dispatch, active }) {
 });
 
 // for inputs, the role will only work if there is also a type attribute
-function ResultQueries({ data, dispatch, activeMethod }) {
+function ResultQueries({ data, possibleQueries, dispatch, activeMethod }) {
   return (
     <div className="grid grid-cols-2 gap-4 pt-4">
       <Section>
         <Heading>1. Queries Accessible to Everyone</Heading>
-        <Field
-          method="getByRole"
-          data={data}
-          dispatch={dispatch}
-          active={'getByRole' === activeMethod}
-        />
-        <Field
-          method="getByLabelText"
-          data={data}
-          dispatch={dispatch}
-          active={'getByLabelText' === activeMethod}
-        />
-        <Field
-          method="getByPlaceholderText"
-          data={data}
-          dispatch={dispatch}
-          active={'getByPlaceholderText' === activeMethod}
-        />
-        <Field
-          method="getByText"
-          data={data}
-          dispatch={dispatch}
-          active={'getByText' === activeMethod}
-        />
-        <Field
-          method="getByDisplayValue"
-          data={data}
-          dispatch={dispatch}
-          active={'getByDisplayValue' === activeMethod}
-        />
+        {queries
+          .filter((query) => query.type === 'ACCESSIBLE')
+          .map((query) => {
+            return (
+              <Field
+                key={query.method}
+                data={data}
+                method={query.method}
+                query={possibleQueries[query.method]}
+                dispatch={dispatch}
+                active={query.method === activeMethod}
+              />
+            );
+          })}
       </Section>
 
       <div className="space-y-8">
         <Section>
           <Heading>2. Semantic Queries</Heading>
-          <Field
-            method="getByAltText"
-            data={data}
-            dispatch={dispatch}
-            active={'getByAltText' === activeMethod}
-          />
-          <Field
-            method="getByTitle"
-            data={data}
-            dispatch={dispatch}
-            active={'getByTitle' === activeMethod}
-          />
+          {queries
+            .filter((query) => query.type === 'SEMANTIC')
+            .map((query) => {
+              return (
+                <Field
+                  key={query.method}
+                  data={data}
+                  method={query.method}
+                  query={possibleQueries[query.method]}
+                  dispatch={dispatch}
+                  active={query.method === activeMethod}
+                />
+              );
+            })}
         </Section>
 
         <Section>
           <Heading>3. TestId</Heading>
-          <Field
-            method="getByTestId"
-            data={data}
-            dispatch={dispatch}
-            active={'getByTestId' === activeMethod}
-          />
+          {queries
+            .filter((query) => query.type === 'TEST')
+            .map((query) => {
+              return (
+                <Field
+                  key={query.method}
+                  data={data}
+                  method={query.method}
+                  query={possibleQueries[query.method]}
+                  dispatch={dispatch}
+                  active={query.method === activeMethod}
+                />
+              );
+            })}
         </Section>
       </div>
     </div>

src/constants.js

@@ -25,18 +25,22 @@ screen.getByRole('button')
 };
 
 export const queries = [
-  { method: 'getByRole', level: 0 },
-  { method: 'getByLabelText', level: 0 },
-  { method: 'getByPlaceholderText', level: 0 },
-  { method: 'getByText', level: 0 },
-  { method: 'getByDisplayValue', level: 0 },
+  { method: 'getByRole', level: 0, type: 'ACCESSIBLE' },
+  { method: 'getByLabelText', level: 0, type: 'ACCESSIBLE' },
+  {
+    method: 'getByPlaceholderText',
+    level: 0,
+    type: 'ACCESSIBLE',
+  },
+  { method: 'getByText', level: 0, type: 'ACCESSIBLE' },
+  { method: 'getByDisplayValue', level: 0, type: 'ACCESSIBLE' },
 
-  { method: 'getByAltText', level: 1 },
-  { method: 'getByTitle', level: 1 },
+  { method: 'getByAltText', level: 1, type: 'SEMANTIC' },
+  { method: 'getByTitle', level: 1, type: 'SEMANTIC' },
 
-  { method: 'getByTestId', level: 2 },
+  { method: 'getByTestId', level: 2, type: 'TEST' },
 
-  { method: 'querySelector', level: 3 },
+  { method: 'querySelector', level: 3, type: 'GENERIC' },
 ];
 
 // some quotes from https://testing-library.com/docs/guide-which-query

src/lib/getFieldName.js

@@ -0,0 +1,19 @@
+export function wrapInQuotes(val) {
+  if (!val.includes(`'`)) {
+    return `'${val}'`;
+  }
+
+  if (!val.includes('"')) {
+    return `"${val}"`;
+  }
+
+  if (!val.includes('`')) {
+    return `\`${val}\``;
+  }
+
+  return `'${val.replace(/'/g, `\\'`)}'`;
+}
+
+export function getFieldName(method) {
+  return method[5].toLowerCase() + method.substr(6);
+}

src/lib/index.js

@@ -1,3 +1,3 @@
 export * from './ensureArray';
-export * from './getExpression';
+export * from './getFieldName';
 export * from './queryAdvise';

src/lib/queryAdvise.js

@@ -2,6 +2,7 @@ import { messages, queries } from '../constants';
 import { computeAccessibleName, getRole } from 'dom-accessibility-api';
 import { getSuggestedQuery } from '@testing-library/dom';
 import cssPath from './cssPath';
+import { getFieldName } from './';
 
 export function getData({ rootNode, element }) {
   const type = element.getAttribute('type');
@@ -80,3 +81,19 @@ export function getQueryAdvise({ rootNode, element }) {
     suggestion,
   };
 }
+
+export function getAllPossibileQueries(element) {
+  const possibleQueries = queries
+    .filter((query) => query.type !== 'GENERIC')
+    .map((query) => {
+      const method = getFieldName(query.method);
+      return getSuggestedQuery(element, 'get', method);
+    })
+    .filter((suggestedQuery) => suggestedQuery !== undefined)
+    .reduce((obj, suggestedQuery) => {
+      obj[suggestedQuery.queryMethod] = suggestedQuery;
+      return obj;
+    }, {});
+
+  return possibleQueries;
+}