feat: add support for custom test-id attributes (#236)

smeijer · web-flow · commit b5f021b1ca3f · 2020-07-01T20:42:37.000+02:00
diff --git a/devtools/src/content-script/contentScript.js b/devtools/src/content-script/contentScript.js
@@ -46,8 +46,8 @@ function init() {
     return { result };
   });
 
-  Bridge.onMessage('SET_CUSTOM_TEST_ID', function ({ data }) {
-    parser.configure({ testIdAttribute: data.customTestIdAttribute });
+  Bridge.onMessage('SET_SETTINGS', function ({ data }) {
+    parser.configure(data);
   });
 
   // when the selected element is changed by using the element inspector,
diff --git a/devtools/src/devtools/components/Icons/InspectIcon.js b/devtools/src/devtools/components/Icons/InspectIcon.js
diff --git a/devtools/src/devtools/components/Icons/LayersIcon.js b/devtools/src/devtools/components/Icons/LayersIcon.js
diff --git a/devtools/src/devtools/components/Icons/LogIcon.js b/devtools/src/devtools/components/Icons/LogIcon.js
diff --git a/devtools/src/devtools/components/Icons/SelectIcon.js b/devtools/src/devtools/components/Icons/SelectIcon.js
diff --git a/devtools/src/devtools/components/Icons/SettingsIcon.js b/devtools/src/devtools/components/Icons/SettingsIcon.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+function SettingsIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+      ></path>
+    </svg>
+  );
+}
+
+export default SettingsIcon;
diff --git a/devtools/src/devtools/components/MenuBar.js b/devtools/src/devtools/components/MenuBar.js
@@ -1,43 +1,19 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import Bridge from 'crx-bridge';
-import { SettingsIcon } from '@primer/octicons-react';
-import { Dialog } from '@reach/dialog';
 
 import inspectedWindow from '../lib/inspectedWindow';
 
-import SelectIcon from './SelectIcon';
-import LayersIcon from './LayersIcon';
-import InspectIcon from './InspectIcon';
-import LogIcon from './LogIcon';
+// we don't use octicons here, as that style doesn't really fit in devtools
+import SelectIcon from './Icons/SelectIcon';
+import LayersIcon from './Icons/LayersIcon';
+import InspectIcon from './Icons/InspectIcon';
+import SettingsIcon from './Icons/SettingsIcon';
+import LogIcon from './Icons/LogIcon';
+import { Menu, MenuButton, MenuPopover } from '../../../../src/components/Menu';
+import Settings from '../../../../src/components/Settings';
+import { getSettings, setSettings } from '../lib/settings';
 
 function MenuBar({ cssPath, suggestion }) {
-  const [settingsModalVisible, setSettingsModalVisible] = useState(false);
-  const [testIdCustomAttribute, setTestIdCustomAttribute] = useState(
-    'data-testid',
-  );
-
-  const onClickSettingsHandler = useCallback(
-    () => setSettingsModalVisible(true),
-    [setSettingsModalVisible],
-  );
-  const onCloseSettingsModalHandler = useCallback(
-    () => setSettingsModalVisible(false),
-    [setSettingsModalVisible],
-  );
-
-  const onTestIdCustomAttributeChangeHandler = useCallback(
-    (event) => setTestIdCustomAttribute(event.target.value),
-    [setTestIdCustomAttribute],
-  );
-
-  const onClickSettingsModalOkButtonHandler = useCallback(() => {
-    Bridge.sendMessage(
-      'SET_CUSTOM_TEST_ID',
-      { customTestIdAttribute: testIdCustomAttribute },
-      'content-script',
-    );
-    onCloseSettingsModalHandler();
-  }, [testIdCustomAttribute, onCloseSettingsModalHandler]);
   return (
     <div className="h-8 p-2 border-b space-x-4 flex">
       <button
@@ -62,30 +38,22 @@ function MenuBar({ cssPath, suggestion }) {
 
       <div className="flex-auto" />
 
-      <button
-        className="focus:outline-none"
-        title="View settings"
-        onClick={onClickSettingsHandler}
-      >
-        <SettingsIcon />
-      </button>
-      <Dialog
-        isOpen={settingsModalVisible}
-        onDismiss={onCloseSettingsModalHandler}
-        aria-label="settings-modal"
-      >
-        <input
-          type="text"
-          value={testIdCustomAttribute}
-          onChange={onTestIdCustomAttributeChangeHandler}
-        />
-        <button
-          onClick={onClickSettingsModalOkButtonHandler}
-          disabled={!testIdCustomAttribute}
-        >
-          <span>Ok</span>
-        </button>
-      </Dialog>
+      <Menu>
+        <MenuButton>
+          <SettingsIcon />
+        </MenuButton>
+
+        <MenuPopover>
+          <Settings
+            dispatch={({ type, ...data }) => {
+              if (type === 'SET_SETTINGS') {
+                setSettings(data);
+              }
+            }}
+            settings={getSettings()}
+          />
+        </MenuPopover>
+      </Menu>
 
       <button
         className="focus:outline-none"
diff --git a/devtools/src/devtools/lib/settings.js b/devtools/src/devtools/lib/settings.js
@@ -0,0 +1,21 @@
+import Bridge from 'crx-bridge';
+
+const localSettings = JSON.parse(localStorage.getItem('playground_settings'));
+let _settings = Object.assign(
+  {
+    testIdAttribute: 'data-testid',
+  },
+  localSettings,
+);
+
+Bridge.sendMessage('SET_SETTINGS', _settings, 'content-script');
+
+export function getSettings() {
+  return _settings;
+}
+
+export function setSettings(settings) {
+  Object.assign(_settings, settings);
+  Bridge.sendMessage('SET_SETTINGS', _settings, 'content-script');
+  localStorage.setItem('playground_settings', JSON.stringify(_settings));
+}
diff --git a/devtools/src/devtools/panel.html b/devtools/src/devtools/panel.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf8" />
     <link rel="stylesheet" href="../../../src/styles/index.css" />
-    <link rel="stylesheet" type="text/css" href="../../../node_modules/@reach/dialog/styles.css" />
   </head>
   <body>
     <div id="app" />
diff --git a/devtools/src/devtools/panel.js b/devtools/src/devtools/panel.js
@@ -1,5 +1,5 @@
 import 'regenerator-runtime/runtime';
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import Bridge from 'crx-bridge';
 import Query from '../../../src/components/Query';
diff --git a/src/components/Settings.js b/src/components/Settings.js
@@ -1,13 +1,11 @@
 import React from 'react';
 import Toggle from 'react-toggle';
-import 'react-toggle/style.css';
-// reserved for near very near term (1 or 2 PR's)
-// import Input from './Input';
-// import { MenuList } from './Menu';
-//
-// function Divider() {
-//   return <div className="border-b border-gray-300 my-4" />;
-// }
+
+import Input from './Input';
+
+function Divider() {
+  return <div className="border-b border-gray-300 my-4" />;
+}
 
 function Settings({ settings, dispatch }) {
   const handleChange = (event) => {
@@ -22,32 +20,38 @@ function Settings({ settings, dispatch }) {
     });
   };
 
+  const showBehavior = typeof settings.autoRun !== 'undefined';
+  const showTestingLibrary = typeof settings.testIdAttribute !== 'undefined';
+
   return (
     <div className="settings text-sm pb-2">
       <form onChange={handleChange} onSubmit={(e) => e.preventDefault()}>
-        <div>
-          <h3 className="text-sm font-bold mb-2">Behavior</h3>
-          <label className="flex space-x-4 items-center">
-            <Toggle
-              icons={false}
-              defaultChecked={settings.autoRun}
-              name="autoRun"
+        {showBehavior && (
+          <div>
+            <h3 className="text-sm font-bold mb-2">Behavior</h3>
+            <label className="flex space-x-4 items-center">
+              <Toggle
+                icons={false}
+                defaultChecked={settings.autoRun}
+                name="autoRun"
+              />
+              <span>Auto-run code</span>
+            </label>
+          </div>
+        )}
+
+        {showBehavior && showTestingLibrary && <Divider />}
+
+        {showTestingLibrary && (
+          <div>
+            <h3 className="text-sm font-bold mb-2">Testing-Library</h3>
+            <label className="text-xs">test-id attribute:</label>
+            <Input
+              defaultValue={settings.testIdAttribute}
+              name="testIdAttribute"
             />
-            <span>Auto-run code</span>
-          </label>
-        </div>
-
-        {/*reserved for future implementation, depends on #213 */}
-        {/*<Divider />*/}
-
-        {/*<div>*/}
-        {/*  <h3 className="text-sm font-bold mb-2">Testing-Library</h3>*/}
-        {/*  <label className="text-xs">test-id attribute:</label>*/}
-        {/*  <Input*/}
-        {/*    defaultValue={settings.testIdAttribute}*/}
-        {/*    name="testIdAttribute"*/}
-        {/*  />*/}
-        {/*</div>*/}
+          </div>
+        )}
       </form>
     </div>
   );
diff --git a/src/components/Share.js b/src/components/Share.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import 'react-toggle/style.css';
 import Input from './Input';
 import CopyButton from './CopyButton';
 
diff --git a/src/hooks/usePlayground.js b/src/hooks/usePlayground.js
@@ -36,6 +36,7 @@ function reducer(state, action, exec) {
     }
 
     case 'SET_SANDBOX_FRAME': {
+      exec({ type: 'APPLY_SETTINGS' });
       exec({ type: 'UPDATE_SANDBOX', immediate: true });
       return { ...state, sandbox: action.sandbox };
     }
@@ -93,10 +94,7 @@ function reducer(state, action, exec) {
     case 'SET_SETTINGS': {
       // eslint-disable-next-line no-unused-vars
       const { type, ...settings } = action;
-
-      if (typeof action.autoRun === 'boolean') {
-        exec({ type: 'UPDATE_SANDBOX', immediate });
-      }
+      exec({ type: 'APPLY_SETTINGS' });
 
       const nextSettings = {
         ...state.settings,
@@ -141,6 +139,8 @@ function init(props) {
     ),
   };
 
+  parser.configure(state.settings);
+
   return {
     ...state,
     result: parser.parse(state),
@@ -157,6 +157,13 @@ const populateSandbox = (state, effect, dispatch) => {
   });
 };
 
+const configureSandbox = (state) => {
+  postMessage(state.sandbox, {
+    type: 'CONFIGURE_SANDBOX',
+    settings: state.settings,
+  });
+};
+
 const populateSandboxDebounced = debounce(populateSandbox, 250);
 
 const effectMap = {
@@ -195,6 +202,12 @@ const effectMap = {
   SAVE_SETTINGS: (state) => {
     localStorage.setItem('playground_settings', JSON.stringify(state.settings));
   },
+
+  APPLY_SETTINGS: (state, effect, dispatch) => {
+    parser.configure(state.settings);
+    configureSandbox(state, effect, dispatch);
+    populateSandboxDebounced(state, effect, dispatch);
+  },
 };
 
 function usePlayground(props) {
diff --git a/src/lib/queryAdvise.js b/src/lib/queryAdvise.js
@@ -1,6 +1,6 @@
 import { messages, queries } from '../constants';
 import { computeAccessibleName, getRole } from 'dom-accessibility-api';
-import { getSuggestedQuery } from '@testing-library/dom';
+import { getSuggestedQuery, getConfig } from '@testing-library/dom';
 import cssPath from './cssPath';
 import { getFieldName } from './';
 
@@ -34,7 +34,10 @@ export function getData({ rootNode, element }) {
     altText: element.getAttribute('alt'),
     title: element.getAttribute('title'),
 
-    testId: element.getAttribute('data-testid'),
+    // it might be better to get this from the playground context instead of
+    // pulling it out of testing-library, but that one is easier to fetch, and
+    // at the end, it's the same.
+    testId: element.getAttribute(getConfig().testIdAttribute),
   };
 }
 
diff --git a/src/parser.js b/src/parser.js
@@ -258,8 +258,8 @@ function runUnsafe({ rootNode, query }) {
   return result;
 }
 
-function configure(configuration) {
-  testingLibraryConfigure(configuration);
+function configure({ testIdAttribute }) {
+  testingLibraryConfigure({ testIdAttribute });
 }
 
 function parse({ rootNode, markup, query, cacheId, prevResult }) {
diff --git a/src/sandbox.js b/src/sandbox.js
@@ -13,6 +13,9 @@ const state = {
   query: '',
   rootNode: null,
   highlighter: null,
+  settings: {
+    testIdAttribute: 'data-testid',
+  },
 };
 
 function postMessage(action) {
@@ -133,6 +136,12 @@ function onMessage({ source, data }) {
       state.markup = data.markup;
       break;
     }
+
+    case 'CONFIGURE_SANDBOX': {
+      state.settings = { ...state.settings, ...data.settings };
+      parser.configure(state.settings);
+      break;
+    }
   }
 
   updateSandbox(state.rootNode, state.markup, state.query);
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -6,3 +6,4 @@
 @import './app.pcss';
 @import './codemirror.pcss';
 @import './spinner.pcss';
+@import 'react-toggle/style.css';
