[WIP] refactor(display-name): rendered the component in react instead of backbone #1571
Conversation
There was a problem hiding this comment.
Looking pretty good so far! Added a few comments about considerations for testing.
I'd also suggest looking into using react-testing-library because it has good utilities for rendering React components and then inspecting them for expected results.
Over in the fxa-payments-server package, I've had a pretty good experience using react-testing-library to write tests like these for a Tooltip component.
There may be a challenge or two in getting React and JSX tests running in fxa-content-server with Mocha. That's part of why I suggested writing them separately from other existing Backbone tests. But, we'll probably all learn something from the effort 😅
Feel free to ping me on Slack with any questions or if you need help!
| presets: ['@babel/preset-env'], | ||
| presets: [ | ||
| [ | ||
| '@babel/preset-react', { |
There was a problem hiding this comment.
Looks like this was easier to get included in the build process than I feared. Hooray!
|
|
||
| const t = msg => translator.get(msg); | ||
|
|
||
| function DisplayName(props) { |
There was a problem hiding this comment.
Consider adding export to all these React components. While we do export the View at the end of the module, being able to access each individual component separately might make it easier to test things in smaller pieces.
| </header> | ||
| ); | ||
| } | ||
| function ChangeorAddButtonComponent(props) { |
There was a problem hiding this comment.
For example, if this component were exported, you could write a small test for ChangeorAddButtonComponent in isolation that exercises what it does with and without displayName defined.
You might also be able to separate React tests from the rest of the existing tests. I have a suspicion that might make things simpler.
|
Have opened a new PR for it: #1611. Closing this. |
Worked on rendering the display-name component in react.
Still, need to work on these things:
Some screenshots:
