Current behavior

Author: eps1lon

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

@@ -23,6 +23,16 @@ describe('Store component filters', () => {
   let utils;
   let actAsync;
 
+  beforeAll(() => {
+    // JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes
+    Element.prototype.getClientRects = function (this: Element) {
+      const textContent = this.textContent;
+      return [
+        new DOMRect(1, 2, textContent.length, textContent.split('\n').length),
+      ];
+    };
+  });
+
   beforeEach(() => {
     bridge = global.bridge;
     store = global.store;
@@ -156,9 +166,9 @@ describe('Store component filters', () => {
             <div>
         ▾ <Suspense>
             <div>
-      [suspense-root]  rects={[]}
-        <Suspense name="Unknown" rects={[]}>
-        <Suspense name="Unknown" rects={[]}>
+      [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
     `);
 
     await actAsync(
@@ -174,9 +184,9 @@ describe('Store component filters', () => {
             <div>
         ▾ <Suspense>
             <div>
-      [suspense-root]  rects={[]}
-        <Suspense name="Unknown" rects={[]}>
-        <Suspense name="Unknown" rects={[]}>
+      [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
     `);
 
     await actAsync(
@@ -192,9 +202,9 @@ describe('Store component filters', () => {
             <div>
         ▾ <Suspense>
             <div>
-      [suspense-root]  rects={[]}
-        <Suspense name="Unknown" rects={[]}>
-        <Suspense name="Unknown" rects={[]}>
+      [suspense-root]  rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
     `);
   });
 
@@ -740,4 +750,82 @@ describe('Store component filters', () => {
       `);
     });
   });
+
+  // @reactVersion >= 19.2
+  it('can filter by Activity slices', async () => {
+    const Activity = React.Activity;
+    const immediate = Promise.resolve(<div>Immediate</div>);
+
+    function Root({children}) {
+      return (
+        <Activity name="/" mode="visible">
+          <React.Suspense fallback="Loading...">
+            <h1>Root</h1>
+            <main>{children}</main>
+          </React.Suspense>
+        </Activity>
+      );
+    }
+
+    function Layout({children}) {
+      return (
+        <Activity name="/blog" mode="visible">
+          <h2>Blog</h2>
+          <section>{children}</section>
+        </Activity>
+      );
+    }
+
+    function Page() {
+      return <React.Suspense fallback="Loading...">{immediate}</React.Suspense>;
+    }
+
+    await actAsync(async () =>
+      render(
+        <Root>
+          <Layout>
+            <Page />
+          </Layout>
+        </Root>,
+      ),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+          ▾ <Activity name="/">
+            ▾ <Suspense>
+                <h1>
+              ▾ <main>
+                ▾ <Layout>
+                  ▾ <Activity name="/blog">
+                      <h2>
+                    ▾ <section>
+                      ▾ <Page>
+                        ▾ <Suspense>
+                            <div>
+      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
+        <Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
+          <Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
+    `);
+
+    await actAsync(
+      async () =>
+        (store.componentFilters = [
+          utils.createActivitySliceFilter(store.getElementIDAtIndex(1)),
+        ]),
+    );
+
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Activity name="/">
+          ▾ <Suspense>
+              <h1>
+            ▾ <main>
+              ▾ <Layout>
+                  <Activity name="/blog">
+      [suspense-root]  rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
+        <Suspense name="Unknown" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
+    `);
+  });
 });

packages/react-devtools-shared/src/__tests__/utils.js

@@ -328,6 +328,19 @@ export function createLocationFilter(
   };
 }
 
+export function createActivitySliceFilter(
+  activityID: Element['id'],
+  isEnabled: boolean = true,
+) {
+  const Types = require('react-devtools-shared/src/frontend/types');
+  return {
+    type: Types.ComponentFilterActivitySlice,
+    isEnabled,
+    isValid: true,
+    activityID: activityID,
+  };
+}
+
 export function getRendererID(): number {
   if (global.agent == null) {
     throw Error('Agent unavailable.');