Storage Fun with Forms Original vs Rebuilt: A Comparison

Tuesday, June 30, 2026 at 12:29 PM | 3 min read

Last modified on Tuesday, June 30, 2026 at 12:29 PM

#macOS, #coverage, #istanbul, #jasmine standalone, #javascript, #tests, #unit testing, #vanilla template, #vite, #vite config, #vitest

Image of an array of little colorful square notes representing tasks that need to be done

Photo by Parinaz Mirhosseini on unsplash.com

Table of Contents

Recently, I upgraded an old vanilla JavaScript project with the help of Claude AI called Storage Fun with Forms, which utilized localStorage to save and retrieve notes from a form. Then I wrote a series of posts around this upgrade and called it "Storage Fun with Forms Rebuilt: A Modern Pass with Claude". In this final part of the series, I compare the two approaches to the project and state why one approach is better than the other.

Storage Fun with Forms original: JavaScript code all in one file

When I created the original Storage Fun with Forms, which was built with HTML, JavaScript, and Node Sass, I placed all the JavaScript code in one file. I had created it for a beginner JavaScript class I was teaching, and I didn't want to overwhelm my students with advanced JavaScript techniques. I also did not add tests to the project, because that was outside the scope of the class. If I had wanted to add tests, I would have modularized the code. Otherwise, it would have been virtually impossible to execute thorough code coverage. Modularization is necessary so that any given individual, independent pieces of code can be tested. To view the all in one main.js file, please visit main.js on the GitHub repository.

When Claude let me know that they had picked up three bugs in the code, I chose Jasmine standalone to create three tests to prove or disprove those assertions. To view how I added Jasmine standalone to the original Storage Fun with Forms, please visit Part 2 in the series: Storage Fun with Forms: Working through the Code.

Storage Fun with Forms rebuild: modularized JavaScript code

In the Storage Fun with Forms rebuild, which I created with the help of Claude AI, I created a Storage Fun with Forms using the Vite vanilla template framework, added Vitest testing to it, modularized the entire JavaScript code and created tests for several of the modularized pieces. To view the modularized code on GitHub, please visit the src directory, which contains the modules directory consisting of the JS modules, the constants.js file, which contains all the required constants, and index.js, which imports all required JS and initializes the application. To view how I added Vitest to the Storage Fun with Forms rebuild and created tests for the localStorageSupport, renderFooter, and withHash functions, please visit Storage Fun with Forms Rebuild: Testing the Code.

Jasmine standalone vs Vitest testing
CategoryJasmine StandaloneVitest
Core files locationlib directory inside jasmine-standalone root which itself is located at the root of the local Git repositoryvitest directory inside node_modules, which resides at the root of the local Git repository.
Code locationsrc directory inside jasmine-standalone rootsrc directory inside local Git repository root
Tests locationspec directory inside jasmine-standalone roottest directory inside local Git repository root
Testing styleBehavior-Driven Development (BDD) by design, where developers write tests in a descriptive manner.Flexible — supports BDD or Test-Driven Development(TDD)1 syntax depending on how you write it.
ImplementationOpening SpecRunner.html in the browserRunning the test script in Terminal
Code coverageNot available by default. Can be implemented with the addition of tools like Istanbul.Not available by default. Can be implemented with the addition of tools like Istanbul or V8.
Browser supportJasmine standalone works in the browser by default via the SpecRunner.html file residing in the root of the jasmine-standalone directoryBy default, Vitest works in Terminal. Including browser support requires adding a browser automation tool such as WebdriverIO, Cypress, or Playwright for real browser/engine access, which is configured separately in vite.config.js.
Configuration fileSpecRunner.htmlvite.config.js

Conclusion

For me, Jasmine standalone was a great fit for the original, older version of Storage Fun with Forms, because it did not depend on any particular version of Node.js and it did not interfere with any project dependencies. I was able to test my code out-of-the-box without issue. On the other hand, since the rebuild was created from scratch, both the Vite vanilla JavaScript framework and Vitest testing were the way to go. Jasmine standalone and Vitest are both great unit testing frameworks. Choosing one over the other is just a matter of what kind of project you're working with and what you are trying to achieve.

Footnotes

  1. Test-Driven Development(TDD) emphasizes writing tests before writing the actual code to ensure that the code meets requirements and functions as expected. ↩