Add tests for the AOI feature specification (#1216)

**Related Ticket:** #1207

### Description of Changes
So far, added a first test for the scenario "User selects a pre-defined
AOI". I'm adding some `data-testid` properties to relevant dom elements
in order to select them in the test.

Also, added some documentation on how to run the tests. @hanbyul-here if
you want to try that on your machine, and let me know if it works?

### Notes & Questions About Changes
more tests to be added

### Validation / Testing
Follow the instructions added to the SETUP.md guide to run the tests
locally. See if they pass!

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/pages/explorePage.ts

@@ -14,7 +14,7 @@ export default class ExplorePage {
     this.mapboxCanvas = this.page.getByLabel('Map', { exact: true });
     this.firstDatasetItem = this.page.getByRole('article');
     this.closeFeatureTourButton = this.page.getByRole('button', { name: 'Close feature tour' });
-    this.presetSelector = this.page.locator('#preset-selector');
+    this.presetSelector = this.page.getByTestId('preset-selector');
   }
 
   async closeFeatureTour() {

test/playwright/tests/exploreAoi.spec.ts

@@ -0,0 +1,78 @@
+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 }) => {
+    await test.step('When I select the "Analyze an area" tool (Dropdown menu)', async () => {
+      const toolbar = page.getByTestId('preset-selector');
+
+      await test.step('And choose one of the listed regions', async () => {
+        toolbar.selectOption('Hawaii');
+      });
+    });
+
+    await test.step('Then the map should display the selected area as the AOI', async () => {
+      // How to check if the pre-defined AOI is created? Can we access the canvas, or methods of mbDraw?
+
+      await test.step('And the AOI should not be editable when clicking on it', async () => {
+        // How to check that the drawing mode did not change for the AOI? 
+        // Can we access the canvas, or methods of mbDraw?
+      });
+    });
+
+    await expect(
+      page.getByTestId('analysis-message'),
+      'And the analysis message should display the size of the area'
+    ).toHaveText(/An area of 17 K km2/i);
+
+    await expect(
+      page.getByRole('button', { name: 'Delete all areas' }),
+      'And the "Delete all areas" button should be shown'
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('button', { name: 'Run analysis' }),
+      'And the "Run analysis" button should be shown'
+    ).toBeVisible();
+  });
+
+  test('User draws AOI when pre-defined AOI exists', async ({ page }) => {
+    await test.step('Given that there is a pre-defined AOI on the map', async () => {
+      const toolbar = page.getByTestId('preset-selector');
+      await toolbar.selectOption('Hawaii');
+    });
+
+    await test.step('When I click on a pen tool to draw custom AOI', async () => {
+      await page.getByRole('button', { name: 'Draw AOI' }).click();
+    });
+
+    await test.step('Then the AOI from pre-defined AOIs should be deleted', async () => {
+      // How to check if the pre-defined AOI is deleted? Can we access the canvas, or methods of mbDraw?
+    });
+
+    await test.step('And the pre-defined selector should be reset and display the placeholder text', async () => {
+      const toolbar = page.getByTestId('preset-selector');
+      expect(toolbar).toHaveValue('Analyze an area');
+    });
+  });
+});