fix query method buttons & cleanup

Author: smeijer

src/components/Editor.js

@@ -153,7 +153,7 @@ const NON_TRIGGER_KEYS = {
 };
 
 function formatValue(cm) {
-  const mode = cm.options.mode.name;
+  const mode = cm.options.mode;
   const value = cm.getValue();
   const formatted = beautify.format(mode, value);
   cm.setValue(formatted);
@@ -231,11 +231,10 @@ function handleBlur(cm) {
   window.addEventListener('message', listener);
 
   // we wait a couple of ms for the SANDBOX_READY event, if that doesn't come
-  // before given treshold, we assume the user left the editor, and allow it
+  // before given threshold, we assume the user left the editor, and allow it
   // lose focus.
   timeout = setTimeout(() => {
     window.removeEventListener('message', listener);
-    formatValue(cm);
   }, threshold);
 }
 

src/components/AddHtml.js renamed to src/components/EmptyPane.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import icon from 'url:~/public/code_thinking.png';
 
-function AddHtml() {
+function EmptyPane() {
   return (
     <div className="flex-auto absolute overflow-hidden h-full w-full flex flex-col justify-center items-center">
       <div className="h-48 overflow-hidden w-full flex item-center">
@@ -10,9 +10,8 @@ function AddHtml() {
           src={icon}
         />
       </div>
-      <p className="opacity-50 ml-24">Try adding some html</p>
     </div>
   );
 }
 
-export default AddHtml;
+export default EmptyPane;

src/components/Preview.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PreviewHint from './PreviewHint';
-import AddHtml from './AddHtml';
+import EmptyPane from './EmptyPane';
 import { getRoles } from '@testing-library/dom';
 
 function getSandbox(ref) {
@@ -101,7 +101,7 @@ function Preview({ markup, variant, forwardedRef, dispatch }) {
 
       {!markup && (
         <div className="absolute w-full h-full top-0 left-0">
-          <AddHtml />
+          <EmptyPane />
         </div>
       )}
     </div>

src/components/Result.js

@@ -3,6 +3,7 @@ import ErrorBox from './ErrorBox';
 import ResultQueries from './ResultQueries';
 import ResultSuggestion from './ResultSuggestion';
 import Scrollable from './Scrollable';
+import EmptyPane from './EmptyPane';
 
 function Result({ result, dispatch }) {
   if (result.error) {
@@ -17,25 +18,12 @@ function Result({ result, dispatch }) {
     result.elements.length === 0
   ) {
     return (
-      <div className="space-y-4 text-sm">
-        <div className="min-h-8">
-          <p>
-            I don&apos;t know what to say. This is a playground for{' '}
-            <a
-              href="https://testing-library.com/docs/dom-testing-library/example-intro"
-              rel="noopener noreferrer"
-              target="_blank"
-              className="font-bold"
-            >
-              React Testing Library
-            </a>
-            .<br /> Please insert some html and queries to be adviced on which
-            should be used.
-          </p>
-        </div>
+      <div className="flex flex-col relative w-full h-full top-0 left-0">
+        <EmptyPane />
       </div>
     );
   }
+
   const { data, suggestion, queries } = result.elements[0];
   return (
     <div className="flex flex-col w-full h-full overflow-hidden">
@@ -55,6 +43,7 @@ function Result({ result, dispatch }) {
           suggestion={suggestion}
           activeMethod={result.expression?.method}
           dispatch={dispatch}
+          queries={queries}
         />
       </Scrollable>
     </div>

src/components/Result.test.js

@@ -4,27 +4,16 @@ import cases from 'jest-in-case';
 import Result from './Result';
 
 cases(
-  'should show "I don\'t know" if elements is not an array or if is empty',
+  'should show image if elements is not an array or if is empty',
   (opts) => {
-    render(
-      <Result
-        result={{ error: '', expression: {}, elements: opts.elements }}
-      />,
-    );
-    expect(screen.getByText(/i don't know what to say/i)).toBeInTheDocument();
+    const result = { error: '', expression: {}, elements: opts.elements };
+    render(<Result result={result} />);
+
+    expect(screen.getByRole('img')).toBeInTheDocument();
   },
   [
-    {
-      name: 'undefined',
-      elements: undefined,
-    },
-    {
-      name: 'null',
-      elements: null,
-    },
-    {
-      name: 'empty array',
-      elements: [],
-    },
+    { name: 'undefined', elements: undefined },
+    { name: 'null', elements: null },
+    { name: 'empty array', elements: [] },
   ],
 );

src/components/ResultQueries.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getFieldName } from '../lib';
-import { queries } from '../constants';
+import { messages as queryGroups } from '../constants';
 
 function Section({ children }) {
   return <div className="space-y-3">{children}</div>;
@@ -42,58 +42,43 @@ const Field = React.memo(function Field({
   );
 });
 
+function QueryGroup({ group, queries, heading, activeMethod, dispatch, data }) {
+  return (
+    <Section key={group.type}>
+      <Heading>{heading}</Heading>
+      {group.queries.map((queryMethod) => (
+        <Field
+          key={queryMethod}
+          data={data}
+          method={queryMethod}
+          query={queries[queryMethod]}
+          dispatch={dispatch}
+          active={queryMethod === activeMethod}
+        />
+      ))}
+    </Section>
+  );
+}
 // for inputs, the role will only work if there is also a type attribute
-function ResultQueries({ data, possibleQueries, dispatch, activeMethod }) {
+function ResultQueries(props) {
   return (
     <div className="grid grid-cols-2 gap-4 pt-4">
-      <Section>
-        <Heading>1. Queries Accessible to Everyone</Heading>
-        {queries
-          .filter((query) => query.type === 'ACCESSIBLE')
-          .map((query) => (
-            <Field
-              key={query.method}
-              data={data}
-              method={query.method}
-              query={possibleQueries?.[query.method]}
-              dispatch={dispatch}
-              active={query.method === activeMethod}
-            />
-          ))}
-      </Section>
-
+      <QueryGroup
+        heading={`1. ${queryGroups[0].heading}`}
+        group={queryGroups[0]}
+        {...props}
+      />
       <div className="space-y-8">
-        <Section>
-          <Heading>2. Semantic Queries</Heading>
-          {queries
-            .filter((query) => query.type === 'SEMANTIC')
-            .map((query) => (
-              <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>
-          {queries
-            .filter((query) => query.type === 'TEST')
-            .map((query) => (
-              <Field
-                key={query.method}
-                data={data}
-                method={query.method}
-                query={possibleQueries?.[query.method]}
-                dispatch={dispatch}
-                active={query.method === activeMethod}
-              />
-            ))}
-        </Section>
+        <QueryGroup
+          heading={`2. ${queryGroups[1].heading}`}
+          group={queryGroups[1]}
+          {...props}
+        />
+        <QueryGroup
+          heading={`3. ${queryGroups[2].heading}`}
+          group={queryGroups[2]}
+          {...props}
+        />
       </div>
     </div>
   );

src/constants.js

@@ -40,26 +40,37 @@ export const queries = [
 
   { method: 'getByTestId', level: 2, type: 'TEST' },
 
-  { method: 'querySelector', level: 3, type: 'GENERIC' },
+  { method: 'querySelector', level: 3, type: 'MANUAL' },
 ];
 
+function getQueryMethods(type) {
+  return queries.filter((x) => x.type === type).map((x) => x.method);
+}
 // some quotes from https://testing-library.com/docs/guide-which-query
 export const messages = [
   {
     heading: 'Queries Accessible to Everyone',
     description: `Queries that reflect the experience of visual/mouse users as well as those that use assistive technology. These should be your top preference.`,
+    type: 'ACCESSIBLE',
+    queries: getQueryMethods('ACCESSIBLE'),
   },
   {
     heading: 'Semantic Queries',
     description: `HTML5 and ARIA compliant selectors. Note that the user experience of interacting with these attributes varies greatly across browsers and assistive technology.`,
+    type: 'SEMANTIC',
+    queries: getQueryMethods('SEMANTIC'),
   },
   {
     heading: 'Test IDs',
     description: `The user cannot see (or hear) these, so this is only recommended for cases where you can't match by role or text or it doesn't make sense (e.g. the text is dynamic).`,
+    type: 'TEST',
+    queries: getQueryMethods('TEST'),
   },
   {
     heading: 'Manual Queries',
     description: `On top of the queries provided by the testing library, you can use the regular querySelector DOM API to query elements. Note that using this as an escape hatch to query by class or id is a bad practice because users can't see or identify these attributes. Use a testid if you have to.`,
+    type: 'MANUAL',
+    queries: getQueryMethods('MANUAL'),
   },
 ];
 

src/hooks/usePlayground.js

@@ -68,6 +68,13 @@ function reducer(state, action) {
   }
 }
 
+function init(initialState) {
+  return {
+    ...initialState,
+    result: parser.parse(initialState),
+  };
+}
+
 function usePlayground(props) {
   let { markup, query, onChange, instanceId, rootNode } = props || {};
 
@@ -76,13 +83,16 @@ function usePlayground(props) {
     query = defaultValues.query;
   }
 
-  const result = parser.parse({ rootNode, markup, query, cacheId: instanceId });
-  const [state, dispatch] = useReducer(withLogging(reducer), {
-    rootNode,
-    markup,
-    query,
-    result,
-  });
+  const [state, dispatch] = useReducer(
+    withLogging(reducer),
+    {
+      rootNode,
+      markup,
+      query,
+      cacheId: instanceId,
+    },
+    init,
+  );
 
   useEffect(() => {
     if (typeof onChange === 'function') {

src/lib/queryAdvise.js

@@ -112,7 +112,7 @@ export function getQueryAdvise({ rootNode, element }) {
 
 export function getAllPossibileQueries(element) {
   const possibleQueries = queries
-    .filter((query) => query.type !== 'GENERIC')
+    .filter((query) => query.type !== 'MANUAL')
     .map((query) => {
       const method = getFieldName(query.method);
       return getSuggestedQuery(element, 'get', method);

src/sandbox.js

@@ -5,7 +5,6 @@ import Scrollable from './components/Scrollable';
 import setupHighlighter from '../devtools/src/content-script/highlighter';
 import cssPath from './lib/cssPath';
 import { getQueryAdvise } from './lib';
-import debounce from 'lodash.debounce';
 import parser from './parser';
 
 const state = {
@@ -30,6 +29,7 @@ function runQuery(rootNode, query) {
   const result = parser.parse({ rootNode, query });
   state.queriedNodes = result.elements.map((elem) => elem.target);
   state.highlighter.highlight({ nodes: state.queriedNodes });
+  return result;
 }
 
 function setInnerHTML(node, html) {
@@ -113,14 +113,18 @@ function onSelectNode(node, { origin }) {
   postMessage(action);
 }
 
-function updateSandbox(rootNode, markup, query) {
+function updateMarkup(rootNode, markup, query) {
   postMessage({ type: 'SANDBOX_BUSY' });
   setInnerHTML(rootNode, markup);
   runQuery(rootNode, query);
   postMessage({ type: 'SANDBOX_READY' });
 }
 
-const updateSandboxDebounced = debounce(updateSandbox, 250);
+function updateQuery(rootNode, query) {
+  postMessage({ type: 'SANDBOX_BUSY' });
+  runQuery(rootNode, query);
+  postMessage({ type: 'SANDBOX_READY' });
+}
 
 function onMessage({ source, data }) {
   if (source !== top || data.source !== 'testing-playground') {
@@ -131,24 +135,21 @@ function onMessage({ source, data }) {
     case 'POPULATE_SANDBOX': {
       state.query = data.query;
       state.markup = data.markup;
-      break;
-    }
-
-    case 'SET_QUERY': {
-      state.query = data.query;
+      updateMarkup(state.rootNode, state.markup, state.query);
       break;
     }
 
     case 'SET_MARKUP': {
       state.markup = data.markup;
+      updateMarkup(state.rootNode, state.markup, state.query);
       break;
     }
-  }
 
-  if (data.immediate) {
-    updateSandbox(state.rootNode, state.markup, state.query);
-  } else {
-    updateSandboxDebounced(state.rootNode, state.markup, state.query);
+    case 'SET_QUERY': {
+      state.query = data.query;
+      updateQuery(state.rootNode, state.query);
+      break;
+    }
   }
 }