Skip to content

Commit 5a9921b

Browse files
eps1loneps1lon
authored
[DevTools] Apply Activity slice filter when double clicking Activity (#34908)
1 parent 717e708 commit 5a9921b

File tree

22 files changed

+958
-101
lines changed

22 files changed

+958
-101
lines changed

‎packages/react-devtools-shared/src/__tests__/store-test.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3283,8 +3283,6 @@ describe('Store', () => {
32833283
<Suspense name="Outer" rects={null}>
32843284
`);
32853285

3286-
console.log('...........................');
3287-
32883286
await actAsync(() => {
32893287
resolve('loaded');
32903288
});

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

Lines changed: 123 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@ describe('Store component filters', () => {
2424
let utils;
2525
let actAsync;
2626

27+
beforeAll(() => {
28+
// JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes
29+
Element.prototype.getClientRects = function (this: Element) {
30+
const textContent = this.textContent;
31+
return [
32+
new DOMRect(1, 2, textContent.length, textContent.split('\n').length),
33+
];
34+
};
35+
});
36+
2737
beforeEach(() => {
2838
agent = global.agent;
2939
bridge = global.bridge;
@@ -158,9 +168,9 @@ describe('Store component filters', () => {
158168
<div>
159169
▾ <Suspense>
160170
<div>
161-
[suspense-root] rects={[]}
162-
<Suspense name="Unknown" rects={[]}>
163-
<Suspense name="Unknown" rects={[]}>
171+
[suspense-root] rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
172+
<Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
173+
<Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
164174
`);
165175

166176
await actAsync(
@@ -176,9 +186,9 @@ describe('Store component filters', () => {
176186
<div>
177187
▾ <Suspense>
178188
<div>
179-
[suspense-root] rects={[]}
180-
<Suspense name="Unknown" rects={[]}>
181-
<Suspense name="Unknown" rects={[]}>
189+
[suspense-root] rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
190+
<Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
191+
<Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
182192
`);
183193

184194
await actAsync(
@@ -194,9 +204,9 @@ describe('Store component filters', () => {
194204
<div>
195205
▾ <Suspense>
196206
<div>
197-
[suspense-root] rects={[]}
198-
<Suspense name="Unknown" rects={[]}>
199-
<Suspense name="Unknown" rects={[]}>
207+
[suspense-root] rects={[{x:1,y:2,width:7,height:1}, {x:1,y:2,width:6,height:1}]}
208+
<Suspense name="Unknown" rects={[{x:1,y:2,width:7,height:1}]}>
209+
<Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
200210
`);
201211
});
202212

@@ -798,8 +808,8 @@ describe('Store component filters', () => {
798808
<div key="loading">
799809
▾ <ErrorBoundary>
800810
<div key="did-error">
801-
[suspense-root] rects={[]}
802-
<Suspense name="App" rects={[]}>
811+
[suspense-root] rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]}
812+
<Suspense name="App" rects={[{x:1,y:2,width:0,height:1}]}>
803813
`);
804814

805815
await actAsync(() => {
@@ -814,8 +824,108 @@ describe('Store component filters', () => {
814824
<div key="suspense-content">
815825
▾ <ErrorBoundary>
816826
<div key="error-content">
817-
[suspense-root] rects={[]}
818-
<Suspense name="Unknown" rects={[]}>
827+
[suspense-root] rects={[{x:1,y:2,width:0,height:1}, {x:1,y:2,width:0,height:1}]}
828+
<Suspense name="Unknown" rects={[{x:1,y:2,width:0,height:1}]}>
829+
`);
830+
});
831+
832+
// @reactVersion >= 19.2
833+
it('can filter by Activity slices', async () => {
834+
const Activity = React.Activity;
835+
const immediate = Promise.resolve(<div>Immediate</div>);
836+
837+
function Root({children}) {
838+
return (
839+
<Activity name="/" mode="visible">
840+
<React.Suspense fallback="Loading...">
841+
<h1>Root</h1>
842+
<main>{children}</main>
843+
</React.Suspense>
844+
</Activity>
845+
);
846+
}
847+
848+
function Layout({children}) {
849+
return (
850+
<Activity name="/blog" mode="visible">
851+
<h2>Blog</h2>
852+
<section>{children}</section>
853+
</Activity>
854+
);
855+
}
856+
857+
function Page() {
858+
return <React.Suspense fallback="Loading...">{immediate}</React.Suspense>;
859+
}
860+
861+
await actAsync(async () =>
862+
render(
863+
<Root>
864+
<Layout>
865+
<Page />
866+
</Layout>
867+
</Root>,
868+
),
869+
);
870+
871+
expect(store).toMatchInlineSnapshot(`
872+
[root]
873+
▾ <Root>
874+
▾ <Activity name="/">
875+
▾ <Suspense>
876+
<h1>
877+
▾ <main>
878+
▾ <Layout>
879+
▾ <Activity name="/blog">
880+
<h2>
881+
▾ <section>
882+
▾ <Page>
883+
▾ <Suspense>
884+
<div>
885+
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
886+
<Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
887+
<Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
888+
`);
889+
890+
await actAsync(
891+
async () =>
892+
(store.componentFilters = [
893+
utils.createActivitySliceFilter(store.getElementIDAtIndex(1)),
894+
]),
895+
);
896+
897+
expect(store).toMatchInlineSnapshot(`
898+
[root]
899+
▾ <Activity name="/">
900+
▾ <Suspense>
901+
<h1>
902+
▾ <main>
903+
▾ <Layout>
904+
▸ <Activity name="/blog">
905+
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
906+
<Suspense name="Unknown" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
907+
<Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
908+
`);
909+
910+
await actAsync(async () => (store.componentFilters = []));
911+
912+
expect(store).toMatchInlineSnapshot(`
913+
[root]
914+
▾ <Root>
915+
▾ <Activity name="/">
916+
▾ <Suspense>
917+
<h1>
918+
▾ <main>
919+
▾ <Layout>
920+
▾ <Activity name="/blog">
921+
<h2>
922+
▾ <section>
923+
▾ <Page>
924+
▾ <Suspense>
925+
<div>
926+
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
927+
<Suspense name="Root" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
928+
<Suspense name="Page" rects={[{x:1,y:2,width:9,height:1}]}>
819929
`);
820930
});
821931
});

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,19 @@ export function createLocationFilter(
328328
};
329329
}
330330

331+
export function createActivitySliceFilter(
332+
activityID: Element['id'],
333+
isEnabled: boolean = true,
334+
) {
335+
const Types = require('react-devtools-shared/src/frontend/types');
336+
return {
337+
type: Types.ComponentFilterActivitySlice,
338+
isEnabled,
339+
isValid: true,
340+
activityID: activityID,
341+
};
342+
}
343+
331344
export function getRendererID(): number {
332345
if (global.agent == null) {
333346
throw Error('Agent unavailable.');

0 commit comments

Comments
 (0)