This repository represents my final project with the online learning institution of OpenClassrooms. The goal of this project was to write more unit tests, using Jasmine, for a todo list application, in order to make the application more scalable. Furthermore, I wrote an audit report to discuss how the todo list application can be optimized. Additionally, I wrote technical documentation to summarize the programming of the application with a focus on the use of Model-View-Controller infrastructure. Finally, I took pre-existing code from a todo list application and debugged the code. I am now comfortable with writing unit tests, audits, technical documentation, and a solid debugger.
- Jasmine unit testing
- Testing driven development
- Model-View-Controller
- Lighthouse audit reports
- Writing technical documentation
- Debugging
https://mbdev95.github.io/OpenClassrooms-Project-8-Improve-Todo-List-App/#/
I added more unit tests using Jasmine to make the testing robust in order to make the app more scalable and to efficiently debug. The above image is a test I added determining if the active button will become highlighted when clicked on. A todo is created and passed down to the model for storage in the database. When the active view is selected I expect view.render() to have been called with the arguments "setFilter" and "active". The test passes since the arguments passed to view.render() will trigger the active button to be highlighted in the active view.
In the above image I test if a list item is successfully added to the database (i.e. model). I pass a todo list item's title into the addItem function. The addItem function's execution triggers model.create() to execute, with the list item's title passed as an argument, in order to add the new todo list item to the database. Thus, I expect model.create() to have been called with the todo list item's title and a callback function which will clear the newly added todo string from the input.
I understand the importance of using test driven development before writing code so through an organized process of trial and error you can write your application. I look forward to using testing driven development as the tool to guide me when building future applications.
I used the Developer Tools feature of Lighthouse to generate two audit reports, contrasting the performance of the todo list app with a competitor. The above image shows the Lighthouse audit results for the todo list application. The results rank the loading performance, accessibility and best practices out of a 100. A series of metrics measure different aspects of page load performance, with a focus on the speed at which elements are styled and functional. In the above link is a report I wrote contrasting the two Lighthouse audit results. I now understand how Lighthouse can be used as a quick way to audit an applications performance in order to determine which changes need to be made to optimize the application.
The final objective of this project was to write technical documentation summarizing how JavaScript was implemented. The technical documentation I wrote focuses primarily on the use of Model-View-Controller infrastructure. This create a flow of data communication from the View (which can be thought of as the DOM) via the Controller (the mastermind of the application) to the Model (which alters the database), and subsequently back from the Model to the View via the Controller. I discuss each part of the Model-View-Controller in detail, describing all the major functions of each component. Also, I briefly discuss the errors that were debugged and the audit report mentioned above. Through the writing of the technical documentation I have learned how the Model-View-Controller is a superb way to create efficient data pathways between the key areas of an application.
I optimized a series of loops and corrected two major errors. The first error involved a simple syntax spelling error. The second error was an id creation error where the ids were randomly generated using Math.random(), leaving the possibility for multiple list items to have the same id. To avoid duplication of an id I made the new id equal to the length of the array holding all the todos, including any newly added todos, plus one. Therefore, I made the id for a new list item equal to all the list items plus one. The image above shows my correction to this error.
The loops were optimized by eliminating unnecessary loops and ensuring all the loops were executed for a number of iterations equal to an array length, and not a variable holding an array length.
In conclusion, my eigth project of my OpenClassrooms front-end developer course taught me an improved way of writing code using test driven development with Jasmine. Moreover, I learned Lighthouse is a great way to audit your application efficiently using widely recognized metrics. Additionally, through the creation of technical documentation, I engaged with and now understand Model-View-Controller infrastructure, which is an awesome way to organize JavaScript. Finally, I was able find and fix a couple of bugd. I have now completed my OpenClassrooms bachelor level diploma and look forward to using a combination of all the skills gained to greatly improve many applications while learning more about computer programming in the process.