From 4f08b299b008da1d50ded6e5fd7922712233c7fd Mon Sep 17 00:00:00 2001 From: Farhan Ahmad Nurzi Date: Fri, 4 Aug 2023 12:42:34 +0800 Subject: [PATCH 1/7] fix: fix issues when refreshing advertiser and my-profile page --- .../__tests__/advertiser-page.spec.tsx | 106 ++++++++++++++++++ .../advertiser-page/advertiser-page.jsx | 26 +++-- packages/p2p/src/components/app.jsx | 1 - .../__tests__/payment-methods.spec.tsx | 62 ++++++++++ .../payment-methods/payment-methods.jsx | 1 + .../p2p/src/stores/advertiser-page-store.js | 14 +-- packages/p2p/src/stores/general-store.js | 1 + packages/p2p/src/stores/my-profile-store.js | 6 +- 8 files changed, 196 insertions(+), 21 deletions(-) create mode 100644 packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx create mode 100644 packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx diff --git a/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx b/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx new file mode 100644 index 000000000000..18229b3abc60 --- /dev/null +++ b/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; +import { useStores } from 'Stores/index'; +import AdvertiserPage from '../advertiser-page'; + +const mock_modal_manager = { + showModal: jest.fn(), + hideModal: jest.fn(), + useRegisterModalProps: jest.fn(), + is_modal_open: true, +}; + +jest.mock('Components/modal-manager/modal-manager-context'); +const mocked_useModalManagerContext = useModalManagerContext as jest.MockedFunction< + () => Partial> +>; + +mocked_useModalManagerContext.mockImplementation(() => mock_modal_manager); + +const mock_store: DeepPartial> = { + advertiser_page_store: { + advertiser_details_id: 'id1', + advertiser_details_name: 'test name', + counterparty_advertiser_info: { + name: 'name', + is_online: 1, + }, + is_counterparty_advertiser_blocked: false, + onAdvertiserIdUpdate: jest.fn(), + onMount: jest.fn(), + onTabChange: jest.fn(), + setIsDropdownMenuVisible: jest.fn(), + onUnmount: jest.fn(), + onCancel: jest.fn(), + is_loading: false, + info: { + name: 'name', + }, + }, + general_store: { + advertiser_id: 'id2', + advertiser_info: { + name: 'my name', + is_online: 1, + }, + block_unblock_user_error: '', + error_code: '', + active_index: 0, + setBlockUnblockUserError: jest.fn(), + setActiveIndex: jest.fn(), + path: { + my_profile: 3, + }, + is_block_unblock_user_loading: false, + setCounterpartyAdvertiserId: jest.fn(), + }, + buy_sell_store: { + show_advertiser_page: true, + hideAdvertiserPage: jest.fn(), + }, + my_profile_store: { + setActiveTab: jest.fn(), + }, +}; + +jest.mock('Components/advertiser-page/advertiser-page-adverts', () => jest.fn(() =>
adverts
)); +jest.mock('Components/advertiser-page/advertiser-page-stats', () => jest.fn(() =>
stats
)); +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + Loading: jest.fn(() =>
loading...
), +})); + +jest.mock('Stores', () => ({ + ...jest.requireActual('Stores'), + useStores: jest.fn(() => mock_store), +})); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useLocation: jest.fn(() => ({ + hash: '', + key: '0', + pathname: '/cashier/p2p/advertiser', + search: '?id=39', + })), +})); + +jest.mock('@sendbird/chat', () => ({ + SendbirdChat: jest.fn().mockReturnValue({}), +})); + +jest.mock('@sendbird/chat/groupChannel', () => ({ + SendbirdChat: jest.fn().mockReturnValue({}), +})); + +jest.mock('@sendbird/chat/message', () => ({ + SendbirdChat: jest.fn().mockReturnValue({}), +})); + +describe('', () => { + it('should call setCounterpartyAdvertiserId when component mounted', () => { + render(); + expect(mock_store.general_store.setCounterpartyAdvertiserId).toHaveBeenCalled(); + }); +}); diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx index 4f75116d45cd..3e782f18a2fa 100644 --- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx +++ b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx @@ -3,7 +3,7 @@ import { DesktopWrapper, Loading, MobileWrapper, Text } from '@deriv/components' import { daysSince, isMobile } from '@deriv/shared'; import { reaction } from 'mobx'; import { observer } from 'mobx-react-lite'; -import { useHistory } from 'react-router-dom'; +import { useHistory, useLocation } from 'react-router-dom'; import { useStores } from 'Stores'; import { Localize, localize } from 'Components/i18next'; import { my_profile_tabs } from 'Constants/my-profile-tabs'; @@ -25,12 +25,15 @@ import './advertiser-page.scss'; const AdvertiserPage = () => { const { advertiser_page_store, buy_sell_store, general_store, my_profile_store } = useStores(); const { hideModal, showModal, useRegisterModalProps } = useModalManagerContext(); + const { advertiser_details_name, advertiser_details_id, counterparty_advertiser_info } = advertiser_page_store; + const { advertiser_id, advertiser_info, counterparty_advertiser_id } = general_store; - const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id; + const is_my_advert = advertiser_details_id === advertiser_id; // Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error - const info = is_my_advert ? general_store.advertiser_info : advertiser_page_store.counterparty_advertiser_info; + const info = is_my_advert ? advertiser_info : counterparty_advertiser_info; const history = useHistory(); + const location = useLocation(); const { basic_verification, @@ -49,11 +52,11 @@ const AdvertiserPage = () => { sell_orders_count, } = info; - const nickname = advertiser_page_store.advertiser_details_name ?? name; - + const joined_since = daysSince(created_time); + const nickname = advertiser_details_name ?? name; // rating_average_decimal converts rating_average to 1 d.p number const rating_average_decimal = rating_average ? Number(rating_average).toFixed(1) : null; - const joined_since = daysSince(created_time); + const error_message = () => { return !!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert ? localize("Unblocking wasn't possible as {{name}} is not using Deriv P2P anymore.", { @@ -65,6 +68,11 @@ const AdvertiserPage = () => { }; React.useEffect(() => { + if (location.search || counterparty_advertiser_id) { + const url_params = new URLSearchParams(location.search); + general_store.setCounterpartyAdvertiserId(url_params.get('id')); + } + advertiser_page_store.onMount(); advertiser_page_store.setIsDropdownMenuVisible(false); @@ -77,11 +85,11 @@ const AdvertiserPage = () => { { fireImmediately: true } ); - reaction( + const disposeBlockUnblockUserErrorReaction = reaction( () => [advertiser_page_store.active_index, general_store.block_unblock_user_error], () => { advertiser_page_store.onTabChange(); - if (general_store.block_unblock_user_error && buy_sell_store.show_advertiser_page) { + if (general_store.block_unblock_user_error) { showModal({ key: 'ErrorModal', props: { @@ -109,7 +117,6 @@ const AdvertiserPage = () => { width: isMobile() ? '90rem' : '40rem', }, }); - general_store.setBlockUnblockUserError(null); } }, { fireImmediately: true } @@ -117,6 +124,7 @@ const AdvertiserPage = () => { return () => { disposeCounterpartyAdvertiserIdReaction(); + disposeBlockUnblockUserErrorReaction(); advertiser_page_store.onUnmount(); }; diff --git a/packages/p2p/src/components/app.jsx b/packages/p2p/src/components/app.jsx index 056592a5db6d..fd76ce12124b 100644 --- a/packages/p2p/src/components/app.jsx +++ b/packages/p2p/src/components/app.jsx @@ -102,7 +102,6 @@ const App = () => { } else if (/\/advertiser$/.test(location.pathname)) { if (location.search || general_store.counterparty_advertiser_id) { const url_params = new URLSearchParams(location.search); - general_store.setCounterpartyAdvertiserId(url_params.get('id')); // DO NOT REMOVE. This will prevent the page from redirecting to buy sell on reload from advertiser page // as it resets the URL search params diff --git a/packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx b/packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx new file mode 100644 index 000000000000..c855cddff471 --- /dev/null +++ b/packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import { useStores } from 'Stores/index'; +import PaymentMethods from '../payment-methods'; + +jest.mock('@sendbird/chat', () => ({ + SendbirdChat: jest.fn().mockReturnValue({}), +})); + +jest.mock('@sendbird/chat/groupChannel', () => ({ + SendbirdChat: jest.fn().mockReturnValue({}), +})); + +jest.mock('@sendbird/chat/message', () => ({ + SendbirdChat: jest.fn().mockReturnValue({}), +})); + +let mock_store: DeepPartial>; + +jest.mock('Stores', () => ({ + ...jest.requireActual('Stores'), + useStores: jest.fn(() => mock_store), +})); + +jest.mock('Components/my-profile/payment-methods/add-payment-method', () => jest.fn(() =>
AddPaymentMethod
)); +jest.mock('Components/my-profile/payment-methods/payment-methods-list/edit-payment-method-form', () => + jest.fn(() =>
EditPaymentMethodForm
) +); +jest.mock('Components/my-profile/payment-methods/payment-methods-empty', () => + jest.fn(() =>
PaymentMethodsEmpty
) +); +jest.mock('Components/my-profile/payment-methods/payment-methods-list', () => + jest.fn(() =>
PaymentMethodsList
) +); + +describe('', () => { + beforeEach(() => { + mock_store = { + general_store: { + active_index: 3, + setFormikRef: jest.fn(), + }, + my_profile_store: { + advertiser_has_payment_methods: true, + hideAddPaymentMethodForm: jest.fn(), + is_loading: false, + getAdvertiserPaymentMethods: jest.fn(), + getPaymentMethodsList: jest.fn(), + setAddPaymentMethodErrorMessage: jest.fn(), + setIsLoading: jest.fn(), + setShouldShowAddPaymentMethodForm: jest.fn(), + setShouldShowEditPaymentMethodForm: jest.fn(), + should_show_add_payment_method_form: false, + }, + }; + }); + + it('should call getPaymentMethodsList when component mounted', () => { + render(); + expect(mock_store.my_profile_store.getPaymentMethodsList).toHaveBeenCalled(); + }); +}); diff --git a/packages/p2p/src/components/my-profile/payment-methods/payment-methods.jsx b/packages/p2p/src/components/my-profile/payment-methods/payment-methods.jsx index b807d7e78dc3..10a45fc017c7 100644 --- a/packages/p2p/src/components/my-profile/payment-methods/payment-methods.jsx +++ b/packages/p2p/src/components/my-profile/payment-methods/payment-methods.jsx @@ -15,6 +15,7 @@ const PaymentMethods = ({ formik_ref }) => { React.useEffect(() => { my_profile_store.setIsLoading(true); my_profile_store.getAdvertiserPaymentMethods(); + my_profile_store.getPaymentMethodsList(); my_profile_store.setShouldShowAddPaymentMethodForm(false); my_profile_store.setShouldShowEditPaymentMethodForm(false); // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js index 973c18d6c178..e421dd629ce1 100644 --- a/packages/p2p/src/stores/advertiser-page-store.js +++ b/packages/p2p/src/stores/advertiser-page-store.js @@ -107,10 +107,10 @@ export default class AdvertiserPageStore extends BaseStore { ? { local_currency: buy_sell_store.selected_local_currency } : {}), }).then(response => { - if (response.error) { + if (response?.error) { this.setErrorMessage(response.error); } else { - const { list } = response.p2p_advert_list; + const { list } = response?.p2p_advert_list; this.setAdverts(list); this.setHasMoreAdvertsToLoad(list.length >= general_store.list_item_limit); @@ -212,7 +212,7 @@ export default class AdvertiserPageStore extends BaseStore { p2p_advertiser_info: 1, id: general_store.counterparty_advertiser_id, }).then(response => { - if (response.error) { + if (response?.error) { this.setErrorMessage(response.error); } else { this.setAdvertiserInfo(response); @@ -224,11 +224,9 @@ export default class AdvertiserPageStore extends BaseStore { } onSubmit() { - this.root_store.general_store.blockUnblockUser( - !this.is_counterparty_advertiser_blocked, - this.advertiser_details_id - ); - if (this.is_counterparty_advertiser_blocked) this.getCounterpartyAdvertiserList(this.advertiser_details_id); + const current_advertiser_id = this.advertiser_details_id ?? this.counterparty_advertiser_info?.id; + this.root_store.general_store.blockUnblockUser(!this.is_counterparty_advertiser_blocked, current_advertiser_id); + if (this.is_counterparty_advertiser_blocked) this.getCounterpartyAdvertiserList(current_advertiser_id); this.setIsDropdownMenuVisible(false); } diff --git a/packages/p2p/src/stores/general-store.js b/packages/p2p/src/stores/general-store.js index 74fa9a6e33e6..267c41871265 100644 --- a/packages/p2p/src/stores/general-store.js +++ b/packages/p2p/src/stores/general-store.js @@ -240,6 +240,7 @@ export default class GeneralStore extends BaseStore { ); } } else { + this.hideModal(); const { code, message } = response.error; this.setErrorCode(code); this.setBlockUnblockUserError(message); diff --git a/packages/p2p/src/stores/my-profile-store.js b/packages/p2p/src/stores/my-profile-store.js index 9dd4a8299ed8..01e6968fa80c 100644 --- a/packages/p2p/src/stores/my-profile-store.js +++ b/packages/p2p/src/stores/my-profile-store.js @@ -359,7 +359,7 @@ export default class MyProfileStore extends BaseStore { requestWS({ p2p_advertiser_payment_methods: 1, }).then(response => { - if (response.error) { + if (response?.error) { this.setAdvertiserPaymentMethodsError(response.error.message); } else { this.setAdvertiserPaymentMethods(response?.p2p_advertiser_payment_methods); @@ -562,7 +562,7 @@ export default class MyProfileStore extends BaseStore { p2p_advertiser_update: 1, show_name: this.root_store?.general_store?.should_show_real_name ? 1 : 0, }).then(response => { - if (response.error) { + if (response?.error) { this.setFormError(response.error.message); this.root_store.general_store.setShouldShowRealName( !this.root_store?.general_store?.should_show_real_name @@ -661,7 +661,7 @@ export default class MyProfileStore extends BaseStore { }, }, }).then(response => { - if (response.error) { + if (response?.error) { this.setAddPaymentMethodErrorMessage(response.error.message); this.root_store.general_store.showModal({ key: 'AddPaymentMethodErrorModal', From d967bf5be43e66ac3a7bc38f21728cfb24bb98e2 Mon Sep 17 00:00:00 2001 From: Farhan Ahmad Nurzi Date: Fri, 4 Aug 2023 15:33:34 +0800 Subject: [PATCH 2/7] fix: sendbird error in test files --- packages/p2p/jest.config.js | 1 + .../__tests__/advertiser-page.spec.tsx | 12 ------------ .../__tests__/payment-methods.spec.tsx | 14 +------------- 3 files changed, 2 insertions(+), 25 deletions(-) diff --git a/packages/p2p/jest.config.js b/packages/p2p/jest.config.js index 6d193b80edd3..77055133a7e0 100644 --- a/packages/p2p/jest.config.js +++ b/packages/p2p/jest.config.js @@ -29,4 +29,5 @@ module.exports = { '/coverage/lcov-report', '/dist', ], + transformIgnorePatterns: ['/node_modules/(?!@sendbird/chat).+\\.js$'], }; diff --git a/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx b/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx index 18229b3abc60..580f5caf524a 100644 --- a/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx +++ b/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx @@ -86,18 +86,6 @@ jest.mock('react-router-dom', () => ({ })), })); -jest.mock('@sendbird/chat', () => ({ - SendbirdChat: jest.fn().mockReturnValue({}), -})); - -jest.mock('@sendbird/chat/groupChannel', () => ({ - SendbirdChat: jest.fn().mockReturnValue({}), -})); - -jest.mock('@sendbird/chat/message', () => ({ - SendbirdChat: jest.fn().mockReturnValue({}), -})); - describe('', () => { it('should call setCounterpartyAdvertiserId when component mounted', () => { render(); diff --git a/packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx b/packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx index c855cddff471..4faa3671055b 100644 --- a/packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx +++ b/packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx @@ -1,20 +1,8 @@ import React from 'react'; -import { screen, render } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { useStores } from 'Stores/index'; import PaymentMethods from '../payment-methods'; -jest.mock('@sendbird/chat', () => ({ - SendbirdChat: jest.fn().mockReturnValue({}), -})); - -jest.mock('@sendbird/chat/groupChannel', () => ({ - SendbirdChat: jest.fn().mockReturnValue({}), -})); - -jest.mock('@sendbird/chat/message', () => ({ - SendbirdChat: jest.fn().mockReturnValue({}), -})); - let mock_store: DeepPartial>; jest.mock('Stores', () => ({ From 116a07dab6d74f42665d8c248918109c53fef6ce Mon Sep 17 00:00:00 2001 From: Farhan Ahmad Nurzi Date: Fri, 4 Aug 2023 17:04:27 +0800 Subject: [PATCH 3/7] refactor: prevent destructuring error when response is undefined --- packages/p2p/src/stores/advertiser-page-store.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js index e421dd629ce1..c16d75e2a2e0 100644 --- a/packages/p2p/src/stores/advertiser-page-store.js +++ b/packages/p2p/src/stores/advertiser-page-store.js @@ -110,7 +110,7 @@ export default class AdvertiserPageStore extends BaseStore { if (response?.error) { this.setErrorMessage(response.error); } else { - const { list } = response?.p2p_advert_list; + const { list } = response?.p2p_advert_list ?? {}; this.setAdverts(list); this.setHasMoreAdvertsToLoad(list.length >= general_store.list_item_limit); From bc5e3293f87ddb808a6417ace9bcf0b850e469d3 Mon Sep 17 00:00:00 2001 From: Farhan Ahmad Nurzi Date: Wed, 27 Sep 2023 12:24:05 +0800 Subject: [PATCH 4/7] fix: failed tests --- .../add-payment-method.scss | 104 ------------------ .../__tests__/advertiser-page.spec.jsx | 80 -------------- .../__tests__/advertiser-page.spec.tsx | 17 ++- .../__tests__/payment-methods.spec.tsx | 20 ++-- 4 files changed, 28 insertions(+), 193 deletions(-) delete mode 100644 packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method.scss delete mode 100644 packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.jsx rename packages/p2p/src/{components => pages}/advertiser-page/__tests__/advertiser-page.spec.tsx (76%) rename packages/p2p/src/{components => pages}/my-profile/payment-methods/__tests__/payment-methods.spec.tsx (66%) diff --git a/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method.scss b/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method.scss deleted file mode 100644 index 9d37afdd8608..000000000000 --- a/packages/p2p/src/components/my-profile/payment-methods/add-payment-method/add-payment-method.scss +++ /dev/null @@ -1,104 +0,0 @@ -.add-payment-method { - &__modal { - @include mobile { - width: 100vw; - height: 100%; - display: flex; - flex-direction: column; - padding: 1.5rem 2rem; - } - } - &__cross-icon { - cursor: pointer; - } - - &__footer { - display: none; - } - - &-select { - height: 30vh; - - @include mobile { - height: 100%; - - &__input { - border-radius: 4px; - border: 1px solid var(--border-normal); - } - } - } - - &-hint { - padding: 0.2rem 0 0 1.6rem; - } - - &-form { - &__buttons { - display: flex; - flex-direction: row; - justify-content: end; - - &--add { - margin-left: 0.8rem; - } - - &--separated-footer { - border-top: 2px solid var(--general-section-1); - display: flex; - flex-direction: row; - justify-content: flex-end; - margin-top: auto; - padding: 1.6rem 2.4rem; - - &-profile { - padding: 0 2.4rem 2rem; - margin-bottom: 4rem; - } - } - } - - &__form-wrapper { - padding: 1.4rem 2.4rem; - - .dc-input { - margin-bottom: 4rem; - } - - .dc-input--error { - margin-bottom: 6rem; - } - } - - &__field { - -webkit-text-fill-color: var(--text-prominent) !important; - } - - &__form { - display: flex; - flex-direction: column; - width: 100%; - } - - &__payment-method-field { - &--text-area { - height: auto; - - & .dc-input { - &__container { - height: 9.6rem; - } - - &__field { - height: 100% !important; - padding-left: 0; - padding-right: 0; - } - } - & .dc-field--error { - margin-top: 5.6rem; - } - } - } - } -} diff --git a/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.jsx b/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.jsx deleted file mode 100644 index 8f5e3929b08b..000000000000 --- a/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.jsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; -import AdvertiserPage from '../advertiser-page.jsx'; - -jest.mock('@sendbird/chat', () => ({ - SendbirdChat: jest.fn().mockReturnValue({}), -})); - -jest.mock('@sendbird/chat/groupChannel', () => ({ - SendbirdChat: jest.fn().mockReturnValue({}), -})); - -jest.mock('@sendbird/chat/message', () => ({ - SendbirdChat: jest.fn().mockReturnValue({}), -})); - -const mock_modal_manager = { - showModal: jest.fn(), - hideModal: jest.fn(), - useRegisterModalProps: jest.fn(), - is_modal_open: true, -}; - -jest.mock('Components/modal-manager/modal-manager-context'); - -useModalManagerContext.mockImplementation(() => mock_modal_manager); - -const mocked_store_values = { - advertiser_page_store: { - advertiser_details_id: 'id1', - advertiser_details_name: 'test name', - counterparty_advertiser_info: { - name: 'name', - }, - is_counterparty_advertiser_blocked: false, - onMount: jest.fn(), - onTabChange: jest.fn(), - setIsDropdownMenuVisible: jest.fn(), - onUnmount: jest.fn(), - onCancel: jest.fn(), - is_loading: false, - info: { - name: 'name', - }, - onAdvertiserIdUpdate: jest.fn(), - }, - general_store: { - advertiser_id: 'id2', - advertiser_info: { - name: 'my name', - }, - }, - buy_sell_store: { - show_advertiser_page: true, - hideAdvertiserPage: jest.fn(), - setShowAdvertiserPage: jest.fn(), - }, -}; - -jest.mock('../block-user/block-user-overlay', () => jest.fn(() =>
overlay
)); - -jest.mock('Stores', () => ({ - ...jest.requireActual('Stores'), - useStores: jest.fn(() => mocked_store_values), -})); - -describe('', () => { - it('should render advertiser page', () => { - render(); - expect(mocked_store_values.advertiser_page_store.onMount).toHaveBeenCalledTimes(1); - expect(mocked_store_values.buy_sell_store.setShowAdvertiserPage).toHaveBeenCalledWith(true); - }); - it('should handle unmount of advertiser page', () => { - const { unmount } = render(); - unmount(); - expect(mocked_store_values.advertiser_page_store.onUnmount).toHaveBeenCalledTimes(1); - expect(mocked_store_values.buy_sell_store.setShowAdvertiserPage).toHaveBeenCalledWith(false); - }); -}); diff --git a/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx b/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.tsx similarity index 76% rename from packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx rename to packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.tsx index 580f5caf524a..3a16984ede1b 100644 --- a/packages/p2p/src/components/advertiser-page/__tests__/advertiser-page.spec.tsx +++ b/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.tsx @@ -58,14 +58,15 @@ const mock_store: DeepPartial> = { buy_sell_store: { show_advertiser_page: true, hideAdvertiserPage: jest.fn(), + setShowAdvertiserPage: jest.fn(), }, my_profile_store: { setActiveTab: jest.fn(), }, }; -jest.mock('Components/advertiser-page/advertiser-page-adverts', () => jest.fn(() =>
adverts
)); -jest.mock('Components/advertiser-page/advertiser-page-stats', () => jest.fn(() =>
stats
)); +jest.mock('Pages/advertiser-page/advertiser-page-adverts', () => jest.fn(() =>
adverts
)); +jest.mock('Pages/advertiser-page/advertiser-page-stats', () => jest.fn(() =>
stats
)); jest.mock('@deriv/components', () => ({ ...jest.requireActual('@deriv/components'), Loading: jest.fn(() =>
loading...
), @@ -87,6 +88,18 @@ jest.mock('react-router-dom', () => ({ })); describe('', () => { + it('should render advertiser page', () => { + render(); + expect(mock_store.advertiser_page_store.onMount).toHaveBeenCalledTimes(1); + expect(mock_store.buy_sell_store.setShowAdvertiserPage).toHaveBeenCalledWith(true); + }); + it('should handle unmount of advertiser page', () => { + const { unmount } = render(); + unmount(); + expect(mock_store.advertiser_page_store.onUnmount).toHaveBeenCalled(); + expect(mock_store.buy_sell_store.setShowAdvertiserPage).toHaveBeenCalledWith(false); + }); + it('should call setCounterpartyAdvertiserId when component mounted', () => { render(); expect(mock_store.general_store.setCounterpartyAdvertiserId).toHaveBeenCalled(); diff --git a/packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx b/packages/p2p/src/pages/my-profile/payment-methods/__tests__/payment-methods.spec.tsx similarity index 66% rename from packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx rename to packages/p2p/src/pages/my-profile/payment-methods/__tests__/payment-methods.spec.tsx index 4faa3671055b..9b865527c1e5 100644 --- a/packages/p2p/src/components/my-profile/payment-methods/__tests__/payment-methods.spec.tsx +++ b/packages/p2p/src/pages/my-profile/payment-methods/__tests__/payment-methods.spec.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { render } from '@testing-library/react'; import { useStores } from 'Stores/index'; import PaymentMethods from '../payment-methods'; +import { APIProvider } from '@deriv/api'; +import { StoreProvider, mockStore } from '@deriv/stores'; let mock_store: DeepPartial>; @@ -10,16 +12,14 @@ jest.mock('Stores', () => ({ useStores: jest.fn(() => mock_store), })); -jest.mock('Components/my-profile/payment-methods/add-payment-method', () => jest.fn(() =>
AddPaymentMethod
)); -jest.mock('Components/my-profile/payment-methods/payment-methods-list/edit-payment-method-form', () => +jest.mock('Pages/my-profile/payment-methods/add-payment-method', () => jest.fn(() =>
AddPaymentMethod
)); +jest.mock('Pages/my-profile/payment-methods/payment-methods-list/edit-payment-method-form', () => jest.fn(() =>
EditPaymentMethodForm
) ); -jest.mock('Components/my-profile/payment-methods/payment-methods-empty', () => +jest.mock('Pages/my-profile/payment-methods/payment-methods-empty', () => jest.fn(() =>
PaymentMethodsEmpty
) ); -jest.mock('Components/my-profile/payment-methods/payment-methods-list', () => - jest.fn(() =>
PaymentMethodsList
) -); +jest.mock('Pages/my-profile/payment-methods/payment-methods-list', () => jest.fn(() =>
PaymentMethodsList
)); describe('', () => { beforeEach(() => { @@ -44,7 +44,13 @@ describe('', () => { }); it('should call getPaymentMethodsList when component mounted', () => { - render(); + render( + + + + + + ); expect(mock_store.my_profile_store.getPaymentMethodsList).toHaveBeenCalled(); }); }); From 345cedeb211f858c9c0056f5a35a89db228c7b1f Mon Sep 17 00:00:00 2001 From: Farhan Ahmad Nurzi Date: Wed, 4 Oct 2023 16:15:17 +0800 Subject: [PATCH 5/7] fix: block overlay doesnt show the advertiser name --- .../block-user/block-user-overlay/block-user-overlay.jsx | 3 ++- packages/p2p/src/stores/advertiser-page-store.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx b/packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx index 5851a07bfd60..a055d155b5e6 100644 --- a/packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx +++ b/packages/p2p/src/pages/advertiser-page/block-user/block-user-overlay/block-user-overlay.jsx @@ -7,6 +7,7 @@ import PropTypes from 'prop-types'; const BlockUserOverlay = ({ children, is_visible, onClickUnblock }) => { const { advertiser_page_store } = useStores(); + const { advertiser_details_name, counterparty_advertiser_info } = advertiser_page_store; if (is_visible) { return ( @@ -16,7 +17,7 @@ const BlockUserOverlay = ({ children, is_visible, onClickUnblock }) => {