Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Playwright tests for mapper flow #1766

Merged
merged 13 commits into from
Sep 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import { test, expect } from '@playwright/test';

test('Project Creation', async ({ browserName, page }) => {
test('create new project', async ({ browserName, page }) => {
// Specific for this large test, only run in one browser
// Run other tests in all browsers
test.skip(browserName !== 'chromium', 'Test only for chromium!');
Expand Down Expand Up @@ -83,5 +83,8 @@ test('Project Creation', async ({ browserName, page }) => {
await page.getByRole('spinbutton').fill('3');
await page.getByRole('button', { name: 'Click to generate task' }).click();
await page.getByRole('button', { name: 'SUBMIT' }).click();
await expect(page.getByText('Project Generation Completed. Redirecting...')).toBeVisible();

const projectCreationSuccessToast = page.getByText('Project Generation Completed. Redirecting...');
await projectCreationSuccessToast.waitFor({ state: 'visible' });
await expect(projectCreationSuccessToast).toBeVisible();
});
152 changes: 152 additions & 0 deletions src/frontend/e2e/02-mapper-flow.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
import { test, expect } from '@playwright/test';

test.describe('mapper flow', () => {
test('mapper flow', async ({ page }) => {
await page.goto('/');
// await page.goto('http://fmtm.localhost:7050/');
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();
await page.getByRole('alert').waitFor({ state: 'hidden' });
await page.getByTitle('Close').getByTestId('CloseIcon').click();
expect(await page.locator('canvas').screenshot()).toMatchSnapshot('ready.png');

await page.locator('canvas').click({
position: {
x: 445,
y: 95,
},
});
// 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();
await page.getByRole('alert').waitFor({ state: 'hidden' });
await page.getByTitle('Close').getByTestId('CloseIcon').click();
expect(await page.locator('canvas').screenshot()).toMatchSnapshot('locked-for-mapping.png');

await page.locator('canvas').click({
position: {
x: 445,
y: 95,
},
});
//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();
await page.getByRole('alert').waitFor({ state: 'hidden' });
await page.getByTitle('Close').getByTestId('CloseIcon').click();
expect(await page.locator('canvas').screenshot()).toMatchSnapshot('mapped.png');

await page.locator('canvas').click({
position: {
x: 445,
y: 95,
},
});
// 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);
expect(await page.locator('canvas').screenshot()).toMatchSnapshot('validated.png');
await page.locator('canvas').click({
position: {
x: 445,
y: 95,
},
});
await expect(page.getByText('Status: VALIDATED')).toBeVisible();
});

test('comment section', async ({ page }) => {
await page.goto('/');
// await page.goto('http://fmtm.localhost:7050/');
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();

await page.waitForTimeout(4000);
await page.locator('canvas').click({
position: {
x: 475,
y: 127,
},
});

// Assert no comment is visible
await page.getByRole('button', { name: 'Comments' }).click();
await expect(page.getByText('No Comments!')).toBeVisible();

// Add comment
await page.getByTestId('FormatBoldIcon').click();
await page.locator('.fmtm-min-h-\\[150px\\] > .tiptap > p').click();
await page.locator('.fmtm-min-h-\\[150px\\] > .tiptap').fill('Test playwright');
await page.getByRole('button', { name: 'SAVE COMMENT' }).click();
await expect(
page
.locator('div')
.filter({ hasText: /Test playwright/ })
.first(),
).toBeVisible();

// Add comment
await page.locator('.fmtm-min-h-\\[150px\\] > .tiptap > p').click();
await page.locator('.fmtm-min-h-\\[150px\\] > .tiptap > p').click();
await page.locator('.fmtm-min-h-\\[150px\\] > .tiptap').fill('map features accurately');
await page.getByRole('button', { name: 'SAVE COMMENT' }).click();
await expect(
page
.locator('div')
.filter({ hasText: /map features accurately/ })
.first(),
).toBeVisible();

// Save empty comment
await page.locator('.fmtm-min-h-\\[150px\\] > .tiptap > p').click();
await page.getByRole('button', { name: 'SAVE COMMENT' }).click();
await page.getByRole('heading', { name: 'Empty comment field.' }).click();
await page.getByRole('alert').click();
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 71 additions & 0 deletions src/frontend/e2e/03-entity-update.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { test, expect } from '@playwright/test';

test('entity update', 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();
await expect(
page.getByRole('alert').locator('div').filter({ hasText: 'Requires a mobile phone with ODK collect' }),
).toBeVisible();

// 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();
});
1 change: 1 addition & 0 deletions src/frontend/src/environment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [] },
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/store/slices/ProjectSlice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading