Add Network Modal onboarding unit test

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 />`;

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);
+    });
+  });
+});