Added E2E test for ParseHookNames

packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js

@@ -5,15 +5,21 @@ const config = require('../../playwright.config');
 test.use(config);
 
 test.describe('Testing Todo-List App', () => {
-  let page, frameElementHandle, frame;
+  let page, frameElementHandle, frame, context;
+  const inspectButtonSelector = '[class^=ToggleContent]';
   test.beforeAll(async ({browser}) => {
-    page = await browser.newPage();
+    context = await browser.newContext();
+    page = await context.newPage();
     await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
     await page.waitForSelector('iframe#target');
     frameElementHandle = await page.$('#target');
     frame = await frameElementHandle.contentFrame();
   });
 
+  test.afterAll(async () => {
+    context.close();
+  });
+
   test('The Todo List should contain 3 items by default', async () => {
     const list = frame.locator('.listitem');
     await expect(list).toHaveCount(3);
@@ -40,9 +46,9 @@ test.describe('Testing Todo-List App', () => {
     // click on the list item to quickly navigate to the list item component in devtools
     // comparing displayed props with the array of props.
     for (let i = 1; i <= countOfItems; ++i) {
-      await page.click('[class^=ToggleContent]', {delay: 100});
+      await page.click(inspectButtonSelector, {delay: 100});
       await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
-      await page.waitForSelector('span.Value___tNzum');
+      await page.waitForSelector('span[class^=Value]');
       const text = await page.innerText('span[class^=Value]');
       await expect(text).toEqual(listItemsProps[i]);
     }

packages/react-devtools-inline/__tests__/__e2e__/parse-hooks.test.js

@@ -0,0 +1,118 @@
+'use strict';
+
+const {test, expect} = require('@playwright/test');
+const config = require('../../playwright.config');
+test.use(config);
+
+test.describe('Parsing Hook Names from React Components', () => {
+  let page, frameElementHandle, frame, context;
+  const inspectButtonSelector = '[class^=ToggleContent]';
+  const parseHookNamesSelector = 'button[class^=ToggleOff].null';
+  test.beforeAll(async ({browser}) => {
+    context = await browser.newContext();
+    page = await context.newPage();
+    await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
+    await page.waitForSelector('iframe#target');
+    frameElementHandle = await page.$('#target');
+    frame = await frameElementHandle.contentFrame();
+  });
+
+  test.afterAll(async () => {
+    context.close();
+  });
+
+  const extractHookNames = async selector => {
+    await page.click(inspectButtonSelector, {delay: 100});
+    await frame.click(selector);
+    await page.click(parseHookNamesSelector);
+    await page.waitForSelector('span[class^=HookName]');
+    const extractedHooks = await page.$$eval('span[class^=HookName]', Hooks =>
+      Hooks.map(Hook => Hook.textContent)
+    );
+    return extractedHooks;
+  };
+  test('Parse Hooks in ToDo List', async () => {
+    const ToDoListHooks = [
+      '(newItemText)',
+      '(items)',
+      '(uid)',
+      '(handleClick)',
+      '(handleKeyPress)',
+      '(handleChange)',
+      '(removeItem)',
+      '(toggleItem)',
+    ];
+    const devtoolsHooks = await extractHookNames('h1:has-text("List")');
+    expect(devtoolsHooks).toEqual(ToDoListHooks);
+  });
+
+  test.describe('Parse Hook Names in CustomHooks Component', () => {
+    const customHooks = [
+      '(count)',
+      '(contextValueA)',
+      '(_)',
+      '(debouncedCount)',
+      '(debouncedValue)',
+      '(onClick)',
+      '(contextValueB)',
+    ];
+
+    test('Parse Hooks in CustomHooks', async () => {
+      const devToolsHooks = await extractHookNames('#customHooksButton');
+      expect(devToolsHooks).toEqual(customHooks);
+    });
+
+    test('Parse Hooks in CustomHooks with Memo', async () => {
+      const devToolsHooks = await extractHookNames('#customHooksButtonMemo');
+      expect(devToolsHooks).toEqual(customHooks);
+    });
+
+    test('Parse Hooks in CustomHooks with ForwardRefs', async () => {
+      const devToolsHooks = await extractHookNames(
+        '#customHooksButtonForwardRef'
+      );
+      expect(devToolsHooks).toEqual(customHooks);
+    });
+
+    test('Parse Hooks in CustomHooks with Hoc', async () => {
+      const devToolsHooks = await extractHookNames('#customHooksButtonwithHoc');
+      expect(devToolsHooks).toEqual(customHooks);
+    });
+  });
+
+  test('Parse Hooks in DeepHooks component', async () => {
+    const DeepHooks = [
+      '(foo)',
+      '(foo)',
+      '(value)',
+      '(bar)',
+      '(bar)',
+      '(count)',
+      '(baz)',
+      '(count)',
+    ];
+    const devtoolsHooks = await extractHookNames('ul#DeepHooks');
+    expect(devtoolsHooks).toEqual(DeepHooks);
+  });
+
+  test('Parse Hooks in StatefulFunction component', async () => {
+    const StatefulFunctionHooks = [
+      '(count)',
+      '(debouncedCount)',
+      '(debouncedValue)',
+      '(handleUpdateCountClick)',
+      '(data)',
+      '(handleUpdateReducerClick)',
+    ];
+    const devtoolsHooks = await extractHookNames('ul#StatefulFunction');
+    expect(devtoolsHooks).toEqual(StatefulFunctionHooks);
+  });
+
+  test('Parse Hooks in ReactNativeWeb', async () => {
+    const ReactNativeWebHooks = ['(backgroundColor)'];
+    const devtoolsHooks = await extractHookNames(
+      'h1:has-text("ReactNativeWeb")'
+    );
+    expect(devtoolsHooks).toEqual(ReactNativeWebHooks);
+  });
+});

packages/react-devtools-inline/playwright.config.js

@@ -5,7 +5,9 @@ const config = {
     launchOptions: {
       slowMo: 100,
     },
+    viewport: {width: 1000, height: 600},
   },
+  workers: 1,
 };
 
 module.exports = config;

packages/react-devtools-shell/src/app/EditableProps/index.js

@@ -48,7 +48,7 @@ function StatefulFunction({name}: StatefulFunctionProps) {
   );
 
   return (
-    <ul>
+    <ul id={'StatefulFunction'}>
       <li>Name: {name}</li>
       <li>
         <button onClick={handleUpdateCountClick}>

packages/react-devtools-shell/src/app/Hydration/index.js

@@ -140,7 +140,7 @@ function DeepHooks(props: any) {
   const bar = useOuterBar();
   const baz = useOuterBaz();
   return (
-    <ul>
+    <ul id={'DeepHooks'}>
       <li>foo: {foo}</li>
       <li>bar: {bar}</li>
       <li>baz: {baz}</li>

packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js

@@ -70,6 +70,8 @@ const ContextA = createContext('A');
 const ContextB = createContext('B');
 
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
+  const {id} = props;
+  const componentId = `customHooksButton${id ?? ''}`;
   const [count, updateCount] = useState(0);
   // eslint-disable-next-line no-unused-vars
   const contextValueA = useContext(ContextA);
@@ -98,14 +100,18 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   // Verify deep nesting doesn't break
   useDeepHookA();
 
-  return <button onClick={onClick}>Count: {debouncedCount}</button>;
+  return (
+    <button id={componentId} onClick={onClick}>
+      Count: {debouncedCount}
+    </button>
+  );
 }
 const MemoWithHooks = memo(FunctionWithHooks);
 const ForwardRefWithHooks = forwardRef(FunctionWithHooks);
 
 function wrapWithHoc(Component) {
   function Hoc() {
-    return <Component />;
+    return <Component id="withHoc" />;
   }
   // $FlowFixMe
   const displayName = Component.displayName || Component.name;
@@ -118,8 +124,8 @@ export default function CustomHooks() {
   return (
     <Fragment>
       <FunctionWithHooks />
-      <MemoWithHooks />
-      <ForwardRefWithHooks />
+      <MemoWithHooks id="Memo" />
+      <ForwardRefWithHooks id="ForwardRef" />
       <HocWithHooks />
     </Fragment>
   );