Add tests for the AOI feature specification

app/scripts/components/common/map/controls/aoi/preset-selector.tsx

@@ -88,7 +88,9 @@ const SelectorWrapper = styled.div`
   position: relative;
 `;
 
-const PresetSelect = styled.select`
+const PresetSelect = styled.select.attrs({
+    'data-testid': 'preset-selector'
+  })`
   max-width: 200px;
   height: ${selectorHeight};
   color: transparent;

app/scripts/components/exploration/components/map/analysis-message-control.tsx

@@ -78,7 +78,9 @@ const MessageStatusIndicator = styled.div<MessageStatusIndicatorProps>`
     }
   }}
 `;
-const MessageContent = styled.div`
+const MessageContent = styled.div.attrs({
+    'data-testid': 'analysis-message'
+  })`
   line-height: 1.5rem;
   max-height: 1.5rem;
 

docs/development/SETUP.md

@@ -62,6 +62,20 @@ VEDA-UI includes a GitHub action for checking TypeScript and lint errors. If you
 #### Pre-commit Hook
 Additionally, there's a pre-commit hook that performs the same error checks. This helps developers identify and address issues at an earlier stage. If you need to bypass the check (to make a local temporary commit etc.), include the `--no-verify`` flag in your commit command.
 
+### Testing
+
+## Unit tests
+
+`yarn test`
+
+## End-to-end tests
+Make sure the development server is running (`yarn serve`)
+
+`yarn test:e2e --ui`
+
+Alternatively, you can install the playwright extension for vs code (ms-playwright.playwright) and run the tests directly from there. It allows to run the tests in watch mode, open the browser or trace viewer, set breakpoints,... 
+Again, make sure that the development server is running (`yarn serve`).
+
 ## Deployment
 To prepare the app for deployment run:
 

test/playwright/tests/exploreAoi.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from '../pages/basePage';
+
+test.describe('Area of Interest (AOI) Analysis', () => {
+  test.beforeEach(
+    async ({ page, explorePage, consentBanner, datasetSelectorComponent }) => {
+      let pageErrorCalled = false;
+      // Log all uncaught errors to the terminal to be visible in trace
+      page.on('pageerror', (exception) => {
+        console.log(`Uncaught exception: "${JSON.stringify(exception)}"`);
+        pageErrorCalled = true;
+      });
+
+      const mapboxResponsePromise = page.waitForResponse(
+        /api\.mapbox.com\/v4\/mapbox\.mapbox-streets-v8/i
+      );
+
+      // Given that I am on the map view (explore page)
+      await page.goto('/exploration');
+      await consentBanner.acceptButton.click();
+      await datasetSelectorComponent.addFirstDataset();
+      await explorePage.closeFeatureTour();
+    }
+  );
+
+  test('User selects a pre-defined AOI', async ({ page }) => {
+    // When I select the "Analyze an area" tool (Dropdown menu)
+    const toolbar = page.getByTestId('preset-selector');
+    // And choose one of the listed regions
+    await toolbar.selectOption('Hawaii');
+
+    // Then map should display the selected area as the AOI
+    // const aoi = await page.$('selector-for-aoi'); // Adjust the selector as needed
+    // expect(aoi).not.toBeNull();
+
+    // // And the AOI should not be editable when clicking on it
+    // await page.click('selector-for-aoi'); // Adjust the selector as needed
+    // const isEditable = await page.$eval('selector-for-aoi', el => console.log(el)); // Adjust the selector as needed
+    // expect(isEditable).toBe(false);
+
+    // And the analysis message should display the size of the area
+    const analysisMessage = await page
+      .getByTestId('analysis-message')
+      .textContent()
+
+    expect(analysisMessage).toContain('An area of 17 K km2 is selected.');
+
+    // And the 'Delete all areas' button should be shown
+    const deleteButton = await page.$('text=Delete all areas');
+    expect(deleteButton).not.toBeNull();
+
+    // And the 'Run analysis' button should be shown
+    const runButton = await page.$('text=Run analysis');
+    expect(runButton).not.toBeNull();
+  });
+});