Add more unit tests

ui/pages/permissions-connect/connect-page/__snapshots__/connect-page.test.tsx.snap

@@ -489,7 +489,7 @@ exports[`ConnectPage should render with defaults from the requested permissions
                     >
                       <div>
                         <div
-                          aria-describedby="tippy-tooltip-9"
+                          aria-describedby="tippy-tooltip-34"
                           class=""
                           data-original-title="Not connected"
                           data-tooltipped=""

ui/pages/permissions-connect/connect-page/connect-page.test.tsx

@@ -72,6 +72,66 @@ describe('ConnectPage', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should render image icon correctly', () => {
+    const { getAllByAltText } = render();
+
+    const images = getAllByAltText('github.io logo');
+    expect(images.length).toBe(2);
+    expect(images[0]).toHaveAttribute(
+      'src',
+      'https://metamask.github.io/test-dapp/metamask-fox.svg',
+    );
+    expect(images[1]).toHaveAttribute(
+      'src',
+      'https://metamask.github.io/test-dapp/metamask-fox.svg',
+    );
+  });
+
+  it('should render fallback icon correctly', () => {
+    const { container } = render({
+      props: {
+        request: {
+          id: '1',
+          origin: mockTestDappUrl,
+        },
+        permissionsRequestId: '1',
+        rejectPermissionsRequest: jest.fn(),
+        approveConnection: jest.fn(),
+        activeTabOrigin: mockTestDappUrl,
+        targetSubjectMetadata: {
+          ...mockTargetSubjectMetadata,
+          iconUrl: null,
+        },
+      },
+    });
+
+    const divElement = container.querySelector('div.mm-avatar-base--size-lg');
+    expect(divElement).toHaveTextContent('g');
+  });
+
+  it('should render fallback icon correctly for IP address as an origin', () => {
+    const { container } = render({
+      props: {
+        request: {
+          id: '1',
+          origin: 'http://127.0.0.1/test-dapp',
+        },
+        permissionsRequestId: '1',
+        rejectPermissionsRequest: jest.fn(),
+        approveConnection: jest.fn(),
+        activeTabOrigin: mockTestDappUrl,
+        targetSubjectMetadata: {
+          ...mockTargetSubjectMetadata,
+          iconUrl: null,
+          origin: 'http://127.0.0.1/test-dapp',
+        },
+      },
+    });
+
+    const divElement = container.querySelector('div.mm-avatar-base--size-lg');
+    expect(divElement).toHaveTextContent('?');
+  });
+
   it('should render title correctly', () => {
     const { getByText } = render();
     expect(getByText('github.io')).toBeDefined();
@@ -82,6 +142,64 @@ describe('ConnectPage', () => {
     expect(getByText('Connect this website with MetaMask.')).toBeDefined();
   });
 
+  it('should render learn more link correctly', () => {
+    const { getByText } = render();
+    expect(getByText('Learn more')).toBeDefined();
+  });
+
+  it('should render accounts tab correctly', () => {
+    const { getByText, queryAllByText } = render();
+
+    expect(getByText('Accounts')).toBeDefined();
+    expect(getByText('Test Account')).toBeDefined();
+    expect(getByText('0x0DCD5...3E7bc')).toBeDefined();
+
+    const valueElements = queryAllByText('966.988');
+    expect(valueElements[0]).toBeDefined();
+    expect(getByText('Edit accounts')).toBeDefined();
+  });
+
+  it('should render edit accounts modal', () => {
+    const { getByText, queryAllByText } = render();
+    const editAccountsButton = getByText('Edit accounts');
+    fireEvent.click(editAccountsButton);
+
+    expect(getByText('Update')).toBeDefined();
+    expect(getByText('Select all')).toBeDefined();
+    expect(getByText('New account')).toBeDefined();
+
+    const accountElements = queryAllByText('Test Account');
+
+    expect(accountElements.length).toBe(2);
+    expect(accountElements[0].textContent).toBe('Test Account');
+    expect(accountElements[1].textContent).toBe('Test Account');
+  });
+
+  it('should render empty accounts state correctly', () => {
+    const { getByText, queryAllByText, getByTestId } = render();
+    const editAccountsButton = getByText('Edit accounts');
+    fireEvent.click(editAccountsButton);
+
+    const accountElements = queryAllByText('Test Account');
+    fireEvent.click(accountElements[1]);
+
+    const disconnectButton = getByText('Disconnect');
+    fireEvent.click(disconnectButton);
+
+    expect(getByText('Select an account to connect')).toBeDefined();
+
+    const confirmButton = getByTestId('confirm-btn');
+    expect(confirmButton).toBeDisabled();
+
+    const selectAnAccountToConnectButton = getByText(
+      'Select an account to connect',
+    );
+    fireEvent.click(selectAnAccountToConnectButton);
+
+    expect(getByText('Select all')).toBeDefined();
+    expect(getByText('New account')).toBeDefined();
+  });
+
   it('should render account connectionListItem', () => {
     const { getByText } = render();
     const permissionsTab = getByText('Permissions');
@@ -161,7 +279,7 @@ describe('ConnectPage', () => {
     const confirmButton = getByText('Connect');
     const cancelButton = getByText('Cancel');
     // The currently selected account is a Bitcoin account, the "connecting account list" would be
-    // empty by default and thus, we cannot confirm without explictly select an EVM account.
+    // empty by default and thus, we cannot confirm without explicitly select an EVM account.
     expect(confirmButton).toBeDisabled();
     expect(cancelButton).toBeDefined();
   });

ui/pages/permissions-connect/connect-page/connect-page.tsx

@@ -81,7 +81,7 @@ export type ConnectPageProps = {
   activeTabOrigin: string;
   targetSubjectMetadata: {
     extensionId: string | null;
-    iconUrl: string;
+    iconUrl: string | null;
     name: string;
     origin: string;
     subjectType: string;