m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add Network Modal onboarding tests (#18258)

Browse Source
This commit is contained in:
Thomas Huang 2023-04-20 09:00:27 -05:00 committed by GitHub
parent 9b724d1032
commit 735076b584
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 276 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap Normal file
View File

@ -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
ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js Normal file
View File

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