iTranslated by AI
Developing a Service to Ease the Burden of Tedious Tasks in Input Validation Unit Testing
Hello 👋
In this article, I would like to talk about a service I developed called "String Generator," which makes it easy to prepare the text used in unit testing for input validation.
About String Generator
To explain it simply, "String Generator" is a service that generates a string of an arbitrary length using specified characters or strings.
Development Background
When conducting development in Japan, unit tests to verify if "character input validation is working correctly" are sometimes performed using an ancient technique: manually entering characters and saving screenshots of the results as evidence.
In an example I experienced, if there was a function that "displays an error message when 40 or more characters are entered in a text box," a tester would take two screenshots as evidence: one for the pattern where 39 characters are entered and no error message is displayed, and another for the pattern where 40 characters are entered and the error message is displayed.
Creating a string of a specific length or entering it repeatedly for every such test pattern makes the already tedious manual testing process even more cumbersome.
Therefore, I developed the "String Generator" introduced here to see if I could easily create input text for use in testing.
Actually, services that "generate a string of an arbitrary length using specified characters or strings" are already provided by many sites. However, since I developed this one specifically from the perspective of "easily creating input text for testing," the features are simple and easy to use.
Main Features
I will explain the features according to the numbers shown in the image below.
- Input field for characters and strings to be used in generation
Enter the characters or strings you want to use for the generated string here. There is no limit on the number of characters, and it supports various full-width and half-width characters.
- Input field for the number of characters in the generated string
Enter the number of characters for the string to be generated here. You can specify any number between 1 and 10,000.
- Generate string button
By pressing this button, a string of the length entered in 2 will be generated using the characters entered in 1.
- Generated string display area
The generated string is displayed here. For example, when generating a 5-character string using the string "TEST", it becomes "TESTT", and when generating a 3-character string, it becomes "TES". Also, once generated, the string will not disappear unless you leave the page, so you can use it repeatedly.
- Character count display
Displays the number of characters in the generated string.
- Copy button
Allows you to copy the generated string with a single click.
- Delete button
Allows you to delete strings that are no longer needed.
Technologies Used
Please check the StackShare link above for details. In this article, I'll just focus on a few points I'd like to explain personally.
Why use Redux?
I didn't think it was necessary to use Redux for an app of this scale, but since I personally wanted to build something using the Redux I had studied previously, I thought it was a good opportunity. In this app, it is used in the process of generating strings from user-input values and building card-design components. By using Redux Toolkit, the code became simple, and I feel I was able to implement it without much of the typical Redux complexity.
In reality, using the Context API might have been better for this app. However, Redux handles various performance tuning aspects like memoization automatically, so saving the effort of manual performance tuning required with the Context API might be a benefit (though it might be questionable when considering bundle size).
Chakra UI is too convenient
The provided components are very useful. For the Copy button implementation, I just had to use what was provided, and by combining Stack and Spacer, I could implement the layout very easily.
In my previous personal projects, I used styled-components, but I struggled quite a bit with naming the layout components (simply because I wasn't used to it). By using Chakra UI, which removes those concerns, I was able to focus on developing the features.
Finally
In Japan, there are still many companies that operate under the custom of performing manual testing and saving screenshots as evidence. I don't think this custom will disappear in the next year or two, and there will likely continue to be people assigned to unit tests for input validation like the example I shared.
I hope that by using the service I developed, I can alleviate even a little of the burden of such tedious work.
If you have any suggestions for improvement, please feel free to post them in the Issues or comments below.
Thank you for reading until the end.
Bonus
Although I have already given my closing remarks, I'd like to introduce a tool that I found useful during this development.
Excalidraw is a drawing tool that runs in your web browser. It is simple and intuitive, making it extremely useful for simple image processing like the one I used for the feature introductions. If you're interested, please give it a try.
Excalidraw Reference Sites Below
↑ Introduction article on how to use Excalidraw
You can get a better idea of how to use it by watching from 15:47~ in the video above.
Discussion