-
Notifications
You must be signed in to change notification settings - Fork 298
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: account-info test file (#7244)
Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>
- Loading branch information
1 parent
a44342b
commit fe8cc3f
Showing
3 changed files
with
107 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
167 changes: 96 additions & 71 deletions
167
packages/core/src/App/Components/Layout/Header/__tests__/account-info.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,102 @@ | ||
| // TODO refactor old tests in this component | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import AccountInfo from '../account-info.jsx'; | ||
| import { Icon } from '@deriv/components'; | ||
| import { AccountSwitcher } from '../../../../Containers/AccountSwitcher'; | ||
| import { CSSTransition } from 'react-transition-group'; | ||
| import { render } from '@testing-library/react'; | ||
|
|
||
| describe('AccountInfo', () => { | ||
| it('should render one <AccountInfo /> component', () => { | ||
| describe('AccountInfo component', () => { | ||
| it('should show "disabled_message" when "is_disabled" property is "true"', () => { | ||
| render(<AccountInfo is_disabled acc_switcher_disabled_message='Test disabled message' />); | ||
| const popover = screen.getByTestId('dt_popover_container'); | ||
| userEvent.hover(popover); | ||
| const disabled_message = screen.getByText(/test disabled message/i); | ||
| expect(disabled_message).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should have "acc-info--is-disabled" class when "is_disabled" property is "true"', () => { | ||
| render(<AccountInfo is_disabled />); | ||
| const div_element = screen.getByTestId('dt_acc_info'); | ||
| expect(div_element).toHaveClass('acc-info--is-disabled'); | ||
| }); | ||
|
|
||
| it('should have "acc-info--is-virtual" class when "is_virtual" property is "true"', () => { | ||
| render(<AccountInfo is_virtual />); | ||
| const div_element = screen.getByTestId('dt_acc_info'); | ||
| expect(div_element).toHaveClass('acc-info--is-virtual'); | ||
| }); | ||
|
|
||
| it('should not have "acc-info--show" class when "is_dialog_on" property is "false"', () => { | ||
| render(<AccountInfo />); | ||
| const div_element = screen.getByTestId('dt_acc_info'); | ||
| expect(div_element).not.toHaveClass('acc-info--show'); | ||
| }); | ||
|
|
||
| it('can not "toggleDialog" when "is_disabled" property is "true"', () => { | ||
| const toggleDialog = jest.fn(); | ||
| render(<AccountInfo is_disabled toggleDialog={toggleDialog} />); | ||
| const div_element = screen.getByTestId('dt_acc_info'); | ||
| userEvent.click(div_element); | ||
| expect(toggleDialog).toHaveBeenCalledTimes(0); | ||
| }); | ||
|
|
||
| it('should render "AccountInfoIcon" with the proper className', () => { | ||
| const { rerender } = render(<AccountInfo currency='USD' />); | ||
| expect(screen.getByTestId('dt_icon')).toHaveClass('acc-info__id-icon--usd'); | ||
|
|
||
| rerender(<AccountInfo is_virtual />); | ||
| expect(screen.getByTestId('dt_icon')).toHaveClass('acc-info__id-icon--virtual'); | ||
| }); | ||
|
|
||
| it('should render "IcLock" icon when "is_disabled" property is "true"', () => { | ||
| render(<AccountInfo is_disabled />); | ||
| const icon = screen.getByTestId('dt_lock_icon'); | ||
| expect(icon).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render "IcChevronDownBold" icon when "is_disabled" property is "false"', () => { | ||
| render(<AccountInfo />); | ||
| const icon = screen.getByTestId('dt_select_arrow'); | ||
| expect(icon).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should not render balance section when "currency" property passed', () => { | ||
| render(<AccountInfo currency='USD' />); | ||
| // const wrapper = shallow(<AccountInfo currency='USD' />); | ||
| // expect(wrapper).toHaveLength(1); | ||
| const balance_wrapper = screen.queryByTestId('dt_balance'); | ||
| expect(balance_wrapper).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should have "acc-info__balance--no-currency" class when "is_virtual" property is "false" and we don\'t have "currency" property', () => { | ||
| render(<AccountInfo />); | ||
| const balance_wrapper = screen.getByTestId('dt_balance'); | ||
| expect(balance_wrapper).toHaveClass('acc-info__balance--no-currency'); | ||
| }); | ||
|
|
||
| it('should have "No currency assigned" text when we don\'t have "currency" property', () => { | ||
| render(<AccountInfo />); | ||
| const text = screen.getByText(/no currency assigned/i); | ||
| expect(text).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should have "123456789 USD" text when we have "currency" and "balance" properties', () => { | ||
| render(<AccountInfo currency='USD' balance='123456789' />); | ||
| const text = screen.getByText(/123456789 usd/i); | ||
| expect(text).toBeInTheDocument(); | ||
| expect(screen.queryByText(/no currency assigned/i)).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render proper "AccountType" base on the passed properties', () => { | ||
| const { rerender } = render(<AccountInfo account_type='financial' />); | ||
| expect(screen.getByText(/multipliers/i)).toBeInTheDocument(); | ||
|
|
||
| rerender(<AccountInfo account_type='gaming' country_standpoint={{ is_united_kingdom: true }} />); | ||
| expect(screen.getByText(/gaming/i)).toBeInTheDocument(); | ||
|
|
||
| rerender(<AccountInfo account_type='gaming' country_standpoint={{ is_belgium: true }} />); | ||
| expect(screen.getByText(/options/i)).toBeInTheDocument(); | ||
|
|
||
| rerender(<AccountInfo account_type='gaming' country_standpoint={{ is_isle_of_man: false }} is_eu />); | ||
| expect(screen.getByText(/options/i)).toBeInTheDocument(); | ||
|
|
||
| rerender(<AccountInfo account_type='gaming' country_standpoint={{ is_isle_of_man: false }} />); | ||
| expect(screen.getByText(/derived/i)).toBeInTheDocument(); | ||
| }); | ||
| // it('should have .acc-info--show if is_dialog_on is true', () => { | ||
| // const wrapper = shallow(<AccountInfo currency='USD' is_dialog_on={true} />); | ||
| // expect(wrapper.find('.acc-info--show').exists()).toBe(true); | ||
| // }); | ||
| // it('should not have .acc-info--show if is_dialog_on is false', () => { | ||
| // const wrapper = shallow(<AccountInfo currency='USD' is_dialog_on={false} />); | ||
| // expect(wrapper.find('.acc-info--show').exists()).toBe(false); | ||
| // }); | ||
| // it('should have .acc-info--is-virtual if is_virtual is true', () => { | ||
| // const wrapper = shallow(<AccountInfo currency='USD' is_virtual={true} />); | ||
| // expect(wrapper.find('.acc-info--is-virtual').exists()).toBe(true); | ||
| // }); | ||
| // it('should not have .acc-info--is-virtual if is_virtual is false', () => { | ||
| // const wrapper = shallow(<AccountInfo currency='USD' is_virtual={false} />); | ||
| // expect(wrapper.find('.acc-info--is-virtual').exists()).toBe(false); | ||
| // }); | ||
| // it('should contain <CSSTransition /> and children', () => { | ||
| // const wrapper = shallow( | ||
| // <AccountInfo currency='USD' is_dialog_on={false} toggleDialog={() => true} is_upgrade_enabled={true} /> | ||
| // ); | ||
| // expect( | ||
| // wrapper.contains( | ||
| // <CSSTransition in={false} timeout={400} classNames='acc-switcher-wrapper' unmountOnExit> | ||
| // <div className='acc-switcher-wrapper'> | ||
| // <AccountSwitcher is_visible={false} toggle={() => true} is_upgrade_enabled={true} /> | ||
| // </div> | ||
| // </CSSTransition> | ||
| // ) | ||
| // ); | ||
| // }); | ||
| // it("should have CSSTransition's prop 'in' equal to false when is_dialog_on is false", () => { | ||
| // const wrapper = shallow( | ||
| // <AccountInfo currency='USD' is_dialog_on={false} toggleDialog={() => true} is_upgrade_enabled={true} /> | ||
| // ); | ||
| // expect(wrapper.find(CSSTransition).prop('in')).toBe(false); | ||
| // }); | ||
| // it("should have CSSTransition's prop 'in' equal to true when is_dialog_on is true", () => { | ||
| // const wrapper = shallow( | ||
| // <AccountInfo currency='USD' is_dialog_on={true} toggleDialog={() => true} is_upgrade_enabled={true} /> | ||
| // ); | ||
| // expect(wrapper.find(CSSTransition).prop('in')).toBe(true); | ||
| // }); | ||
| // it("should have AccountSwitcher's prop 'is_visible' equal to true when is_dialog_on is true", () => { | ||
| // const wrapper = shallow( | ||
| // <AccountInfo currency='USD' is_dialog_on={true} toggleDialog={() => true} is_upgrade_enabled={true} /> | ||
| // ); | ||
| // expect(wrapper.find(AccountSwitcher).prop('is_visible')).toBe(true); | ||
| // }); | ||
| // it("should have AccountSwitcher's prop 'is_visible' equal to false when is_dialog_on is false", () => { | ||
| // const wrapper = shallow( | ||
| // <AccountInfo currency='USD' is_dialog_on={false} toggleDialog={() => true} is_upgrade_enabled={true} /> | ||
| // ); | ||
| // expect(wrapper.find(AccountSwitcher).prop('is_visible')).toBe(false); | ||
| // }); | ||
| // it('should not have .acc-balance-amount when balance is undefined', () => { | ||
| // const wrapper = shallow(<AccountInfo currency={'USD'} />); | ||
| // expect(wrapper.find('.acc-balance-amount').exists()).toBe(false); | ||
| // }); | ||
| // it('should render balance when balance is passed in props', () => { | ||
| // const wrapper = shallow(<AccountInfo currency='USD' balance='123456789' />); | ||
| // expect(wrapper.contains(<p className='acc-info__balance'>123456789 USD</p>)).toBe(true); | ||
| // }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters