# week-3-abeh-presentation :hamburger: --- Create a checklist with beautiful tests.  --- ## Key things we wanted to focus on this week - Testing - BDD -> TDD - Templates - DOM manipulation  --- # 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? Cleaning up after testing? - Accessibility! More part of the design process instead of tag on at the end. - Using inbuilt functionality (kudos FAC) - 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 |