-
Notifications
You must be signed in to change notification settings - Fork 303
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DTRA] henry/dtra-1237/fix: dtrader-v2 setup (#14991)
* fix: initial setup * fix: partially finished setup * fix: ensure new header only appears for mobile * fix: quill-ui version bump * fix: change classnames * fix: change to kebab case file names * fix: resolve comments * fix: add color to text * fix: add tests * fix: sonarcloud * fix: sonarcloud issues * fix: parse JSON with try catch in case FeatureFlagsStore returns empty * fix: change to quill icons * fix: add missing css * fix: change hamburger menu icon to standalone * fix: move quill-ui to core and wrap application with themeprovider * fix: import themeprovider from quill/ui * fix: wrong import * fix: remove unused css and make header bold * fix: make labels red when active * fix: change text to correct component * fix: move themeprovider to appcontent to react to changes in store * chore: reset package lock * fix: update package-lock and add quill-ui to traders package * fix: jest config error * fix: ignore errors from quill-ui * fix: jest config and add babel config * fix: remove a plugin * fix: lets try this * fix: remove irrelevant files * fix: test * fix: change * fix: asdf * fix: errors * fix: give contract details page a new header
- Loading branch information
1 parent
81c9be6
commit 8a70548
Showing
33 changed files
with
544 additions
and
14 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
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
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
34 changes: 34 additions & 0 deletions
34
packages/core/src/App/Containers/Layout/header/dtrader-v2-header.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 |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import { observer, useStore } from '@deriv/stores'; | ||
| import { getCurrencyDisplayCode } from '@deriv/shared'; | ||
| import AccountInfoIcon from 'App/Components/Layout/Header/account-info-icon'; | ||
| import { CaptionText } from '@deriv-com/quill-ui'; | ||
|
|
||
| const DTraderV2Header = observer(() => { | ||
| const { client } = useStore(); | ||
| const { balance, currency, is_virtual, loginid } = client; | ||
|
|
||
| const currency_lower = currency?.toLowerCase(); | ||
|
|
||
| return ( | ||
| <header className='header header-v2'> | ||
| <React.Suspense fallback={<div />}> | ||
| <div className='header-v2__acc-info'> | ||
| <div className='header-v2__acc-info--top'> | ||
| <span className='header-v2__acc-info--logo'> | ||
| {(is_virtual || currency) && ( | ||
| <AccountInfoIcon is_virtual={is_virtual} currency={currency_lower} /> | ||
| )} | ||
| </span> | ||
| <CaptionText size='sm'>{loginid}</CaptionText> | ||
| </div> | ||
| <div className='header-v2__acc-info--bottom'> | ||
| <CaptionText size='sm' bold>{`${balance} ${getCurrencyDisplayCode(currency)}`}</CaptionText> | ||
| </div> | ||
| </div> | ||
| </React.Suspense> | ||
| </header> | ||
| ); | ||
| }); | ||
|
|
||
| export default DTraderV2Header; |
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
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
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
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
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
39 changes: 39 additions & 0 deletions
39
packages/trader/src/AppV2/Components/BottomNav/__tests__/bottom-nav-item.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 |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import BottomNavItem from '../bottom-nav-item'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| jest.mock('@deriv-com/quill-ui', () => ({ | ||
| Text: jest.fn(() => { | ||
| return 'MockedText'; | ||
| }), | ||
| })); | ||
|
|
||
| describe('BottomNavItem', () => { | ||
| const mockProps = { | ||
| icon: <div>Icon</div>, | ||
| selectedIndex: 0, | ||
| label: 'Label', | ||
| setSelectedIndex: jest.fn(), | ||
| index: 0, | ||
| }; | ||
|
|
||
| it('should render icon and label', () => { | ||
| render(<BottomNavItem {...mockProps} />); | ||
| expect(screen.getByText('Icon')).toBeInTheDocument(); | ||
| expect(screen.getByText('MockedText')).toBeInTheDocument(); | ||
| }); | ||
| it('should have bottom-nav-item--active class when active', () => { | ||
| render(<BottomNavItem {...mockProps} />); | ||
| expect(screen.getByText('MockedText')).toHaveClass('bottom-nav-item--active'); | ||
| }); | ||
| it('should have not bottomNav-item--active class when not active', () => { | ||
| render(<BottomNavItem {...mockProps} selectedIndex={1} />); | ||
| expect(screen.getByText('MockedText')).not.toHaveClass('bottom-nav-item--active'); | ||
| }); | ||
| it('should call setSelectedIndex with index when clicked', () => { | ||
| render(<BottomNavItem {...mockProps} />); | ||
| userEvent.click(screen.getByText('MockedText')); | ||
| expect(mockProps.setSelectedIndex).toHaveBeenCalledWith(0); | ||
| }); | ||
| }); |
45 changes: 45 additions & 0 deletions
45
packages/trader/src/AppV2/Components/BottomNav/__tests__/bottom-nav.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 |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import BottomNav from '../bottom-nav'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| jest.mock('../bottom-nav-item', () => { | ||
| return jest.fn(({ index, setSelectedIndex }) => ( | ||
| <button onClick={() => setSelectedIndex(index)}>MockedBottomNavItem</button> | ||
| )); | ||
| }); | ||
|
|
||
| jest.mock('@deriv-com/quill-ui', () => ({ | ||
| Badge: jest.fn(() => { | ||
| return 'MockedBadge'; | ||
| }), | ||
| })); | ||
| describe('BottomNav', () => { | ||
| const mockedTradeContainer = <div>MockedTrade</div>; | ||
| const mockedMarketsContainer = <div>MockedMarkets</div>; | ||
| const mockedPositionsContainer = <div>MockedPositions</div>; | ||
| const renderedBottomNav = ( | ||
| <BottomNav> | ||
| <div>{mockedTradeContainer}</div> | ||
| <div>{mockedMarketsContainer}</div> | ||
| <div>{mockedPositionsContainer}</div> | ||
| </BottomNav> | ||
| ); | ||
| it('should render correctly', () => { | ||
| const { container } = render(renderedBottomNav); | ||
| expect(container).toBeInTheDocument(); | ||
| }); | ||
| it('should render the correct number of BottomNavItem components', () => { | ||
| render(renderedBottomNav); | ||
| expect(screen.getAllByText(/MockedBottomNavItem/i)).toHaveLength(4); | ||
| }); | ||
| it('should render MockedTrade by default since selected index is 0', () => { | ||
| render(renderedBottomNav); | ||
| expect(screen.getByText('MockedTrade')).toBeInTheDocument(); | ||
| }); | ||
| it('should render MockedPositions if 3rd MockedBottomNavItem is selected', () => { | ||
| render(renderedBottomNav); | ||
| userEvent.click(screen.getAllByText('MockedBottomNavItem')[2]); | ||
| expect(screen.getByText('MockedPositions')).toBeInTheDocument(); | ||
| }); | ||
| }); |
Oops, something went wrong.