Add Playwright tests for mapper flow

src/frontend/e2e/entityPopup.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+
+test('entity test', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Sign in' }).click();
+  await page
+    .getByLabel('', { exact: true })
+    .locator('div')
+    .filter({ hasText: "Temporary AccountIf you're" })
+    .nth(3)
+    .click();
+
+  // click first project card on the home page
+  await page.locator('.MuiCardContent-root').first().click();
+
+  // click on task & assert task popup visibility
+  await page.waitForTimeout(4000);
+  await page.locator('canvas').click({
+    position: {
+      x: 388,
+      y: 220,
+    },
+  });
+  await expect(page.getByText('Status: READY')).toBeVisible();
+  await expect(page.getByRole('button', { name: 'START MAPPING' })).toBeVisible();
+
+  // click on entity within task & assert feature popup visibility
+  await page.waitForTimeout(4000);
+  await page.locator('canvas').click({
+    position: {
+      x: 387,
+      y: 211,
+    },
+  });
+  await expect(page.getByRole('heading', { name: 'Feature:' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'MAP FEATURE IN ODK' })).toBeEnabled();
+  await page.getByRole('button', { name: 'MAP FEATURE IN ODK' }).click();
+
+  // check if task status is updated to locked_for_mapping on entity map
+  await page.waitForSelector('div:has-text("updated status to LOCKED_FOR_MAPPING"):nth-of-type(1)');
+  await expect(
+    page
+      .locator('div')
+      .filter({ hasText: /updated status to LOCKED_FOR_MAPPING/ })
+      .first(),
+  ).toBeVisible();
+
+  // click on task to check if task popup has been updated
+  await page.waitForTimeout(4000);
+  await page.locator('canvas').click({
+    position: {
+      x: 411,
+      y: 171,
+    },
+  });
+
+  // await page.getByText('Status: LOCKED_FOR_MAPPING').click();
+  await expect(page.getByText('Status: LOCKED_FOR_MAPPING')).toBeVisible();
+
+  // click entity to confirm task is locked
+  await page.locator('canvas').click({
+    position: {
+      x: 387,
+      y: 211,
+    },
+  });
+  await expect(page.getByRole('button', { name: 'MAP FEATURE IN ODK' })).toBeDisabled();
+});

src/frontend/e2e/mapperFlow.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+
+test('mapper flow test', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Sign in' }).click();
+  await page
+    .getByLabel('', { exact: true })
+    .locator('div')
+    .filter({ hasText: "Temporary AccountIf you're" })
+    .nth(3)
+    .click();
+
+  // click first project card on the home page
+  await page.locator('.MuiCardContent-root').first().click();
+
+  // click on task
+  await page.waitForTimeout(4000);
+  await page.locator('canvas').click({
+    position: {
+      x: 445,
+      y: 95,
+    },
+  });
+  await expect(page.getByText('Status: READY')).toBeVisible();
+
+  // STATUS: READY
+  await page.getByRole('button', { name: 'START MAPPING' }).waitFor({ state: 'visible' });
+  await page.getByRole('button', { name: 'START MAPPING' }).click();
+  await page.waitForSelector('div:has-text("updated status to LOCKED_FOR_MAPPING"):nth-of-type(1)');
+  await expect(
+    page
+      .locator('div')
+      .filter({ hasText: /updated status to LOCKED_FOR_MAPPING/ })
+      .first(),
+  ).toBeVisible();
+
+  //STATUS: LOCKED_FOR_MAPPING
+  await page.getByRole('button', { name: 'MARK AS FULLY MAPPED' }).click();
+  await page.getByRole('button', { name: 'MARK AS FULLY MAPPED' }).click();
+  await page.waitForSelector('div:has-text("updated status to MAPPED"):nth-of-type(1)');
+  await expect(
+    page
+      .locator('div')
+      .filter({ hasText: /updated status to MAPPED/ })
+      .first(),
+  ).toBeVisible();
+
+  // STATUS: MAPPED
+  await page.getByRole('button', { name: 'START VALIDATION' }).click();
+  await page.getByRole('button', { name: 'FULLY MAPPED' }).click();
+
+  await page.getByText('has been updated to VALIDATED').waitFor({ state: 'visible' });
+  await expect(page.getByText('has been updated to VALIDATED')).toBeVisible();
+
+  // click on validated task after map renders
+  await page.waitForTimeout(4000);
+  await page.locator('canvas').click({
+    position: {
+      x: 445,
+      y: 95,
+    },
+  });
+  await expect(page.getByText('Status: VALIDATED')).toBeVisible();
+});

src/frontend/src/environment.ts

@@ -36,6 +36,7 @@ export default {
         { key: 'Mapping Needed', value: 'INVALIDATED', btnBG: 'transparent' },
       ],
     },
+    { label: 'VALIDATED', action: [] },
     // { label: 'VALIDATED', action: [{ key: 'Merge data with OSM', value: 'MERGE_WITH_OSM', btnBG: 'gray' }] },
     { label: 'INVALIDATED', action: [{ key: 'Map Again', value: 'LOCKED_FOR_MAPPING', btnBG: 'gray' }] },
     { label: 'BAD', action: [] },

src/frontend/src/store/slices/ProjectSlice.ts

@@ -159,7 +159,7 @@ const ProjectSlice = createSlice({
       const updatedProjectTaskBoundries = state.projectTaskBoundries?.map((boundary) => {
         if (boundary.id == action.payload.projectId) {
           const updatedBoundary = boundary?.taskBoundries?.map((taskBoundary) => {
-            if (taskBoundary?.index === action.payload.taskId) {
+            if (taskBoundary?.index === +action.payload.taskId) {
               return {
                 ...taskBoundary,
                 task_status: action.payload.task_status,