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

delca85 · smeijer · web-flow · commit 933e59c1c79e · 2020-07-01T20:24:59.000+02:00
Co-authored-by: Stephan Meijer &lt;stephan.meijer@gmail.com&gt;
diff --git a/README.md b/README.md
@@ -126,6 +126,7 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.
diff --git a/devtools/src/content-script/contentScript.js b/devtools/src/content-script/contentScript.js
@@ -46,6 +46,10 @@ function init() {
     return { result };
   });
 
+  Bridge.onMessage('SET_CUSTOM_TEST_ID', function ({ data }) {
+    parser.configure({ testIdAttribute: data.customTestIdAttribute });
+  });
+
   // when the selected element is changed by using the element inspector,
   // this method will be called from devtools/main.js
   hook.onSelectionChanged = function onSelectionChanged(el) {
diff --git a/devtools/src/devtools/components/MenuBar.js b/devtools/src/devtools/components/MenuBar.js
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import Bridge from 'crx-bridge';
+import { SettingsIcon } from '@primer/octicons-react';
+import { Dialog } from '@reach/dialog';
 
 import inspectedWindow from '../lib/inspectedWindow';
 
@@ -9,6 +11,33 @@ import InspectIcon from './InspectIcon';
 import LogIcon from './LogIcon';
 
 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
@@ -33,6 +62,31 @@ 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>
+
       <button
         className="focus:outline-none"
         title="Inspect the matching DOM element"
diff --git a/devtools/src/devtools/panel.html b/devtools/src/devtools/panel.html
@@ -3,6 +3,7 @@
   <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, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import Bridge from 'crx-bridge';
 import Query from '../../../src/components/Query';
diff --git a/src/parser.js b/src/parser.js
@@ -10,6 +10,7 @@ import {
   queries,
   getRoles,
   logDOM,
+  configure as testingLibraryConfigure,
 } from '@testing-library/dom';
 
 import userEvent from '@testing-library/user-event';
@@ -99,7 +100,6 @@ function createEvaluator({ rootNode }) {
     user: userEvent,
     container: rootNode,
   });
-
   const evaluator = Function.apply(null, [
     ...Object.keys(context),
     'expr',
@@ -258,6 +258,10 @@ function runUnsafe({ rootNode, query }) {
   return result;
 }
 
+function configure(configuration) {
+  testingLibraryConfigure(configuration);
+}
+
 function parse({ rootNode, markup, query, cacheId, prevResult }) {
   if (typeof markup !== 'string' && !rootNode) {
     throw new Error('either markup or rootNode should be provided');
@@ -295,4 +299,5 @@ function parse({ rootNode, markup, query, cacheId, prevResult }) {
 
 export default {
   parse,
+  configure,
 };
