review changes

Author: timdeschryver

src/components/ElementInfo.js

@@ -1,44 +1,9 @@
 import React from 'react';
 import { useAppContext } from './Context';
 import QueryAdvise from './QueryAdvise';
+import Queries from './Queries';
 
-import { getExpression, getFieldName, getQueryAdvise } from '../lib';
-
-function Section({ children }) {
-  return <div className="space-y-3">{children}</div>;
-}
-
-function Heading({ children }) {
-  return <h3 className="font-bold text-xs">{children}</h3>;
-}
-
-function Field({ method, data }) {
-  const { jsEditorRef, parsed } = useAppContext();
-
-  const isActive = parsed.expression?.method === method;
-  const field = getFieldName(method);
-  const value = data[field];
-
-  const handleClick = value
-    ? () => {
-        const expr = getExpression({ method, data });
-        jsEditorRef.current.setValue(expr);
-      }
-    : undefined;
-
-  return (
-    <div
-      className={`text-xs field ${isActive ? 'active' : ''}`}
-      data-clickable={!!handleClick}
-      onClick={handleClick}
-    >
-      <div className="text-gray-800 font-light">{field}</div>
-      <div className="truncate">
-        {value || <span className="text-gray-400">n/a</span>}
-      </div>
-    </div>
-  );
-}
+import { getQueryAdvise } from '../lib';
 
 // for inputs, the role will only work if there is also a type attribute
 function ElementInfo() {
@@ -60,29 +25,7 @@ function ElementInfo() {
 
       <div className="my-6 border-b" />
 
-      <div className="grid grid-cols-2 gap-4">
-        <Section>
-          <Heading>1. Queries Accessible to Everyone</Heading>
-          <Field method="getByRole" data={data} />
-          <Field method="getByLabelText" data={data} />
-          <Field method="getByPlaceholderText" data={data} />
-          <Field method="getByText" data={data} />
-          <Field method="getByDisplayValue" data={data} />
-        </Section>
-
-        <div className="space-y-8">
-          <Section>
-            <Heading>2. Semantic Queries</Heading>
-            <Field method="getByAltText" data={data} />
-            <Field method="getByTitle" data={data} />
-          </Section>
-
-          <Section>
-            <Heading>3. TestId</Heading>
-            <Field method="getByTestId" data={data} />
-          </Section>
-        </div>
-      </div>
+      {!parsed.error && <Queries data={data} />}
     </div>
   );
 }

src/components/Queries.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useAppContext } from './Context';
+
+import { getExpression, getFieldName } from '../lib';
+
+function Section({ children }) {
+  return <div className="space-y-3">{children}</div>;
+}
+
+function Heading({ children }) {
+  return <h3 className="font-bold text-xs">{children}</h3>;
+}
+
+function Field({ method, data }) {
+  const { jsEditorRef, parsed } = useAppContext();
+
+  const isActive = parsed.expression?.method === method;
+  const field = getFieldName(method);
+  const value = data[field];
+
+  const handleClick = value
+    ? () => {
+        const expr = getExpression({ method, data });
+        jsEditorRef.current.setValue(expr);
+      }
+    : undefined;
+
+  return (
+    <div
+      className={`text-xs field ${isActive ? 'active' : ''}`}
+      data-clickable={!!handleClick}
+      onClick={handleClick}
+    >
+      <div className="text-gray-800 font-light">{field}</div>
+      <div className="truncate">
+        {value || <span className="text-gray-400">n/a</span>}
+      </div>
+    </div>
+  );
+}
+
+// for inputs, the role will only work if there is also a type attribute
+function Queries({ data }) {
+  if (!data) {
+    return <div />;
+  }
+
+  return (
+    <div>
+      <div className="grid grid-cols-2 gap-4">
+        <Section>
+          <Heading>1. Queries Accessible to Everyone</Heading>
+          <Field method="getByRole" data={data} />
+          <Field method="getByLabelText" data={data} />
+          <Field method="getByPlaceholderText" data={data} />
+          <Field method="getByText" data={data} />
+          <Field method="getByDisplayValue" data={data} />
+        </Section>
+
+        <div className="space-y-8">
+          <Section>
+            <Heading>2. Semantic Queries</Heading>
+            <Field method="getByAltText" data={data} />
+            <Field method="getByTitle" data={data} />
+          </Section>
+
+          <Section>
+            <Heading>3. TestId</Heading>
+            <Field method="getByTestId" data={data} />
+          </Section>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Queries;

src/components/QueryAdvise.js

@@ -135,6 +135,11 @@ function QueryAdvise({ data, advise }) {
             > {parsed.error}
           </div>
         )}
+        {parsed.errorBody && (
+          <div className="font-mono cursor-pointer text-xs">
+            {parsed.errorBody}
+          </div>
+        )}
       </div>
       <div className="min-h-8">{suggestion}</div>
     </div>