Download - TDD e Javascript (senza framework)
![Page 1: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/1.jpg)
TDD e JavaScript
Matteo Vaccari
![Page 2: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/2.jpg)
![Page 3: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/3.jpg)
https://gist.github.com/Restuta/cda69e50a853aa64912d
![Page 4: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/4.jpg)
http://todomvc.com/
![Page 5: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/5.jpg)
![Page 6: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/6.jpg)
No todosWhen there are no todos, #main and #footer should be hidden.New todoNew todos are entered in the input at the top of the app. The input element should be focused when the page is loaded, preferably by using the autofocus input attribute. Pressing Enter creates the todo, appends it to the todo list, and clears the input. Make sure to .trim() the input and then check that it's not empty before creating a new todo.Mark all as completeThis checkbox toggles all the todos to the same state as itself. Make sure to clear the checked state after the "Clear completed" button is clicked. The "Mark all as complete" checkbox should also be updated when single todo items are checked/unchecked. Eg. When all the todos are checked it should also get checked.ItemA todo item has three possible interactions:
1 Clicking the checkbox marks the todo as complete by updating its completed value and toggling the class completed on its parent <li>
2 Double-clicking the <label> activates editing mode, by toggling the .editing class on its <li>3 Hovering over the todo shows the remove button (.destroy)
EditingWhen editing mode is activated it will hide the other controls and bring forward an input that contains the todo title, which should be focused (.focus()). The edit should be saved on both blur and enter, and the editing class should be removed. Make sure to .trim() the input and then check that it's not empty. If it's empty the todo should instead be destroyed. If escape is pressed during the edit, the edit state should be left and any changes be discarded.CounterDisplays the number of active todos in a pluralized form. Make sure the number is wrapped by a <strong> tag. Also make sure to pluralize the item word correctly: 0 items, 1 item, 2 items. Example: 2 items leftClear completed buttonRemoves completed todos when clicked. Should be hidden when there are no completed todos.PersistenceYour app should dynamically persist the todos to localStorage. If the framework has capabilities for persisting data (e.g. Backbone.sync), use that. Otherwise, use vanilla localStorage. If possible, use the keys id, title, completed for each item. Make sure to use this format for the localStorage name: todos-[framework]. Editing mode should not be persisted.RoutingRouting is required for all implementations. If supported by the framework, use its built-in capabilities. Otherwise, use the Flatiron Director routing library located in the /assets folder. The following routes should be implemented: #/ (all - default), #/active and #/completed (#!/ is also allowed). When the route changes, the todo list should be filtered on a model level and the selected class on the filter links should be toggled. When an item is updated while in a filtered state, it should be updated accordingly. E.g. if the filter is Active and the item is checked, it should be hidden. Make sure the active filter is persisted on reload.
![Page 7: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/7.jpg)
![Page 8: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/8.jpg)
CONSIGLI PER INIZIARE BENE CON TDD
▫︎ Inizia descrivendo il problema con esempi
▫︎ Evita di specificare l’implementazione nei test
8
![Page 9: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/9.jpg)
1. Rendering
![Page 10: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/10.jpg)
LA PRIMA TEST LIST
10
Empty list --> <ul></ul>One item --> <ul> <li>Pippo</li> </ul> Two items --> <ul> <li>Pippo</li> <li>Pluto</li> </ul>
![Page 11: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/11.jpg)
IL PRIMO TEST
11
Empty list --> <ul></ul>One item --> <ul> <li>Pippo</li> </ul> Two items --> <ul> <li>Pippo</li> <li>Pluto</li> </ul>
![Page 12: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/12.jpg)
IL SECONDO TEST
12
Empty list --> <ul></ul>One item --> <ul> <li>Pippo</li> </ul> Two items --> <ul> <li>Pippo</li> <li>Pluto</li> </ul>
![Page 13: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/13.jpg)
IL SECONDO TEST/2
13
![Page 14: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/14.jpg)
IL SECONDO TEST/3
14
![Page 15: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/15.jpg)
TRE DIVERSE IDEE DI TEST (FRA LE MOLTE POSSIBILI)
15
it('can have one element', function() { var fixture = document.createElement('div'); var todoList = ['Pippo']; var view = new TodoListView(todoList); fixture.innerHTML = view.render(); expect(fixture.querySelector('ul.todo-list li label').textContent).equal('Pippo'); });
Functional: the view returns
html
Imperative: the view changes
its “target”
it('renders a list of one element', function() { var fixture = document.createElement('div'); var todoList = ['Pippo'] var view = new TodoListView(todoList, fixture); view.render(); expect(fixture.querySelector('ul.todo-list li label').textContent).equal('Pippo'); });
The view finds and changes a
pre-existing template
it('renders a list of one element', function() { var fixture = document.createElement('div'); fixture.innerHTML('<ul class="todo-list"></ul>') var todoList = ['Pippo'] var view = new TodoListView(todoList, fixture); view.render(); expect(fixture.querySelector('ul.todo-list li label').textContent).equal('Pippo'); });
![Page 16: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/16.jpg)
2. Rispondere ai click
![Page 17: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/17.jpg)
TORNIAMO ALLA TEST LIST
17
Inserisco “Pippo” —-> not checked
clicco su “Pippo” —-> checked
clicco due volte su “Pippo” —> not checked
![Page 18: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/18.jpg)
SVILUPPARE LA BUSINESS LOGIC NEL MODELLO
18
![Page 19: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/19.jpg)
SIMULARE I CLICK DELL’UTENTE
19
![Page 20: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/20.jpg)
COSA DEVE FARE IL CODICE DI PRODUZIONE?
▫︎ Rendere il TodoItem in html
▫︎Definire l’onchange handler
20
![Page 21: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/21.jpg)
3. One model, many views
![Page 22: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/22.jpg)
Appears when at least one item is
“done”
Changes appearance when
all items are “done”
Changes whenever an item is created, checked, unchecked
or deleted
![Page 23: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/23.jpg)
OUR OLD FRIEND, THE OBSERVER
23
![Page 24: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/24.jpg)
OUR OLD FRIEND, THE OBSERVER
24
![Page 25: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/25.jpg)
OUR OLD FRIEND, THE OBSERVER
25
![Page 26: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/26.jpg)
RENDERE I MODELLI OSSERVABILI
26
![Page 27: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/27.jpg)
RIDISEGNARE LE VISTE QUANDO I MODELLI CAMBIANO
27
![Page 28: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/28.jpg)
MAIN
28
![Page 29: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/29.jpg)
CONFRONTO LINEE DI CODICE
29
1204 typescript-angular 793 aurelia 594 puremvc 564 vanillajs 481 vanilla-es6 383 polymer 321 xpmatteo-tdd-vanillajs265 angular2/app 256 angularjs/js 214 backbone/js 164 react-alt/js 98 react/js
Abbiamo meno LOC di alcune
implementazioni basate su
framework!
http://matteo.vaccari.name/blog/
Qui non contiamo le 11K LOC del
framework…
![Page 30: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/30.jpg)
PER IL PROSSIMO EVENTO TDD A MILANO…
30
Please subscribe!
![Page 31: TDD e Javascript (senza framework)](https://reader033.vdocuments.mx/reader033/viewer/2022042706/5870e04c1a28abcf288b48dd/html5/thumbnails/31.jpg)
matteo.vaccari.name/blog twitter.com/xpmatteo
thoughtworks.com
GRAZIE
Assumiamo!
Tutto il codice si trova qui: https://github.com/xpmatteo