Bala/Fix wallet test case (#6372)

* chore: fix appstore test case * chore: remove require actual
binary-com · Sep 5, 2022 · b781963 · b781963
1 parent 889d19e
commit b781963
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 13 deletions.
diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'file-mock-stub';
diff --git a/packages/appstore/jest.config.js b/packages/appstore/jest.config.js
@@ -4,7 +4,8 @@ module.exports = {
     ...baseConfigForPackages,
     moduleNameMapper: {
         '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
-        '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
+        '^.+\\.svg$': '<rootDir>/../../__mocks__/fileMock.js',
+        '^Assets/(.*)$': '<rootDir>/src/assets/$1',
         '^Components/(.*)$': '<rootDir>/src/components/$1',
         '^Constants/(.*)$': '<rootDir>/src/constants/$1',
         '^Services/(.*)$': '<rootDir>/src/services/$1',

diff --git a/packages/appstore/src/components/wallet/__tests__/wallet-card.spec.tsx b/packages/appstore/src/components/wallet/__tests__/wallet-card.spec.tsx
@@ -5,7 +5,10 @@ import React from 'react';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const setHookState = (is_content_shown: boolean) => jest.fn().mockImplementation(() => [is_content_shown, () => {}]);
 React.useState = setHookState(true);
-jest.mock('react-inlinesvg', () => jest.fn(() => 'mockedInlineSVG'));
+
+jest.mock('@deriv/ui', () => ({
+    Text: ({ children }) => <span>{children}</span>,
+}));
 
 describe('WalletCard Component', () => {
     const props = {
@@ -23,7 +26,7 @@ describe('WalletCard Component', () => {
     it('Large WalletCard without balance renders properly', () => {
         render(<WalletCard {...props} size='large' />);
 
-        expect(screen.getByTestId('wallet-card')).toHaveClass('container large');
+        expect(screen.getByTestId('wallet-card')).toHaveClass('wallet-card wallet-card--large');
         expect(screen.getByLabelText('payment_method_logo')).toBeInTheDocument();
         expect(screen.getByText('Ethereum wallet')).toBeInTheDocument();
         expect(screen.queryByText('0.00 ETH')).not.toBeInTheDocument();
@@ -32,7 +35,7 @@ describe('WalletCard Component', () => {
     it('Large WalletCard with balance renders properly', () => {
         render(<WalletCard {...props} size='large' balance='0.00' />);
 
-        expect(screen.getByTestId('wallet-card')).toHaveClass('container large');
+        expect(screen.getByTestId('wallet-card')).toHaveClass('wallet-card wallet-card--large');
         expect(screen.getByLabelText('payment_method_logo')).toBeInTheDocument();
         expect(screen.getByText('Ethereum ETH wallet')).toBeInTheDocument();
         expect(screen.getByText('0.00 ETH')).toBeInTheDocument();
@@ -42,7 +45,7 @@ describe('WalletCard Component', () => {
     it('Medium WalletCard without balance renders properly', () => {
         render(<WalletCard {...props} size='medium' />);
 
-        expect(screen.getByTestId('wallet-card')).toHaveClass('container medium');
+        expect(screen.getByTestId('wallet-card')).toHaveClass('wallet-card wallet-card--medium');
         expect(screen.getByLabelText('payment_method_logo')).toBeInTheDocument();
         expect(screen.getByText('Ethereum wallet')).toBeInTheDocument();
         expect(screen.queryByText('0.00 ETH')).not.toBeInTheDocument();
@@ -51,7 +54,7 @@ describe('WalletCard Component', () => {
     it('Medium WalletCard with balance renders properly', () => {
         render(<WalletCard {...props} size='medium' balance='0.00' />);
 
-        expect(screen.getByTestId('wallet-card')).toHaveClass('container medium');
+        expect(screen.getByTestId('wallet-card')).toHaveClass('wallet-card wallet-card--medium');
         expect(screen.getByLabelText('payment_method_logo')).toBeInTheDocument();
         expect(screen.getByText('Ethereum ETH wallet')).toBeInTheDocument();
         expect(screen.getByText('0.00 ETH')).toBeInTheDocument();
@@ -61,7 +64,7 @@ describe('WalletCard Component', () => {
     it('Small WalletCard renders properly', () => {
         render(<WalletCard {...props} size='small' balance='0.00' />);
 
-        expect(screen.getByTestId('wallet-card')).toHaveClass('container small');
+        expect(screen.getByTestId('wallet-card')).toHaveClass('wallet-card wallet-card--small');
         expect(screen.getByLabelText('payment_method_logo')).toBeInTheDocument();
         expect(screen.queryByText('Ethereum ETH wallet')).not.toBeInTheDocument();
         expect(screen.queryByText('0.00 ETH')).not.toBeInTheDocument();
@@ -71,9 +74,9 @@ describe('WalletCard Component', () => {
     it('Large Active WalletCard with balance renders properly', () => {
         render(<WalletCard {...props} size='large' balance='0.00' active />);
 
-        expect(screen.getByTestId('wallet-card')).toHaveClass('container large');
+        expect(screen.getByTestId('wallet-card')).toHaveClass('wallet-card wallet-card--large');
         expect(screen.getByLabelText('payment_method_logo')).toBeInTheDocument();
-        expect(screen.getByAltText('active_icon')).toBeInTheDocument();
+        expect(screen.getByTestId('ic-checkmark-circle')).toBeInTheDocument();
         expect(screen.getByText('Ethereum ETH wallet')).toBeInTheDocument();
         expect(screen.getByText('0.00 ETH')).toBeInTheDocument();
         expect(screen.queryByText('Ethereum wallet')).not.toBeInTheDocument();
@@ -82,9 +85,9 @@ describe('WalletCard Component', () => {
     it('A Disabled WalletCard cannot have active state with active icon on it', () => {
         render(<WalletCard {...props} size='large' balance='0.00' active disabled />);
 
-        expect(screen.getByTestId('wallet-card')).toHaveClass('container large');
+        expect(screen.getByTestId('wallet-card')).toHaveClass('wallet-card wallet-card--large');
         expect(screen.getByLabelText('payment_method_logo')).toBeInTheDocument();
-        expect(screen.queryByAltText('active_icon')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('ic-checkmark-circle')).not.toBeInTheDocument();
         expect(screen.getByText('Ethereum ETH wallet')).toBeInTheDocument();
         expect(screen.getByText('0.00 ETH')).toBeInTheDocument();
         expect(screen.queryByText('Ethereum wallet')).not.toBeInTheDocument();
@@ -93,7 +96,7 @@ describe('WalletCard Component', () => {
     it('Large Demo WalletCard renders properly', () => {
         render(<WalletCard {...props} size='large' balance='0.00' demo />);
 
-        expect(screen.getByTestId('wallet-card')).toHaveClass('container large');
+        expect(screen.getByTestId('wallet-card')).toHaveClass('wallet-card wallet-card--large');
         expect(screen.getByLabelText('payment_method_logo')).toBeInTheDocument();
         expect(screen.getByText('Demo ETH wallet')).toBeInTheDocument();
         expect(screen.getByText('0.00 ETH')).toBeInTheDocument();
@@ -103,7 +106,7 @@ describe('WalletCard Component', () => {
     it('Large fiat (USD) WalletCard renders properly', () => {
         render(<WalletCard {...props} size='large' balance='0.00' wallet_name='usd' />);
 
-        expect(screen.getByTestId('wallet-card')).toHaveClass('container large');
+        expect(screen.getByTestId('wallet-card')).toHaveClass('wallet-card wallet-card--large');
         expect(screen.getByLabelText('payment_method_logo')).toBeInTheDocument();
         expect(screen.getByText('USD wallet')).toBeInTheDocument();
         expect(screen.getByText('0.00 USD')).toBeInTheDocument();

diff --git a/packages/appstore/src/components/wallet/wallet-card.tsx b/packages/appstore/src/components/wallet/wallet-card.tsx
@@ -163,6 +163,7 @@ const WalletCard = ({ active, balance, currency, dark, demo, disabled, faded, si
             </div>
             {active && !disabled && (
                 <Icon
+                    data_testid='ic-checkmark-circle'
                     icon='IcCheckmarkCircle'
                     style={{ '--fill-color1': 'var(--brand-red-coral)', '--fill-color3': 'white' }}
                     className='wallet-card__active-icon'