Migrate Drop Card - Description from Greenruhm Web

[brunomoutinho]

The Card Description component should be migrated to Greenruhm Connect so that it can be provided to all clients who want to implement the feature.

Requirements

• [ ] The component should be broken in logic and presentation, so that only the UI can be overridden without messing with the logic;
• [ ] The component should receive a prop to override the UI;
• [ ] There should be documentation in the docs/components folder (you can use the Documentation Generator prompt to help with that);

Observations: Please, take into account that this component is a part of the Drop Card component and there are other components that will be migrated to Greenruhm Connect for this feature.

The Sign In and Sign Up components have been created in a similar fashion and can be used as an example of the kind of work to be done.

[seanaguinaga]

@brunomoutinho which branch should I base this fix off of? master?

[brunomoutinho]

@brunomoutinho which branch should I base this fix off of? master?

@seanaguinaga that is correct :)

[seanaguinaga]

• [ ] Completely overwrite the UI

  Full View Error Component Form Success Button?

[brunomoutinho]

@seanaguinaga I think there is no need to allow for overriding the button only. The rest makes total sense :)

[seanaguinaga]

https://github.com/Greenruhm/connect/blob/migreate-drop-card/src/components/card/card-description/card-description-editable-test.js

I cannot get this test to pass even though it is being logged correctly

What am I missing here?

[brunomoutinho]

@seanaguinaga it seems to me that the main problem is that you are trying to test the controller component. The components tested on unit tests should not have any kind of state or hooks.

Try refactoring the tests to check on the possible states your controller component can pass to the view component 😉

[seanaguinaga]

Gotcha

Does it not return nested dom nodes/components? Or does it not check the whole document?

It should pass regardless of the fact that I didn't modify the test to just test the view?

[brunomoutinho]

The riteway library does not render a component like React does. You can check the implementation here: https://github.com/paralleldrive/riteway/blob/master/source/render-component.js

Basically it builds static HTML and that does not behave well with state and hooks.

I believe that some tests might work by just changing the tested component for the view, but you're certainly going to need to update the props for some as well...

[seanaguinaga]

I see

I modified it to directly import the view and it fails the exact same way, with prop changes, etc.

I really do not get it

[seanaguinaga]

Looks like the button was not was not the same as the one in the original repository and was missing functionality

At this point I am not sure what you want to keep or change - should I just make my own judgement calls on things?

Or will the whole feature be ported over as-is without refactoring or reconsideration?

[brunomoutinho]

@seanaguinaga You can make some calls on what to port and what not to port :) As long as the component works as expected, we might not port absolutely everything. Some things we might need to port partially as well.

[seanaguinaga]

How would you go about trying to test this in greenruhm-web? Just use yalc?

[brunomoutinho]

How would you go about trying to test this in greenruhm-web? Just use yalc?

Using yalc is the way I found to do it without having to issue a new version of greenruhm-connect. I believe it is the most straight forward way to do it ;)

[seanaguinaga]

Do you think that just importing it into any random page would work? Or should I put it into the docs directory?

I know in this case, it's just a button/description, but it's so hard to be confident it does what we want without seeing it

[brunomoutinho]

I'd say the best way to test is to put it inside of the Drop Card in Greenruhm Web and guarantee it works there :D (in the end, we want to have all the components there anyway!)

And the Drop Card is in use in one of the dev-docs pages, so you can leverage that to see it :D