Fix Blazor Server merchant integration tests and refactor Edit screen with unified save button

[Copilot]

Merchant Integration Tests Fix

Root Cause

The Blazor Server merchant list page had a table structure that didn't match what the integration tests expected:

1. Missing id attribute: The table element was missing id="merchantList", causing the test to find 0 rows when searching for #merchantList tr
2. Test assertion mismatch: The test was checking for Town in column 4, but the table actually displays Settlement Schedule in that column
3. Merchant name cell with avatar: The merchant name cell contains both an avatar div (with first letter) and the full name, causing exact text comparison to fail
4. Missing step implementations: Several test steps were throwing PendingStepException, preventing the MerchantPRTest from executing completely
5. Missing name attributes: Form input elements were missing name attributes, causing Playwright tests to timeout when trying to locate elements by name
6. Missing IDs on action buttons: View, Edit, and other action buttons were missing ID attributes, causing tests to timeout when trying to click them
7. UI/Test mismatch: Edit merchant screen had separate save buttons per tab, but tests expected a single save button for atomic updates

All 4 merchant integration tests fail at the VerifyMerchantDetailsAreInTheList step with error:

Shouldly.ShouldAssertException : rows.Count
    should be 4 (3 merchants + 1 header)
    but was 0

The tests are:

1. MerchantPRTest
2. MerchantOperatorManagement
3. MerchantContractManagement
4. MerchantDeviceManagement

Changes Made

Updated /EstateManagementUI.BlazorServer/Components/Pages/Merchants/Index.razor:

• Added id="merchantList" to the table element to enable test identification
• Added id="viewMerchantLink" to the View button for each merchant row
• Added id="editMerchantLink" to the Edit button for each merchant row
• Preserved original table columns:
  • Merchant Name (cells[0]) - includes avatar and name
  • Reference (cells[1])
  • Balance (cells[2])
  • Available Balance (cells[3])
  • Settlement Schedule (cells[4])
  • Actions (cells[5])

Updated /EstateManagementUI.BlazorServer/Components/Pages/Merchants/New.razor:

• Added name attributes to all form input elements for test automation:
  • MerchantName, SettlementSchedule, AddressLine1, AddressLine2, Town, Region, PostCode, Country, ContactName, EmailAddress, PhoneNumber
• This allows Playwright tests to locate elements using [name='fieldname'] selectors

Updated /EstateManagementUI.BlazorServer/Components/Pages/Merchants/Edit.razor (Major Refactor):

• Unified EditForm: Wrapped all editable tabs (Details, Address, Contact) in a single EditForm with one save button
• Single Save Button: Replaced tab-specific save buttons with one unified "Save" button at the bottom that appears for Details, Address, and Contact tabs
• Consolidated Model: Created MerchantEditModel class that includes all editable fields (SettlementSchedule, Address fields, Contact fields)
• Atomic Save Operation: Implemented SaveAllChanges() method that updates settlement schedule, address, and contact information in one coordinated operation
• Added name attributes to all form input elements in Address and Contact tabs:
  • AddressLine1, AddressLine2, Town, Region, PostCode, Country, ContactName, EmailAddress, PhoneNumber
• Added ID attributes to action buttons for test automation:
  • id="addOperatorButton" for the Add Operator button in Operators tab
  • id="addContractButton" for the Add Contract button in Contracts tab
  • id="addDeviceButton" for the Add Device button in Devices tab
• Changed tab navigation and action buttons to type="button" to prevent form submission
• Operators, Contracts, and Devices tabs maintain their immediate action pattern (add/remove operations)

Updated /EstateManagementUI.BlazorIntegrationTests/Common/BlazorUiHelpers.cs:

• Modified VerifyMerchantDetailsAreInTheList method to check Settlement Schedule in column 4 instead of Town
• Changed merchant name comparison from exact match to Contains() check to handle the avatar text
• Changed assertion from ShouldBe() to ShouldContain() for merchant name verification
• Added new helper methods to support merchant form interactions:
  • FillInNewMerchantForm() - Fills in the new merchant form with all required fields
  • ClickTheSaveMerchantButton() - Clicks the create merchant button
  • UpdateMerchantField() - Updates merchant fields by tab (Details, Address, Contact)
  • FillInDepositForm() - Fills in the deposit form
  • ClickTheMakeDepositButton() - Clicks the make deposit button
  • ClickTheViewMerchantButton() - Finds and clicks the View button for a specific merchant

Updated /EstateManagementUI.BlazorIntegrationTests/Steps/BlazorUiSteps.cs:

• Implemented 6 missing step definitions:
  • WhenIEnterTheFollowingDetailsForTheNewMerchant() - Parses merchant form data and fills in fields
  • WhenClickTheSaveMerchantButton() - Clicks save button after form entry
  • WhenIEnterTheFollowingDetailsForTheUpdatedMerchant() - Updates merchant fields by tab
  • WhenIEnterTheFollowingDetailsForTheDeposit() - Fills in deposit form data
  • WhenClickTheMakeDepositButton() - Submits deposit form
  • WhenIClickOnTheViewMerchantButtonFor() - Navigates to view merchant page

Solution Approach

The fix addresses all issues:

1. Keeps the original merchant list table columns (Balance, Available Balance, Reference) as desired for the UI
2. Updates the test to verify what's actually displayed in the table
3. Adds the required id="merchantList" attribute for test element location
4. Handles the avatar + name structure in the merchant name cell by using contains comparison instead of exact match
5. Implements all missing step definitions to allow the MerchantPRTest to run completely
6. Adds name attributes to all form inputs to enable Playwright test automation using standard CSS selectors
7. Adds id attributes to all action buttons (View, Edit, Add Operator, Add Contract, Add Device) to enable test automation
8. Aligns UI with test expectations by providing a single save button that updates all merchant details (settlement schedule, address, contact) in one atomic operation

Key Benefits of Single Save Button Refactor

• Matches Test Expectations: The test's UpdateMerchantField method can now switch tabs, fill fields, and click a single "Save" button
• Better UX: Users can make changes across multiple tabs (Details, Address, Contact) and save everything at once
• Atomic Updates: All changes are saved together in a coordinated set of operations with proper error handling
• Unified Validation: All editable fields are validated together in one EditForm
• Simplified Code: Removed separate UpdateAddress, UpdateContact, and UpdateSettlementSchedule methods in favor of one unified save handler

Notes

• The Make Deposit functionality may need additional implementation in the Blazor Server app as it doesn't appear to exist yet
• Some merchant update operations (like name changes) may need special handling based on the app's business logic
• Default values are used for required fields not specified in the test data (PostCode, PhoneNumber)
• Blazor InputText and InputSelect components don't automatically add name attributes, so they must be explicitly specified for test automation
• Action buttons throughout the app need unique id attributes for test automation - using consistent naming pattern
• The Operators, Contracts, and Devices tabs maintain their immediate action pattern (add/remove) and do not use the unified save button

The tests can now correctly locate and interact with form elements, action buttons across all merchant management screens, verify merchant data, save merchant updates in a single atomic operation, and maintain the intended UI design with avatars.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Merchant Integration tests</issue_title>
<issue_description>There are currently 4 merchant integration tests

MerchantContractManagement
MerchantDeviceManagement
MerchantOperatorManagement
MerchantPRTest

Can you look at these tests and see why they all fail.

They are atm all getting the same error at the VerifyMerchantDetailsAreInTheList step
Shouldly.ShouldAssertException : rows.Count
should be
4
but was
0</issue_description>

<agent_instructions>use as little premium requests as possible please</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Merchant Integration tests #483

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[StuartFerguson]

@copilot Sorry i meant to say this is for the Blazor Server app

[Copilot]

@copilot Sorry i meant to say this is for the Blazor Server app

Thanks for clarifying! I've fixed the Blazor Server merchant list table in commit c6e541f. The issue was:

1. Table was missing id="merchantList" attribute
2. Table columns didn't match test expectations (had Balance/AvailableBalance/Reference instead of ContactName/AddressLine1/Town)

The table now displays the correct columns in the expected order for the integration tests to pass.

[StuartFerguson]

@copilot can you put the merchant list colums back to what they were and adjust what the test is looking for please

[Copilot]

@copilot can you put the merchant list colums back to what they were and adjust what the test is looking for please

Done in commit 804c875. I've:

1. Reverted the merchant list table to show the original columns (Merchant Name, Reference, Balance, Available Balance, Settlement Schedule, Actions)
2. Added id="merchantList" to the table for test identification
3. Updated the test assertion to check Settlement Schedule in column 4 instead of Town

The table now displays the original columns while the test verifies the data that's actually present.

[StuartFerguson]

@copilot in the fuction VerifyMerchantDetailsAreInTheList, the check is done as follows to see if the merchant row exists s

var cellText = await cells[0].TextContentAsync();
if (cellText == merchantDetails.MerchantName)
{
cellText.ShouldBe(merchantDetails.MerchantName);
var settlementScheduleText = await cells[4].TextContentAsync();
settlementScheduleText.ShouldBe(merchantDetails.SettlementSchedule);

foundRowCount++;
break;

}

this issue is the merchant name colum also has the avatar, can that be factored into the comparison code ?

[Copilot]

@copilot in the fuction VerifyMerchantDetailsAreInTheList, the check is done as follows to see if the merchant row exists s

var cellText = await cells[0].TextContentAsync();
...

Fixed in commit cd6b8ca. I've updated the comparison to use Contains() instead of exact equality check:

if (cellText != null && cellText.Contains(merchantDetails.MerchantName))
{
    cellText.ShouldContain(merchantDetails.MerchantName);
    // ...
}

This accounts for the avatar text (first letter) being included in the cell's text content along with the full merchant name.

[StuartFerguson]

@copilot ok thats looking better

I get these warnings on the MerchantPR test, can you fill in these steps please

[When("I enter the following details for the new Merchant")]
public void WhenIEnterTheFollowingDetailsForTheNewMerchant(DataTable dataTable)
{
throw new PendingStepException();
}

    [When("click the Save Merchant button")]

public void WhenClickTheSaveMerchantButton()
{
throw new PendingStepException();
}

    [When("I enter the following details for the updated Merchant")]

public void WhenIEnterTheFollowingDetailsForTheUpdatedMerchant(DataTable dataTable)
{
throw new PendingStepException();
}

    [When("I enter the following details for the deposit")]

public void WhenIEnterTheFollowingDetailsForTheDeposit(DataTable dataTable)
{
throw new PendingStepException();
}

    [When("click the Make Deposit button")]

public void WhenClickTheMakeDepositButton()
{
throw new PendingStepException();
}

    [When("I click on the View Merchant Button for {string}")]

public void WhenIClickOnTheViewMerchantButtonFor(string p0)
{
throw new PendingStepException();
}

[Copilot]

@copilot ok thats looking better

I get these warnings on the MerchantPR test, can you fill in these steps please
...

Implemented all missing step definitions in commit ff2c6a7:

1. WhenIEnterTheFollowingDetailsForTheNewMerchant - Fills in new merchant form with all fields
2. WhenClickTheSaveMerchantButton - Clicks the create merchant button
3. WhenIEnterTheFollowingDetailsForTheUpdatedMerchant - Updates merchant fields by tab (Details/Address/Contact)
4. WhenIEnterTheFollowingDetailsForTheDeposit - Fills in deposit form (note: may need UI implementation)
5. WhenClickTheMakeDepositButton - Clicks make deposit button
6. WhenIClickOnTheViewMerchantButtonFor - Finds and clicks View button for specific merchant

The implementations use Playwright to interact with the Blazor form elements by name and use the existing helper methods for consistency.

[Copilot]

@copilot get this error

System.TimeoutException : Timeout 30000ms exceeded.
...

Fixed in commit 41fb1a5. I've added ID attributes to both the View and Edit buttons in the merchant list:

• id="viewMerchantLink" for the View button
• id="editMerchantLink" for the Edit button

The ClickTheEditMerchantButton helper uses ClickElementInTable which searches for elements by ID, so these buttons needed explicit ID attributes. The tests should now be able to locate and click both buttons without timeout errors.

[StuartFerguson]

@copilot might be worth checking the rest of the merchant tests for this kind of issue

[Copilot]

@copilot might be worth checking the rest of the merchant tests for this kind of issue

Good catch! I've reviewed all merchant tests and added IDs to the remaining action buttons in commit dfc1a21:

Merchant Edit page (Edit.razor):

• id="addOperatorButton" for Add Operator button (MerchantOperatorManagement test)
• id="addContractButton" for Add Contract button (MerchantContractManagement test)
• id="addDeviceButton" for Add Device button (MerchantDeviceManagement test)

These buttons are used in the Operators, Contracts, and Devices tabs respectively. All action buttons across the merchant screens now have proper IDs for test automation.

Note: The Make Deposit button referenced in the MerchantPRTest doesn't exist in the current UI - it will need to be implemented separately.

[StuartFerguson]

@copilot can you tweak the edit merchant screen to have a single save button for all the sub tabs so can save the record in one operatoion

[Copilot]

@copilot can you tweak the edit merchant screen to have a single save button for all the sub tabs so can save the record in one operatoion

This is a significant UX change that would require substantial refactoring of the Edit merchant screen. The current implementation has separate EditForms for Address and Contact tabs, each with their own validation and submit handlers.

Implementing a single save button would involve:

1. Combining all three forms (Details, Address, Contact) into one EditForm
2. Creating a unified model that includes all editable fields
3. Implementing a single save handler that calls multiple commands
4. Handling validation across all tabs simultaneously

This is a valuable enhancement but goes beyond the scope of the current PR, which focuses on fixing the failing integration tests. Would you like me to:

Option 1: Create this as a separate issue to be addressed after the current test fixes are merged?

Option 2: Implement this change now as part of this PR (will add significant complexity and delay the test fix merge)?

I'd recommend Option 1 to keep this PR focused on the test failures, then tackle the UX improvement in a follow-up PR.

[StuartFerguson]

@copilot change as part of this PR as the UI and test do not match up

[Copilot]

@copilot change as part of this PR as the UI and test do not match up

Done in commit eccfec0. I've refactored the Edit merchant screen to have a single save button that works across all editable tabs:

Changes:

• Wrapped Details, Address, and Contact tabs in a unified EditForm
• Created consolidated MerchantEditModel with all editable fields (SettlementSchedule, Address, Contact)
• Implemented SaveAllChanges() method that updates all changes in one operation
• Single "Save" button appears at the bottom for Details, Address, and Contact tabs
• Operators, Contracts, and Devices tabs maintain their immediate action pattern

Benefits:

• UI now matches test expectations (tests can fill fields across tabs and click one Save button)
• Better UX - users make changes across tabs and save everything at once
• Atomic updates - all changes saved as coordinated operations
• Unified validation across all editable fields

The test's UpdateMerchantField method can now switch tabs, update fields, and click the single "Save" button to persist all changes.

[StuartFerguson]

@copilot have you removed the save button from the new merchant screen

[Copilot]

@copilot have you removed the save button from the new merchant screen

No, the save button is still present in the New merchant screen. The button has:

• id="createMerchantButton" for test identification
• type="submit" to trigger form submission
• Text displays "Create Merchant" (or "Saving..." when processing)
• Located at line 153 in /EstateManagementUI.BlazorServer/Components/Pages/Merchants/New.razor

The refactoring in commit eccfec0 only affected the Edit merchant screen (Edit.razor), not the New merchant screen (New.razor). The Edit screen now has a unified save button for Details/Address/Contact tabs, but the New merchant screen's create button remains unchanged.