add analysis flow test

e2e/pages/analysisPage.ts

@@ -0,0 +1,55 @@
+import { Locator, Page, test } from '@playwright/test';
+
+export default class AnalysisPage {
+  readonly page: Page;
+  readonly mainContent: Locator;
+  readonly header: Locator;
+  readonly mapboxCanvas: Locator;
+  readonly generateAnalysisButton: Locator;
+  readonly datasetOptions: Locator;
+  readonly datasetCheckbox: Locator;
+
+
+  constructor(page: Page) {
+    this.page = page;
+    this.mainContent = this.page.getByRole('main');
+    this.header = this.mainContent.getByRole('heading', {level: 1, name: /analysis/i });
+    this.mapboxCanvas = this.page.getByLabel('Map', { exact: true });
+    this.generateAnalysisButton = this.page.getByRole('link', { name: /Generate analysis/i });
+    this.datasetOptions = this.page.getByTestId('datasetOptions');
+    this.datasetCheckbox = this.datasetOptions.getByRole('checkbox');
+  }
+
+  async drawPolygon (polygonCorners: number[][]) {
+    await test.step('draw polygon on mapbox canvas box', async () => {
+      if(polygonCorners.length < 3) {
+        throw new Error('polygon in drawPolygon must have >=3 corners')
+      }
+      // mutating corners array to have all but the final corner
+      const finalCorner = polygonCorners.pop()|| [];
+
+      // single click each remaining corner
+      for (const corner of polygonCorners) {
+        await this.mapboxCanvas.click({
+          position: {
+            x: corner[0],
+            y: corner[1]
+          }
+        });
+      }
+      // double click on final corner
+      await this.mapboxCanvas.dblclick({
+        position: {
+          x: finalCorner[0],
+          y: finalCorner[1]
+        }
+      });
+    })
+  }
+
+  async clickDatasetOption (index: number) {
+    test.step(`clicking dataset number ${index}`, async () => {
+      this.datasetCheckbox.nth(index).locator('..').click();
+    })
+  }
+}

e2e/pages/analysisResultsPage.ts

@@ -0,0 +1,13 @@
+import { Locator, Page } from '@playwright/test';
+
+export default class AnalysisResultsPage {
+  readonly page: Page;
+  readonly analysisCards: Locator;
+
+
+  constructor(page: Page) {
+    this.page = page;
+    this.analysisCards = this.page.getByTestId('analysisCards');
+  }
+
+}

e2e/pages/basePage.ts

@@ -1,5 +1,7 @@
 import { test as base } from '@playwright/test';
 import AboutPage from './aboutPage';
+import AnalysisPage from './analysisPage';
+import AnalysisResultsPage from './analysisResultsPage';
 import HomePage from './homePage';
 import FooterComponent from './footerComponent';
 import HeaderComponent from './headerComponent';
@@ -9,6 +11,8 @@ import StoryPage from './storyPage';
 
 export const test = base.extend<{
   aboutPage: AboutPage;
+  analysisPage: AnalysisPage;
+  analysisResultsPage: AnalysisResultsPage;
   footerComponent: FooterComponent;
   headerComponent: HeaderComponent;
   homePage: HomePage;
@@ -19,6 +23,12 @@ export const test = base.extend<{
   aboutPage: async ({page}, use) => {
     await use(new AboutPage(page));
   },
+  analysisPage: async ({page}, use) => {
+    await use(new AnalysisPage(page));
+  },
+  analysisResultsPage: async ({page}, use) => {
+    await use(new AnalysisResultsPage(page));
+  },
   catalogPage: async ({page}, use) => {
     await use(new CatalogPage(page));
   },

e2e/tests/analysis.spec.ts

@@ -0,0 +1,44 @@
+import { test, expect } from '../pages/basePage';
+
+test('load /analysis route', async ({
+  page,
+  analysisPage,
+  analysisResultsPage,
+ }) => {
+  let pageErrorCalled = false;
+  // Log all uncaught errors to the terminal
+  page.on('pageerror', exception => {
+    console.log(`Uncaught exception: "${exception}"`);
+    pageErrorCalled = true;
+  });
+
+  const mapboxResponsePromise = page.waitForResponse(/api\.mapbox.com\/v4\/mapbox\.mapbox-streets-v8/i);
+  await page.goto('/analysis');
+  await expect(analysisPage.header, `analysis page should load`).toBeVisible();
+  const mapboxResponse = await mapboxResponsePromise;
+  expect(mapboxResponse.ok(), 'mapbox request should be successful').toBeTruthy();
+  await expect(analysisPage.mapboxCanvas, 'mapbox canvas should be visible').toBeVisible();
+
+  const box = await analysisPage.mapboxCanvas.boundingBox();
+
+  // using Non-null Assertion because we know the mapbox is visible, therefore box is not null
+  const firstCorner = [box!.width / 4, box!.height / 4];
+  const secondCorner = [box!.width / 3, box!.height / 4];
+  const thirdCorner = [box!.width / 4, box!.height / 3];
+
+  await analysisPage.mapboxCanvas.click();
+
+  await analysisPage.drawPolygon([firstCorner, secondCorner, thirdCorner])
+
+  await analysisPage.clickDatasetOption(1);
+
+  const searchResponsePromise = page.waitForResponse(/\/search/i);
+  await analysisPage.generateAnalysisButton.click({force: true });
+
+
+  const searchResponse = await searchResponsePromise;
+  expect(searchResponse.ok(), 'request to GET /search should be successful').toBeTruthy();
+
+  await expect(analysisResultsPage.analysisCards.first(), 'at least one analysis results is visible' ).toBeVisible();
+
+});