ui: Add integration tests for router.


Change-Id: I8f7f221dfe3cbaab9ebbe350029ad42151b19906
diff --git a/tools/install-build-deps b/tools/install-build-deps
index 3bd7769..c27fa22 100755
--- a/tools/install-build-deps
+++ b/tools/install-build-deps
@@ -234,8 +234,8 @@
     # Example traces for regression tests.
     Dependency(
         'test/data.zip',
-        'https://storage.googleapis.com/perfetto/test-data-20210823-102422.zip',
-        '341d545f30ed04a75412662daae0e12adb31247419969e1953b6da99f1314d26',
+         'https://storage.googleapis.com/perfetto/test-data-20210827-130022.zip',
+         '9776d13bf0d1a2707d0b802aa219258eefb529329db951aee22a126a5693254b',
         'all', 'all',
     ),
 
diff --git a/ui/src/frontend/globals.ts b/ui/src/frontend/globals.ts
index 66b5331..bc0d8e9 100644
--- a/ui/src/frontend/globals.ts
+++ b/ui/src/frontend/globals.ts
@@ -210,7 +210,7 @@
     this._rafScheduler = new RafScheduler();
     this._serviceWorkerController = new ServiceWorkerController();
     this._testing =
-        self.location && self.location.hash.indexOf('testing=1') >= 0;
+        self.location && self.location.search.indexOf('testing=1') >= 0;
     this._logging = initAnalytics();
 
     // TODO(hjd): Unify trackDataStore, queryResults, overviewStore, threads.
diff --git a/ui/src/frontend/index.ts b/ui/src/frontend/index.ts
index ab98c79..35947b5 100644
--- a/ui/src/frontend/index.ts
+++ b/ui/src/frontend/index.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {applyPatches, Patch, produce} from 'immer';
+import {Patch, produce} from 'immer';
 import * as m from 'mithril';
 
 import {defer} from '../base/deferred';
diff --git a/ui/src/test/ui_integrationtest.ts b/ui/src/test/ui_integrationtest.ts
index cedaf2e..e64d755 100644
--- a/ui/src/test/ui_integrationtest.ts
+++ b/ui/src/test/ui_integrationtest.ts
@@ -29,7 +29,6 @@
 const browser = assertExists(global.__BROWSER__);
 const expectedScreenshotPath = path.join('test', 'data', 'ui-screenshots');
 
-
 async function getPage(): Promise<puppeteer.Page> {
   const pages = (await browser.pages());
   expect(pages.length).toBe(1);
@@ -42,7 +41,7 @@
   jest.setTimeout(60000);
   const page = await getPage();
   await page.setViewport({width: 1920, height: 1080});
-  await page.goto('http://localhost:10000/#!/?testing=1');
+  await page.goto('http://localhost:10000/?testing=1');
 });
 
 // After each test (regardless of nesting) capture a screenshot named after the
@@ -102,22 +101,6 @@
   });
 });
 
-describe('navigation', () => {
-  beforeAll(async () => {
-    const page = await getPage();
-    // go to blank page, to allow page reloading when only the fragment changes
-    await page.goto('about:blank');
-  });
-
-  test('trace_from_url', async () => {
-    const page = await getPage();
-    await page.goto(
-        'http://localhost:10000/#!/?testing=1&url=http://localhost:10000/test/data/chrome_scroll_without_vsync.pftrace');
-    await waitForPerfettoIdle(page);
-  });
-});
-
-
 describe('chrome_rendering_desktop', () => {
   test('load', async () => {
     const page = await getPage();
@@ -149,3 +132,130 @@
     await waitForPerfettoIdle(page);
   });
 });
+
+describe('routing', () => {
+  describe('open_two_traces_then_go_back', () => {
+    let page: puppeteer.Page;
+
+    beforeAll(async () => {
+      page = await getPage();
+    });
+
+    test('open_first_trace_from_url', async () => {
+      await page.goto(
+          'http://localhost:10000/?testing=1/#!/?url=http://localhost:10000/test/data/chrome_memory_snapshot.pftrace');
+      await waitForPerfettoIdle(page);
+    });
+
+    test('open_second_trace_from_url', async () => {
+      await page.goto(
+          'http://localhost:10000/?testing=1#!/?url=http://localhost:10000/test/data/chrome_scroll_without_vsync.pftrace');
+      await waitForPerfettoIdle(page);
+    });
+
+    test('access_subpage_then_go_back', async () => {
+      await waitForPerfettoIdle(page);
+      await page.goto(
+          'http://localhost:10000/?testing=1/#!/metrics?trace_id=76c25a80-25dd-1eb7-2246-d7b3c7a10f91');
+      await page.goBack();
+      await waitForPerfettoIdle(page);
+    });
+  });
+
+  describe('start_from_no_trace', () => {
+    let page: puppeteer.Page;
+
+    beforeAll(async () => {
+      page = await getPage();
+    });
+
+    test('go_to_page_with_no_trace', async () => {
+      await page.goto('http://localhost:10000/?testing=1#!/info');
+      await waitForPerfettoIdle(page);
+    });
+
+    test('open_trace ', async () => {
+      await page.goto(
+          'http://localhost:10000/?testing=1#!/viewer?trace_id=76c25a80-25dd-1eb7-2246-d7b3c7a10f91');
+      await waitForPerfettoIdle(page);
+    });
+
+    test('refresh', async () => {
+      await page.reload();
+      await waitForPerfettoIdle(page);
+    });
+
+    test('open_second_trace', async () => {
+      await page.goto(
+          'http://localhost:10000/?testing=1#!/viewer?trace_id=00000000-0000-0000-e13c-bd7db4ff646f');
+      await waitForPerfettoIdle(page);
+
+      // click on the 'Continue' button in the interstitial
+      await page.click('[id="trace_id_open"]');
+      await waitForPerfettoIdle(page);
+    });
+
+    test('go_back_to_first_trace', async () => {
+      await page.goBack();
+      await waitForPerfettoIdle(page);
+      // click on the 'Continue' button in the interstitial
+      await page.click('[id="trace_id_open"]');
+      await waitForPerfettoIdle(page);
+    });
+
+    test('open_invalid_trace', async () => {
+      await page.goto(
+          'http://localhost:10000/?testing=1#!/viewer?trace_id=invalid');
+      await waitForPerfettoIdle(page);
+    });
+  });
+
+  describe('navigate', () => {
+    let page: puppeteer.Page;
+
+    beforeAll(async () => {
+      page = await getPage();
+    });
+
+    test('open_trace_from_url', async () => {
+      await page.goto('http://localhost:10000/?testing=1');
+      await page.goto(
+          'http://localhost:10000/?testing=1/#!/?url=http://localhost:10000/test/data/chrome_memory_snapshot.pftrace');
+      await waitForPerfettoIdle(page);
+    });
+
+    test('navigate_back_and_forward', async () => {
+      await page.goto(
+          'http://localhost:10000/?testing=1#!/info?trace_id=00000000-0000-0000-e13c-bd7db4ff646f');
+      await page.goto(
+          'http://localhost:10000/?testing=1#!/metrics?trace_id=00000000-0000-0000-e13c-bd7db4ff646f');
+      await page.goBack();
+      await page.goBack();
+      await waitForPerfettoIdle(page);  // wait for trace to load
+      await page.goBack();
+      await page.goForward();
+      await waitForPerfettoIdle(page);  // wait for trace to load
+      await page.goForward();
+      await page.goForward();
+      await waitForPerfettoIdle(page);
+    });
+  });
+
+  test('open_trace_and_go_back_to_landing_page', async () => {
+    const page = await getPage();
+    await page.goto('http://localhost:10000/?testing=1');
+    await page.goto(
+        'http://localhost:10000/?testing=1#!/viewer?trace_id=76c25a80-25dd-1eb7-2246-d7b3c7a10f91');
+    await waitForPerfettoIdle(page);
+    await page.goBack();
+    await waitForPerfettoIdle(page);
+  });
+
+  test('open_invalid_trace_from_blank_page', async () => {
+    const page = await getPage();
+    await page.goto('about:blank');
+    await page.goto(
+        'http://localhost:10000/?testing=1#!/viewer?trace_id=invalid');
+    await waitForPerfettoIdle(page);
+  });
+});