Fix test failure caused by previous revert - 22946 (#23076)

## **Description**

PR #22762, an e2e test for the update network, was functioning correctly
but started failing after being merged into the develop branch due to
changes introduced in PR #22832. This PR addresses and fixes the test
failure caused by the previous revert in PR #22946.

Note:- The changes from the develop branch had to be reverted due to
time constraints.

## **Related issues**
#22949

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

test/e2e/tests/network/update-network.spec.ts

@@ -0,0 +1,113 @@
+import { strict as assert } from 'assert';
+import { Suite } from 'mocha';
+import FixtureBuilder from '../../fixture-builder';
+import {
+  defaultGanacheOptions,
+  unlockWallet,
+  withFixtures,
+} from '../../helpers';
+import { Driver } from '../../webdriver/driver';
+
+const selectors = {
+  accountOptionsMenuButton: '[data-testid="account-options-menu-button"]',
+  informationSymbol: '[data-testid="info-tooltip"]',
+  settingsOption: { text: 'Settings', tag: 'div' },
+  networkOption: { text: 'Networks', tag: 'div' },
+  generalOption: { text: 'General', tag: 'div' },
+  ethereumNetwork: { text: 'Ethereum Mainnet', tag: 'div' },
+  deleteButton: { text: 'Delete', tag: 'button' },
+  cancelButton: { text: 'Cancel', tag: 'button' },
+  saveButton: { text: 'Save', tag: 'button' },
+  updatedNetworkDropDown: { tag: 'span', text: 'Update Network' },
+  errorMessageInvalidUrl: {
+    tag: 'h6',
+    text: 'URLs require the appropriate HTTP/HTTPS prefix.',
+  },
+  networkNameInputField: '[data-testid="network-form-network-name"]',
+  rpcUrlInputField: '[data-testid="network-form-rpc-url"]',
+  chainIdInputField: '[data-testid="network-form-chain-id"]',
+  errorContainer: '.settings-tab__error',
+};
+
+const inputData = {
+  networkName: 'Update Network',
+  rpcUrl: 'test',
+  chainId: '0x539',
+};
+
+async function navigateToEditNetwork(driver: Driver) {
+  await driver.clickElement(selectors.accountOptionsMenuButton);
+  await driver.clickElement(selectors.settingsOption);
+  await driver.clickElement(selectors.networkOption);
+}
+describe('Update Network:', function (this: Suite) {
+  it('update network details and validate the ui elements', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+        await navigateToEditNetwork(driver);
+        await driver.fill(
+          selectors.networkNameInputField,
+          inputData.networkName,
+        );
+        await driver.fill(selectors.chainIdInputField, inputData.chainId);
+        await driver.clickElement(selectors.saveButton);
+
+        // Validate the network name is updated
+        const updatedNetworkNamePresent = await driver.isElementPresent(
+          selectors.updatedNetworkDropDown,
+        );
+        assert.equal(
+          updatedNetworkNamePresent,
+          true,
+          'Network name is not updated',
+        );
+
+        await navigateToEditNetwork(driver);
+        await driver.fill(selectors.rpcUrlInputField, inputData.rpcUrl);
+
+        // Validate the error message that appears for the invalid url format
+        const errorMessage = await driver.isElementPresent(
+          selectors.errorMessageInvalidUrl,
+        );
+        assert.equal(
+          errorMessage,
+          true,
+          'Error message for the invalid url did not appear',
+        );
+
+        // Validate the Save button is disabled for the invalid url format
+        const saveButton = await driver.findElement(selectors.saveButton);
+        const saveButtonEnabled = await saveButton.isEnabled();
+        assert.equal(saveButtonEnabled, false, 'Save button is enabled');
+
+        // Validate the information symbol appears for chain id
+        const informationSymbolAppears = await driver.isElementPresent(
+          selectors.informationSymbol,
+        );
+        assert.equal(
+          informationSymbolAppears,
+          true,
+          'Information symbol did not appear for chain id',
+        );
+
+        await driver.clickElement(selectors.ethereumNetwork);
+
+        // Validate the Save,Cancel Delete button is not present for the default network
+        await driver.assertElementNotPresent(selectors.deleteButton);
+        await driver.assertElementNotPresent(selectors.cancelButton);
+        await driver.assertElementNotPresent(selectors.saveButton);
+
+        // Validate the error does not appear for updating the network name and chain id
+        await driver.clickElement(selectors.generalOption);
+        await driver.assertElementNotPresent(selectors.errorContainer);
+      },
+    );
+  });
+});

ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap

@@ -60,6 +60,7 @@ exports[`Add Network Modal should render 1`] = `
           </div>
           <input
             class="form-field__input"
+            data-testid="network-form-network-name"
             type="text"
             value=""
           />
@@ -90,6 +91,7 @@ exports[`Add Network Modal should render 1`] = `
           </div>
           <input
             class="form-field__input"
+            data-testid="network-form-rpc-url"
             type="text"
             value=""
           />
@@ -144,6 +146,7 @@ exports[`Add Network Modal should render 1`] = `
           </div>
           <input
             class="form-field__input"
+            data-testid="network-form-chain-id"
             type="text"
             value=""
           />
@@ -201,6 +204,7 @@ exports[`Add Network Modal should render 1`] = `
           </div>
           <input
             class="form-field__input"
+            data-testid="network-form-block-explorer-url"
             type="text"
             value=""
           />

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -709,6 +709,7 @@ const NetworksForm = ({
           titleText={t('networkName')}
           value={networkName}
           disabled={viewOnly}
+          dataTestId="network-form-network-name"
         />
         <FormField
           error={errors.rpcUrl?.msg || ''}
@@ -723,6 +724,7 @@ const NetworksForm = ({
               : rpcUrl
           }
           disabled={viewOnly}
+          dataTestId="network-form-rpc-url"
         />
         <FormField
           warning={warnings.chainId?.msg || ''}
@@ -736,6 +738,7 @@ const NetworksForm = ({
           value={chainId}
           disabled={viewOnly}
           tooltipText={viewOnly ? null : t('networkSettingsChainIdDescription')}
+          dataTestId="network-form-chain-id"
         />
         <FormTextField
           data-testid="network-form-ticker"
@@ -802,6 +805,7 @@ const NetworksForm = ({
           value={blockExplorerUrl}
           disabled={viewOnly}
           autoFocus={window.location.hash.split('#')[2] === 'blockExplorerUrl'}
+          dataTestId="network-form-block-explorer-url"
         />
       </div>
       <div