From 208ea3013c6d3468ce7ee3fac43da19090092dfb Mon Sep 17 00:00:00 2001
From: amerkadicE <97883527+amerkadicE@users.noreply.github.com>
Date: Fri, 10 Feb 2023 15:27:13 +0100
Subject: [PATCH] Make username mandatory in the edit contact screen (#17425)

---
 .../edit-contact/edit-contact.component.js    |  7 ++-
 .../edit-contact/edit-contact.test.js         | 61 +++++++++++++++++++
 2 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 ui/pages/settings/contact-list-tab/edit-contact/edit-contact.test.js

diff --git a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js b/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
index 2cfb6142a..aea7272fb 100644
--- a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
+++ b/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
@@ -170,9 +170,10 @@ export default class EditContact extends PureComponent {
           }}
           submitText={this.context.t('save')}
           disabled={
-            this.state.newName === name &&
-            this.state.newAddress === address &&
-            this.state.newMemo === memo
+            (this.state.newName === name &&
+              this.state.newAddress === address &&
+              this.state.newMemo === memo) ||
+            !this.state.newName.trim()
           }
         />
       </div>
diff --git a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.test.js b/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.test.js
new file mode 100644
index 000000000..1853a4de1
--- /dev/null
+++ b/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.test.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import '@testing-library/jest-dom/extend-expect';
+import EditContact from './edit-contact.component';
+
+describe('AddContact component', () => {
+  const middleware = [thunk];
+  const state = {
+    metamask: {
+      provider: {
+        type: 'mainnet',
+        nickname: '',
+      },
+    },
+  };
+  const props = {
+    addToAddressBook: jest.fn(),
+    removeFromAddressBook: jest.fn(),
+    history: { push: jest.fn() },
+    name: '',
+    address: '0x0000000000000000001',
+    chainId: '',
+    memo: '',
+    viewRoute: '',
+    listRoute: '',
+  };
+
+  it('should render the component with correct properties', () => {
+    const store = configureMockStore(middleware)(state);
+
+    const { getByText } = renderWithProvider(<EditContact {...props} />, store);
+
+    expect(getByText('Username')).toBeInTheDocument();
+    expect(getByText('Ethereum public address')).toBeInTheDocument();
+  });
+
+  it('should validate the address correctly', () => {
+    const store = configureMockStore(middleware)(state);
+    const { getByText } = renderWithProvider(<EditContact {...props} />, store);
+
+    const input = document.getElementById('address');
+    fireEvent.change(input, { target: { value: 'invalid address' } });
+    setTimeout(() => {
+      expect(getByText('Invalid address')).toBeInTheDocument();
+    }, 100);
+  });
+
+  it('should get disabled submit button when username field is empty', () => {
+    const store = configureMockStore(middleware)(state);
+    const { getByText } = renderWithProvider(<EditContact {...props} />, store);
+
+    const input = document.getElementById('nickname');
+    fireEvent.change(input, { target: { value: '' } });
+
+    const saveButton = getByText('Save');
+    expect(saveButton).toBeDisabled();
+  });
+});