feat: add support for scoped queries (#258)

Author: smeijer

devtools/src/content-script/contentScript.js

@@ -2,10 +2,11 @@ import Bridge from 'crx-bridge';
 import setupHighlighter from './highlighter';
 
 import parser from '../../../src/parser';
-import { getQueryAdvise } from '../../../src/lib';
+import { getAllPossibleQueries } from '../../../src/lib';
 import inject from './lib/inject';
 import { setup } from '../window/testing-library';
 import onDocReady from './lib/onDocReady';
+import cssPath from '../../../src/lib/cssPath';
 
 function init() {
   inject('../window/testing-library.js');
@@ -17,17 +18,22 @@ function init() {
   hook.highlighter = setupHighlighter({ view: window, onSelectNode });
 
   function onSelectNode(node) {
-    const { data, suggestion } = getQueryAdvise({
+    const queries = getAllPossibleQueries({
       rootNode: document.body,
       element: node,
     });
 
-    const result = parser.parse({
-      rootNode: document.body,
-      query: suggestion.expression,
-    });
+    const suggestion = Object.values(queries).find(Boolean);
 
-    Bridge.sendMessage('SELECT_NODE', { result, data, suggestion }, 'devtools');
+    Bridge.sendMessage(
+      'SELECT_NODE',
+      {
+        suggestion,
+        queries,
+        cssPath: cssPath(node, true).toString(),
+      },
+      'devtools',
+    );
   }
 
   Bridge.onMessage('PARSE_QUERY', function ({ data }) {

devtools/src/devtools/pane.js

@@ -6,13 +6,13 @@ import Result from '../../../src/components/Result';
 import inspectedWindow from './lib/inspectedWindow';
 
 function Panel() {
-  const [{ result }, setResult] = useState({});
+  const [result, setResult] = useState({});
 
   useEffect(() => {
-    Bridge.onMessage('SELECT_NODE', (result) => {
-      setResult(result.data);
+    Bridge.onMessage('SELECT_NODE', ({ data }) => {
+      setResult({ elements: [data] });
     });
-  }, []);
+  }, [setResult]);
 
   const dispatch = (action) => {
     switch (action.type) {

devtools/src/devtools/panel.js

@@ -7,13 +7,13 @@ import Result from '../../../src/components/Result';
 import MenuBar from './components/MenuBar';
 
 function Panel() {
-  const [{ result }, setResult] = useState({ result: {} });
+  const [result, setResult] = useState({});
   const editor = useRef(null);
 
   useEffect(() => {
     Bridge.onMessage('SELECT_NODE', ({ data }) => {
-      setResult(data);
-      editor.current.setValue(data.suggestion?.expression || '');
+      setResult({ elements: [data] });
+      editor.current.setValue(data.suggestion?.snippet || '');
     });
   }, [setResult]);
 
@@ -28,8 +28,8 @@ function Panel() {
               highlight: true,
             },
             'content-script',
-          ).then((data) => {
-            setResult(data);
+          ).then(({ result }) => {
+            setResult(result);
           });
 
           if (action.updateEditor !== false) {

src/components/Expandable.js

@@ -3,7 +3,7 @@ import IconButton from './IconButton';
 import Scrollable from './Scrollable';
 import { ChevronUpIcon, ChevronDownIcon } from '@primer/octicons-react';
 
-function Expandable({ children, className, variant }) {
+function Expandable({ excerpt, children, className, variant }) {
   const [expanded, setExpanded] = useState(false);
 
   return (
@@ -38,7 +38,7 @@ function Expandable({ children, className, variant }) {
         <div>&nbsp;</div>
       ) : (
         <div className="truncate mr-8 w-full flex justify-between direction">
-          {children}
+          {excerpt || children}
         </div>
       )}
 

src/components/Preview.js

@@ -66,7 +66,7 @@ function Preview({ markup, variant, forwardedRef, dispatch }) {
         }
 
         case 'SELECT_NODE': {
-          dispatch({ type: 'SET_QUERY', query: suggestion.expression });
+          dispatch({ type: 'SET_QUERY', query: suggestion.snippet });
           break;
         }
 

src/components/PreviewHint.js

@@ -2,15 +2,17 @@ import React from 'react';
 import Expandable from './Expandable';
 
 function PreviewHint({ roles, suggestion }) {
-  const expression = suggestion?.expression ? (
-    `> ${suggestion.expression}`
+  const expression = suggestion?.snippet ? (
+    suggestion.snippet
   ) : (
     <div>
       <span className="font-bold">accessible roles: </span>
       {roles.join(', ')}
     </div>
   );
 
+  const excerpt = suggestion?.excerpt ? `> ${suggestion.excerpt}` : expression;
+
   const snapshot = suggestion?.snapshot && (
     <div className="snapshot">
       <div className="py-1">&nbsp;</div>
@@ -21,7 +23,10 @@ function PreviewHint({ roles, suggestion }) {
   );
 
   return (
-    <Expandable className="bg-gray-200 text-gray-800 font-mono text-xs rounded fle">
+    <Expandable
+      excerpt={excerpt}
+      className="bg-gray-200 text-gray-800 font-mono text-xs rounded fle"
+    >
       {expression}
       {snapshot}
     </Expandable>

src/components/Result.js

@@ -14,7 +14,6 @@ function Result({ result, dispatch }) {
 
   if (
     !result ||
-    !result.expression ||
     !Array.isArray(result.elements) ||
     result.elements.length === 0
   ) {
@@ -25,23 +24,19 @@ function Result({ result, dispatch }) {
     );
   }
 
-  const { data, suggestion, queries } = result.elements[0];
+  const { queries } = result.elements[0];
   return (
     <div className="flex flex-col w-full h-full overflow-hidden">
       <Scrollable>
         <div className="pb-4 border-b">
           <ResultSuggestion
             result={result}
             dispatch={dispatch}
-            data={data}
-            possibleQueries={queries}
-            suggestion={suggestion}
+            queries={queries}
           />
         </div>
 
         <ResultQueries
-          data={data}
-          suggestion={suggestion}
           activeMethod={result.expression?.method}
           dispatch={dispatch}
           queries={queries}

src/components/ResultQueries.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { getFieldName } from '../lib';
 import { messages as queryGroups } from '../constants';
 
 function Section({ children }) {
@@ -10,52 +9,15 @@ function Heading({ children }) {
   return <h3 className="text-xs font-bold">{children}</h3>;
 }
 
-// The reviver parses serialized regexes back to a real regexp.
-// This function is required if the data comes in via message transport
-// think of the chrome-extension.
-function reviver(obj) {
-  if (typeof obj?.$regexp === 'string') {
-    return new RegExp(obj.$regexp, obj.$flags);
-  }
-
-  return obj;
-}
-
-// we use our own stringify method instead of the one from @testing-library/dom,
-// because it might have been removed for message transport.
-function suggestionToString({ queryMethod, queryArgs } = {}) {
-  if (!queryMethod || !queryArgs) {
-    return '';
-  }
-
-  let [text, options] = queryArgs;
-
-  text = typeof text === 'string' ? `'${text}'` : reviver(text);
-
-  options = options
-    ? `, { ${Object.entries(options)
-        .map(([k, v]) => `${k}: ${reviver(v)}`)
-        .join(', ')} }`
-    : '';
-
-  return `${queryMethod}(${text}${options})`;
-}
-
-const Field = React.memo(function Field({
-  data,
-  method,
-  query,
-  dispatch,
-  active,
-}) {
-  const field = getFieldName(method);
-  const value = data[field];
+const Field = React.memo(function Field({ method, query, dispatch, active }) {
+  const arg = query?.queryArgs[0] || '';
+  const value = arg.source || arg.$regexp || arg;
 
   const handleClick = value
     ? () => {
         dispatch({
           type: 'SET_QUERY',
-          query: `screen.${suggestionToString(query)}`,
+          query: query.snippet,
         });
       }
     : undefined;
@@ -66,24 +28,23 @@ const Field = React.memo(function Field({
       data-clickable={!!handleClick}
       onClick={handleClick}
     >
-      <div className="font-light text-gray-800">{field}</div>
+      <div className="font-light text-gray-800">{method}</div>
       <div className="truncate">
         {value || <span className="text-gray-400">n/a</span>}
       </div>
     </div>
   );
 });
 
-function QueryGroup({ group, queries, heading, activeMethod, dispatch, data }) {
+function QueryGroup({ group, queries, heading, activeMethod, dispatch }) {
   return (
     <Section key={group.type}>
       <Heading>{heading}</Heading>
       {group.queries.map((queryMethod) => (
         <Field
           key={queryMethod}
-          data={data}
-          method={queryMethod}
-          query={queries[queryMethod]}
+          method={queryMethod.replace('getBy', '')}
+          query={queries[queryMethod.replace('getBy', '')]}
           dispatch={dispatch}
           active={queryMethod === activeMethod}
         />

src/components/ResultSuggestion.js

@@ -8,31 +8,50 @@ function Code({ children }) {
   return <span className="font-bold font-mono">{children}</span>;
 }
 
-function ResultSuggestion({ data, suggestion, result, dispatch }) {
+const levels = {
+  Role: 0,
+  LabelText: 0,
+  PlaceholderText: 0,
+  Text: 0,
+  DisplayValue: 0,
+  AltText: 1,
+  Title: 1,
+  TestId: 2,
+  generic: 3,
+};
+
+function ResultSuggestion({ queries, result, dispatch }) {
+  const suggestion = Object.values(queries).find(Boolean);
   const used = result?.expression || {};
 
-  const usingAdvisedMethod = suggestion.method === used.method;
-  const hasNameArg = data.name && used.args?.[1]?.includes('name');
+  if (!suggestion) {
+    return `Hmpf. I'm afraid I don't have any suggestions for you.`;
+  }
+
+  const usingAdvisedMethod = suggestion.queryMethod === used.method;
+  const nameOption = suggestion.queryArgs[1]?.name;
+  const hasNameArg = nameOption && used.args?.[1]?.includes('name');
 
-  const color = usingAdvisedMethod ? 'bg-green-600' : colors[suggestion.level];
+  const level = levels[suggestion.queryName] ?? 3;
+  const color = usingAdvisedMethod ? 'bg-green-600' : colors[level];
 
   const target = result?.target || {};
 
   let message;
 
-  if (suggestion.level < used.level) {
+  if (level < used.level) {
     message = (
       <p>
         You&apos;re using <Code>{used.method}</Code>, which falls under{' '}
         <Code>{messages[used.level].heading}</Code>. Upgrading to{' '}
-        <Code>{suggestion.method}</Code> is recommended.
+        <Code>{suggestion.queryMethod}</Code> is recommended.
       </p>
     );
-  } else if (suggestion.level === 0 && suggestion.method !== used.method) {
+  } else if (level === 0 && suggestion.queryMethod !== used.method) {
     message = (
       <p>
         Nice! <Code>{used.method}</Code> is a great selector! Using{' '}
-        <Code>{suggestion.method}</Code> would still be preferable though.
+        <Code>{suggestion.queryMethod}</Code> would still be preferable though.
       </p>
     );
   } else if (target.tagName === 'INPUT' && !target.getAttribute('type')) {
@@ -44,9 +63,9 @@ function ResultSuggestion({ data, suggestion, result, dispatch }) {
       </p>
     );
   } else if (
-    suggestion.level === 0 &&
-    suggestion.method === 'getByRole' &&
-    !data.name
+    level === 0 &&
+    suggestion.queryMethod === 'getByRole' &&
+    !nameOption
   ) {
     message = (
       <p>
@@ -56,9 +75,9 @@ function ResultSuggestion({ data, suggestion, result, dispatch }) {
       </p>
     );
   } else if (
-    suggestion.level === 0 &&
-    suggestion.method === 'getByRole' &&
-    data.name &&
+    level === 0 &&
+    suggestion.queryMethod === 'getByRole' &&
+    nameOption &&
     !hasNameArg
   ) {
     message = (
@@ -83,23 +102,23 @@ function ResultSuggestion({ data, suggestion, result, dispatch }) {
     <div className="space-y-4 text-sm">
       <div className={['text-white p-4 rounded space-y-2', color].join(' ')}>
         <div className="font-bold text-xs">suggested query</div>
-        {suggestion.expression && (
+        {suggestion.excerpt && (
           <div className="flex justify-between">
             <div
               className="font-mono cursor-pointer text-xs"
               onClick={() =>
                 dispatch({
                   type: 'SET_QUERY',
-                  query: suggestion.expression,
+                  query: suggestion.snippet,
                 })
               }
             >
-              &gt; {suggestion.expression}
+              &gt; {suggestion.excerpt}
               <br />
             </div>
             <CopyButton
               title="copy query"
-              text={suggestion.expression}
+              text={suggestion.snippet}
               variant="white"
             />
           </div>