T3110
Instead of the existing approach of pulling context in for all of the cashtab screens, this diff pulls it in App.js and then passes it down to the Alias as a param.
Subsequent independent diffs will update unit tests for other screens.
Details
Details
- Reviewers
bytesofman - Group Reviewers
Restricted Project
npm test
enable alias in ticker.js
npm start
navigate to the Alias page and ensure no loading errors since this diff updated the alias props
disable alias in ticker.js and ensure nothing blows up
Diff Detail
Diff Detail
- Repository
- rABC Bitcoin ABC
- Branch
- aliasContextValue
- Lint
Lint Passed - Unit
No Test Coverage - Build Status
Buildable 23311 Build 46241: Build Diff cashtab-tests Build 46240: arc lint + arc unit
Event Timeline
Comment Actions
Is it possible to add one test of a function using the ContextValue param, so that we know this approach will solve that problem? Okay to stack this in a separate diff.
| cashtab/src/components/App.js | ||
|---|---|---|
| 598 ↗ | (On Diff #39587) | also need to apply this in browser extension app.js |
Comment Actions
Expanded App.js changes to the Extension however will msg on tg regarding the renderHook unit test issues
| cashtab/src/components/Alias/Alias.js | ||
|---|---|---|
| 61 ↗ | (On Diff #39592) | Remove the debug prints before submitting the diff. If you feel they are useful then turn them into proper logs. |
| cashtab/src/components/Alias/__tests__/Alias.test.js | ||
| 38 ↗ | (On Diff #39592) | Can you please edit the title with [WIP] until this is ready for review ? |
Comment Actions
Updated implementation of renderHook approach to unit tests.
However result.current evaluates to the following, which doesn't seem to contain state variables in Alias.js
`
{
'$$typeof': Symbol(react.element),
type: Symbol(react.fragment),
key: null,
ref: null,
props: { children: [ [Object], [Object], [Object] ] },
_owner: <ref *1> FiberNode {
tag: 0,
key: null,
elementType: [Function: TestComponent],
type: [Function: TestComponent],
stateNode: null,
return: FiberNode {
tag: 23,
key: null,
elementType: Symbol(react.offscreen),
type: Symbol(react.offscreen),
stateNode: null,
return: [FiberNode],
child: [Circular *1],
sibling: null,
index: 0,
ref: null,
pendingProps: [Object],
memoizedProps: [Object],
updateQueue: null,
memoizedState: null,
dependencies: null,
mode: 0,
flags: 0,
nextEffect: null,
firstEffect: [Circular *1],
lastEffect: [Circular *1],
lanes: 0,
childLanes: 0,
alternate: null,
actualDuration: 0,
actualStartTime: -1,
selfBaseDuration: 0,
treeBaseDuration: 0,
_debugID: 5,
_debugSource: null,
_debugOwner: null,
_debugNeedsRemount: false,
_debugHookTypes: null
},
child: null,
sibling: null,
index: 0,
ref: null,
pendingProps: { hookProps: undefined },
memoizedProps: { hookProps: undefined },
updateQueue: { lastEffect: [Object] },
memoizedState: {
memoizedState: [Object],
baseState: [Object],
baseQueue: null,
queue: [Object],
next: [Object]
},
dependencies: null,
mode: 0,
flags: 517,
nextEffect: null,
firstEffect: null,
lastEffect: null,
lanes: 0,
childLanes: 0,
alternate: null,
actualDuration: 0,
actualStartTime: -1,
selfBaseDuration: 0,
treeBaseDuration: 0,
_debugID: 6,
_debugSource: null,
_debugOwner: null,
_debugNeedsRemount: false,
_debugHookTypes: [
'useState', 'useState',
'useState', 'useState',
'useState', 'useState',
'useState', 'useEffect',
'useEffect'
]
},
_store: {}
}`
My intention here is to access wallet balances in result.current in order to prove that the contextValueFullMock is being successfully fed through to Alias.js
Comment Actions
need to expand the object to check it out in node.js and see what this stuff is:
memoizedState: {
memoizedState: [Object],
baseState: [Object],
baseQueue: null,
queue: [Object],
next: [Object]
},| cashtab/src/components/Alias/__tests__/Alias.test.js | ||
|---|---|---|
| 43 | console.log(JSON.stringify(result.current), null, 2) if this throws an error, try console.log(result.current) console.log(result.current.memoizedState) console.log(result.current.memoizedState.memoizedState | |
Comment Actions
console.log(JSON.stringify(result.current), null, 2) yields a circular reference error
console.log(result.current.memoizedState) should actually be console.log(result.current._owner.memoizedState) based on the hierarchy above, which returns the following:
`
{
memoizedState: { aliasName: '' },
baseState: { aliasName: '' },
baseQueue: null,
queue: {
pending: null,
dispatch: [Function: bound dispatchAction],
lastRenderedReducer: [Function: basicStateReducer],
lastRenderedState: { aliasName: '' }
},
next: {
memoizedState: false,
baseState: false,
baseQueue: null,
queue: {
pending: null,
dispatch: [Function: bound dispatchAction],
lastRenderedReducer: [Function: basicStateReducer],
lastRenderedState: false
},
next: {
memoizedState: false,
baseState: false,
baseQueue: null,
queue: [Object],
next: [Object]
}
}
}`
Which looks like we're getting somewhere now that we can see the aliasName given that it's one of the 7 state variables
Sounds like somewhere in the original result output is an array where the aliasName memoizedState is index 0.
Comment Actions
Cashtab UI changes / fixes supporting alias registration have been on hold while the server is finalized
Anticipate that implementation in Cashtab will be relatively straightforward with an available server API (as it has already been done now a few times in response to a moving target).