fix: use @testing-library/dom native methods for suggestion btns

[marcosvega91]

fix #134

To fix this I have replaced the old target element with the new one that not have the problem with contentWindow.

[marcosvega91]

I have found an issue. I don't know why but for some reason even if I append all markup to the container, when I try to get suggested query for textbox it will ignore the label and return the value of title as name instead of the value of the label

[smeijer]

@marcosvega91, I know this PR isn't done yet. But because of your 11 merged pull-requests so far, I've added you as a collaborator on the project.

Thanks so much for your help!

Please make sure that you review the MAINTAINING.md and CONTRIBUTING.md files (specifically the bit about the commit messages and the git hooks) and familiarize yourself with the code of conduct (we're using the contributor covenant).

You might also want to watch the repo to be notified when someone files an issue/PR. Please continue to make PRs as you feel the need (you can make your branches directly on the repo rather than your fork if you want).

Thanks! And welcome to the team 🎉

[marcosvega91]

OMG @smeijer I'm really happy 👶 . Thanks to you to make this possible.

I love the project and testing in general and I'll try to do always my best to make this project always better 🥳 💯

[marcosvega91]

Hey @smeijer I think that I have almost done. The only doubt that I have is the actual implementation of ResultQueries. What do you think of this diff?

diff --git a/src/components/Result.js b/src/components/Result.js
index 523598d..9cfe071 100644
--- a/src/components/Result.js
+++ b/src/components/Result.js
@@ -52,7 +52,7 @@ function Result({ result, dispatch }) {
         <Scrollable>
           <ResultQueries
             data={data}
-            queries={queries}
+            possibleQueries={queries}
             suggestion={suggestion}
             activeMethod={result.expression?.method}
             dispatch={dispatch}
diff --git a/src/components/ResultQueries.js b/src/components/ResultQueries.js
index 389ae2b..ee213c3 100644
--- a/src/components/ResultQueries.js
+++ b/src/components/ResultQueries.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { getFieldName } from '../lib';
+import { queries } from '../constants';
 
 function Section({ children }) {
   return <div className="space-y-3">{children}</div>;
@@ -42,76 +43,62 @@ const Field = React.memo(function Field({
 });
 
 // for inputs, the role will only work if there is also a type attribute
-function ResultQueries({ data, queries, dispatch, activeMethod }) {
+function ResultQueries({ data, possibleQueries, dispatch, activeMethod }) {
   return (
     <div className="grid grid-cols-2 gap-4 pt-4">
       <Section>
         <Heading>1. Queries Accessible to Everyone</Heading>
-        <Field
-          data={data}
-          method="getByRole"
-          query={queries['getByRole']}
-          dispatch={dispatch}
-          active={'getByRole' === activeMethod}
-        />
-        <Field
-          data={data}
-          method="getByLabelText"
-          query={queries['getByLabelText']}
-          dispatch={dispatch}
-          active={'getByLabelText' === activeMethod}
-        />
-        <Field
-          data={data}
-          method="getByPlaceholderText"
-          query={queries['getByPlaceholderText']}
-          dispatch={dispatch}
-          active={'getByPlaceholderText' === activeMethod}
-        />
-        <Field
-          data={data}
-          method="getByText"
-          query={queries['getByText']}
-          dispatch={dispatch}
-          active={'getByText' === activeMethod}
-        />
-        <Field
-          data={data}
-          method="getByDisplayValue"
-          query={queries['getByDisplayValue']}
-          dispatch={dispatch}
-          active={'getByDisplayValue' === activeMethod}
-        />
+        {queries
+          .filter((query) => query.type === 'ACCESSIBLE')
+          .map((query) => {
+            return (
+              <Field
+                key={query.method}
+                data={data}
+                method={query.method}
+                query={possibleQueries[query.method]}
+                dispatch={dispatch}
+                active={query.method === activeMethod}
+              />
+            );
+          })}
       </Section>
 
       <div className="space-y-8">
         <Section>
           <Heading>2. Semantic Queries</Heading>
-          <Field
-            data={data}
-            method="getByAltText"
-            query={queries['getByAltText']}
-            dispatch={dispatch}
-            active={'getByAltText' === activeMethod}
-          />
-          <Field
-            data={data}
-            method="getByTitle"
-            query={queries['getByTitle']}
-            dispatch={dispatch}
-            active={'getByTitle' === activeMethod}
-          />
+          {queries
+            .filter((query) => query.type === 'SEMANTIC')
+            .map((query) => {
+              return (
+                <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>
-          <Field
-            data={data}
-            method="getByTestId"
-            query={queries['getByTestId']}
-            dispatch={dispatch}
-            active={'getByTestId' === activeMethod}
-          />
+          {queries
+            .filter((query) => query.type === 'TEST')
+            .map((query) => {
+              return (
+                <Field
+                  key={query.method}
+                  data={data}
+                  method={query.method}
+                  query={possibleQueries[query.method]}
+                  dispatch={dispatch}
+                  active={query.method === activeMethod}
+                />
+              );
+            })}
         </Section>
       </div>
     </div>
diff --git a/src/constants.js b/src/constants.js
index 710afa2..a7801e4 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -25,18 +25,22 @@ screen.getByRole('button')
 };
 
 export const queries = [
-  { method: 'getByRole', level: 0 },
-  { method: 'getByLabelText', level: 0 },
-  { method: 'getByPlaceholderText', level: 0 },
-  { method: 'getByText', level: 0 },
-  { method: 'getByDisplayValue', level: 0 },
+  { method: 'getByRole', level: 0, type: 'ACCESSIBLE' },
+  { method: 'getByLabelText', level: 0, type: 'ACCESSIBLE' },
+  {
+    method: 'getByPlaceholderText',
+    level: 0,
+    type: 'ACCESSIBLE',
+  },
+  { method: 'getByText', level: 0, type: 'ACCESSIBLE' },
+  { method: 'getByDisplayValue', level: 0, type: 'ACCESSIBLE' },
 
-  { method: 'getByAltText', level: 1 },
-  { method: 'getByTitle', level: 1 },
+  { method: 'getByAltText', level: 1, type: 'SEMANTIC' },
+  { method: 'getByTitle', level: 1, type: 'SEMANTIC' },
 
-  { method: 'getByTestId', level: 2 },
+  { method: 'getByTestId', level: 2, type: 'TEST' },
 
-  { method: 'querySelector', level: 3 },
+  { method: 'querySelector', level: 3, type: 'GENERIC' },
 ];
 
 // some quotes from https://testing-library.com/docs/guide-which-query
diff --git a/src/lib/queryAdvise.js b/src/lib/queryAdvise.js
index 30404f5..88e5ea8 100644
--- a/src/lib/queryAdvise.js
+++ b/src/lib/queryAdvise.js
@@ -2,6 +2,7 @@ import { messages, queries } from '../constants';
 import { computeAccessibleName, getRole } from 'dom-accessibility-api';
 import { getSuggestedQuery } from '@testing-library/dom';
 import cssPath from './cssPath';
+import { getFieldName } from './';
 
 export function getData({ rootNode, element }) {
   const type = element.getAttribute('type');
@@ -82,19 +83,12 @@ export function getQueryAdvise({ rootNode, element }) {
 }
 
 export function getAllPossibileQueries(element) {
-  const queries = [
-    'Role',
-    'LabelText',
-    'PlaceholderText',
-    'Text',
-    'DisplayValue',
-    'AltText',
-    'Title',
-    'TestId',
-  ];
-
   const possibleQueries = queries
-    .map((query) => getSuggestedQuery(element, 'get', query))
+    .filter((query) => query.type !== 'GENERIC')
+    .map((query) => {
+      const method = getFieldName(query.method);
+      return getSuggestedQuery(element, 'get', method);
+    })
     .filter((suggestedQuery) => suggestedQuery !== undefined)
     .reduce((obj, suggestedQuery) => {
       obj[suggestedQuery.queryMethod] = suggestedQuery;

[smeijer]

Looks good to me!

I'm only not sure about the naming of possibleQueries, but that's a minor thing. Makes me want to drop the level property of the queries entirely.

[marcosvega91]

To remove level and target I think that we need only to refactor ResultSuggestion component. But I think we can create a new PR for this

[smeijer]

But I think we can create a new PR for this

I agree. Let's not put that into this one.

[smeijer]

Awesome! Thanks! 👍