interaction-2-test

Another Voly-relevant side project to boost my productivity whilst working there was a Storybook addon that can map all the user interactions happen in the Storybook UI to Jest test code.

The project also broadened my frontend toolkit, giving me hands-on experience with React and MUI alongside the rest of my stack.

Please bare in mind this is still a working hi-fi prototype that can be used to generate Jest tests but the accuracy rate is not very high.

What I learned from this project is:

• How Stoybook internal server (preset) communicates with its UI (manager and preview)
• How to set up a project from scratch, no command lines, no boilerplate at all 🥲.
• How Abstract Syntax Tree (AST) sort of works so I can roughly replicate something similar which I myself name it Jest Syntax Tree (JST). This is to style the Jest code printed on the addon UI on every user interaction.
• And how monkey patching a global function works and use it with a precaution in mind.

What can be improved:

• As mentioned above, monkey patching a global function (in this case, it's the window.fetch) was the only way I could record API calls (tried Mock Service Worker and it couldn't pick up any important ones because fetch-mock swallows them all). But very limitedly, my addon could only take over the window.fetch function a bit later in the life cycle of the app, which means early API calls might be missed.