[Todo_List App Testing] is a simple website that allows the user to add and remove tasks from his todo list.Unit test is written for the To Do list application.
Testing Part 1
I have used Jest framework for testing.I created a test file ([..].test.js) for a file containing the add item and delete item functions that I want to test.I have used a Mock folder for a storage object to "imitate" localStorage operations and also used Mock HTML to test to check if add/delete functions add or remove exactly one element to/from the list in the DOM.
Testing Part 2 I have used jest framework for testing and created a test file(s) ([..].test.js) for a file(s) containing the following functions: a function for editing the task description. a function for updating an item's 'completed' status. the "Clear all completed" function. Used the mock storage object that is created in Part 1 of Testing of this project to mock the localStorage updates. Mocked the HTML elements to test DOM manipulation functions. Grouped my tests using the describe() method.
- [Desktop Version]
- [Dynamic Design]
Click here for the live demo
Creating your first "Todo List" project
To get a local copy up and running, follow these steps.
In order to run this project you need:
-A Git hub account -Git bash -Node JS -Visual Studio Code as your code editor
Clone this repository to your desired folder:
cd my-folder
git clone[(https://github.com/harshi0102/ToDoList-Testing.git)]Run Dev Server (Port 3000)
npm run dev
npm run build
A linter is a tool to help you improve your code. You can learn more about Linters here: (source: (https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/)).
Advantages of Linting:
- Fewer errors in production- The use of linters helps to diagnose and fix technical issues such as code smells. As a result, fewer defects make their way to production.
- Achieving a more readable and consistent style, through the enforcement of its rules.
- Having more secure and performant code.
- Having an objective and measurable assessment of code quality.
- Having fewer discussions about code style and aesthetic choices during code reviews.
You can find linters for most of the programming languages, e.g. Rubocop for Ruby or ESLint for JavaScript.
Also, there are many ways you can integrate a linter in your workflow:
-text editor plugin -GitHub Actions -GitHub apps
Note: The npm package manager is going to create a node_modules directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a .gitignore file and add node_modules to it:
node_modules/
Run
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
This is a customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.
NOTE: If you are using Windows, make sure you initialize npm to create package.json file.
npm init -y
- Run
how to use npm: (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
npm install --save-dev hint@7.x - Copy .hintrc to the root directory of your project.
- Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
- If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
- Run
Copy contents of .eslintrc.json to the root directory of your project
npx hint . - Fix validation errors.
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- Run
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x not sure how to use npm? Read this.
-
Copy .stylelintrc.json to the root directory of your project.
-
Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it. 4. Run npx stylelint "**/*.{css,scss}" on the root of your directory of your project.
-
Fix linter errors.
-
IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!
👤 Harshika Govind
- GitHub: (https://github.com/harshi0102)
- Twitter: (https://twitter.com/harshika0102me)
- LinkedIn: (https://www.linkedin.com/in/harshikagovind/)
👤 Nirere Marie Christelle
- GitHub: @Christelle-12
- Twitter: @Chr1Nirere
- Add more styling (aesthetics)
- Dynamic todo list
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
If you like this project, kindly leave a comment below and share it with someone who enjoys coding! Coding is all about continuous learning and allowing yourself to be a beginner. Keep going!
I'm thankful to Microverse for providing a study platform which guided me through this project and to my coding partners at Microverse for the collaborative effort.
This project is MIT licensed.