Test for TimelineTreeView text filtering

To replace a Chromium layout test [1].

[1]: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/http/tests/devtools/tracing/timeline-misc/timeline-filtering.js;l=1;drc=a7c08b69ab255aced13b8cb9cbf1cb15a421047a

Bug: 40270061
Change-Id: Ib1734dd8e42a18c83219550c15be3e817acd9334
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5439355
Commit-Queue: Alina Varkki <[email protected]>
Reviewed-by: Alina Varkki <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/timeline/TimelineTreeView.test.ts

@@ -39,6 +39,7 @@ describeWithEnvironment('TimelineTreeView', function() {
       const bottomNode = firstNode.children().values().next().value as TimelineModel.TimelineProfileTree.Node;
       assert.strictEqual(bottomNode.event?.name, 'second console time');
     });
+
     it('shows instant events as nodes', async function() {
       const data = await TraceLoader.allModels(this, 'user-timings.json.gz');
       const eventTreeView = new Timeline.EventsTimelineTreeView.EventsTimelineTreeView(mockViewDelegate);
@@ -52,7 +53,26 @@ describeWithEnvironment('TimelineTreeView', function() {
       const secondNode = topNodesIterator.next().value as TimelineModel.TimelineProfileTree.Node;
       assert.strictEqual(secondNode.event?.name, 'mark3');
     });
+
+    it('can filter events by text', async function() {
+      const data = await TraceLoader.allModels(this, 'user-timings.json.gz');
+      const eventTreeView = new Timeline.EventsTimelineTreeView.EventsTimelineTreeView(mockViewDelegate);
+      const consoleTimings = [...data.traceParsedData.UserTimings.performanceMarks];
+      eventTreeView.setModelWithEvents(data.performanceModel, consoleTimings, data.traceParsedData);
+      let tree = eventTreeView.buildTree();
+      const topLevelChildren = Array.from(tree.children().values(), childNode => {
+        return childNode.event?.name || 'NO_EVENT_FOR_NODE';
+      });
+      assert.deepEqual(topLevelChildren, ['mark1', 'mark3']);
+      eventTreeView.textFilterUI?.setValue('mark1', true);
+      tree = eventTreeView.buildTree();
+      const newTopLevelChildren = Array.from(tree.children().values(), childNode => {
+        return childNode.event?.name || 'NO_EVENT_FOR_NODE';
+      });
+      assert.deepEqual(newTopLevelChildren, ['mark1']);
+    });
   });
+
   describe('BottomUpTimelineTreeView', function() {
     it('Creates a bottom up tree from nestable events', async function() {
       const data = await TraceLoader.allModels(this, 'sync-like-timings.json.gz');
@@ -79,6 +99,7 @@ describeWithEnvironment('TimelineTreeView', function() {
       assert.strictEqual(childNode.event?.name, 'first console time');
     });
   });
+
   describe('CallTreeTimelineTreeView', function() {
     it('Creates a call tree from nestable events', async function() {
       const data = await TraceLoader.allModels(this, 'sync-like-timings.json.gz');
@@ -102,6 +123,7 @@ describeWithEnvironment('TimelineTreeView', function() {
       assert.strictEqual(childNode.event?.name, 'second console time');
     });
   });
+
   describe('event groupping', function() {
     it('groups events by category in the Call Tree view', async function() {
       const data = await TraceLoader.allModels(this, 'sync-like-timings.json.gz');