@@ -678,3 +678,57 @@ document.addEventListener('keyup', function handler (e) {
678
678
When you run the tests: ` node test/todo-app.test.js `
679
679
they should now _ pass_ :
680
680
![ save-update-test-pass] ( https://user-images.githubusercontent.com/194400/45188350-d879d100-b22b-11e8-8669-94e080a25ef7.png )
681
+
682
+
683
+ ### 5.4 ` 'SAVE' ` _ blank_ item title _ deletes_ item _ Test_
684
+
685
+
686
+ ```
687
+ ✓ should remove the item if an empty text string was entered (1033ms)
688
+ ```
689
+
690
+ Append following test code to your ` test/todo-app.test.js ` file:
691
+
692
+ ``` js
693
+ test .only (' 5.4 SAVE should remove the item if an empty text string was entered' ,
694
+ function (t ) {
695
+ elmish .empty (document .getElementById (id));
696
+ localStorage .removeItem (' todos-elmish_' + id);
697
+ const model = {
698
+ todos: [
699
+ { id: 0 , title: " Make something people want." , done: false },
700
+ { id: 1 , title: " Let's solve our own problem" , done: false }
701
+ ],
702
+ hash: ' #/' , // the "route" to display
703
+ editing: 1 // edit the 3rd todo list item (which has id == 2)
704
+ };
705
+ // render the view and append it to the DOM inside the `test-app` node:
706
+ elmish .mount (model, app .update , app .view , id, app .subscriptions );
707
+ t .equal (document .querySelectorAll (' .view' ).length , 2 , ' todo count: 2' );
708
+ // apply empty string to the <input class="edit">:
709
+ document .querySelectorAll (' .edit' )[0 ].value = ' ' ;
710
+ // trigger the [Enter] keyboard key to ADD the new todo:
711
+ document .dispatchEvent (new KeyboardEvent (' keyup' , {' keyCode' : 13 }));
712
+ // confirm that the todo item was removed!
713
+ t .equal (document .querySelectorAll (' .view' ).length , 1 , ' todo count: 1' );
714
+ t .end ();
715
+ });
716
+ ```
717
+ If you attempt to run this test: ` node test/todo-app.test.js `
718
+ you will see output similar to the following:
719
+
720
+ ![ save-blank-title-test-failing] ( https://user-images.githubusercontent.com/194400/45188593-e4b25e00-b22c-11e8-9623-26c8b017e9b1.png )
721
+
722
+ ### 5.4 ` 'SAVE' ` _ blank_ item title _ deletes_ item _ Implementation_
723
+
724
+ To make this test pass we just need to add a couple of lines to the
725
+ ` 'SAVE' ` case in the ` update ` function:
726
+
727
+ ``` js
728
+ if (! value || value .length === 0 ) { // delete item if title is blank:
729
+ return update (' DELETE' , new_model, id);
730
+ }
731
+ ```
732
+
733
+ when you re-run the tests, they will pass:
734
+ ![ save-blank-title-test-pass] ( https://user-images.githubusercontent.com/194400/45188666-41ae1400-b22d-11e8-8154-176b5aaaea42.png )
0 commit comments