From 9b724d1032fa25bb5cb415bb616bb1a481513843 Mon Sep 17 00:00:00 2001
From: Thomas Huang <tmashuang@users.noreply.github.com>
Date: Thu, 20 Apr 2023 08:36:03 -0500
Subject: [PATCH 1/2] Create New Vault test improvements (#18259)

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
---
 .../app/create-new-vault/create-new-vault.js  |   3 +
 .../create-new-vault/create-new-vault.test.js | 149 +++++++++++++++++-
 2 files changed, 148 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/create-new-vault/create-new-vault.js b/ui/components/app/create-new-vault/create-new-vault.js
index 13b28eb0a957..81e9e9063c97 100644
--- a/ui/components/app/create-new-vault/create-new-vault.js
+++ b/ui/components/app/create-new-vault/create-new-vault.js
@@ -101,6 +101,7 @@ export default function CreateNewVault({
       <SrpInput onChange={setSeedPhrase} srpText={t('secretRecoveryPhrase')} />
       <div className="create-new-vault__create-password">
         <TextField
+          data-testid="create-vault-password"
           id="password"
           label={t('newPassword')}
           type="password"
@@ -112,6 +113,7 @@ export default function CreateNewVault({
           largeLabel
         />
         <TextField
+          data-testid="create-vault-confirm-password"
           id="confirm-password"
           label={t('confirmPassword')}
           type="password"
@@ -140,6 +142,7 @@ export default function CreateNewVault({
         </div>
       ) : null}
       <Button
+        data-testid="create-new-vault-submit-button"
         className="create-new-vault__submit-button"
         type="primary"
         submit
diff --git a/ui/components/app/create-new-vault/create-new-vault.test.js b/ui/components/app/create-new-vault/create-new-vault.test.js
index 6f01804e0d37..34cdc005f3e6 100644
--- a/ui/components/app/create-new-vault/create-new-vault.test.js
+++ b/ui/components/app/create-new-vault/create-new-vault.test.js
@@ -1,10 +1,13 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
-import { renderWithProvider } from '../../../../test/jest';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
 import CreateNewVault from './create-new-vault';
 
+const TEST_SEED =
+  'debris dizzy just program just float decrease vacant alarm reduce speak stadium';
+
 const store = configureStore({
   metamask: {
     ...mockState.metamask,
@@ -13,13 +16,16 @@ const store = configureStore({
 
 describe('CreateNewVault', () => {
   it('renders CreateNewVault component and shows Secret Recovery Phrase text', () => {
-    renderWithProvider(<CreateNewVault submitText="Import" />, store);
+    renderWithProvider(
+      <CreateNewVault submitText="Import" onSubmit={jest.fn()} />,
+      store,
+    );
     expect(screen.getByText('Secret Recovery Phrase')).toBeInTheDocument();
   });
 
   it('renders CreateNewVault component and shows You can paste... text', () => {
     renderWithProvider(
-      <CreateNewVault submitText="Import" includeTerms />,
+      <CreateNewVault submitText="Import" onSubmit={jest.fn()} includeTerms />,
       store,
     );
     expect(
@@ -28,4 +34,139 @@ describe('CreateNewVault', () => {
       ),
     ).toBeInTheDocument();
   });
+
+  it('should check terms', () => {
+    const props = {
+      onSubmit: jest.fn(),
+      submitText: 'Submit',
+      includeTerms: true,
+    };
+
+    const { queryByTestId } = renderWithProvider(
+      <CreateNewVault {...props} />,
+      store,
+    );
+
+    const terms = queryByTestId('create-new-vault__terms-checkbox');
+
+    fireEvent.click(terms);
+
+    expect(terms).toBeChecked();
+  });
+
+  it('should error with password length is less than 8', () => {
+    const props = {
+      onSubmit: jest.fn(),
+      submitText: 'Submit',
+    };
+
+    const { queryByTestId, queryByText } = renderWithProvider(
+      <CreateNewVault {...props} />,
+      store,
+    );
+
+    const passwordInput = queryByTestId('create-vault-password');
+
+    const passwordEvent = {
+      target: {
+        value: '1234567',
+      },
+    };
+
+    fireEvent.change(passwordInput, passwordEvent);
+
+    const passwordError = queryByText('Password not long enough');
+
+    expect(passwordError).toBeInTheDocument();
+
+    const submitButton = queryByTestId('create-new-vault-submit-button');
+
+    expect(submitButton).toBeDisabled();
+  });
+
+  it('should error with password and confirm password mismatch', () => {
+    const props = {
+      onSubmit: jest.fn(),
+      submitText: 'Submit',
+    };
+
+    const { queryByTestId, queryByText } = renderWithProvider(
+      <CreateNewVault {...props} />,
+      store,
+    );
+
+    const passwordInput = queryByTestId('create-vault-password');
+    const confirmPasswordInput = queryByTestId('create-vault-confirm-password');
+
+    const passwordEvent = {
+      target: {
+        value: '12345678',
+      },
+    };
+
+    const confirmPasswordEvent = {
+      target: {
+        value: 'abcdefgh',
+      },
+    };
+
+    fireEvent.change(passwordInput, passwordEvent);
+    fireEvent.change(confirmPasswordInput, confirmPasswordEvent);
+
+    const passwordError = queryByText(`Passwords don't match`);
+
+    expect(passwordError).toBeInTheDocument();
+
+    const submitButton = queryByTestId('create-new-vault-submit-button');
+
+    expect(submitButton).toBeDisabled();
+  });
+
+  it('should valid', () => {
+    const props = {
+      onSubmit: jest.fn(),
+      submitText: 'Submit',
+    };
+
+    const { queryByTestId } = renderWithProvider(
+      <CreateNewVault {...props} />,
+      store,
+    );
+
+    inputSRP(TEST_SEED, queryByTestId);
+
+    const passwordInput = queryByTestId('create-vault-password');
+    const confirmPasswordInput = queryByTestId('create-vault-confirm-password');
+
+    const password = '12345678';
+
+    const passwordEvent = {
+      target: {
+        value: password,
+      },
+    };
+
+    const confirmPasswordEvent = {
+      target: {
+        value: password,
+      },
+    };
+
+    fireEvent.change(passwordInput, passwordEvent);
+    fireEvent.change(confirmPasswordInput, confirmPasswordEvent);
+
+    const submitButton = queryByTestId('create-new-vault-submit-button');
+    expect(submitButton).not.toBeDisabled();
+
+    fireEvent.click(submitButton);
+
+    expect(props.onSubmit).toHaveBeenCalledWith(password, TEST_SEED);
+  });
 });
+
+function inputSRP(seedStr, queryByTestId) {
+  for (const [index, word] of seedStr.split(' ').entries()) {
+    const srpInput = queryByTestId(`import-srp__srp-word-${index}`);
+    fireEvent.change(srpInput, { target: { value: word } });
+  }
+}

From 735076b584539c834a647a60598989381f06522c Mon Sep 17 00:00:00 2001
From: Thomas Huang <tmashuang@users.noreply.github.com>
Date: Thu, 20 Apr 2023 09:00:27 -0500
Subject: [PATCH 2/2] Add Network Modal onboarding tests (#18258)

---
 .../add-network-modal.test.js.snap            | 241 ++++++++++++++++++
 .../add-network-modal.test.js                 |  35 +++
 2 files changed, 276 insertions(+)
 create mode 100644 ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
 create mode 100644 ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js

diff --git a/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap b/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
new file mode 100644
index 000000000000..66e85931d4f2
--- /dev/null
+++ b/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
@@ -0,0 +1,241 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Add Network Modal should render 1`] = `
+<div>
+  <div
+    class="box box--padding-top-4 box--flex-direction-row"
+  >
+    <h4
+      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--align-center typography--color-text-default"
+    >
+      Add custom network
+    </h4>
+  </div>
+  <div
+    class="networks-tab__add-network-form networks-tab__restrict-height"
+  >
+    <div
+      class="actionable-message actionable-message--warning actionable-message--with-right-button networks-tab__add-network-form__alert actionable-message--with-icon"
+    >
+      <svg
+        viewBox="0 0 10 10"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
+          fill="var(--color-warning-default)"
+        />
+      </svg>
+      
+      <div
+        class="actionable-message__message"
+      >
+        A malicious network provider can lie about the state of the blockchain and record your network activity. Only add custom networks you trust.
+      </div>
+    </div>
+    <div
+      class="networks-tab__add-network-form-body"
+    >
+      <div
+        class="form-field"
+      >
+        <label
+          class="box box--flex-direction-row"
+        >
+          <div
+            class="form-field__heading"
+          >
+            <div
+              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+            >
+              <h6
+                class="box box--margin-top-1 box--margin-bottom-1 box--display-inline-block box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              >
+                Network name
+              </h6>
+              
+              
+            </div>
+            
+          </div>
+          <input
+            class="form-field__input"
+            type="text"
+            value=""
+          />
+          
+        </label>
+      </div>
+      <div
+        class="form-field"
+      >
+        <label
+          class="box box--flex-direction-row"
+        >
+          <div
+            class="form-field__heading"
+          >
+            <div
+              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+            >
+              <h6
+                class="box box--margin-top-1 box--margin-bottom-1 box--display-inline-block box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              >
+                New RPC URL
+              </h6>
+              
+              
+            </div>
+            
+          </div>
+          <input
+            class="form-field__input"
+            type="text"
+            value=""
+          />
+          
+        </label>
+      </div>
+      <div
+        class="form-field"
+      >
+        <label
+          class="box box--flex-direction-row"
+        >
+          <div
+            class="form-field__heading"
+          >
+            <div
+              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+            >
+              <h6
+                class="box box--margin-top-1 box--margin-bottom-1 box--display-inline-block box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              >
+                Chain ID
+              </h6>
+              
+              <div
+                class="info-tooltip"
+              >
+                <div>
+                  <div
+                    aria-describedby="tippy-tooltip-1"
+                    class="info-tooltip__tooltip-container"
+                    data-original-title="null"
+                    data-tooltipped=""
+                    style="display: inline;"
+                    tabindex="0"
+                  >
+                    <svg
+                      viewBox="0 0 10 10"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
+                        fill="var(--color-icon-alternative)"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+          </div>
+          <input
+            class="form-field__input"
+            type="text"
+            value=""
+          />
+          
+          
+        </label>
+      </div>
+      <div
+        class="form-field"
+      >
+        <label
+          class="box box--flex-direction-row"
+        >
+          <div
+            class="form-field__heading"
+          >
+            <div
+              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+            >
+              <h6
+                class="box box--margin-top-1 box--margin-bottom-1 box--display-inline-block box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              >
+                Currency symbol
+              </h6>
+              
+              
+            </div>
+            
+          </div>
+          <input
+            class="form-field__input"
+            type="text"
+            value=""
+          />
+          
+        </label>
+      </div>
+      <div
+        class="form-field"
+      >
+        <label
+          class="box box--flex-direction-row"
+        >
+          <div
+            class="form-field__heading"
+          >
+            <div
+              class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+            >
+              <h6
+                class="box box--margin-top-1 box--margin-bottom-1 box--display-inline-block box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+              >
+                Block explorer URL
+              </h6>
+              <h6
+                class="box box--margin-top-1 box--margin-bottom-1 box--display-inline-block box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
+              >
+                (Optional)
+              </h6>
+              
+            </div>
+            
+          </div>
+          <input
+            class="form-field__input"
+            type="text"
+            value=""
+          />
+          
+        </label>
+      </div>
+    </div>
+    <div
+      class="networks-tab__add-network-form-footer"
+    >
+      <button
+        class="button btn--rounded btn-secondary"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+      <button
+        class="button btn--rounded btn-primary"
+        disabled=""
+        role="button"
+        tabindex="0"
+      >
+        Save
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Add Network Modal should render 2`] = `<div />`;
diff --git a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
new file mode 100644
index 000000000000..eb2a62fb9acf
--- /dev/null
+++ b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { fireEvent, waitFor } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import AddNetworkModal from '.';
+
+const mockHideModal = jest.fn();
+jest.mock('../../../store/actions', () => ({
+  ...jest.requireActual('../../../store/actions'),
+  hideModal: () => mockHideModal,
+}));
+
+describe('Add Network Modal', () => {
+  it('should render', async () => {
+    const mockStore = configureMockStore()();
+    const { container } = renderWithProvider(<AddNetworkModal />, mockStore);
+
+    await waitFor(() => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it('should handle callback', async () => {
+    const mockStore = configureMockStore([thunk])();
+    const { queryByText } = renderWithProvider(<AddNetworkModal />, mockStore);
+
+    const cancelButton = queryByText('Cancel');
+    fireEvent.click(cancelButton);
+
+    await waitFor(() => {
+      expect(mockHideModal).toHaveBeenCalledTimes(1);
+    });
+  });
+});