-
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: evgeniy/92724/language settings improvements (#8176)
* refactor: evgeniy/92724/language settings improvements * fix: cursor button fix * feat: same language menu usage for responsive * fix: hide language icon while opening language menu * refactor: review change, adding types and dependencies * fix: changes from master missed * fix: reading undefined error * fix: duplicated properties * fix: types duplicate * chore: language-settings test * refactor: menu-link store separately * chore: menu-link test coverage * refactor: test code structure * refactor: link code * refactor: remove unused code * refactor: code readability * refactor: variable usage * refactor: variable usage * refactor: review comments incorporating * fix: test refactor with mockstore * fix: missing mock * fix: 🎨 incorporated deriv/util package * fix: ⚡ refactored code * feat: resolved code smells * feat: resolved review comments * feat: resolved review comments * feat: resolved review comments * fix: failing testcase * fix: 🐛 missing import * Trigger build * chore: trigger build * Merge branch 'master' into evgeniy/92724/language_settings_improvements * chore: review comments incorporate * refactor: types store alphabetically order * refactor: types store alphabetically order * refactor: menulink export fix * chore: remove unused variable * refactor: remove unused variable * chore: trigger build * fix: resolve conflicts * fix: repeated fields * chore: isExternalLink description * chore: bootstrap --------- Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Co-authored-by: Matin shafiei <matin@deriv.com> Co-authored-by: Likhith Kolayari <likhith@regentmarkets.com>
- Loading branch information
1 parent
36e3065
commit 37f4e3d
Showing
24 changed files
with
683 additions
and
388 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.
83 changes: 83 additions & 0 deletions
83
packages/account/src/Sections/Profile/LanguageSettings/__tests__/language-settings.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,83 @@ | ||
| import React from 'react'; | ||
| import { screen, render } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { isMobile, routes } from '@deriv/shared'; | ||
| import LanguageSettings from '../language-settings'; | ||
| import { mockStore, StoreProvider } from '@deriv/stores'; | ||
|
|
||
| jest.mock('@deriv/shared', () => ({ | ||
| ...jest.requireActual('@deriv/shared'), | ||
| isMobile: jest.fn(() => false), | ||
| })); | ||
|
|
||
| jest.mock('@deriv/translations', () => ({ | ||
| ...jest.requireActual('@deriv/translations'), | ||
| getAllowedLanguages: jest.fn(() => ({ lang_1: 'Test Lang 1', lang_2: 'Test Lang 2' })), | ||
| })); | ||
|
|
||
| jest.mock('@deriv/components', () => ({ | ||
| ...jest.requireActual('@deriv/components'), | ||
| Icon: jest.fn(() => <div>Flag Icon</div>), | ||
| })); | ||
|
|
||
| jest.mock('react-i18next', () => ({ | ||
| ...jest.requireActual('react-i18next'), | ||
| useTranslation: jest.fn(() => ({ i18n: { changeLanguage: jest.fn() } })), | ||
| })); | ||
|
|
||
| jest.mock('react-router-dom', () => ({ | ||
| ...jest.requireActual('react-router-dom'), | ||
| Redirect: jest.fn(() => <div>Redirect</div>), | ||
| })); | ||
|
|
||
| describe('LanguageSettings', () => { | ||
| const mockRootStore = mockStore({ | ||
| common: { | ||
| current_language: 'lang_1', | ||
| }, | ||
| }); | ||
|
|
||
| const renderLanguageSettings = () => { | ||
| render(<LanguageSettings />, { | ||
| wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>, | ||
| }); | ||
| }; | ||
|
|
||
| it('should render LanguageSettings', () => { | ||
| renderLanguageSettings(); | ||
|
|
||
| expect(screen.getByText('Select Language')).toBeInTheDocument(); | ||
|
|
||
| const flags_icons = screen.getAllByText('Flag Icon'); | ||
| const lang_1 = screen.getByText('Test Lang 1'); | ||
| const lang_2 = screen.getByText('Test Lang 2'); | ||
|
|
||
| expect(flags_icons.length).toBe(2); | ||
| expect(lang_1).toBeInTheDocument(); | ||
| expect(/(active)/i.test(lang_1.className)).toBeTruthy(); | ||
| expect(lang_2).toBeInTheDocument(); | ||
| expect(/(active)/i.test(lang_2.className)).toBeFalsy(); | ||
| }); | ||
|
|
||
| it('should trigger language change', () => { | ||
| renderLanguageSettings(); | ||
|
|
||
| const lang_2 = screen.getByText('Test Lang 2'); | ||
| userEvent.click(lang_2); | ||
|
|
||
| expect(mockRootStore.common.changeSelectedLanguage).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('should redirect for mobile', () => { | ||
| (isMobile as jest.Mock).mockReturnValue(true); | ||
| Object.defineProperty(window, 'location', { | ||
| configurable: true, | ||
| value: { pathname: routes.languages }, | ||
| }); | ||
|
|
||
| renderLanguageSettings(); | ||
|
|
||
| expect(screen.queryByText('Select Language')).not.toBeInTheDocument(); | ||
| expect(screen.getByText('Redirect')).toBeInTheDocument(); | ||
| }); | ||
| }); |
84 changes: 28 additions & 56 deletions
84
packages/account/src/Sections/Profile/LanguageSettings/language-settings.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
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
4 changes: 4 additions & 0 deletions
4
packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/index.ts
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,4 @@ | ||
| import MenuTitle from './menu-title'; | ||
| import MobileLanguageMenu from './mobile-language-menu'; | ||
|
|
||
| export { MenuTitle, MobileLanguageMenu }; |
39 changes: 39 additions & 0 deletions
39
packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/menu-title.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 { observer, useStore } from '@deriv/stores'; | ||
| import { Icon, Text } from '@deriv/components'; | ||
| import { localize, Localize } from '@deriv/translations'; | ||
|
|
||
| const MenuTitle = observer(() => { | ||
| const { common, ui } = useStore(); | ||
| const { current_language } = common; | ||
| const { is_mobile_language_menu_open, setMobileLanguageMenuOpen } = ui; | ||
| return ( | ||
| <React.Fragment> | ||
| <div>{localize('Menu')}</div> | ||
| <div | ||
| className='settings-language__language-button_wrapper' | ||
| onClick={() => { | ||
| if (!is_mobile_language_menu_open) { | ||
| setMobileLanguageMenuOpen(true); | ||
| } | ||
| }} | ||
| > | ||
| {!is_mobile_language_menu_open && ( | ||
| <React.Fragment> | ||
| <Icon | ||
| icon={`IcFlag${current_language.replace('_', '-')}`} | ||
| data_testid='dt_icon' | ||
| className='ic-settings-language__icon' | ||
| size={22} | ||
| /> | ||
| <Text weight='bold' size='xxs'> | ||
| <Localize i18n_default_text={current_language} /> | ||
| </Text> | ||
| </React.Fragment> | ||
| )} | ||
| </div> | ||
| </React.Fragment> | ||
| ); | ||
| }); | ||
|
|
||
| export default MenuTitle; |
50 changes: 50 additions & 0 deletions
50
...ages/core/src/App/Components/Layout/Header/Components/ToggleMenu/mobile-language-menu.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,50 @@ | ||
| import classNames from 'classnames'; | ||
| import React from 'react'; | ||
| import { MobileDrawer } from '@deriv/components'; | ||
| import { observer, useStore } from '@deriv/stores'; | ||
| import { getAllowedLanguages, localize } from '@deriv/translations'; | ||
| import { LanguageLink } from 'App/Components/Routes'; | ||
|
|
||
| type TMobileLanguageMenu = { | ||
| expandSubMenu: (prop: boolean) => void; | ||
| toggleDrawer: () => void; | ||
| }; | ||
|
|
||
| const MobileLanguageMenu = observer(({ expandSubMenu, toggleDrawer }: TMobileLanguageMenu) => { | ||
| const { common, ui } = useStore(); | ||
| const { is_language_changing } = common; | ||
| const { is_mobile_language_menu_open, setMobileLanguageMenuOpen } = ui; | ||
| return ( | ||
| <MobileDrawer.SubMenu | ||
| is_expanded={is_mobile_language_menu_open} | ||
| has_subheader | ||
| submenu_title={localize('Language')} | ||
| onToggle={is_expanded => { | ||
| expandSubMenu(is_expanded); | ||
| setMobileLanguageMenuOpen(false); | ||
| }} | ||
| submenu_toggle_class='dc-mobile-drawer__submenu-toggle--hidden' | ||
| > | ||
| <div | ||
| className={classNames('settings-language__language-container', { | ||
| 'settings-language__language-container--disabled': is_language_changing, | ||
| })} | ||
| > | ||
| {Object.keys(getAllowedLanguages()).map(lang => ( | ||
| <LanguageLink | ||
| key={lang} | ||
| icon_classname='settings-language__language-flag' | ||
| is_clickable | ||
| lang={lang} | ||
| toggleModal={() => { | ||
| toggleDrawer(); | ||
| setMobileLanguageMenuOpen(false); | ||
| }} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </MobileDrawer.SubMenu> | ||
| ); | ||
| }); | ||
|
|
||
| export default MobileLanguageMenu; |
Oops, something went wrong.