TDD e Javascript (senza framework)

These are the slides for the presentation that I should have given at Italian Agile Day 2016 (but I had the flu!).

Please see the home-recorded video of this presentation: https://vimeo.com/194470329

Also check out the code on github: https://github.com/xpmatteo/frameworkless-tdd-todomvc

Transcript

1. TDD e JavaScript
   Matteo Vaccari
   

   View Slide

2. View Slide

3. https://gist.github.com/Restuta/cda69e50a853aa64912d
   

   View Slide

4. http://todomvc.com/
   

   View Slide

5. View Slide

6. No todos
   When there are no todos, #main and #footer should be hidden.
   New todo
   New 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 complete
   This 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.
   Item
   A 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
   2 Double-clicking the activates editing mode, by toggling the .editing class on its
   3 Hovering over the todo shows the remove button (.destroy)
   Editing
   When 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.
   Counter
   Displays the number of active todos in a pluralized form. Make sure the number is wrapped by a tag. Also make sure
   to pluralize the item word correctly: 0 items, 1 item, 2 items. Example: 2 items left
   Clear completed button
   Removes completed todos when clicked. Should be hidden when there are no completed todos.
   Persistence
   Your 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.
   Routing
   Routing 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.
   

   View Slide

7. View Slide

8. CONSIGLI PER INIZIARE BENE CON TDD
   ▫︎Inizia descrivendo il problema con esempi
   ▫︎Evita di specificare l’implementazione nei test
   8
   

   View Slide

9. 1. Rendering
   

   View Slide

10. LA PRIMA TEST LIST
    10
    Empty list --> 

    

    One item --> 

    Pippo

    

    

    Two items --> 

    Pippo

    Pluto

    
    

    View Slide

11. IL PRIMO TEST
    11
    Empty list --> 

    

    One item --> 

    Pippo

    

    

    Two items --> 

    Pippo

    Pluto

    
    

    View Slide

12. IL SECONDO TEST
    12
    Empty list --> 

    

    One item --> 

    Pippo

    

    

    Two items --> 

    Pippo

    Pluto

    
    

    View Slide

13. IL SECONDO TEST/2
    13
    

    View Slide

14. IL SECONDO TEST/3
    14
    

    View Slide

15. 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('')

    var todoList = ['Pippo'] 

    var view = new TodoListView(todoList, fixture);
    

    view.render();
    

    expect(fixture.querySelector('ul.todo-list li label').textContent).equal('Pippo');

    

    View Slide

16. 2. Rispondere ai click
    

    View Slide

17. TORNIAMO ALLA TEST LIST
    17
    Inserisco “Pippo” —-> not checked
    clicco su “Pippo” —-> checked
    clicco due volte su “Pippo” —> not checked
    

    View Slide

18. SVILUPPARE LA BUSINESS LOGIC NEL MODELLO
    18
    

    View Slide

19. SIMULARE I CLICK DELL’UTENTE
    19
    

    View Slide

20. COSA DEVE FARE IL CODICE DI PRODUZIONE?
    ▫︎Rendere il TodoItem in html
    ▫︎Definire l’onchange handler
    20
    

    View Slide

21. 3. One model, many views
    

    View Slide

22. 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
    

    View Slide

23. OUR OLD FRIEND, THE OBSERVER
    23
    

    View Slide

24. OUR OLD FRIEND, THE OBSERVER
    24
    

    View Slide

25. OUR OLD FRIEND, THE OBSERVER
    25
    

    View Slide

26. RENDERE I MODELLI OSSERVABILI
    26
    

    View Slide

27. RIDISEGNARE LE VISTE QUANDO I MODELLI CAMBIANO
    27
    

    View Slide

28. MAIN
    28
    

    View Slide

29. CONFRONTO LINEE DI CODICE
    29
    1204 typescript-angular
    793 aurelia
    594 puremvc
    564 vanillajs
    481 vanilla-es6
    383 polymer
    321 xpmatteo-tdd-vanillajs
    265 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…
    

    View Slide

30. PER IL PROSSIMO EVENTO TDD A MILANO…
    30
    Please subscribe!
    

    View Slide

31. matteo.vaccari.name/blog
    twitter.com/xpmatteo
    thoughtworks.com
    GRAZIE
    Assumiamo!
    Tutto il codice si trova qui:
    https://github.com/xpmatteo
    

    View Slide