Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #42 +/- ##
==========================================
+ Coverage 77.86% 78.92% +1.06%
==========================================
Files 35 35
Lines 253 261 +8
Branches 43 43
==========================================
+ Hits 197 206 +9
+ Misses 50 49 -1
Partials 6 6
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
robinmolen
force-pushed
the
feature/12-formlayout-test-setup
branch
2 times, most recently
from
90d8c2d to
6e24da9
Compare
The withFormLayout decorator can be used to render and display the real form detail pages. By moving it to the decorators file, all following tests can easily implement and use it. If needed, this decorator could render the entire form detail routes tree to simulate truly real situations.
We need to be able to control the content of the BasicLayout based on context/position in the React-router tree. For the form overview page, and the form detail pages, we use different content and actions. I've experimented with a React context solution: Adding a UI React context, which provides React.ReactNode elements to the BasicLayout component. Any point in the application could then provide UI elements for certain parts of the BasicLayout. The problem with this solution is that it would quickly rise in complexity, ranging from keeping components up-to-date to figuring out where component changes come from. Also the possibility of multiple parts of the application updating the same UI element, providing the risk of showing the wrong elements. So, i've went with the simpler approach of making the BasicLayout extendable. By adding optional props the BasicLayout can be changed/shaped to fit multiple purposes. This does have one drawback; the BasicLayout component cannot no-longer be used as a global React-router layout component. The `<Outlet />` component inside the BasicLayout renders all content of the rendered page (and possible parent pages). Because other Layout components will extend/use the BasicLayout component, this will mean that the elements of the BasicLayout will be rendered twice; once as the global Layout, and once as child component of the using Layout. If we do come to the point where we need multiple nested points to control the content of the BasicLayout, we will have to re-think this setup.
Using the BasicLayout inside the FormLayout we can pass a custom FormLayoutFooter to the app layout. This provides a Form submission button to every form detail page.
robinmolen
force-pushed
the
feature/12-formlayout-test-setup
branch
from
6e24da9 to
40f9af1
Compare
| }, | ||
| ], | ||
| { | ||
| initialEntries: [`/admin-ui/forms/e450890a-4166-410e-8d64-0a54ad30ba01`], |
There was a problem hiding this comment.
Should this stay hardcoded like this? I can imagine you might want to supply values for this in tests?
There was a problem hiding this comment.
Mhh, yeah i think it should remain like this, for now.
Currently this decorator loads the storybook story as the index child of forms/:uuid. By setting the initialEntry to this route, we force this page to be the initial page (i.e. when you use it in storybook, you immediately see your Story)
I've tried something similar to your suggestion, where the initialEntries and routes can be set by the storybook tests themselves. It works, but makes this more complicated. Also, im not sure if we need this functionality at this moment.
This decorator is just to supply access to a QueryClient, so we can test somewhat real form detail page behaviour. I don't think that we, at this moment, require actual working routing and navigation between pages. When this does become a required feature, we can revisit this decorator and expand its capabilities.
2 participants
Partly closes #12
Providing a repeatable setup for form detail page testing, and adding form submission functionality to the form layout.
I've added a new storybook decorator named
withFormLayout. This decorator adds a React-router routing for the main form detail page (/admin-ui/forms/:formId), rendering theStoryas its index child route. The form detail route uses theFormLayoutcomponent andformLoaderroute loader, providing access to a QueryClient with form details and a Formik context. This decorator should be used for all storybook tests about the form detail pages.The
BasicLayoutcomponent now allows you to pass optionalchildrenandfooterproperties. This allows you to modify the content of the BasicLayout creating possibilities for different page layouts (like the different footer actions in the form-detail pages, and the forms overview page).The
FormLayoutnow uses theBasicLayoutto pass a customFormLayoutFooterfooter property, providing a Formik form submission button.