feat: add "snapshot" function for wrapper elements (#198)

Author: flaviohenriquecbc

src/components/Expandable.js

@@ -59,7 +59,9 @@ function Expandable({ children, className, variant }) {
       {expanded || !children ? (
         <div>&nbsp;</div>
       ) : (
-        <div className="truncate mr-8">{children}</div>
+        <div className="truncate mr-8 w-full flex justify-between direction">
+          {children}
+        </div>
       )}
 
       <IconButton

src/components/PreviewHint.js

@@ -5,15 +5,25 @@ function PreviewHint({ roles, suggestion }) {
   const expression = suggestion.expression ? (
     `> ${suggestion.expression}`
   ) : (
-    <>
+    <div>
       <span className="font-bold">accessible roles: </span>
       {roles.join(', ')}
-    </>
+    </div>
+  );
+
+  const snapshot = suggestion.snapshot && (
+    <div className="snapshot">
+      <div className="py-1">&nbsp;</div>
+      <span className="font-bold">Snapshot </span>
+      <div className="py-1">&nbsp;</div>
+      <div>{suggestion.snapshot}</div>
+    </div>
   );
 
   return (
     <Expandable className="bg-gray-200 text-gray-800 font-mono text-xs rounded fle">
       {expression}
+      {snapshot}
     </Expandable>
   );
 }

src/lib/queryAdvise.js

@@ -38,6 +38,29 @@ export function getData({ rootNode, element }) {
   };
 }
 
+function flattenDOM(node) {
+  return [
+    node,
+    ...Array.from(node.children).reduce(
+      (acc, child) => [...acc, ...flattenDOM(child)],
+      [],
+    ),
+  ];
+}
+
+function getSnapshot(element) {
+  const innerItems = flattenDOM(element);
+  const snapshot = innerItems
+    .map((el) => {
+      const suggestion = getSuggestedQuery(el);
+      return suggestion && `screen.${suggestion.toString()};`;
+    })
+    .filter(Boolean)
+    .join('\n');
+
+  return snapshot;
+}
+
 // TODO:
 // TestingLibraryDom.getSuggestedQuery($0, 'get').toString()
 export const emptyResult = { data: {}, suggestion: {} };
@@ -61,6 +84,7 @@ export function getQueryAdvise({ rootNode, element }) {
       suggestion: {
         level: 3,
         expression: `container.querySelector('${path}')`,
+        snapshot: getSnapshot(element),
         method: '',
         ...messages[3],
       },

src/styles/app.pcss

@@ -177,3 +177,11 @@ button:disabled {
 .preview button:hover {
   @apply bg-gray-400;
 }
+
+.expanded .snapshot {
+  @apply w-full;
+}
+
+.collapsed .snapshot div {
+  display: none;
+}