#15217 - Implement smoke test user flow for Last Mile Failures (#15843)

* #15217 - Implement smoke test user flow for Last Mile Failures

* Fixed linting issues

* Fixed linting issues

frontend-react/e2e/pages/authenticated/last-mile-failures.ts

@@ -1,3 +1,6 @@
+import { expect, Locator } from "@playwright/test";
+import { startOfDay, subDays } from "date-fns";
+import { tableRows } from "../../helpers/utils";
 import { MOCK_GET_RESEND, MOCK_GET_SEND_FAILURES } from "../../mocks/lastMilefailures";
 import { BasePage, BasePageTestArgs, RouteHandlerFulfillEntry } from "../BasePage";
 
@@ -6,6 +9,16 @@ export class LastMileFailuresPage extends BasePage {
     static readonly API_GET_SEND_FAILURES = "/api/adm/getsendfailures?days_to_show=15";
     static readonly API_GET_RESEND = "/api/adm/getresend?days_to_show=15";
 
+    readonly filterFormInputs: {
+        filter: {
+            input: Locator;
+        },
+        daysToShow: {
+            input: Locator;
+            button: Locator
+        }
+    };
+
     constructor(testArgs: BasePageTestArgs) {
         super(
             {
@@ -19,8 +32,20 @@ export class LastMileFailuresPage extends BasePage {
         );
 
         this.addMockRouteHandlers([this.createMockGetSendFailuresHandler(), this.createMockGetResendHandler()]);
+        this.filterFormInputs = {
+            filter: {
+                input: this.page.locator("#input_filter")
+            },
+            daysToShow: {
+                input: this.page.locator("#days_to_show"),
+                button: this.page.getByRole("button", {
+                    name: "Refresh",
+                }),
+            }
+        }
     }
 
+
     createMockGetSendFailuresHandler(): RouteHandlerFulfillEntry {
         return [
             LastMileFailuresPage.API_GET_SEND_FAILURES,
@@ -42,4 +67,38 @@ export class LastMileFailuresPage extends BasePage {
             },
         ];
     }
+
+    async tableColumnDateTimeInRange(
+        daysToShow: number,
+    ) {
+        let datesInRange = true;
+        const rowCount = await tableRows(this.page).count();
+        const now = new Date();
+        const targetFrom = startOfDay(subDays(now, daysToShow));
+
+        for (let i = 0; i < rowCount; i++) {
+            const columnValue = await tableRows(this.page).nth(i).locator("td").nth(0).innerText();
+            const columnDate = new Date(columnValue);
+
+            if (!(columnDate >= targetFrom)) {
+                datesInRange = false;
+                break;
+            }
+        }
+        return datesInRange;
+    }
+
+    async testReportId(
+        reportId: string,
+    ) {
+        const rowCount = await tableRows(this.page).count();
+
+        for (let i = 0; i < rowCount; i++) {
+            const columnValue = await tableRows(this.page).nth(i).locator("td").nth(1).innerText();
+
+            expect(reportId).toEqual(columnValue);
+        }
+
+        return true;
+    }
 }

frontend-react/e2e/spec/chromium-only/authenticated/last-mile-failures-page-user-flow.spec.ts

@@ -0,0 +1,98 @@
+import { tableRows } from "../../../helpers/utils";
+import { LastMileFailuresPage } from "../../../pages/authenticated/last-mile-failures";
+import { test as baseTest, expect } from "../../../test";
+
+export interface LastMileFailuresPageFixtures {
+    lastMileFailuresPage: LastMileFailuresPage;
+}
+
+const test = baseTest.extend<LastMileFailuresPageFixtures>({
+    lastMileFailuresPage: async (
+        {
+            page: _page,
+            isMockDisabled,
+            adminLogin,
+            senderLogin,
+            receiverLogin,
+            storageState,
+            frontendWarningsLogPath,
+            isFrontendWarningsLog,
+        },
+        use,
+    ) => {
+        const page = new LastMileFailuresPage({
+            page: _page,
+            isMockDisabled,
+            adminLogin,
+            senderLogin,
+            receiverLogin,
+            storageState,
+            frontendWarningsLogPath,
+            isFrontendWarningsLog,
+        });
+        await page.goto();
+        await use(page);
+    },
+});
+
+test.describe("Last Mile Failure page",
+    {
+        tag: "@smoke",
+    }, () => {
+    test.describe("admin user", () => {
+        test.use({ storageState: "e2e/.auth/admin.json" });
+
+        test.describe("'Filter'", () => {
+            test("table has expected data when filtering by 'ReportId'", async ({ lastMileFailuresPage }) => {
+                const reportId = await tableRows(lastMileFailuresPage.page).nth(0).locator("td").nth(1).innerText();
+                await lastMileFailuresPage.filterFormInputs.filter.input.fill(reportId);
+                const isReportIdReturned = await lastMileFailuresPage.testReportId(
+                    reportId,
+                );
+                expect(isReportIdReturned).toBe(true);
+            });
+        });
+
+        test.describe("'Days to show' filter", () => {
+            test.beforeEach(async ({ lastMileFailuresPage }) => {
+                await lastMileFailuresPage.filterFormInputs.daysToShow.input.fill("200");
+                await lastMileFailuresPage.page.locator(".usa-table tbody").waitFor({ state: "visible" });
+            });
+
+            test("table has correct headers", async ({ lastMileFailuresPage }) => {
+                await expect(lastMileFailuresPage.page.locator(".column-header-text").nth(0)).toHaveText(/Failed At/);
+                await expect(lastMileFailuresPage.page.locator(".column-header-text").nth(1)).toHaveText(/ReportId/);
+                await expect(lastMileFailuresPage.page.locator(".column-header-text").nth(2)).toHaveText(/Receiver/);
+            });
+
+            test("table column 'Failed At' has expected data", async ({ lastMileFailuresPage, isMockDisabled }) => {
+                test.skip(!isMockDisabled, "Mocks are ENABLED, test");
+                const areDatesInRange = await lastMileFailuresPage.tableColumnDateTimeInRange(
+                    200,
+                );
+                expect(areDatesInRange).toBe(true);
+            });
+        });
+
+        test("table column 'ReportId' will open a modal with report details", async ({ lastMileFailuresPage }) => {
+            const reportId = tableRows(lastMileFailuresPage.page).nth(0).locator("td").nth(1);
+            const reportIdCell = await reportId.innerText();
+            await reportId.click();
+
+            const modal = lastMileFailuresPage.page.getByTestId("modalWindow").nth(0);
+            await expect(modal).toContainText(`Report ID:${reportIdCell}`);
+        });
+
+        test("table column 'Receiver' will open receiver edit page", async ({ lastMileFailuresPage, isMockDisabled }) => {
+            test.skip(!isMockDisabled, "Mocks are ENABLED, skipping test");
+            const receiver = tableRows(lastMileFailuresPage.page).nth(0).locator("td").nth(2);
+            const receiverCell = await receiver.getByRole("link").innerText();
+            await receiver.click();
+
+            await expect(lastMileFailuresPage.page).toHaveURL(
+                `/admin/orgreceiversettings/org/${receiverCell}/receiver//action/edit`,
+            );
+        });
+    });
+    },
+);