feat: refactored import of assets in account package (binary-com#6253)

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>
adrienne-deriv · Oct 7, 2022 · 1dd9512 · 1dd9512
1 parent e3ee39b
commit 1dd9512
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 40 deletions.
diff --git a/packages/account/build/constants.js b/packages/account/build/constants.js
@@ -18,6 +18,7 @@ const {
 const IS_RELEASE = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging';
 
 const ALIASES = {
+    Assets: path.resolve(__dirname, '../src/Assets'),
     Components: path.resolve(__dirname, '../src/Components'),
     Containers: path.resolve(__dirname, '../src/Containers'),
     Constants: path.resolve(__dirname, '../src/Constants'),
@@ -35,19 +36,19 @@ const ALIASES = {
 const rules = (is_test_env = false, is_mocha_only = false) => [
     ...(is_test_env && !is_mocha_only
         ? [
-            {
-                test: /\.(js|jsx|ts|tsx)$/,
-                exclude: /node_modules|__tests__|(build\/.*\.js$)|(_common\/lib)/,
-                include: /src/,
-                loader: 'eslint-loader',
-                enforce: 'pre',
-                options: {
-                    formatter: require('eslint-formatter-pretty'),
-                    configFile: path.resolve(__dirname, '../.eslintrc.js'),
-                    ignorePath: path.resolve(__dirname, '../.eslintignore'),
-                },
-            },
-        ]
+              {
+                  test: /\.(js|jsx|ts|tsx)$/,
+                  exclude: /node_modules|__tests__|(build\/.*\.js$)|(_common\/lib)/,
+                  include: /src/,
+                  loader: 'eslint-loader',
+                  enforce: 'pre',
+                  options: {
+                      formatter: require('eslint-formatter-pretty'),
+                      configFile: path.resolve(__dirname, '../.eslintrc.js'),
+                      ignorePath: path.resolve(__dirname, '../.eslintignore'),
+                  },
+              },
+          ]
         : []),
     {
         test: /\.(js|jsx|ts|tsx)$/,
@@ -78,24 +79,24 @@ const rules = (is_test_env = false, is_mocha_only = false) => [
     },
     is_test_env
         ? {
-            test: /\.(sc|sa|c)ss$/,
-            loaders: 'null-loader',
-        }
+              test: /\.(sc|sa|c)ss$/,
+              loaders: 'null-loader',
+          }
         : {
-            test: /\.(sc|sa|c)ss$/,
-            use: css_loaders,
-        },
+              test: /\.(sc|sa|c)ss$/,
+              use: css_loaders,
+          },
 ];
 
 const MINIMIZERS = !IS_RELEASE
     ? []
     : [
-        new TerserPlugin({
-            test: /\.js$/,
-            parallel: 2,
-        }),
-        new CssMinimizerPlugin(),
-    ];
+          new TerserPlugin({
+              test: /\.js$/,
+              parallel: 2,
+          }),
+          new CssMinimizerPlugin(),
+      ];
 
 const plugins = () => [
     new CleanWebpackPlugin(),

diff --git a/packages/account/jest.config.js b/packages/account/jest.config.js
@@ -5,6 +5,7 @@ module.exports = {
     moduleNameMapper: {
         '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
+        '^Assets/(.*)$': '<rootDir>/src/Assets/$1',
         '^Components/(.*)$': '<rootDir>/src/Components/$1',
         '^Constants/(.*)$': '<rootDir>/src/Constants/$1',
         '^Configs/(.*)$': '<rootDir>/src/Configs/$1',

diff --git a/...ages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.js b/...ages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.js
@@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { isDesktop, isMobile } from '@deriv/shared';
 import IdvDocumentSubmit from '../idv-document-submit';
 
-jest.mock('../../../Assets/ic-document-submit-icon.svg', () => jest.fn(() => 'DocumentSubmitLogo'));
+jest.mock('Assets/ic-document-submit-icon.svg', () => jest.fn(() => 'DocumentSubmitLogo'));
 jest.mock('../utils.js', () => ({
     getDocumentData: function (country_code, key) {
         const data = {

diff --git a/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.jsx b/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.jsx
@@ -7,8 +7,8 @@ import { localize, Localize } from '@deriv/translations';
 import { formatInput, WS } from '@deriv/shared';
 import FormFooter from 'Components/form-footer';
 import { getDocumentData, getRegex } from './utils';
-import BackButtonIcon from '../../../Assets/ic-poi-back-btn.svg';
-import DocumentSubmitLogo from '../../../Assets/ic-document-submit-icon.svg';
+import BackButtonIcon from 'Assets/ic-poi-back-btn.svg';
+import DocumentSubmitLogo from 'Assets/ic-document-submit-icon.svg';
 
 const IdvDocumentSubmit = ({ handleBack, handleViewComplete, selected_country, is_from_external }) => {
     const [document_list, setDocumentList] = React.useState([]);

diff --git a/packages/account/src/Components/poi/idv-status/idv-limited/__tests__/idv-limited.spec.js b/packages/account/src/Components/poi/idv-status/idv-limited/__tests__/idv-limited.spec.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import IdvNoSubmissions from '../idv-limited';
 
-jest.mock('../../../Assets/ic-idv-document-rejected.svg', () => jest.fn(() => 'IdvDocumentRejected'));
+jest.mock('Assets/ic-idv-document-rejected.svg', () => jest.fn(() => 'IdvDocumentRejected'));
 
 describe('<IdvNoSubmissions/>', () => {
     const mockHandleRequireSubmission = jest.fn();

diff --git a/packages/account/src/Components/poi/idv-status/idv-limited/idv-limited.jsx b/packages/account/src/Components/poi/idv-status/idv-limited/idv-limited.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import IdvDocumentRejected from '../../../../Assets/ic-idv-document-rejected.svg';
+import IdvDocumentRejected from 'Assets/ic-idv-document-rejected.svg';
 
 const IdvNoSubmissions = ({ handleRequireSubmission }) => {
     return (

diff --git a/packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.js b/packages/account/src/Components/poi/idv-status/idv-rejected/__tests__/idv-rejected.spec.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import IdvRejected from '../idv-rejected';
 
-jest.mock('../../../../../Assets/ic-idv-document-rejected.svg', () => jest.fn(() => 'IdvDocumentRejected'));
+jest.mock('Assets/ic-idv-document-rejected.svg', () => jest.fn(() => 'IdvDocumentRejected'));
 
 describe('<IdvRejected/>', () => {
     const mockHandleRequireSubmission = jest.fn();

diff --git a/packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.jsx b/packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import IdvDocumentRejected from '../../../../Assets/ic-idv-document-rejected.svg';
+import IdvDocumentRejected from 'Assets/ic-idv-document-rejected.svg';
 
 const IdvRejected = ({ handleRequireSubmission }) => {
     return (

diff --git a/...t/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.js b/...t/src/Components/poi/idv-status/idv-submit-complete/__tests__/idv-submit-complete.spec.js
@@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import IdvSubmitComplete from '../idv-submit-complete';
 
-jest.mock('../../../../../Assets/ic-idv-document-pending.svg', () => jest.fn(() => 'IdvDocumentPending'));
+jest.mock('Assets/ic-idv-document-pending.svg', () => jest.fn(() => 'IdvDocumentPending'));
 
 describe('<IdvSubmitComplete/>', () => {
     const mock_props = {

diff --git a/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.jsx b/packages/account/src/Components/poi/idv-status/idv-submit-complete/idv-submit-complete.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import PoaButton from 'Components/poa/poa-button';
-import IdvDocumentPending from '../../../../Assets/ic-idv-document-pending.svg';
+import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg';
 
 const IdvSubmitComplete = ({ needs_poa, is_from_external }) => {
     const poa_button = !is_from_external && <PoaButton custom_text={localize('Submit proof of address')} />;

diff --git a/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.js b/packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.js
@@ -10,7 +10,7 @@ jest.mock('@deriv/shared', () => ({
     isMobile: jest.fn(() => false),
 }));
 
-jest.mock('../../../../../Assets/ic-idv-verified.svg', () => jest.fn(() => 'mockedSVGIcon'));
+jest.mock('Assets/ic-idv-verified.svg', () => jest.fn(() => 'mockedSVGIcon'));
 
 describe('<IdvVerified />', () => {
     const needs_poa_header = /your id is verified\. you will also need to submit proof of your address\./i;

diff --git a/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.jsx b/packages/account/src/Components/poi/idv-status/idv-verified/idv-verified.jsx
@@ -3,7 +3,7 @@ import { Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import PoaButton from 'Components/poa/poa-button';
-import IdvDocumentVerified from '../../../../Assets/ic-idv-verified.svg';
+import IdvDocumentVerified from 'Assets/ic-idv-verified.svg';
 
 const IdvVerified = ({ needs_poa, is_from_external }) => {
     const header_Text = needs_poa

diff --git a/...c/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.jsx b/...c/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.jsx
@@ -15,7 +15,7 @@ import {
 } from '@deriv/components';
 import { isDesktop, formatInput, isMobile } from '@deriv/shared';
 import { getDocumentData, getRegex } from '../../idv-document-submit/utils';
-import DocumentSubmitLogo from '../../../../Assets/ic-document-submit-icon.svg';
+import DocumentSubmitLogo from 'Assets/ic-document-submit-icon.svg';
 
 export const IdvDocSubmitOnSignup = ({ citizen_data, has_previous, onPrevious, onNext, value, has_idv_error }) => {
     const [document_list, setDocumentList] = React.useState([]);

diff --git a/packages/account/src/Sections/Security/Passwords/deriv-password.jsx b/packages/account/src/Sections/Security/Passwords/deriv-password.jsx
@@ -6,9 +6,9 @@ import { Localize, localize } from '@deriv/translations';
 import FormSubHeader from 'Components/form-sub-header';
 import SentEmailModal from 'Components/sent-email-modal';
 import UnlinkModal from 'Components/unlink-modal';
-import DerivComLogo from '../../../Assets/ic-brand-deriv-red.svg';
-import DerivGoLight from '../../../Assets/ic-brand-deriv-go-light.svg';
-import DerivGoDark from '../../../Assets/ic-brand-deriv-go-dark.svg';
+import DerivComLogo from 'Assets/ic-brand-deriv-red.svg';
+import DerivGoLight from 'Assets/ic-brand-deriv-go-light.svg';
+import DerivGoDark from 'Assets/ic-brand-deriv-go-dark.svg';
 
 const DerivPassword = ({ email, is_dark_mode_on, is_social_signup, social_identity_provider }) => {
     const [is_unlink_modal_open, setIsUnlinkModalOpen] = React.useState(false);