Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TDD e Javascript (senza framework)

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

Matteo Vaccari

November 27, 2016
Tweet

More Decks by Matteo Vaccari

Other Decks in Technology

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