[Tracking] Typesafe module mocking based on package.json standards

[kasperpeulen]

[RFC] Typesafe module mocking based on package.json standards

Milestone 1 here is to setup a demo where we can validate all the APIs we are going to make in this project.
In parallel we will work on milestone 2-6 which we ship with canary releases that we then can test and validate in the demo.
Milestone 2-3 are the must haves. And milestone 4-6 are nice to haves for this project.
Once the APIs are validated and finalized we can work on the docs and make a blog post of the demo.

1 Public demo showing how RSC's touching DB and cookies can be tested in isolation in Storybook (Yann)

Beta Give feedback

1. Find a nextjs app router example demo that we can expand on, using DB for data access, and where at least some endpoints needs authentication (using cookies)
2. Change all absolute imports to standard-based package.json imports
3. Module mock next/headers by default in the @storybook/nextjs framework #26725
   +0
4. Experiment with a good API for mocking out next/headers so that cookies can be easily mocked in storybook, and make a good example
5. Mock next/navigation: redirect, revalidate, revalidatePath #26808
   +0
6. Next.js: Implement next redirect and the RedirectBoundary #26886
   ci:normal feature request nextjs +3
   
7. Middleware used in the demo seems a bit outdated pattern with server actions? Remove that for best practices
8. Make mock types: query, action and only show action by default
9. Rerun async components on redirect using RedirectBoundary of next
10. Use the new react APIs useFormState, useFormStatus for server-side form validation in the demo (validating the notes for example) (Kasper)
11. Make the demo actual secure by checking if the username matches the encrypted username (Kasper)
12. The next.js RedirectBoundary causes flashing UI when used client side. Possible use the implementation of the PR: app-router: don't render null on redirects vercel/next.js#49439 Or wait for an upstream fix? Nice to have (Kasper)
13. Make stories for edit routes. Possibly move tests of note-ui stories to page stories instead, discuss best practices here. (Jeppe)
14. Add the test runner and track coverage? Coverage number to share in the blog post? (Yann)
15. Setup VTA correctly (Yann)

2 Implement standard-based module mocking (Kasper)

Beta Give feedback

1. Write public RFC to gain community feedback
2. Implement storybook, stories and test import/exports conditions in webpack and vite
3. Demo Make an module mocking example where the data-access module (the util, the service, the adapter, or whatever you call it) is mocked
4. Demo Make an module mocking example where all the DB calls are mocked with an in-memory DB (https://github.com/demonsters/prisma-mock)
5. Test Add module mocking to package.json imports in every sandbox, and have a simple story that uses that
6. **Docs**: Add docs entry for module mocking in storybook using package.json imports #26795
   +0
   
7. Docs: Add recipe non standard based absolute imports such as @/... as in Next #26796
   +0
   
8. Feature request: Mock imports #10142
   core feature request +2

3 Add beforeEach as a new concept to CSF (Kasper)

Beta Give feedback

1. Write public RFC to gain community feedback
2. Add CSF types: beforeRender: (context: Context) => Awaitable<void>
3. beforeRender as a function that runs after all loaders. First run preview, than meta, than story beforeRender
4. Handle story change during loading/playing stories #26723
   +0
   
5. Test Add unit tests for portable stories
6. Nice to have Implement the return value of beforeRender as a cleanup function, that is run when the component unmounts
7. Demo Experiment with beforeEach in the demo, and make a good example
8. Test Use beforeEach in a template story, and assert the execution is right, and that it is loaded after loaders and also test this in an e2e test, to check the order in the action panel (Yann)
9. **Docs** Add docs for beforeEach #26797
   +0
   
10. Warn when a story is rendered in portable stories when there are lingering cleanup functions #26994
    +0
    

---

Out of scope

4 Add a mock utility to storybook test that makes a module "mockable" (nice to have)

Beta Give feedback

1. Make a mock utility that wraps every function export in a spy
2. Expand the mock utility to traverse object export so that every function on the objects becomes a spy as well (deeply)
3. Give every spy we attach a mock name that references both the module name and the name of the function
4. Make sure that every spy created with storybook/test is fully reactive, so that we can listen to calls and show them in the action panel.
5. Demo Experiment with the mock utiltiy in the demo, and make a good example
6. Nice to have: Deeply clone modules so that we can reset back all values, even primitive values before each story (similar as what vitest/jest do)
7. Docs Add docs
8. Test Add lots of unit tests for this utility

5 Make sure that $-prefixed-args are treated as non-component args in CSF (nice to have)

Beta Give feedback

1. Write public RFC to gain community feedback
2. Research What kind of APIs are possible in Vue, should we make an API that the renderer can implement called filterComponentArgs
3. Adjust csf types so that $-prefixed-args ares stripped from the first argument of the render function. Change the name of the args parameter to be called componentArgs
4. Implement a default filterComponentArgs function for every renderer, that just strips out $-prefixed-args to be passed as first argument to the render function
5. Override filterComponentArgs in Vue, so that componentArgs, and non-component args stay reactive.
6. Demo Experiment with non-component args in the demo and make a good example
7. Docs Add docs for non-component args.
8. Test Use non component args in a template story, and assert that it is not passed to component, but is available to beforeRender and decerators

6 Implement sb mock command (nice to have)

Beta Give feedback

1. Plan this project out more, once we are sure we can scope it in
2. sb mock ./services/todos.ts should autogenerate a mock file in ./services/todos.mock.ts with all boilerplate using the mock utiltiy
3. Docs Add docs
4. Test