Add test for ReportsAPI tab in Application Panel

This test makes sure that we show both reports and endpoints.

Bug: 325443331
Change-Id: I6b07dcd70b5fa7f74e315cf962c8c0745ae1d67e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6250601
Commit-Queue: Kim-Anh Tran <[email protected]>
Auto-Submit: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/application/ReportingApiView.test.ts

@@ -5,6 +5,7 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Application from './application.js';
 import * as ApplicationComponents from './components/components.js';
@@ -36,4 +37,16 @@ describeWithMockConnection('ReportingApiView', () => {
     sinon.assert.calledWith(
         endpointsGridData.set, {endpoints: new Map([[ORIGIN_1, ENDPOINTS_1], [ORIGIN_2, ENDPOINTS_2]])});
   });
+
+  it('shows reports (main element) and endpoints (sidebar element)', () => {
+    const target = createTarget();
+    const networkManager = target.model(SDK.NetworkManager.NetworkManager);
+    assert.exists(networkManager);
+    const endpointsGrid = new ApplicationComponents.EndpointsGrid.EndpointsGrid();
+    const view = new Application.ReportingApiView.ReportingApiView(endpointsGrid);
+
+    assert.isTrue(view.showMode() === UI.SplitWidget.ShowMode.BOTH);
+    assert.isNotNull(view.mainWidget());
+    assert.isNotNull(view.sidebarElement());
+  });
 });