Skip to content

Commit 8f5d4ea

Browse files
Patel-Raj11achowdhry-ripplepdp2121dependabot[bot]khancode
authored
Remove network specific render checks introduced for MPTs (#1239)
## High Level Overview of Change Remove network specific render introduced for MPTs <!-- Please include a summary/list of the changes. If too broad, please consider splitting into multiple PRs. --> ### Context of Change Addresses this comment: https://github.com/ripple/explorer/pull/989/files#r1687018410 <!-- Please include the context of a change. If a bug fix, when was the bug introduced? What was the behavior? If a new feature, why was this architecture chosen? What were the alternatives? If a refactor, how is this better than the previous implementation? If there is a design document for this feature, please link it here. --> ### Type of Change <!-- Please check relevant options, delete irrelevant ones. --> - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Refactor (non-breaking change that only restructures code) - [x] Tests (You added tests for code that already exists, or your new feature included in this PR) - [ ] Documentation Updates - [ ] Translation Updates - [ ] Release ### Codebase Modernization <!-- In an effort to modernize the codebase, you should convert the files that you work with to React Hooks and TypeScript, and update tests to use the React Testing Library instead of Enzyme. If this is not possible (e.g. it's too many changes, touching too many files, etc.) please explain why here. --> - [ ] Updated files to React Hooks - [ ] Updated files to TypeScript - [ ] Updated tests to React Testing Library ## Before / After Before: <img width="1913" height="807" alt="image" src="https://github.com/user-attachments/assets/e9a39ac8-622e-4d18-9c83-c223bb5b91e2" /> <!-- If just refactoring / back-end changes, this can be just an in-English description of the change at a technical level. If a UI change, screenshots should be included. --> After: <img width="1920" height="833" alt="image" src="https://github.com/user-attachments/assets/0a202923-b27c-4ad0-ab9d-8b2bd29df657" /> ## Test Plan Added tests <!-- Please describe the tests that you ran to verify your changes and provide instructions so that others can reproduce. --> <!-- ## Future Tasks For future tasks related to PR. --> --------- Co-authored-by: achowdhry-ripple <achowdhry@ripple.com> Co-authored-by: pdp2121 <71317875+pdp2121@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Omar Khan <khancodegt@gmail.com> Co-authored-by: Phu Pham <ppham@ripple.com>
1 parent 2e8cce1 commit 8f5d4ea

File tree

2 files changed

+138
-6
lines changed

2 files changed

+138
-6
lines changed

src/containers/Accounts/AccountAssetTab/AccountAssetTab.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,12 @@ interface Props {
1212
account: any
1313
}
1414

15-
let assetTypes = ['issued', 'nft']
15+
const assetTypes = ['issued', 'nft', 'mpt']
1616

1717
export const AccountAssetTab = ({ account }: Props) => {
1818
const { id: accountId = '', assetType = assetTypes[0] } =
1919
useRouteParams(ACCOUNT_ROUTE)
2020

21-
const supportsMPT = ['mpt_sandbox', 'devnet'].includes(
22-
process.env.VITE_ENVIRONMENT as string,
23-
)
24-
if (supportsMPT) assetTypes = ['issued', 'nft', 'mpt']
25-
2621
const navigate = useNavigate()
2722
const { t } = useTranslation()
2823
function switchAsset(event: ChangeEvent<HTMLInputElement>) {
Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import { mount } from 'enzyme'
2+
import { QueryClientProvider } from 'react-query'
3+
import { Route } from 'react-router-dom'
4+
import i18n from '../../../../i18n/testConfig'
5+
import { testQueryClient } from '../../../test/QueryClient'
6+
import { flushPromises, QuickHarness } from '../../../test/utils'
7+
import { AccountAssetTab } from '../AccountAssetTab'
8+
import { ACCOUNT_ROUTE } from '../../../App/routes'
9+
10+
const mockAccountData = {
11+
account: 'rH3UU2acTY5fz4rYwMLMniivDqcPLjg6mk',
12+
info: {
13+
sequence: 6467288,
14+
ownerCount: 1,
15+
reserve: 1.2,
16+
flags: [],
17+
balance: '99999999',
18+
previousTxn:
19+
'3915E32DD06F670644EDF10EB1193C7B001209113B92A580D2C09B0FDE36E3BC',
20+
previousLedger: 6467291,
21+
},
22+
balances: {
23+
XRP: 99.999999,
24+
},
25+
tokens: [],
26+
deleted: false,
27+
hasBridge: false,
28+
}
29+
30+
// Child tables mocked to isolate AccountAssetTab
31+
jest.mock('../../AccountIssuedTokenTable', () => ({
32+
AccountIssuedTokenTable: ({ account }: any) => (
33+
<div className="issued-table">{account.account}-issued</div>
34+
),
35+
}))
36+
jest.mock('../../AccountNFTTable/AccountNFTTable', () => ({
37+
AccountNFTTable: ({ accountId }: any) => (
38+
<div className="nft-table">{accountId}-nft</div>
39+
),
40+
}))
41+
jest.mock('../../AccountMPTTable/AccountMPTTable', () => ({
42+
AccountMPTTable: ({ accountId }: any) => (
43+
<div className="mpt-table">{accountId}-mpt</div>
44+
),
45+
}))
46+
47+
describe('AccountAssetTab routing', () => {
48+
const createWrapper = (initialEntry: string, account) =>
49+
mount(
50+
<QueryClientProvider client={testQueryClient}>
51+
<QuickHarness i18n={i18n} initialEntries={[initialEntry]}>
52+
<Route
53+
path={ACCOUNT_ROUTE.path}
54+
element={<AccountAssetTab account={account} />}
55+
/>
56+
</QuickHarness>
57+
</QueryClientProvider>,
58+
)
59+
60+
it('renders issued tab by default', async () => {
61+
const wrapper = createWrapper(
62+
`/accounts/${mockAccountData.account}/assets/issued`,
63+
mockAccountData,
64+
)
65+
await flushPromises()
66+
wrapper.update()
67+
68+
// Always show all 3 tabs
69+
expect(wrapper.find('.radio-group').children().length).toBe(3)
70+
71+
expect(wrapper.find('.issued-table')).toExist()
72+
expect(wrapper.find('input[value="issued"]').prop('checked')).toBe(true)
73+
74+
wrapper.unmount()
75+
})
76+
77+
it('renders empty fragment when account is deleted', async () => {
78+
const wrapper = createWrapper(
79+
`/accounts/${mockAccountData.account}/assets/issued`,
80+
{
81+
deleted: true,
82+
},
83+
)
84+
await flushPromises()
85+
wrapper.update()
86+
87+
expect(wrapper.html()).toBe('')
88+
wrapper.unmount()
89+
})
90+
91+
it('renders nft tab when route param is nft', async () => {
92+
const wrapper = createWrapper(
93+
`/accounts/${mockAccountData.account}/assets/nft`,
94+
mockAccountData,
95+
)
96+
await flushPromises()
97+
wrapper.update()
98+
99+
expect(wrapper.find('.nft-table')).toExist()
100+
expect(wrapper.find('input[value="nft"]').prop('checked')).toBe(true)
101+
102+
wrapper.unmount()
103+
})
104+
105+
it('renders mpt tab when route param is mpt', async () => {
106+
const wrapper = createWrapper(
107+
`/accounts/${mockAccountData.account}/assets/mpt`,
108+
mockAccountData,
109+
)
110+
await flushPromises()
111+
wrapper.update()
112+
113+
expect(wrapper.find('.mpt-table')).toExist()
114+
expect(wrapper.find('input[value="mpt"]').prop('checked')).toBe(true)
115+
116+
wrapper.unmount()
117+
})
118+
119+
it('navigates when radio button is changed', async () => {
120+
const wrapper = createWrapper(
121+
`/accounts/${mockAccountData.account}/assets/mpt`,
122+
mockAccountData,
123+
)
124+
await flushPromises()
125+
wrapper.update()
126+
127+
wrapper.find('input[value="mpt"]').simulate('change', {
128+
target: { value: 'mpt' },
129+
})
130+
131+
await flushPromises()
132+
wrapper.update()
133+
expect(wrapper.find('.mpt-table')).toExist()
134+
135+
wrapper.unmount()
136+
})
137+
})

0 commit comments

Comments
 (0)