mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Add Network Modal onboarding tests (#18258)
This commit is contained in:
Thomas Huang
GitHub
parent
9b724d1032
commit
735076b584
@ -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 />`;
|
||||||
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user