From 3c39a88f0a73dd5579bbd93e7f2bdd5180ae2675 Mon Sep 17 00:00:00 2001 From: Penelope Lischer <102491809+penny-lischer@users.noreply.github.com> Date: Thu, 25 Jul 2024 09:36:56 -0700 Subject: [PATCH] Experience/15059/smoke GitHub action (#15332) * 15059 - added github action workflow for frontend smoke tests to be run against live data * 15059 - removed env param * 15059 - Added pre steps for running smoke tests * 15059 - updates to github action for smoke e2e * 15059 - updates to github action for smoke e2e * 15059 - updated to use secrets * 15059 - Added on workflow_dispatch * 15059 - Fixed merge conflicts * 15059 - Removed smoke attribute from tests that need to be reworked in future PR --- .github/workflows/start_frontend_smoke.yml | 1 + .../all/admin/receiver-status-page.spec.ts | 474 ++++++------------ .../all/organization-settings-page.spec.ts | 367 ++++++-------- 3 files changed, 291 insertions(+), 551 deletions(-) diff --git a/.github/workflows/start_frontend_smoke.yml b/.github/workflows/start_frontend_smoke.yml index 546a5f03e04..5734240a867 100644 --- a/.github/workflows/start_frontend_smoke.yml +++ b/.github/workflows/start_frontend_smoke.yml @@ -40,6 +40,7 @@ jobs: yarn run test:e2e-smoke echo "::endgroup::" - name: "Store E2E Results" + if: ${{ !cancelled() }} uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b with: name: smoke-data diff --git a/frontend-react/e2e/spec/all/admin/receiver-status-page.spec.ts b/frontend-react/e2e/spec/all/admin/receiver-status-page.spec.ts index 1855e011306..33fcf977608 100644 --- a/frontend-react/e2e/spec/all/admin/receiver-status-page.spec.ts +++ b/frontend-react/e2e/spec/all/admin/receiver-status-page.spec.ts @@ -50,33 +50,25 @@ test.describe("Admin Receiver Status Page", () => { test.describe("authenticated receiver", () => { test.use({ storageState: logins.receiver.path }); test("returns Page Not Found", async ({ adminReceiverStatusPage }) => { - await expect(adminReceiverStatusPage.page).toHaveTitle( - /Page Not Found/, - ); + await expect(adminReceiverStatusPage.page).toHaveTitle(/Page Not Found/); }); }); test.describe("authenticated sender", () => { test.use({ storageState: logins.sender.path }); test("returns Page Not Found", async ({ adminReceiverStatusPage }) => { - await expect(adminReceiverStatusPage.page).toHaveTitle( - /Page Not Found/, - ); + await expect(adminReceiverStatusPage.page).toHaveTitle(/Page Not Found/); }); }); test.describe("authenticated admin", () => { test.use({ storageState: logins.admin.path }); - test("If there is an error, the error is shown on the page", async ({ - adminReceiverStatusPage, - }) => { + test("If there is an error, the error is shown on the page", async ({ adminReceiverStatusPage }) => { adminReceiverStatusPage.mockError = true; await adminReceiverStatusPage.reload(); - await expect( - adminReceiverStatusPage.page.getByText("there was an error"), - ).toBeVisible(); + await expect(adminReceiverStatusPage.page.getByText("there was an error")).toBeVisible(); }); test( @@ -85,151 +77,81 @@ test.describe("Admin Receiver Status Page", () => { tag: "@smoke", }, async ({ adminReceiverStatusPage }) => { - await expect(adminReceiverStatusPage.page).toHaveURL( - adminReceiverStatusPage.url, - ); - await expect(adminReceiverStatusPage.page).toHaveTitle( - adminReceiverStatusPage.title, - ); + await expect(adminReceiverStatusPage.page).toHaveURL(adminReceiverStatusPage.url); + await expect(adminReceiverStatusPage.page).toHaveTitle(adminReceiverStatusPage.title); }, ); test.describe("When there is no error", () => { - test.describe( - "Displays correctly", - { - tag: "@smoke", - }, - () => { - test("header", async ({ adminReceiverStatusPage }) => { - await expect( - adminReceiverStatusPage.heading, - ).toBeVisible(); - }); - - test.describe( - "filters", - { - tag: "@smoke", - }, - () => { - test("date range", async ({ - adminReceiverStatusPage, - }) => { - const { - button, - label, - modalOverlay, - valueDisplay, - } = - adminReceiverStatusPage.filterFormInputs - .dateRange; - await expect(label).toBeVisible(); - await expect(button).toBeVisible(); - await expect(valueDisplay).toHaveText( - adminReceiverStatusPage.expectedDateRangeLabelText, - ); - await expect(modalOverlay).toBeHidden(); - }); - - test("receiver name", async ({ - adminReceiverStatusPage, - }) => { - const { - input, - expectedTooltipText, - label, - tooltip, - expectedDefaultValue, - } = - adminReceiverStatusPage.filterFormInputs - .receiverName; - await expect(label).toBeVisible(); - await expect(input).toBeVisible(); - await expect(input).toHaveValue( - expectedDefaultValue, - ); - - await expect(tooltip).toBeHidden(); - await input.hover(); - await expect(tooltip).toBeVisible(); - await expect(tooltip).toHaveText( - expectedTooltipText, - ); - }); + test.describe("Displays correctly", () => { + test("header", async ({ adminReceiverStatusPage }) => { + await expect(adminReceiverStatusPage.heading).toBeVisible(); + }); - test("results message", async ({ - adminReceiverStatusPage, - }) => { - const { - input, - expectedTooltipText, - label, - tooltip, - expectedDefaultValue, - } = - adminReceiverStatusPage.filterFormInputs - .resultMessage; - await expect(label).toBeVisible(); - await expect(input).toBeVisible(); - await expect(input).toHaveValue( - expectedDefaultValue, - ); + test.describe( + "filters", + { + tag: "@smoke", + }, + () => { + test("date range", async ({ adminReceiverStatusPage }) => { + const { button, label, modalOverlay, valueDisplay } = + adminReceiverStatusPage.filterFormInputs.dateRange; + await expect(label).toBeVisible(); + await expect(button).toBeVisible(); + await expect(valueDisplay).toHaveText(adminReceiverStatusPage.expectedDateRangeLabelText); + await expect(modalOverlay).toBeHidden(); + }); - await expect(tooltip).toBeHidden(); - await input.hover(); - await expect(tooltip).toBeVisible(); - await expect(tooltip).toHaveText( - expectedTooltipText, - ); - }); + test("receiver name", async ({ adminReceiverStatusPage }) => { + const { input, expectedTooltipText, label, tooltip, expectedDefaultValue } = + adminReceiverStatusPage.filterFormInputs.receiverName; + await expect(label).toBeVisible(); + await expect(input).toBeVisible(); + await expect(input).toHaveValue(expectedDefaultValue); + + await expect(tooltip).toBeHidden(); + await input.hover(); + await expect(tooltip).toBeVisible(); + await expect(tooltip).toHaveText(expectedTooltipText); + }); - test("success type", async ({ - adminReceiverStatusPage, - }) => { - const { - input, - expectedTooltipText, - label, - tooltip, - expectedDefaultValue, - } = - adminReceiverStatusPage.filterFormInputs - .successType; - await expect(label).toBeVisible(); - await expect(input).toBeVisible(); - await expect(input).toHaveValue( - expectedDefaultValue, - ); + test("results message", async ({ adminReceiverStatusPage }) => { + const { input, expectedTooltipText, label, tooltip, expectedDefaultValue } = + adminReceiverStatusPage.filterFormInputs.resultMessage; + await expect(label).toBeVisible(); + await expect(input).toBeVisible(); + await expect(input).toHaveValue(expectedDefaultValue); + + await expect(tooltip).toBeHidden(); + await input.hover(); + await expect(tooltip).toBeVisible(); + await expect(tooltip).toHaveText(expectedTooltipText); + }); - await expect(tooltip).toBeHidden(); - await input.hover(); - await expect(tooltip).toBeVisible(); - await expect(tooltip).toHaveText( - expectedTooltipText, - ); - }); - }, - ); + test("success type", async ({ adminReceiverStatusPage }) => { + const { input, expectedTooltipText, label, tooltip, expectedDefaultValue } = + adminReceiverStatusPage.filterFormInputs.successType; + await expect(label).toBeVisible(); + await expect(input).toBeVisible(); + await expect(input).toHaveValue(expectedDefaultValue); + + await expect(tooltip).toBeHidden(); + await input.hover(); + await expect(tooltip).toBeVisible(); + await expect(tooltip).toHaveText(expectedTooltipText); + }); + }, + ); - // Failures here indicate potential misalignment of playwright/browser timezone - test.describe( - "receiver statuses", - { - tag: "@smoke", - }, - () => { - test("time periods", async ({ - adminReceiverStatusPage, - }) => { - const result = - await adminReceiverStatusPage.testReceiverStatusDisplay(); - expect(result).toBe(true); - }); - }, - ); - }, - ); + // Failures here indicate potential misalignment of playwright/browser timezone + test.describe("receiver statuses", () => { + test("time periods", async ({ adminReceiverStatusPage }) => { + const result = await adminReceiverStatusPage.testReceiverStatusDisplay(); + expect(result).toBe(true); + }); + }); + }); test.describe("Functions correctly", () => { test.describe("filters", () => { @@ -239,71 +161,47 @@ test.describe("Admin Receiver Status Page", () => { tag: "@smoke", }, () => { - test("works through calendar", async ({ - adminReceiverStatusPage, - }) => { - const { valueDisplay } = - adminReceiverStatusPage.filterFormInputs - .dateRange; + test("works through calendar", async ({ adminReceiverStatusPage }) => { + const { valueDisplay } = adminReceiverStatusPage.filterFormInputs.dateRange; const now = new Date(); const targetFrom = startOfDay(subDays(now, 3)); const targetTo = addDays(endOfDay(now), 1); - const reqUrl = - await adminReceiverStatusPage.updateFilters( - { - dateRange: { - value: [targetFrom, targetTo], - }, - }, - ); + const reqUrl = await adminReceiverStatusPage.updateFilters({ + dateRange: { + value: [targetFrom, targetTo], + }, + }); expect(reqUrl).toBeDefined(); await expect(valueDisplay).toHaveText( adminReceiverStatusPage.expectedDateRangeLabelText, ); - expect( - Object.fromEntries( - reqUrl!.searchParams.entries(), - ), - ).toMatchObject({ + expect(Object.fromEntries(reqUrl!.searchParams.entries())).toMatchObject({ start_date: targetFrom.toISOString(), end_date: targetTo.toISOString(), }); }); - test("works through textboxes", async ({ - adminReceiverStatusPage, - }) => { - const { valueDisplay } = - adminReceiverStatusPage.filterFormInputs - .dateRange; - await expect( - adminReceiverStatusPage.receiverStatusRowsLocator, - ).not.toHaveCount(0); + test("works through textboxes", async ({ adminReceiverStatusPage }) => { + const { valueDisplay } = adminReceiverStatusPage.filterFormInputs.dateRange; + await expect(adminReceiverStatusPage.receiverStatusRowsLocator).not.toHaveCount(0); const now = new Date(); const targetFrom = startOfDay(subDays(now, 3)); const targetTo = addDays(endOfDay(now), 1); - const reqUrl = - await adminReceiverStatusPage.updateFilters( - { - dateRange: { - value: [targetFrom, targetTo], - }, - }, - ); + const reqUrl = await adminReceiverStatusPage.updateFilters({ + dateRange: { + value: [targetFrom, targetTo], + }, + }); expect(reqUrl).toBeDefined(); await expect(valueDisplay).toHaveText( adminReceiverStatusPage.expectedDateRangeLabelText, ); - expect( - Object.fromEntries( - reqUrl!.searchParams.entries(), - ), - ).toMatchObject({ + expect(Object.fromEntries(reqUrl!.searchParams.entries())).toMatchObject({ start_date: targetFrom.toISOString(), end_date: targetTo.toISOString(), }); @@ -311,16 +209,12 @@ test.describe("Admin Receiver Status Page", () => { }, ); - test("receiver name", async ({ - adminReceiverStatusPage, - }) => { + test("receiver name", async ({ adminReceiverStatusPage }) => { const { organizationName, receiverName, successRate } = adminReceiverStatusPage.timePeriodData[1]; - const receiversStatusRows = - adminReceiverStatusPage.receiverStatusRowsLocator; - const expectedReceiverStatusRow = - receiversStatusRows.nthCustom(0); + const receiversStatusRows = adminReceiverStatusPage.receiverStatusRowsLocator; + const expectedReceiverStatusRow = receiversStatusRows.nthCustom(0); const expectedReceiverStatusRowTitle = adminReceiverStatusPage.getExpectedReceiverStatusRowTitle( organizationName, @@ -328,9 +222,7 @@ test.describe("Admin Receiver Status Page", () => { successRate, ); - await expect(receiversStatusRows).toHaveCount( - adminReceiverStatusPage.timePeriodData.length, - ); + await expect(receiversStatusRows).toHaveCount(adminReceiverStatusPage.timePeriodData.length); await adminReceiverStatusPage.updateFilters({ receiverName, @@ -338,64 +230,45 @@ test.describe("Admin Receiver Status Page", () => { await expect(receiversStatusRows).toHaveCount(1); await expect(expectedReceiverStatusRow).toBeVisible(); - await expect( - expectedReceiverStatusRow.title, - ).toHaveText(expectedReceiverStatusRowTitle); + await expect(expectedReceiverStatusRow.title).toHaveText(expectedReceiverStatusRowTitle); await adminReceiverStatusPage.resetFilters(); - await expect(receiversStatusRows).toHaveCount( - adminReceiverStatusPage.timePeriodData.length, - ); + await expect(receiversStatusRows).toHaveCount(adminReceiverStatusPage.timePeriodData.length); }); - test("result message", async ({ - adminReceiverStatusPage, - }) => { + test("result message", async ({ adminReceiverStatusPage }) => { // get first entry's result from all-fail receiver's first day -> third time period const receiverI = 0; const dayI = 0; const timePeriodI = 2; const entryI = 0; - const { days } = - adminReceiverStatusPage.timePeriodData[receiverI]; - const { connectionCheckResult } = - days[dayI].timePeriods[timePeriodI].entries[entryI]; + const { days } = adminReceiverStatusPage.timePeriodData[receiverI]; + const { connectionCheckResult } = days[dayI].timePeriods[timePeriodI].entries[entryI]; - const receiversStatusRows = - adminReceiverStatusPage.receiverStatusRowsLocator; + const receiversStatusRows = adminReceiverStatusPage.receiverStatusRowsLocator; await adminReceiverStatusPage.updateFilters({ resultMessage: connectionCheckResult, }); - for (const [ - i, - { days }, - ] of adminReceiverStatusPage.timePeriodData.entries()) { + for (const [i, { days }] of adminReceiverStatusPage.timePeriodData.entries()) { const isRowExpected = i === receiverI; const row = receiversStatusRows.nthCustom(i); for (const [i, { timePeriods }] of days.entries()) { - const isDayExpected = - isRowExpected && i === dayI; + const isDayExpected = isRowExpected && i === dayI; const rowDay = row.days.nthCustom(i); for (const [i] of timePeriods.entries()) { - const isTimePeriodExpected = - isDayExpected && i === timePeriodI; + const isTimePeriodExpected = isDayExpected && i === timePeriodI; const expectedClass = !isTimePeriodExpected ? /success-result-hidden/ : /^((?!success-result-hidden).)*$/; - const rowDayTimePeriod = - rowDay.timePeriods.nth(i); - - await expect( - rowDayTimePeriod, - ).toBeVisible(); - await expect(rowDayTimePeriod).toHaveClass( - expectedClass, - ); + const rowDayTimePeriod = rowDay.timePeriods.nth(i); + + await expect(rowDayTimePeriod).toBeVisible(); + await expect(rowDayTimePeriod).toHaveClass(expectedClass); } } } @@ -405,47 +278,35 @@ test.describe("Admin Receiver Status Page", () => { await adminReceiverStatusPage.testReceiverStatusDisplay(); }); - test("success type", async ({ - adminReceiverStatusPage, - }) => { - const [failRow, , mixedRow] = - adminReceiverStatusPage.timePeriodData; - const failRowTitle = - adminReceiverStatusPage.getExpectedReceiverStatusRowTitle( - failRow.organizationName, - failRow.receiverName, - failRow.successRate, - ); - const mixedRowTitle = - adminReceiverStatusPage.getExpectedReceiverStatusRowTitle( - mixedRow.organizationName, - mixedRow.receiverName, - mixedRow.successRate, - ); + test("success type", async ({ adminReceiverStatusPage }) => { + const [failRow, , mixedRow] = adminReceiverStatusPage.timePeriodData; + const failRowTitle = adminReceiverStatusPage.getExpectedReceiverStatusRowTitle( + failRow.organizationName, + failRow.receiverName, + failRow.successRate, + ); + const mixedRowTitle = adminReceiverStatusPage.getExpectedReceiverStatusRowTitle( + mixedRow.organizationName, + mixedRow.receiverName, + mixedRow.successRate, + ); - const receiversStatusRows = - adminReceiverStatusPage.receiverStatusRowsLocator; + const receiversStatusRows = adminReceiverStatusPage.receiverStatusRowsLocator; const expectedRow = receiversStatusRows.nthCustom(0); - await expect(receiversStatusRows).toHaveCount( - adminReceiverStatusPage.timePeriodData.length, - ); + await expect(receiversStatusRows).toHaveCount(adminReceiverStatusPage.timePeriodData.length); await adminReceiverStatusPage.updateFilters({ successType: "ALL_FAILURE", }); await expect(receiversStatusRows).toHaveCount(1); - await expect(expectedRow.title).toHaveText( - failRowTitle, - ); + await expect(expectedRow.title).toHaveText(failRowTitle); await adminReceiverStatusPage.updateFilters({ successType: "MIXED_SUCCESS", }); await expect(receiversStatusRows).toHaveCount(1); - await expect(expectedRow.title).toHaveText( - mixedRowTitle, - ); + await expect(expectedRow.title).toHaveText(mixedRowTitle); await adminReceiverStatusPage.resetFilters(); @@ -455,11 +316,8 @@ test.describe("Admin Receiver Status Page", () => { test.describe("receiver statuses", () => { test.describe("date range length changes", () => { - test("increases", async ({ - adminReceiverStatusPage, - }) => { - const rows = - adminReceiverStatusPage.receiverStatusRowsLocator; + test("increases", async ({ adminReceiverStatusPage }) => { + const rows = adminReceiverStatusPage.receiverStatusRowsLocator; const days = rows.nthCustom(0).days; await expect(rows).not.toHaveCount(0); const now = new Date(); @@ -473,11 +331,8 @@ test.describe("Admin Receiver Status Page", () => { await expect(days).toHaveCount(4); }); - test("decreases", async ({ - adminReceiverStatusPage, - }) => { - const rows = - adminReceiverStatusPage.receiverStatusRowsLocator; + test("decreases", async ({ adminReceiverStatusPage }) => { + const rows = adminReceiverStatusPage.receiverStatusRowsLocator; const days = rows.nthCustom(0).days; await expect(rows).not.toHaveCount(0); const now = new Date(); @@ -492,26 +347,13 @@ test.describe("Admin Receiver Status Page", () => { }); }); - test("time period modals", async ({ - adminReceiverStatusPage, - }) => { - const overlay = - adminReceiverStatusPage.filterFormInputs.dateRange - .modalOverlay; - for (const [ - i, - { days }, - ] of adminReceiverStatusPage.timePeriodData.entries()) { - const { days: daysLoc } = - adminReceiverStatusPage.receiverStatusRowsLocator.nthCustom( - i, - ); + test("time period modals", async ({ adminReceiverStatusPage }) => { + const overlay = adminReceiverStatusPage.filterFormInputs.dateRange.modalOverlay; + for (const [i, { days }] of adminReceiverStatusPage.timePeriodData.entries()) { + const { days: daysLoc } = adminReceiverStatusPage.receiverStatusRowsLocator.nthCustom(i); for (const [dayI, day] of days.entries()) { - for (const [ - i, - { successRateType, entries }, - ] of day.timePeriods.entries()) { + for (const [i, { successRateType, entries }] of day.timePeriods.entries()) { // only first entry in time period is currently displayed const { organizationName, @@ -523,13 +365,9 @@ test.describe("Admin Receiver Status Page", () => { connectionCheckCompletedAt, connectionCheckResult, } = entries[0] ?? {}; - const sliceEle = daysLoc - .nthCustom(dayI) - .timePeriods.nth(i); + const sliceEle = daysLoc.nthCustom(dayI).timePeriods.nth(i); - const isModalExpectedVisible = - successRateType !== - SuccessRate.UNDEFINED; + const isModalExpectedVisible = successRateType !== SuccessRate.UNDEFINED; await sliceEle.click({ force: true }); await expect(overlay).toBeAttached({ @@ -537,16 +375,11 @@ test.describe("Admin Receiver Status Page", () => { }); if (isModalExpectedVisible) { - const expectedResultText = - connectionCheckSuccessful - ? "success" - : "failed"; + const expectedResultText = connectionCheckSuccessful ? "success" : "failed"; const expectedModalText = `Results for connection verification checkOrg:${organizationName} (id: ${organizationId})Receiver:${receiverName} (id: ${receiverId})Result:${expectedResultText}Started At:${formatDate(connectionCheckStartedAt)}${connectionCheckStartedAt.toISOString()}Time to complete:${durationFormatShort(connectionCheckCompletedAt, connectionCheckStartedAt)}Result message:${connectionCheckResult}`; await expect(overlay).toBeVisible(); - await expect(overlay).toHaveText( - expectedModalText, - ); + await expect(overlay).toHaveText(expectedModalText); await overlay.press("Escape"); } @@ -555,25 +388,16 @@ test.describe("Admin Receiver Status Page", () => { } }); - test("receiver org links", async ({ - adminReceiverStatusPage, - }) => { - const rows = - adminReceiverStatusPage.receiverStatusRowsLocator; + test("receiver org links", async ({ adminReceiverStatusPage }) => { + const rows = adminReceiverStatusPage.receiverStatusRowsLocator; - for (const [ - i, - { organizationName }, - ] of adminReceiverStatusPage.timePeriodData.entries()) { + for (const [i, { organizationName }] of adminReceiverStatusPage.timePeriodData.entries()) { const row = rows.nthCustom(i); const link = row.title.getByRole("link", { name: organizationName, }); - const expectedUrl = - adminReceiverStatusPage.getExpectedStatusOrganizationUrl( - i, - ); + const expectedUrl = adminReceiverStatusPage.getExpectedStatusOrganizationUrl(i); await expect(link).toBeVisible(); const p = adminReceiverStatusPage.page.route( `api/settings/organizations/${organizationName}`, @@ -591,24 +415,16 @@ test.describe("Admin Receiver Status Page", () => { }), ); await link.click(); - await expect( - adminReceiverStatusPage.page, - ).toHaveURL(expectedUrl); + await expect(adminReceiverStatusPage.page).toHaveURL(expectedUrl); await p; await adminReceiverStatusPage.page.goBack(); } }); - test("receiver links", async ({ - adminReceiverStatusPage, - }) => { - const rows = - adminReceiverStatusPage.receiverStatusRowsLocator; + test("receiver links", async ({ adminReceiverStatusPage }) => { + const rows = adminReceiverStatusPage.receiverStatusRowsLocator; - for (const [ - i, - { receiverName }, - ] of adminReceiverStatusPage.timePeriodData.entries()) { + for (const [i, { receiverName }] of adminReceiverStatusPage.timePeriodData.entries()) { const row = rows.nthCustom(i); const link = row.title.getByRole("link", { @@ -616,12 +432,8 @@ test.describe("Admin Receiver Status Page", () => { }); await expect(link).toBeVisible(); await link.click(); - await expect( - adminReceiverStatusPage.page, - ).toHaveURL( - adminReceiverStatusPage.getExpectedStatusReceiverUrl( - i, - ), + await expect(adminReceiverStatusPage.page).toHaveURL( + adminReceiverStatusPage.getExpectedStatusReceiverUrl(i), ); await adminReceiverStatusPage.page.goBack(); } diff --git a/frontend-react/e2e/spec/all/organization-settings-page.spec.ts b/frontend-react/e2e/spec/all/organization-settings-page.spec.ts index 70c3231f50d..e8906c66fe2 100644 --- a/frontend-react/e2e/spec/all/organization-settings-page.spec.ts +++ b/frontend-react/e2e/spec/all/organization-settings-page.spec.ts @@ -65,241 +65,168 @@ test.describe("Admin Organization Settings Page", () => { test.describe("authenticated admin", () => { test.use({ storageState: "e2e/.auth/admin.json" }); - test("If there is an error, the error is shown on the page", async ({ - organizationPage, - }) => { + test("If there is an error, the error is shown on the page", async ({ organizationPage }) => { organizationPage.mockError = true; await organizationPage.reload(); - await expect( - organizationPage.page.getByText("there was an error"), - ).toBeVisible(); + await expect(organizationPage.page.getByText("there was an error")).toBeVisible(); }); - test.describe( - "When there is no error", - { - tag: "@smoke", - }, - () => { - test("nav contains the 'Admin tools' dropdown with 'Organization Settings' option", async ({ - organizationPage, - }) => { - const navItems = - organizationPage.page.locator(".usa-nav li"); - await expect(navItems).toContainText(["Admin tools"]); - - await organizationPage.page - .getByTestId("auth-header") - .getByTestId("navDropDownButton") - .getByText("Admin tools") - .click(); - - expect( - organizationPage.page.getByText( - "Organization Settings", - ), - ).toBeTruthy(); - - await organizationPage.page - .getByText("Organization Settings") - .click(); - await expect(organizationPage.page).toHaveURL( - "/admin/settings", - ); - }); + test.describe("When there is no error", () => { + test("nav contains the 'Admin tools' dropdown with 'Organization Settings' option", async ({ + organizationPage, + }) => { + const navItems = organizationPage.page.locator(".usa-nav li"); + await expect(navItems).toContainText(["Admin tools"]); + + await organizationPage.page + .getByTestId("auth-header") + .getByTestId("navDropDownButton") + .getByText("Admin tools") + .click(); + + expect(organizationPage.page.getByText("Organization Settings")).toBeTruthy(); + + await organizationPage.page.getByText("Organization Settings").click(); + await expect(organizationPage.page).toHaveURL("/admin/settings"); + }); + + test("Has correct title", async ({ organizationPage }) => { + await expect(organizationPage.page).toHaveURL(/settings/); + await expect(organizationPage.page).toHaveTitle(/Admin-Organizations/); + }); + + test("Displays data", async ({ organizationPage }) => { + // Heading with result length + await expect( + organizationPage.page.getByRole("heading", { + name: `Organizations (${MOCK_GET_ORGANIZATION_SETTINGS_LIST.length})`, + }), + ).toBeVisible(); + + // Table + // empty is button column + const colHeaders = ["Name", "Description", "Jurisdiction", "State", "County", ""]; + // include header row + const rowCount = MOCK_GET_ORGANIZATION_SETTINGS_LIST.length + 1; + const table = organizationPage.page.getByRole("table"); + await expect(table).toBeVisible(); + const rows = await table.getByRole("row").all(); + expect(rows).toHaveLength(rowCount); + for (const [i, row] of rows.entries()) { + const cols = await row.getByRole("cell").allTextContents(); + expect(cols).toHaveLength(colHeaders.length); + + const { description, jurisdiction, name, stateCode } = + i === 0 + ? MOCK_GET_ORGANIZATION_SETTINGS_LIST[0] + : (MOCK_GET_ORGANIZATION_SETTINGS_LIST.find((i) => i.name === cols[0]) ?? { + name: "INVALID", + }); + // if first row, we expect column headers. else, the data row matching id (name) + // SetEdit is text of buttons in button column + const expectedColContents = + i === 0 + ? colHeaders + : [name, description ?? "", jurisdiction ?? "", stateCode ?? "", "", "SetEdit"]; + + for (const [i, col] of cols.entries()) { + expect(col).toBe(expectedColContents[i]); + } + } + }); - test("Has correct title", async ({ organizationPage }) => { - await expect(organizationPage.page).toHaveURL(/settings/); - await expect(organizationPage.page).toHaveTitle( - /Admin-Organizations/, - ); + test("Create new organization navigation works", async ({ organizationPage }) => { + const link = organizationPage.page.getByRole("link", { + name: "Create New Organization", }); + const expectedUrl = "/admin/new/org"; - test("Displays data", async ({ organizationPage }) => { - // Heading with result length - await expect( - organizationPage.page.getByRole("heading", { - name: `Organizations (${MOCK_GET_ORGANIZATION_SETTINGS_LIST.length})`, - }), - ).toBeVisible(); - - // Table - // empty is button column - const colHeaders = [ - "Name", - "Description", - "Jurisdiction", - "State", - "County", - "", - ]; - // include header row - const rowCount = - MOCK_GET_ORGANIZATION_SETTINGS_LIST.length + 1; - const table = organizationPage.page.getByRole("table"); - await expect(table).toBeVisible(); - const rows = await table.getByRole("row").all(); - expect(rows).toHaveLength(rowCount); - for (const [i, row] of rows.entries()) { - const cols = await row - .getByRole("cell") - .allTextContents(); - expect(cols).toHaveLength(colHeaders.length); - - const { description, jurisdiction, name, stateCode } = - i === 0 - ? MOCK_GET_ORGANIZATION_SETTINGS_LIST[0] - : MOCK_GET_ORGANIZATION_SETTINGS_LIST.find( - (i) => i.name === cols[0], - ) ?? { name: "INVALID" }; - // if first row, we expect column headers. else, the data row matching id (name) - // SetEdit is text of buttons in button column - const expectedColContents = - i === 0 - ? colHeaders - : [ - name, - description ?? "", - jurisdiction ?? "", - stateCode ?? "", - "", - "SetEdit", - ]; - - for (const [i, col] of cols.entries()) { - expect(col).toBe(expectedColContents[i]); - } - } - }); + await expect(link).toBeVisible(); + await link.click(); + await organizationPage.page.waitForURL(expectedUrl); + await expect(organizationPage.page.getByRole("heading")).toBeVisible(); - test("Create new organization navigation works", async ({ - organizationPage, - }) => { - const link = organizationPage.page.getByRole("link", { - name: "Create New Organization", - }); - const expectedUrl = "/admin/new/org"; - - await expect(link).toBeVisible(); - await link.click(); - await organizationPage.page.waitForURL(expectedUrl); - await expect( - organizationPage.page.getByRole("heading"), - ).toBeVisible(); - - expect(organizationPage.page.url()).toContain(expectedUrl); - }); + expect(organizationPage.page.url()).toContain(expectedUrl); + }); - test("Save CSV button downloads a file", async ({ - organizationPage, - }) => { - const downloadProm = - organizationPage.page.waitForEvent("download"); - const saveButton = organizationPage.page.getByRole( - "button", - { - name: "Save List to CSV", - }, - ); - - await expect(saveButton).toBeVisible(); - await saveButton.click(); - const download = await downloadProm; - - const expectedFile = readFileSync( - join(__dirname, "../../../mocks/prime-orgs.csv"), - { encoding: "utf-8" }, - ); - const stream = await download.createReadStream(); - const file = (await stream.toArray()).toString(); - expect(file).toBe(expectedFile); - expect(download.suggestedFilename()).toBe("prime-orgs.csv"); + test("Save CSV button downloads a file", async ({ organizationPage }) => { + const downloadProm = organizationPage.page.waitForEvent("download"); + const saveButton = organizationPage.page.getByRole("button", { + name: "Save List to CSV", }); - test("Filtering works", async ({ organizationPage }) => { - const table = organizationPage.page.getByRole("table"); - const { description, name, jurisdiction, stateCode } = - MOCK_GET_ORGANIZATION_SETTINGS_LIST[2]; - const filterBox = organizationPage.page.getByRole( - "textbox", - { - name: "Filter:", - }, - ); - - await expect(filterBox).toBeVisible(); - - await filterBox.fill(name); - const rows = await table.getByRole("row").all(); - expect(rows).toHaveLength(2); - const cols = rows[1].getByRole("cell").allTextContents(); - const expectedColContents = [ - name, - description ?? "", - jurisdiction ?? "", - stateCode ?? "", - "", - "SetEdit", - ]; - - for (const [i, col] of (await cols).entries()) { - expect(col).toBe(expectedColContents[i]); - } + await expect(saveButton).toBeVisible(); + await saveButton.click(); + const download = await downloadProm; + + const expectedFile = readFileSync(join(__dirname, "../../../mocks/prime-orgs.csv"), { + encoding: "utf-8", + }); + const stream = await download.createReadStream(); + const file = (await stream.toArray()).toString(); + expect(file).toBe(expectedFile); + expect(download.suggestedFilename()).toBe("prime-orgs.csv"); + }); + + test("Filtering works", async ({ organizationPage }) => { + const table = organizationPage.page.getByRole("table"); + const { description, name, jurisdiction, stateCode } = MOCK_GET_ORGANIZATION_SETTINGS_LIST[2]; + const filterBox = organizationPage.page.getByRole("textbox", { + name: "Filter:", }); - test('Clicking "Set" updates link label', async ({ - organizationPage, - }) => { - const firstDataRow = organizationPage.page - .getByRole("table") - .getByRole("row") - .nth(1); - const firstDataRowName = - (await firstDataRow - .getByRole("cell") - .nth(0) - .textContent()) ?? "INVALID"; - const setButton = firstDataRow.getByRole("button", { - name: "Set", - }); - - await expect(setButton).toBeVisible(); - await setButton.click(); - - const orgLink = organizationPage.page.getByRole("link", { - name: firstDataRowName, - }); - await expect(orgLink).toBeVisible(); - await expect(orgLink).toHaveAttribute( - "href", - "/admin/settings", - ); + await expect(filterBox).toBeVisible(); + + await filterBox.fill(name); + const rows = await table.getByRole("row").all(); + expect(rows).toHaveLength(2); + const cols = rows[1].getByRole("cell").allTextContents(); + const expectedColContents = [ + name, + description ?? "", + jurisdiction ?? "", + stateCode ?? "", + "", + "SetEdit", + ]; + + for (const [i, col] of (await cols).entries()) { + expect(col).toBe(expectedColContents[i]); + } + }); + + test('Clicking "Set" updates link label', async ({ organizationPage }) => { + const firstDataRow = organizationPage.page.getByRole("table").getByRole("row").nth(1); + const firstDataRowName = (await firstDataRow.getByRole("cell").nth(0).textContent()) ?? "INVALID"; + const setButton = firstDataRow.getByRole("button", { + name: "Set", }); - test("Edit navigation works", async ({ organizationPage }) => { - const firstDataRow = organizationPage.page - .getByRole("table") - .getByRole("row") - .nth(1); - const firstDataRowName = await firstDataRow - .getByRole("cell") - .nth(0) - .textContent(); - const expectedUrl = `/admin/orgsettings/org/${firstDataRowName}`; - const editButton = firstDataRow.getByRole("button", { - name: "Edit", - }); - - await expect(editButton).toBeVisible(); - await editButton.click(); - await organizationPage.page.waitForURL(expectedUrl); - await expect( - organizationPage.page.getByRole("heading"), - ).toBeVisible(); - - expect(organizationPage.page.url()).toContain(expectedUrl); + await expect(setButton).toBeVisible(); + await setButton.click(); + + const orgLink = organizationPage.page.getByRole("link", { + name: firstDataRowName, + }); + await expect(orgLink).toBeVisible(); + await expect(orgLink).toHaveAttribute("href", "/admin/settings"); + }); + + test("Edit navigation works", async ({ organizationPage }) => { + const firstDataRow = organizationPage.page.getByRole("table").getByRole("row").nth(1); + const firstDataRowName = await firstDataRow.getByRole("cell").nth(0).textContent(); + const expectedUrl = `/admin/orgsettings/org/${firstDataRowName}`; + const editButton = firstDataRow.getByRole("button", { + name: "Edit", }); - }, - ); + + await expect(editButton).toBeVisible(); + await editButton.click(); + await organizationPage.page.waitForURL(expectedUrl); + await expect(organizationPage.page.getByRole("heading")).toBeVisible(); + + expect(organizationPage.page.url()).toContain(expectedUrl); + }); + }); }); });