-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Network Modal onboarding tests (#18258)
- Loading branch information
Showing
2 changed files
with
276 additions
and
0 deletions.
There are no files selected for viewing
241 changes: 241 additions & 0 deletions
241
ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 />`; |
35 changes: 35 additions & 0 deletions
35
ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); | ||
| }); | ||
| }); |