# Testing Project - Week 3 #### Antonio, Nafisa, Amy and Rosie --- ##### Task: Your project this week is to build a to-do list tracker. It should allow users to create, complete and delete tasks from a list. You should have automated tests covering all the main user stories. --- ### Roles Facilitator - Nafisa Deployment - Antonio User - Rosie Quality - Amy --- ### Approaching the project - Agreed to rotate pairs and what were working on - we have all worked with each other. - We gave the opportunity to flag areas that we wanted to practice. - We took a Testing Driven Development approach --- ### Process ##### We took on different issues in pairs, and checked in with each regularly. We reviewed the code together when an issue was complete. ##### We dealt with major conflicts by merging them altogether. ##### TDD - we started by splitting into pairs and writing two tests each,we spent a lot of our time on writing good tests and reviewing these. ##### Afterwards, we split into pairs to write code which passed our tests. ##### We only gave 1.5hrs to CSS at the end. ##### We also spent a bit of time tidying up JS and refactoring code at this point. --- ## Project board User stories we've fulfilled: - Add tasks to keep track - Check items of list - Delete finished items - Use all featues without a mouse - Filter out completed to-do's (stretch) We started off by adding these issues to our project board, labelling them with their estimated points. What we didn't get to was adding their actual points and calculting the velocity. ---  --- ## Demo --- ### Struggles  --- We found that working on writing functions based on tests that someone else worked on was hard, but very important. It's also really hard to write correct tests off the bat. Should we refactor tests after they've been already written? <img src="https://i.imgur.com/IzP3k66.gif" alt="Girl in a jacket" width="450" > --- ### What we learned from our struggles: - Templates have to be cloned - We needed to use event.preventDefault() so the submit button stopped refreshing the page and deleting our items when we added points - we shouldn't use 'hacky' solutions --- ### HTML Our HTML was fairly simple but we also included a template at the end of our HTML. We then called this in the JS to append to our list. ``` javascript const ul = document.querySelector("ul"); const template = document.getElementById("task_item_template"); ul.appendChild(template) ``` --- This didn't actually work, and just kept deleting the latest list item to repaste it! We had to **clone** our template  --- This was what we finally arrived at...which is actually frustratingly simple. ``` javascript const ul = document.querySelector("ul"); const template = document.getElementById("task_item_template"); let clone = template.content.cloneNode(true); ul.appendChild(clone) ``` --- ## Javascript --- ###### We refactored our code to make sure that we had separate functions for each thing we wanted to do, rather than longer functions. <img src="https://i.imgur.com/l1hQWAg.png" alt="Girl in a jacket" width="600" > ---  --- Testing ``` test("Deleting an entry removes it from the list", () => { let expected = Array.from(document.querySelectorAll("li")).length - 1; let listItemId = document.querySelector("li"); removeToDoItem(listItemId); let actual = Array.from(document.querySelectorAll("li")).length; equal(actual, expected); }); ``` For this test were checking if the length of the array of li items is less than 1, which it should be after the removeToDoItem function was called. --- ``` test("Deleting an entry removes it from the list", () => { let expected = true; let listItemId = document.querySelector("li"); removeToDoItem(listItemId); let ul = Array.from(document.querySelector("ul")); let actual = ul.every((e) => e.id != ListItemId); equal(actual, expected); }); ``` With this test were checking if the actual id of the item that was deleted no longer exists in the ul. --- With the test before, we didn't know if the item that was removed was the actual one that was supposed to be removed. From this i learned the purpose of having multiple/more than one test for a single function. --- ## Improvements - Although our design is very cool and minimal we could improve it a little bit. - Finish the integration test. - Finish the filter test (even though we should have started from that) - Using more the automated board with more details commit (-m 'Closes #2'). - Improve the fucntion getId() - Improve the selectors on our code. - Git pull different branches --- ## Did you know? You can co-author with your coding partner when you commit ``` $ git commit -m "Refactor usability tests. > > Co-authored-by: name <name@example.com> Co-authored-by: another-name <another-name@example.com>" ``` **[Multiple author commits](https://docs.github.com/en/github/committing-changes-to-your-project/creating-a-commit-with-multiple-authors)** ---