Hey all!
Half duration of the coding phase has almost come to end. With first evaluations starting soon, I have been readily engaged with my mentors in order to add more features and improve the current ones.
Testing using JEST
Why does this project require testing?
One of the most important part of a project is the tests that can be utilized to verify if or not the final build is working as expected. The advantage of having tests setup is that all of the future commits will have to go through the tests before getting merged in the codebase. This helps in making the final component package highly reliable.
Implementation of the tests
The decision for picking JEST as the testing framework was largely based on the ease of testing React components that JEST provides. In a early PR I added tests using snapshots which later turned out to be a not so good idea for testing. Later it was switched to a more robust way of testing by using the toHaveAttribute property for checking if the props are being applied to the SVG or not. The test suite consists of the 3 different types which are - filled, outlined and animated. This helps in verifying the state of the different types of SVGs.
Naming convention
The naming convention is something that will ultimately decide the user experience for using EOS-Icons React. Earlier PascalCase was being used which was not user friendly as it was difficult to edit out the icon name. Finally we are using SCREAMING_SNAKE_CASE as it makes the edit of the icon name as well as the theme a lot more simple. The current naming convention looks like this - EOS_ICON_THEME
Multi theme React components
Currently EOS icons React has icon component based on themes like animated / outlined / filled. Almost all of the filled SVG icons have a outlined variant and there are several use cases in which a project might use both the themes of a icon for example:- a rating website might have outlined stars initially ☆ and upon selecting those stars it will turn into a filled star ★ , In order to solve this issue we have decided to add this as a type of React component which will contain both filled as well as outline SVG, which will be changeable using the "theme" prop.
For the upcoming week I am planning to further improve the code base of the above mentioned changes as well as work on having a proper documentation that will help the user in using EOS-Icons React in a efficient way