In a previous post I wrote about using WatchExec as part of my TDD workflow. In this post I am going to discuss and addition to that workflow: Claude code. I will use Claude code to generate the test to produce the red test and then the code to make the test green.
To demonstrate the workflow I will add a 'time to read' badge to each post on this website. The process will go as follows:
- Add a test to the posts jest test file looking for a time to read badge using Claude with Watchexec running.
- This will produce a red (failing) test
- Have Claude code add the time to read badge to the post and data query in the `getServerSideProps`.
- This will make the test green
One caveat I have to acknowledge before digging into this further. If this were Ruby on Rails It would be a much faster, tighter TDD loop to write the test and code myself. Since I am less experience in JS the length of the TDD loop is closer, although probably still a little bit slower utilizing Claude code this way. It is my hope that I can eventually get fluent enough utilizing these AI tools that that might not be the case.
Red Test
I pass in the prompt to Claude code.
Prompt:
I need a test for the posts page that looks for text in a time to read style under the title in the banner, for the test lets look for an element with id of #time-to-read under the H1 title element
I do like to spend some of the time reading over the suggestions Claude makes since I am not as fluent with the JS environment here as Ruby.
Clicking to add the test of course then generates a red test.
GREEN
My next step is to prompt Claude to add the HTML to the page for the element, I also want to add the field to the query being done and add the variable inside the HTMl element.
Prompt:
Can you add that element with the most SEO optimized HTML to the page where expected? Also update the sanity query to bring in a field read_time in its query, add that value to the time to read element please.
Claude makes suggestions on both adding the value to the template and update the test, both looked good to me.
With WatchExec running i can also instantly see the test is now green.
Overall looking pretty good. As Claude verbosely, and with Claude's insistence on keyword filled text, sums it up.
Refactor
One thing that does slow me down is that I do still very much prefer to explore everything before finally shipping it. I am typically a slow adopter to new workflows, but my experience with Claude Code has been pretty good so far, but not enough to blindly trust it by any means.
The one refactor I want to add here is to take this read time code and extract it out into a component so I can share it between the post and the blog page where the posts are listed. Again making sure to keep WatchExec running and going Red->Green.
Prompt:
I want to see about extracting out the post read time element into a component share between this page and the listing page (blog.tsx) so I can have that read time element be on both. For the blog page where it lists the posts lets add the component under the className="post-summary" element. so steps are: 1) write a test looking for this element on the bog page inside the post at the location I specified, 2) extract the element into a component 3) add it to the blog page inside the post loop where it shows those details at the specified place.
Obvious to acknowledge this one in particular would have been faster to write by hand, but I can go fill up my coffee while it is running.
1) write a test looking for this element on the bog page inside the post at the location I specified
Claude once again suggests the tests to add. While they may both look reasonable, I leave out the check for it not being present since I am unable to make it go red.
Leaving that one out I get one red test.
2) extract the element into a component
I did override some of Claude's initial suggestions on this one, first in the naming of the component and then it's placement.
3) add it to the blog page inside the post loop where it shows those details at the specified place
Claude handles these refactors fine and gets the component placed as expected. Everything is once again green.
