# week-3-abeh :hamburger: ## Description Create a checklist with beautiful tests. ## Stop, Go, Continue from Week-2 - GO: rotate pairs frequently and make sure commit history is balanced. - Continue: Project boards, co-authors ## Agreed Numbering Tags * E1 Simple task know how to do * E2 Easy task but may require brushing up lightly on topic * E3 More challenging. May need solid reading time * E5 Almost completely new topic or feature which requires spike - P1 Highest Priority - Core user stories - P2 Medium Priority - Stretch user stories - P3 Low Priority - Additional stretch user stories ## Methodology & Planning ### Wireframe  --- ### Testing methodology We primarily used integration testing. ## Design Requirements [Project design requirements](https://founders-and-coders.gitbook.io/coursebook/week-3/project) for week 3. ## Week 3 Learning Objectives Week 3 [learning objectives](https://founders-and-coders.gitbook.io/coursebook/week-3/learning-outcomes). --- ## Personal Learning Objectives ### Hettie (scrum master) - Testing - Templates ### Cam - Templates - Testing - DOM manipulation ### Tom - Templates - Testing - TDD/BDD ### Joe --- ## Core User Stories - Add tasks to a list so I can keep track of them - Check things off my list so I can see what I have done - Check things from the list if I don't need to do them anymore - Use all of the features without a mouse ## Stretch User Stories - Filter out completed to-dos so I can focus on what is left to do - Add local storage for reload - Use templates and fragments to make list --- ## Other Issues - Having the foggiest idea of how to test anything :panda_face: - Navigating the DOM tree - Knowing what are Node lists and HTML Collections  ## Personal Achievements / Struggles --- ### Cam #### Achievments - Implementing template ```java= <template id="listItemTemplate"> <li class="listContainer__list-item"> <label for="itemCheckbox" class="itemCheckboxLabel" tabindex="0"></label> <input type="checkbox" name="itemCheckbox" class="itemCheckbox" tabindex="-1"> <button class="listContainer__delete-button" tabindex="0">&#128465;</button> </li> </template> ``` --- #### Struggles - Testing??? - DOM manipulation particularly when templates are involved --- #### Solutions - Children 👶 ```javascript= let label = e.target.parentNode.children[0]; ``` - Common function and variables in testing ```javascript= function addListItemToDom(list) { list.forEach(inputValueInList => { toDoInput.value = inputValueInList; submit.click(); toDoInput.value = ""; }) } ``` --- ### Tom --- ### BDD/TDD methodology - made a strong effort to apply it - got a better idea of how to approach it next time round - can be time consuming while working as a group - BDD can be great for planning the functionality --- ### Testing - TDD approach is difficult can be implement in remote working environment - Need more practice on writing tests ### html template - Never heard of it before, will use it in the future ### Local storage ```javascript= // get an item array from the local storage otherwise create an empty array let todoArray = localStorage.getItem("list") // item is a JSON object so needs to be parsed ? JSON.parse(localStorage.getItem("list")) : []; // Append todos from local storage todoArray.forEach(todo => { // function to append todo items createListItemsFromLocalStorage(todo); }); /// todo list app logic here // store array of objects (todoArray) in local storage in a JSON format localStorage.setItem("list", JSON.stringify(todoArray)); ``` ### Hettie - Testing - struggle to intentionally write a failing test - elegance/ sophistication of tests - Templates - DOM manipulation ### Joe - Difference between ```firstChild``` and ```firstElementChild``` - Currently underutilizing combinator selectors ```input:checked + span { text-decoration: line-through }``` - Struggling through testing methodology. Unit, integration, E2E? - Understanding how testing assertions passed through as series of callbacks - Writing dry code so multiple tests can be run in one test function ```javascript= // Test suite 2 - Check the to do list length renders correctly on the webpage test("Check that multiple user inputs correctly render on the webpage", t => { checkArrayLength(['Cheese', 'Ham', 'Fish', 'Potatoes'], t); checkArrayLength(['Cheese', 'Ham', 'Fish', 'Potatoes', 'Fish', 'Potatoes', 'Steak'], t); }); ``` ## Team feels / vibes :peace_symbol:  - Well planned - Built on what previous pairs had done. Good foundation and knowledge exchange between the pairs. - Started basic and got more complex throughout the day - Focused on higher priority tasks. Tags helped! - Adapted quite well to pastoral interruption! | Estimated | Actual | | -------- | -------- | -------- | | 19 | 23 | Text | ## STOP - Having average backgrounds in zoom ## GO - Make sure we pair with *everyone* - Be mindful if your making big changes in the code base - Read user manuals :admission_tickets: ## CONTINUE :100: - Cameras - Good planning - Building off eachothers work and learning - I think this came from the foundation we set at the beginning - Issues and project board - Reading through pull requests before merging - Cat & dog :dog2: - co-author - Taking a group photo at the end of the week! :camera_with_flash: - Writing really good commit messages, Relates #5, tags ## Technical Notes :male-technologist: ### An easy way to remove all child nodes using a while loop - It works on the idea that while a ```firstChild``` exists (returns true) then delete it. Repeat until there are none left: ```javascript= while(yourContainer.firstChild) { yourContainer.removeChild(yourContainer.firstChild); } ```