From 832ce634fd4b2b09b3a33911852fd851d82a373e Mon Sep 17 00:00:00 2001 From: Monte Lai Date: Wed, 24 May 2023 00:54:30 +0200 Subject: [PATCH] feat(accounts): import account without password (#19132) import account without password --------- Co-authored-by: Mike B <32695229+plasmacorral@users.noreply.github.com> Co-authored-by: Gustavo Antunes <17601467+gantunesr@users.noreply.github.com> Co-authored-by: Howard Braham --- app/_locales/en/messages.json | 3 + .../__snapshots__/json.test.tsx.snap | 58 +++++++++++ .../create-account/import-account/json.js | 14 ++- .../import-account/json.test.tsx | 97 +++++++++++++++++++ 4 files changed, 167 insertions(+), 5 deletions(-) create mode 100644 ui/pages/create-account/import-account/__snapshots__/json.test.tsx.snap create mode 100644 ui/pages/create-account/import-account/json.test.tsx diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0bd3343b2..7748b2764 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1418,6 +1418,9 @@ "enterMaxSpendLimit": { "message": "Enter max spend limit" }, + "enterOptionalPassword": { + "message": "Enter optional password" + }, "enterPassword": { "message": "Enter password" }, diff --git a/ui/pages/create-account/import-account/__snapshots__/json.test.tsx.snap b/ui/pages/create-account/import-account/__snapshots__/json.test.tsx.snap new file mode 100644 index 000000000..4719d152c --- /dev/null +++ b/ui/pages/create-account/import-account/__snapshots__/json.test.tsx.snap @@ -0,0 +1,58 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Json should match snapshot 1`] = ` + +

+ Used by a variety of different clients + + File import not working? Click here! + +

+ +
+
+ +
+
+
+ + +
+ +`; diff --git a/ui/pages/create-account/import-account/json.js b/ui/pages/create-account/import-account/json.js index 149621e40..d9c0a41dd 100644 --- a/ui/pages/create-account/import-account/json.js +++ b/ui/pages/create-account/import-account/json.js @@ -12,7 +12,7 @@ import { import { Size, TextVariant, - TEXT_ALIGN, + TextAlign, } from '../../../helpers/constants/design-system'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import { useI18nContext } from '../../../hooks/useI18nContext'; @@ -29,7 +29,7 @@ export default function JsonImportSubview({ importAccountFunc }) { const [password, setPassword] = useState(''); const [fileContents, setFileContents] = useState(''); - const isPrimaryDisabled = password === '' || fileContents === ''; + const isPrimaryDisabled = fileContents === ''; function handleKeyPress(event) { if (!isPrimaryDisabled && event.key === 'Enter') { @@ -48,7 +48,7 @@ export default function JsonImportSubview({ importAccountFunc }) { return ( <> - + {t('usedByClients')} setFileContents(event.target.result)} style={{ @@ -79,9 +81,11 @@ export default function JsonImportSubview({ importAccountFunc }) { type={TEXT_FIELD_TYPES.PASSWORD} helpText={warning} error - placeholder={t('enterPassword')} + placeholder={t('enterOptionalPassword')} value={password} - onChange={(event) => setPassword(event.target.value)} + onChange={(event) => { + setPassword(event.target.value); + }} inputProps={{ onKeyPress: handleKeyPress, }} diff --git a/ui/pages/create-account/import-account/json.test.tsx b/ui/pages/create-account/import-account/json.test.tsx new file mode 100644 index 000000000..ebf84c724 --- /dev/null +++ b/ui/pages/create-account/import-account/json.test.tsx @@ -0,0 +1,97 @@ +import React from 'react'; +import configureMockStore from 'redux-mock-store'; +import { fireEvent, waitFor } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import mockState from '../../../../test/data/mock-state.json'; +import messages from '../../../../app/_locales/en/messages.json'; +import Json from './json'; + +const mockImportFunc = jest.fn(); +describe('Json', () => { + const mockStore = configureMockStore()(mockState); + it('should match snapshot', () => { + const { asFragment } = renderWithProvider( + , + mockStore, + ); + expect(asFragment()).toMatchSnapshot(); + }); + + it('should render', () => { + const { getByText } = renderWithProvider( + , + mockStore, + ); + + const fileImportLink = getByText('File import not working? Click here!'); + expect(fileImportLink).toBeInTheDocument(); + }); + + it('should import file without password', async () => { + const { getByText, getByTestId } = renderWithProvider( + , + mockStore, + ); + + const importButton = getByText('Import'); + const fileInput = getByTestId('file-input'); + + const mockFile = new File(['0'], 'test.json'); + + expect(importButton).toBeInTheDocument(); + expect(importButton).toBeDisabled(); + + fireEvent.change(fileInput, { + target: { files: [mockFile] }, + }); + + await waitFor(() => { + expect(importButton).not.toBeDisabled(); + }); + + fireEvent.click(importButton); + + await waitFor(() => { + expect(mockImportFunc).toHaveBeenCalledWith('JSON File', ['0', '']); + }); + }); + + it('should import file with password', async () => { + const { getByText, getByTestId, getByPlaceholderText } = renderWithProvider( + , + mockStore, + ); + + const importButton = getByText('Import'); + const fileInput = getByTestId('file-input'); + + const mockFile = new File(['0'], 'test.json'); + + expect(importButton).toBeInTheDocument(); + expect(importButton).toBeDisabled(); + + const passwordInput = getByPlaceholderText( + messages.enterOptionalPassword.message, + ); + fireEvent.change(passwordInput, { + target: { value: 'password' }, + }); + + fireEvent.change(fileInput, { + target: { files: [mockFile] }, + }); + + await waitFor(() => { + expect(importButton).not.toBeDisabled(); + }); + + fireEvent.click(importButton); + + await waitFor(() => { + expect(mockImportFunc).toHaveBeenCalledWith('JSON File', [ + '0', + 'password', + ]); + }); + }); +});