diff --git a/packages/e2e-tests/tests-examples/demo-todo-app.spec.ts b/packages/e2e-tests/tests-examples/demo-todo-app.spec.ts new file mode 100644 index 0000000000..393dc7aac6 --- /dev/null +++ b/packages/e2e-tests/tests-examples/demo-todo-app.spec.ts @@ -0,0 +1,509 @@ +import { type Page, expect, test } from "@playwright/test"; + +test.beforeEach(async ({ page }) => { + await page.goto("https://demo.playwright.dev/todomvc"); +}); + +const TODO_ITEMS = [ + "buy some cheese", + "feed the cat", + "book a doctors appointment", +]; + +test.describe("New Todo", () => { + test("should allow me to add todo items", async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder("What needs to be done?"); + + // Create 1st todo. + await newTodo.fill(TODO_ITEMS[0]); + await newTodo.press("Enter"); + + // Make sure the list only has one todo item. + await expect(page.getByTestId("todo-title")).toHaveText([ + TODO_ITEMS[0], + ]); + + // Create 2nd todo. + await newTodo.fill(TODO_ITEMS[1]); + await newTodo.press("Enter"); + + // Make sure the list now has two todo items. + await expect(page.getByTestId("todo-title")).toHaveText([ + TODO_ITEMS[0], + TODO_ITEMS[1], + ]); + + await checkNumberOfTodosInLocalStorage(page, 2); + }); + + test("should clear text input field when an item is added", async ({ + page, + }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder("What needs to be done?"); + + // Create one todo item. + await newTodo.fill(TODO_ITEMS[0]); + await newTodo.press("Enter"); + + // Check that input is empty. + await expect(newTodo).toBeEmpty(); + await checkNumberOfTodosInLocalStorage(page, 1); + }); + + test("should append new items to the bottom of the list", async ({ + page, + }) => { + // Create 3 items. + await createDefaultTodos(page); + + // create a todo count locator + const todoCount = page.getByTestId("todo-count"); + + // Check test using different methods. + await expect(page.getByText("3 items left")).toBeVisible(); + await expect(todoCount).toHaveText("3 items left"); + await expect(todoCount).toContainText("3"); + await expect(todoCount).toHaveText(/3/); + + // Check all items in one call. + await expect(page.getByTestId("todo-title")).toHaveText(TODO_ITEMS); + await checkNumberOfTodosInLocalStorage(page, 3); + }); +}); + +test.describe("Mark all as completed", () => { + test.beforeEach(async ({ page }) => { + await createDefaultTodos(page); + await checkNumberOfTodosInLocalStorage(page, 3); + }); + + test.afterEach(async ({ page }) => { + await checkNumberOfTodosInLocalStorage(page, 3); + }); + + test("should allow me to mark all items as completed", async ({ page }) => { + // Complete all todos. + await page.getByLabel("Mark all as complete").check(); + + // Ensure all todos have 'completed' class. + await expect(page.getByTestId("todo-item")).toHaveClass([ + "completed", + "completed", + "completed", + ]); + await checkNumberOfCompletedTodosInLocalStorage(page, 3); + }); + + test("should allow me to clear the complete state of all items", async ({ + page, + }) => { + const toggleAll = page.getByLabel("Mark all as complete"); + // Check and then immediately uncheck. + await toggleAll.check(); + await toggleAll.uncheck(); + + // Should be no completed classes. + await expect(page.getByTestId("todo-item")).toHaveClass(["", "", ""]); + }); + + test("complete all checkbox should update state when items are completed / cleared", async ({ + page, + }) => { + const toggleAll = page.getByLabel("Mark all as complete"); + await toggleAll.check(); + await expect(toggleAll).toBeChecked(); + await checkNumberOfCompletedTodosInLocalStorage(page, 3); + + // Uncheck first todo. + const firstTodo = page.getByTestId("todo-item").nth(0); + await firstTodo.getByRole("checkbox").uncheck(); + + // Reuse toggleAll locator and make sure its not checked. + await expect(toggleAll).not.toBeChecked(); + + await firstTodo.getByRole("checkbox").check(); + await checkNumberOfCompletedTodosInLocalStorage(page, 3); + + // Assert the toggle all is checked again. + await expect(toggleAll).toBeChecked(); + }); +}); + +test.describe("Item", () => { + test("should allow me to mark items as complete", async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder("What needs to be done?"); + + // Create two items. + for (const item of TODO_ITEMS.slice(0, 2)) { + await newTodo.fill(item); + await newTodo.press("Enter"); + } + + // Check first item. + const firstTodo = page.getByTestId("todo-item").nth(0); + await firstTodo.getByRole("checkbox").check(); + await expect(firstTodo).toHaveClass("completed"); + + // Check second item. + const secondTodo = page.getByTestId("todo-item").nth(1); + await expect(secondTodo).not.toHaveClass("completed"); + await secondTodo.getByRole("checkbox").check(); + + // Assert completed class. + await expect(firstTodo).toHaveClass("completed"); + await expect(secondTodo).toHaveClass("completed"); + }); + + test("should allow me to un-mark items as complete", async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder("What needs to be done?"); + + // Create two items. + for (const item of TODO_ITEMS.slice(0, 2)) { + await newTodo.fill(item); + await newTodo.press("Enter"); + } + + const firstTodo = page.getByTestId("todo-item").nth(0); + const secondTodo = page.getByTestId("todo-item").nth(1); + const firstTodoCheckbox = firstTodo.getByRole("checkbox"); + + await firstTodoCheckbox.check(); + await expect(firstTodo).toHaveClass("completed"); + await expect(secondTodo).not.toHaveClass("completed"); + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + + await firstTodoCheckbox.uncheck(); + await expect(firstTodo).not.toHaveClass("completed"); + await expect(secondTodo).not.toHaveClass("completed"); + await checkNumberOfCompletedTodosInLocalStorage(page, 0); + }); + + test("should allow me to edit an item", async ({ page }) => { + await createDefaultTodos(page); + + const todoItems = page.getByTestId("todo-item"); + const secondTodo = todoItems.nth(1); + await secondTodo.dblclick(); + await expect( + secondTodo.getByRole("textbox", { name: "Edit" }), + ).toHaveValue(TODO_ITEMS[1]); + await secondTodo + .getByRole("textbox", { name: "Edit" }) + .fill("buy some sausages"); + await secondTodo.getByRole("textbox", { name: "Edit" }).press("Enter"); + + // Explicitly assert the new text value. + await expect(todoItems).toHaveText([ + TODO_ITEMS[0], + "buy some sausages", + TODO_ITEMS[2], + ]); + await checkTodosInLocalStorage(page, "buy some sausages"); + }); +}); + +test.describe("Editing", () => { + test.beforeEach(async ({ page }) => { + await createDefaultTodos(page); + await checkNumberOfTodosInLocalStorage(page, 3); + }); + + test("should hide other controls when editing", async ({ page }) => { + const todoItem = page.getByTestId("todo-item").nth(1); + await todoItem.dblclick(); + await expect(todoItem.getByRole("checkbox")).not.toBeVisible(); + await expect( + todoItem.locator("label", { + hasText: TODO_ITEMS[1], + }), + ).not.toBeVisible(); + await checkNumberOfTodosInLocalStorage(page, 3); + }); + + test("should save edits on blur", async ({ page }) => { + const todoItems = page.getByTestId("todo-item"); + await todoItems.nth(1).dblclick(); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .fill("buy some sausages"); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .dispatchEvent("blur"); + + await expect(todoItems).toHaveText([ + TODO_ITEMS[0], + "buy some sausages", + TODO_ITEMS[2], + ]); + await checkTodosInLocalStorage(page, "buy some sausages"); + }); + + test("should trim entered text", async ({ page }) => { + const todoItems = page.getByTestId("todo-item"); + await todoItems.nth(1).dblclick(); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .fill(" buy some sausages "); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .press("Enter"); + + await expect(todoItems).toHaveText([ + TODO_ITEMS[0], + "buy some sausages", + TODO_ITEMS[2], + ]); + await checkTodosInLocalStorage(page, "buy some sausages"); + }); + + test("should remove the item if an empty text string was entered", async ({ + page, + }) => { + const todoItems = page.getByTestId("todo-item"); + await todoItems.nth(1).dblclick(); + await todoItems.nth(1).getByRole("textbox", { name: "Edit" }).fill(""); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .press("Enter"); + + await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); + }); + + test("should cancel edits on escape", async ({ page }) => { + const todoItems = page.getByTestId("todo-item"); + await todoItems.nth(1).dblclick(); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .fill("buy some sausages"); + await todoItems + .nth(1) + .getByRole("textbox", { name: "Edit" }) + .press("Escape"); + await expect(todoItems).toHaveText(TODO_ITEMS); + }); +}); + +test.describe("Counter", () => { + test("should display the current number of todo items", async ({ + page, + }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder("What needs to be done?"); + + // create a todo count locator + const todoCount = page.getByTestId("todo-count"); + + await newTodo.fill(TODO_ITEMS[0]); + await newTodo.press("Enter"); + + await expect(todoCount).toContainText("1"); + + await newTodo.fill(TODO_ITEMS[1]); + await newTodo.press("Enter"); + await expect(todoCount).toContainText("2"); + + await checkNumberOfTodosInLocalStorage(page, 2); + }); +}); + +test.describe("Clear completed button", () => { + test.beforeEach(async ({ page }) => { + await createDefaultTodos(page); + }); + + test("should display the correct text", async ({ page }) => { + await page.locator(".todo-list li .toggle").first().check(); + await expect( + page.getByRole("button", { name: "Clear completed" }), + ).toBeVisible(); + }); + + test("should remove completed items when clicked", async ({ page }) => { + const todoItems = page.getByTestId("todo-item"); + await todoItems.nth(1).getByRole("checkbox").check(); + await page.getByRole("button", { name: "Clear completed" }).click(); + await expect(todoItems).toHaveCount(2); + await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); + }); + + test("should be hidden when there are no items that are completed", async ({ + page, + }) => { + await page.locator(".todo-list li .toggle").first().check(); + await page.getByRole("button", { name: "Clear completed" }).click(); + await expect( + page.getByRole("button", { name: "Clear completed" }), + ).toBeHidden(); + }); +}); + +test.describe("Persistence", () => { + test("should persist its data", async ({ page }) => { + // create a new todo locator + const newTodo = page.getByPlaceholder("What needs to be done?"); + + for (const item of TODO_ITEMS.slice(0, 2)) { + await newTodo.fill(item); + await newTodo.press("Enter"); + } + + const todoItems = page.getByTestId("todo-item"); + const firstTodoCheck = todoItems.nth(0).getByRole("checkbox"); + await firstTodoCheck.check(); + await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); + await expect(firstTodoCheck).toBeChecked(); + await expect(todoItems).toHaveClass(["completed", ""]); + + // Ensure there is 1 completed item. + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + + // Now reload. + await page.reload(); + await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); + await expect(firstTodoCheck).toBeChecked(); + await expect(todoItems).toHaveClass(["completed", ""]); + }); +}); + +test.describe("Routing", () => { + test.beforeEach(async ({ page }) => { + await createDefaultTodos(page); + // make sure the app had a chance to save updated todos in storage + // before navigating to a new view, otherwise the items can get lost :( + // in some frameworks like Durandal + await checkTodosInLocalStorage(page, TODO_ITEMS[0]); + }); + + test("should allow me to display active items", async ({ page }) => { + const todoItem = page.getByTestId("todo-item"); + await page + .getByTestId("todo-item") + .nth(1) + .getByRole("checkbox") + .check(); + + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + await page.getByRole("link", { name: "Active" }).click(); + await expect(todoItem).toHaveCount(2); + await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); + }); + + test("should respect the back button", async ({ page }) => { + const todoItem = page.getByTestId("todo-item"); + await page + .getByTestId("todo-item") + .nth(1) + .getByRole("checkbox") + .check(); + + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + + await test.step("Showing all items", async () => { + await page.getByRole("link", { name: "All" }).click(); + await expect(todoItem).toHaveCount(3); + }); + + await test.step("Showing active items", async () => { + await page.getByRole("link", { name: "Active" }).click(); + }); + + await test.step("Showing completed items", async () => { + await page.getByRole("link", { name: "Completed" }).click(); + }); + + await expect(todoItem).toHaveCount(1); + await page.goBack(); + await expect(todoItem).toHaveCount(2); + await page.goBack(); + await expect(todoItem).toHaveCount(3); + }); + + test("should allow me to display completed items", async ({ page }) => { + await page + .getByTestId("todo-item") + .nth(1) + .getByRole("checkbox") + .check(); + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + await page.getByRole("link", { name: "Completed" }).click(); + await expect(page.getByTestId("todo-item")).toHaveCount(1); + }); + + test("should allow me to display all items", async ({ page }) => { + await page + .getByTestId("todo-item") + .nth(1) + .getByRole("checkbox") + .check(); + await checkNumberOfCompletedTodosInLocalStorage(page, 1); + await page.getByRole("link", { name: "Active" }).click(); + await page.getByRole("link", { name: "Completed" }).click(); + await page.getByRole("link", { name: "All" }).click(); + await expect(page.getByTestId("todo-item")).toHaveCount(3); + }); + + test("should highlight the currently applied filter", async ({ page }) => { + await expect(page.getByRole("link", { name: "All" })).toHaveClass( + "selected", + ); + + //create locators for active and completed links + const activeLink = page.getByRole("link", { name: "Active" }); + const completedLink = page.getByRole("link", { name: "Completed" }); + await activeLink.click(); + + // Page change - active items. + await expect(activeLink).toHaveClass("selected"); + await completedLink.click(); + + // Page change - completed items. + await expect(completedLink).toHaveClass("selected"); + }); +}); + +async function createDefaultTodos(page: Page) { + // create a new todo locator + const newTodo = page.getByPlaceholder("What needs to be done?"); + + for (const item of TODO_ITEMS) { + await newTodo.fill(item); + await newTodo.press("Enter"); + } +} + +async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) { + return await page.waitForFunction((e) => { + return JSON.parse(localStorage["react-todos"]).length === e; + }, expected); +} + +async function checkNumberOfCompletedTodosInLocalStorage( + page: Page, + expected: number, +) { + return await page.waitForFunction((e) => { + return ( + JSON.parse(localStorage["react-todos"]).filter( + (todo: any) => todo.completed, + ).length === e + ); + }, expected); +} + +async function checkTodosInLocalStorage(page: Page, title: string) { + return await page.waitForFunction((t) => { + return JSON.parse(localStorage["react-todos"]) + .map((todo: any) => todo.title) + .includes(t); + }, title); +} diff --git a/packages/e2e-tests/tests/epidemic-field-report/epidemic-field-report.spec.ts b/packages/e2e-tests/tests/epidemic-field-report/epidemic-field-report.spec.ts index d836f2053b..6289e0f235 100644 --- a/packages/e2e-tests/tests/epidemic-field-report/epidemic-field-report.spec.ts +++ b/packages/e2e-tests/tests/epidemic-field-report/epidemic-field-report.spec.ts @@ -1,18 +1,10 @@ import { expect, test } from '@playwright/test'; -import { login } from '../../utils/auth.ts'; -import { formatNumber } from '../../utils/common.ts'; -import fixtureData from '../epidemic-field-report/epidemic.json'; +import { formatNumber } from '#utils/common'; +import fixtureData from './epidemic.json'; -test.describe('Field report flow', async () => { - test.beforeEach('login credentials', async ({ page }) => { - await login( - page, - process.env.APP_URL, - process.env.PLAYWRIGHT_USER_NAME, - process.env.PLAYWRIGHT_USER_PASSWORD, - ); - }); +test.use({ storageState: 'playwright/.auth/user.json' }); +test.describe('Field report flow', async () => { test('field report for epidemic type', async ({ page }) => { const { formName, @@ -24,20 +16,20 @@ test.describe('Field report flow', async () => { govRequest, nationalsocietyRequest, cases, - suspected_cases, - probable_cases, - confirmed_cases, - num_dead, + suspectedCases, + probableCases, + confirmedCases, + numDead, source, - epi_notes, - epi_date, - other_sources, + epiNotes, + epiDate, + otherSources, description, - gov_num_assisted, - num_assisted, - num_localstaff, - num_volunteers, - num_expats_delegates, + govNumAssisted, + numAssisted, + numLocalstaff, + numVolunteers, + numExpatsDelegates, actionVaccination, actionQuarantine, actionWater, @@ -78,6 +70,7 @@ test.describe('Field report flow', async () => { visibiltyOptOne, visibiltyOptTwo, } = fixtureData; + await page.goto('/'); await page.getByRole('button', { name: 'Create a Report' }).click(); await page.getByRole('link', { name: 'New Field Report' }).click(); await expect(page.locator('h1')).toContainText(formName); @@ -109,35 +102,33 @@ test.describe('Field report flow', async () => { await page.locator('input[name="epi_cases"]').fill(cases); await page .locator('input[name="epi_suspected_cases"]') - .fill(suspected_cases); + .fill(suspectedCases); await page .locator('input[name="epi_probable_cases"]') - .fill(probable_cases); + .fill(probableCases); await page .locator('input[name="epi_confirmed_cases"]') - .fill(confirmed_cases); - await page.locator('input[name="epi_num_dead"]').fill(num_dead); + .fill(confirmedCases); + await page.locator('input[name="epi_num_dead"]').fill(numDead); await page.locator('input[name="epi_figures_source"]').click(); await page.getByRole('button', { name: source }).click(); await page .locator('textarea[name="epi_notes_since_last_fr"]') - .fill(epi_notes); - await page.locator('input[name="sit_fields_date"]').fill(epi_date); - await page - .locator('textarea[name="other_sources"]') - .fill(other_sources); + .fill(epiNotes); + await page.locator('input[name="sit_fields_date"]').fill(epiDate); + await page.locator('textarea[name="other_sources"]').fill(otherSources); await page.locator('textarea[name="description"]').fill(description); await page.getByRole('button', { name: 'Continue' }).click(); // Action Page await page .locator('input[name="gov_num_assisted"]') - .fill(gov_num_assisted); - await page.locator('input[name="num_assisted"]').fill(num_assisted); - await page.locator('input[name="num_localstaff"]').fill(num_localstaff); - await page.locator('input[name="num_volunteers"]').fill(num_volunteers); + .fill(govNumAssisted); + await page.locator('input[name="num_assisted"]').fill(numAssisted); + await page.locator('input[name="num_localstaff"]').fill(numLocalstaff); + await page.locator('input[name="num_volunteers"]').fill(numVolunteers); await page .locator('input[name="num_expats_delegates"]') - .fill(num_expats_delegates); + .fill(numExpatsDelegates); // Action taken by National red cross society await page .locator('label') @@ -274,7 +265,7 @@ test.describe('Field report flow', async () => { const fields = [ { label: 'Visibility', value: visibiltyOptTwo }, { label: 'Start Date', value: date }, - { label: 'Date of Data', value: epi_date }, + { label: 'Date of Data', value: epiDate }, { label: 'Source', value: source }, ]; for (const field of fields) { @@ -286,18 +277,18 @@ test.describe('Field report flow', async () => { // Assertions to verify whether the data inserted on the form are displayed on the UI // Numeric Details const numericDetails = [ { label: 'Cumulative Cases', value: formatNumber(cases) }, - { label: 'Suspected Cases', value: formatNumber(suspected_cases) }, - { label: 'Probable Cases', value: formatNumber(probable_cases) }, - { label: 'Confirmed Cases', value: formatNumber(confirmed_cases) }, - { label: 'Dead', value: formatNumber(num_dead) }, - { label: 'Assisted (RC)', value: formatNumber(num_assisted) }, + { label: 'Suspected Cases', value: formatNumber(suspectedCases) }, + { label: 'Probable Cases', value: formatNumber(probableCases) }, + { label: 'Confirmed Cases', value: formatNumber(confirmedCases) }, + { label: 'Dead', value: formatNumber(numDead) }, + { label: 'Assisted (RC)', value: formatNumber(numAssisted) }, { label: 'Assisted (Government)', - value: formatNumber(gov_num_assisted), + value: formatNumber(govNumAssisted), }, // { label: 'Staff', value: formatNumber(num_localstaff)}, // { label: 'Volunteers', value: formatNumber(num_volunteers) }, - { label: 'Delegates', value: formatNumber(num_expats_delegates) }, + { label: 'Delegates', value: formatNumber(numExpatsDelegates) }, ]; for (const detail of numericDetails) { const parentElement = page.getByText(detail.label).locator('..'); @@ -311,7 +302,7 @@ test.describe('Field report flow', async () => { .locator('..') .locator('..') .locator('..'); - await expect(noteParent).toContainText(epi_notes); + await expect(noteParent).toContainText(epiNotes); // Source Marked as Others Assertions const sourceChild = page.getByText('Sources for data marked as Other', { exact: true, @@ -321,7 +312,7 @@ test.describe('Field report flow', async () => { .locator('..') .locator('..') .locator('..'); - await expect(sourceParent).toContainText(other_sources); + await expect(sourceParent).toContainText(otherSources); // Description const descriptionChild = page.getByText( 'Sources for data marked as Other', @@ -332,7 +323,7 @@ test.describe('Field report flow', async () => { .locator('..') .locator('..') .locator('..'); - await expect(descriptionParent).toContainText(other_sources); + await expect(descriptionParent).toContainText(otherSources); // Request for Assistance Assertions const govReq = page .getByText('Government Requests International Assistance', { @@ -469,5 +460,222 @@ test.describe('Field report flow', async () => { await expect(detailLocator).toContainText(detail.email); await expect(detailLocator).toContainText(detail.phone); } + await page.getByRole('link', { name: 'Edit Report' }).click(); + // Input Value Assertions + // Context Page + const statusValue = page + .locator('label') + .filter({ hasText: 'EventFirst report for this disaster' }); + await expect(statusValue).toBeChecked(); + // Assertions for Country, Region, Disaster Type, Date and Title + const countryValue = page.locator('input[name="country"]'); + await expect(countryValue).toHaveValue(country); + const regionValue = page.locator('input[name="districts"]'); + await expect(regionValue).toHaveValue(region); + const disasterValue = page.locator('input[name="dtype"]'); + await expect(disasterValue).toHaveValue(disasterType); + const dateValue = page.locator('input[name="start_date"]'); + await expect(dateValue).toHaveValue(date); + const titleValue = page.getByPlaceholder('Example: Cyclone Cody'); + await expect(titleValue).toHaveValue(`${newtitle} - ${title}`); + // Government request international assistance + const govReqValue = page + .locator('label') + .filter({ hasText: govRequest }) + .nth(1); + await expect(govReqValue).toBeChecked(); + // National Society requests international assistance? + const nsReqValue = page + .locator('label') + .filter({ hasText: nationalsocietyRequest }) + .nth(2); + await expect(nsReqValue).toBeChecked(); + await page.getByRole('button', { name: 'Continue' }).click(); + // Situation Page + // Assertion for Numeric Details Value + const numericDetailCases = [ + { name: 'epi_cases', value: cases }, + { name: 'epi_suspected_cases', value: suspectedCases }, + { name: 'epi_probable_cases', value: probableCases }, + { name: 'epi_confirmed_cases', value: confirmedCases }, + { name: 'epi_num_dead', value: numDead }, + ]; + for (const caseData of numericDetailCases) { + const locator = page.locator(`input[name="${caseData.name}"]`); + await expect(locator).toHaveValue(caseData.value); + } + // Assertions for Source Value + const sourceValue = page.locator('input[name="epi_figures_source"]'); + await expect(sourceValue).toHaveValue(source); + // Assertions for Notes Value + const notesValue = page.locator( + 'textarea[name="epi_notes_since_last_fr"]', + ); + await expect(notesValue).toHaveValue(epiNotes); + // Assertions for Date of Data Value + const dataDateValue = page.locator('input[name="sit_fields_date"]'); + await expect(dataDateValue).toHaveValue(epiDate); + // Assertions for Source Details Value + const otherSourcesValue = page.locator( + 'textarea[name="other_sources"]', + ); + await expect(otherSourcesValue).toHaveValue(otherSources); + // Assertions for Situational Overview Value + const overviewValue = page.locator('textarea[name="description"]'); + await expect(overviewValue).toHaveValue(description); + await page.getByRole('button', { name: 'Continue' }).click(); + // Actions Page + // Assertions for Actions Taken Value + const inputValues = [ + { name: 'gov_num_assisted', value: govNumAssisted }, + { name: 'num_assisted', value: numAssisted }, + { name: 'num_localstaff', value: numLocalstaff }, + { name: 'num_volunteers', value: numVolunteers }, + { name: 'num_expats_delegates', value: numExpatsDelegates }, + ]; + for (const { name, value } of inputValues) { + const inputValue = page.locator(`input[name="${name}"]`); + await expect(inputValue).toHaveValue(value); + } + // Assertions for Actions Taken by National Red Cross Society Value + const nsActions = [actionVaccination, actionQuarantine, actionWater]; + for (const action of nsActions) { + const actionLocator = page + .locator('label') + .filter({ hasText: action }) + .first(); + await expect(actionLocator).toBeChecked(); + } + const nsActionsValue = page.locator('textarea[name="summary"]').first(); + await expect(nsActionsValue).toHaveValue(nationalSocietySummary); + // Assertions for Actions Taken by IFRC Value + const ifrcActions = [actionSanitation, actionVector, actionAid]; + for (const action of ifrcActions) { + const actionLocator = page + .locator('label') + .filter({ hasText: action }) + .nth(1); + await expect(actionLocator).toBeChecked(); + } + const ifrcActionsValue = page + .locator('textarea[name="summary"]') + .nth(1); + await expect(ifrcActionsValue).toHaveValue(federationSummary); + // Assertions for Actions Taken by Other RCRC Movements Actors Value + const rcrcActions = [actionAmbulance, actionVolunteer, actionReadiness]; + for (const action of rcrcActions) { + const actionLocator = page + .locator('label') + .filter({ hasText: action }) + .nth(2); + await expect(actionLocator).toBeChecked(); + } + const rcrcActionsValue = page + .locator('textarea[name="summary"]') + .nth(2); + await expect(rcrcActionsValue).toHaveValue(rcrcSummary); + // Assertions for Information Bulletin Value + const informationBulletinValue = page + .locator('label') + .filter({ hasText: informationBulletin }); + await expect(informationBulletinValue).toBeChecked(); + // Actions Taken by Others + const actionOthersValue = page.locator( + 'textarea[name="actions_others"]', + ); + await expect(actionOthersValue).toHaveValue(actionOther); + await page.getByRole('button', { name: 'Continue' }).click(); + // Response Page + // Assertions for Planned Interventions Value + // DREF Requested + const drefValue = page + .locator('label') + .filter({ hasText: interventionOptionOne }) + .nth(0); + await expect(drefValue).toBeChecked(); + const drefSummaryValue = page.locator('input[name="dref_amount"]'); + await expect(drefSummaryValue).toHaveValue(drefRequested); + // Emmergency Appeal + const emergencyAppealValue = page + .locator('label') + .filter({ hasText: interventionOptionTwo }) + .nth(1); + await expect(emergencyAppealValue).toBeChecked(); + const emergencyAppealSummaryValue = page.locator( + 'input[name="appeal_amount"]', + ); + await expect(emergencyAppealSummaryValue).toHaveValue(emergencyAppeal); + // Rapid Response Personnel + const rapidResponseValue = page + .locator('label') + .filter({ hasText: interventionOptionThree }) + .nth(2); + await expect(rapidResponseValue).toBeChecked(); + const rapidResponseSummaryValue = page.locator( + 'input[name="num_fact"]', + ); + await expect(rapidResponseSummaryValue).toHaveValue(rapidResponse); + // Emergency Response Unit + const emergencyResponseValue = page + .locator('label') + .filter({ hasText: interventionOptionTwo }) + .nth(3); + await expect(emergencyResponseValue).toBeChecked(); + const emergencyResponseSummaryValue = page.locator( + 'input[name="num_ifrc_staff"]', + ); + await expect(emergencyResponseSummaryValue).toHaveValue( + emergencyResponse, + ); + // Contacts + // Assertion for Originator Contacts value + const originatorValue = [ + { name: 'name', value: originatorName }, + { name: 'title', value: originatorTitle }, + { name: 'email', value: originatorEmail }, + { name: 'phone', value: originatorPhone }, + ]; + for (const { name, value } of originatorValue) { + const locator = page.locator(`input[name="${name}"]`).nth(0); + await expect(locator).toHaveValue(value); + } + // Assertion for National Society values + const nationalValue = [ + { name: 'name', value: nationalName }, + { name: 'title', value: nationalTitle }, + { name: 'email', value: nationalEmail }, + { name: 'phone', value: nationalPhone }, + ]; + for (const { name, value } of nationalValue) { + const locator = page.locator(`input[name="${name}"]`).nth(1); + await expect(locator).toHaveValue(value); + } + // Assertions for IFRC Focal Points for the Emergency Values + const ifrcValue = [ + { name: 'name', value: ifrcName }, + { name: 'title', value: ifrcTitle }, + { name: 'email', value: ifrcEmail }, + { name: 'phone', value: ifrcPhone }, + ]; + for (const { name, value } of ifrcValue) { + const locator = page.locator(`input[name="${name}"]`).nth(2); + await expect(locator).toHaveValue(value); + } + // Assertions for Emergency Response Units Values + const mediaValue = [ + { name: 'name', value: mediaName }, + { name: 'title', value: mediaTitle }, + { name: 'email', value: mediaEmail }, + { name: 'phone', value: mediaPhone }, + ]; + for (const { name, value } of mediaValue) { + const locator = page.locator(`input[name="${name}"]`).nth(3); + await expect(locator).toHaveValue(value); + } + // Assertions for Field Report Visibility Value + const frVisibilityValue = page + .locator('label') + .filter({ hasText: visibiltyOptTwo }); + await expect(frVisibilityValue).toBeChecked(); }); }); diff --git a/packages/e2e-tests/tests/epidemic-field-report/epidemic.json b/packages/e2e-tests/tests/epidemic-field-report/epidemic.json index 8cb1d948ba..863eb24baf 100644 --- a/packages/e2e-tests/tests/epidemic-field-report/epidemic.json +++ b/packages/e2e-tests/tests/epidemic-field-report/epidemic.json @@ -1,64 +1,64 @@ { - "formName": "Create Field Report", - "country": "Nepal", - "region": "Bagmati", - "disasterType": "Epidemic", - "date": "2024-02-19", - "title": "flu", - "govRequest": "Yes", - "nationalsocietyRequest": "No", - "cases": "100000", - "suspected_cases": "150000", - "probable_cases": "200000", - "confirmed_cases": "101000", - "num_dead": "2000", - "source": "WHO", - "epi_notes": "The English-Quotient (EQ) test measures your proficiency in the English language, including vocabulary, grammar, and comprehension. Designed for learners and professionals, it provides a benchmark for assessing language skills. ", - "epi_date": "2024-02-23", - "other_sources": "An epidemic is a rapid spread of infectious disease within a community, affecting a large number of individuals", - "description": "An epidemic occurs when an infectious disease rapidly spreads within a population, causing a significant increase in cases beyond what is normally expected in that area", - "gov_num_assisted": "8000", - "num_assisted": "7000", - "num_localstaff": "6000", - "num_volunteers": "5000", - "num_expats_delegates": "4000", - "actionVaccination": "Vaccination", - "actionQuarantine": "Quarantine support", - "actionWater": "Water provision", - "actionSanitation": "Sanitation provision", - "actionVector": "Vector control", - "actionAid": "First aid", - "actionAmbulance": "Ambulance services for epidemic disease cases", - "actionVolunteer": "Volunteer Support", - "actionReadiness": "NS Institutional readiness", - "nationalSocietySummary": "Food is any substance consumed to provide nutritional support, energy, and sustenance for living organisms, essential for survival", - "federationSummary": "Quarantine is the isolation of individuals or groups to prevent the spread of contagious diseases, ensuring public health safety", - "rcrcSummary": "A volunteer is a person who offers their time and skills freely to help others or support a cause without payment", - "informationBulletin": "Planned", - "actionOther": "The environment encompasses all living and non-living things, forming a complex and interconnected web that sustains life. It requires careful stewardship to ensure ecological balance and biodiversity", - "interventionOptionOne": "Requested", - "interventionOptionTwo": "Planned", - "interventionOptionThree": "Completed", - "drefRequested": "700000", - "emergencyAppeal": "800000", - "rapidResponse": "900000", - "emergencyResponse": "90000", - "originatorName": "Keyur", - "originatorTitle": "Project Manager", - "originatorEmail": "keyur@sunshine.com", - "originatorPhone": "9802556314", - "nationalName": "Navin", - "nationalTitle": "System Engineer", - "nationalEmail": "navin@theone.com", - "nationalPhone": "9804115777", - "ifrcName": "Aditya", - "ifrcTitle": "Cofounder", - "ifrcEmail": "aditya@gmail.com", - "ifrcPhone": "9801447523", - "mediaName": "Shubh", - "mediaTitle": "QAT", - "mediaEmail": "shubh@qat.com", - "mediaPhone": "9805441239", - "visibiltyOptOne": "RCRC Movement", - "visibiltyOptTwo": "Public" + "formName": "Create Field Report", + "country": "Nepal", + "region": "Bagmati", + "disasterType": "Epidemic", + "date": "2024-02-19", + "title": "flu", + "govRequest": "Yes", + "nationalsocietyRequest": "No", + "cases": "100000", + "suspectedCases": "150000", + "probableCases": "200000", + "confirmedCases": "101000", + "numDead": "2000", + "source": "WHO", + "epiNotes": "The English-Quotient (EQ) test measures your proficiency in the English language, including vocabulary, grammar, and comprehension. Designed for learners and professionals, it provides a benchmark for assessing language skills", + "epiDate": "2024-02-23", + "otherSources": "An epidemic is a rapid spread of infectious disease within a community, affecting a large number of individuals", + "description": "An epidemic occurs when an infectious disease rapidly spreads within a population, causing a significant increase in cases beyond what is normally expected in that area", + "govNumAssisted": "8000", + "numAssisted": "7000", + "numLocalstaff": "6000", + "numVolunteers": "5000", + "numExpatsDelegates": "4000", + "actionVaccination": "Vaccination", + "actionQuarantine": "Quarantine support", + "actionWater": "Water provision", + "actionSanitation": "Sanitation provision", + "actionVector": "Vector control", + "actionAid": "First aid", + "actionAmbulance": "Ambulance services for epidemic disease cases", + "actionVolunteer": "Volunteer Support", + "actionReadiness": "NS Institutional readiness", + "nationalSocietySummary": "Food is any substance consumed to provide nutritional support, energy, and sustenance for living organisms, essential for survival", + "federationSummary": "Quarantine is the isolation of individuals or groups to prevent the spread of contagious diseases, ensuring public health safety", + "rcrcSummary": "A volunteer is a person who offers their time and skills freely to help others or support a cause without payment", + "informationBulletin": "Planned", + "actionOther": "The environment encompasses all living and non-living things, forming a complex and interconnected web that sustains life. It requires careful stewardship to ensure ecological balance and biodiversity", + "interventionOptionOne": "Requested", + "interventionOptionTwo": "Planned", + "interventionOptionThree": "Completed", + "drefRequested": "700000", + "emergencyAppeal": "800000", + "rapidResponse": "900000", + "emergencyResponse": "90000", + "originatorName": "Keyur", + "originatorTitle": "Project Manager", + "originatorEmail": "keyur@sunshine.com", + "originatorPhone": "9802556314", + "nationalName": "Navin", + "nationalTitle": "System Engineer", + "nationalEmail": "navin@theone.com", + "nationalPhone": "9804115777", + "ifrcName": "Aditya", + "ifrcTitle": "Cofounder", + "ifrcEmail": "aditya@gmail.com", + "ifrcPhone": "9801447523", + "mediaName": "Shubh", + "mediaTitle": "QAT", + "mediaEmail": "shubh@qat.com", + "mediaPhone": "9805441239", + "visibiltyOptOne": "RCRC Movement", + "visibiltyOptTwo": "Public" } diff --git a/packages/e2e-tests/tests/example.spec.ts b/packages/e2e-tests/tests/example.spec.ts new file mode 100644 index 0000000000..52f218840d --- /dev/null +++ b/packages/e2e-tests/tests/example.spec.ts @@ -0,0 +1,13 @@ +import { expect, test } from '@playwright/test'; + +test('has title', async ({ page }) => { + await page.goto('/'); + // Expect a title "to contain" a substring. + await expect(page).toHaveTitle(/IFRC GO/); +}); + +test('surge catalogue overview title', async ({ page }) => { + await page.goto('/surge/catalogue/overview'); + // Expects page to have a heading with the name of Surge. + await expect(page.getByRole('heading', { level: 1 })).toHaveText('Surge'); +});